chore: improve avatar component

.changeset/curly-trees-serve.md

@@ -2,4 +2,4 @@
 "@chakra-ui/theme": patch
 ---
 
-Improve contrast of FormHelperText to satisfy accessibility check
+Improve contrast of `FormHelperText` to satisfy accessibility check

.changeset/few-chicken-shave.md → .changeset/lovely-doors-leave.md

@@ -1,5 +1,6 @@
 ---
 "@chakra-ui/merge-utils": patch
+"@chakra-ui/object-utils": patch
 ---
 
 Initial release

.changeset/olive-sloths-visit.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/avatar": patch
+---
+
+Refactor to reduce bundle size

.changeset/shaggy-camels-dance.md

@@ -2,4 +2,4 @@
 "@chakra-ui/hooks": patch
 ---
 
-Deprecate use-dimensions in favor of the use-size hook
+Deprecate `useDimensions` in favor of the `useSize` hook

.changeset/shaggy-roses-play.md

@@ -2,4 +2,4 @@
 "@chakra-ui/utils": patch
 ---
 
-Mark isBrowser as pure to tree-shake when bundling
+Add pure annotation to `isBrowser` to tree-shake when bundling

.changeset/short-peaches-repeat.md

@@ -3,4 +3,4 @@
 "@chakra-ui/cli": patch
 ---
 
-fix regression where ThemeTypings created by chakra-cli could not be used
+Fix regression where `ThemeTypings` created by chakra-cli could not be used

hooks/context/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-context",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "react-use-callback-ref"

hooks/use-callback-ref/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-use-callback-ref",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "react-use-callback-ref"

hooks/use-controllable-state/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-use-controllable-state",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "react-use-callback-ref"

hooks/use-disclosure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-use-disclosure",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "use-disclosure"

hooks/use-event-listener/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-use-event-listener",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "use-event-listener"

hooks/use-merge-refs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-use-merge-refs",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "use-merge-refs"

hooks/use-size/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-use-size",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Track an element size over time",
   "keywords": [
     "react-use-size"

hooks/use-update-effect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/react-use-update-effect",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "use-update-effect"

package.json

@@ -44,7 +44,7 @@
     "sandbox": "tsx scripts/sandbox.ts",
     "notify:release": "npm-run-all changelog:write discord changelog:commit"
   },
-  "version": "1.0.0",
+  "version": "2.0.0",
   "dependencies": {
     "@babel/core": "^7.18.9",
     "@babel/eslint-parser": "^7.18.9",

packages/avatar/package.json

@@ -33,16 +33,18 @@
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"
   },
+  "dependencies": {
+    "@chakra-ui/image": "workspace:*",
+    "@chakra-ui/react-context": "workspace:*"
+  },
   "devDependencies": {
+    "@chakra-ui/utils": "workspace:*",
+    "@chakra-ui/object-utils": "workspace:*",
+    "@chakra-ui/react-utils": "workspace:*",
     "@chakra-ui/system": "workspace:*",
     "@chakra-ui/layout": "workspace:*",
     "react": "^18.0.0"
   },
-  "dependencies": {
-    "@chakra-ui/image": "workspace:*",
-    "@chakra-ui/react-utils": "workspace:*",
-    "@chakra-ui/utils": "workspace:*"
-  },
   "peerDependencies": {
     "@chakra-ui/system": ">=2.0.0",
     "react": ">=18"

packages/avatar/src/avatar-badge.tsx

@@ -4,7 +4,7 @@ import {
   HTMLChakraProps,
   SystemStyleObject,
 } from "@chakra-ui/system"
-import { cx, __DEV__ } from "@chakra-ui/utils"
+import { cx } from "@chakra-ui/utils"
 import { useAvatarStyles } from "./avatar-context"
 
 export interface AvatarBadgeProps extends HTMLChakraProps<"div"> {}
@@ -37,6 +37,5 @@ export const AvatarBadge = forwardRef<AvatarBadgeProps, "div">(
     )
   },
 )
-if (__DEV__) {
-  AvatarBadge.displayName = "AvatarBadge"
-}
+
+AvatarBadge.displayName = "AvatarBadge"

packages/avatar/src/avatar-context.tsx

@@ -1,10 +1,10 @@
-import { createContext } from "@chakra-ui/react-utils"
+import { createContext } from "@chakra-ui/react-context"
 import { SystemStyleObject } from "@chakra-ui/system"
-import { Dict } from "@chakra-ui/utils"
 
 export const [AvatarStylesProvider, useAvatarStyles] = createContext<
-  Dict<SystemStyleObject>
+  Record<string, SystemStyleObject>
 >({
   name: `AvatarStylesContext`,
-  errorMessage: `useAvatarStyles returned is 'undefined'. Seems you forgot to wrap the components in "<Avatar />" `,
+  hookName: `useAvatarStyles`,
+  providerName: "<Avatar/>",
 })

packages/avatar/src/avatar-group.tsx

@@ -8,7 +8,8 @@ import {
   useMultiStyleConfig,
   HTMLChakraProps,
 } from "@chakra-ui/system"
-import { cx, filterUndefined, __DEV__ } from "@chakra-ui/utils"
+import { cx } from "@chakra-ui/utils"
+import { compact } from "@chakra-ui/object-utils"
 import { getValidChildren } from "@chakra-ui/react-utils"
 import { baseStyle } from "./avatar"
 import { cloneElement } from "react"
@@ -81,7 +82,7 @@ export const AvatarGroup = forwardRef<AvatarGroupProps, "div">(
         showBorder: true,
       }
 
-      return cloneElement(child, filterUndefined(childProps))
+      return cloneElement(child, compact(childProps))
     })
 
     const groupStyles: SystemStyleObject = {
@@ -117,6 +118,4 @@ export const AvatarGroup = forwardRef<AvatarGroupProps, "div">(
   },
 )
 
-if (__DEV__) {
-  AvatarGroup.displayName = "AvatarGroup"
-}
+AvatarGroup.displayName = "AvatarGroup"

packages/avatar/src/avatar-image.tsx

@@ -1,6 +1,5 @@
 import { ImageProps, useImage } from "@chakra-ui/image"
 import { chakra, ChakraComponent, SystemStyleObject } from "@chakra-ui/system"
-import { __DEV__ } from "@chakra-ui/utils"
 import { cloneElement } from "react"
 import { AvatarName } from "./avatar-name"
 
@@ -78,9 +77,8 @@ export function AvatarImage(props: AvatarImageProps) {
     />
   )
 }
-if (__DEV__) {
-  AvatarImage.displayName = "AvatarImage"
-}
+
+AvatarImage.displayName = "AvatarImage"
 
 /**
  * Fallback avatar react component.

packages/avatar/src/avatar-name.tsx

@@ -26,3 +26,5 @@ export function AvatarName(props: AvatarNameProps) {
     </chakra.div>
   )
 }
+
+AvatarName.displayName = "AvatarName"

packages/avatar/src/avatar.tsx

@@ -7,7 +7,7 @@ import {
   ThemingProps,
   useMultiStyleConfig,
 } from "@chakra-ui/system"
-import { cx, __DEV__ } from "@chakra-ui/utils"
+import { cx } from "@chakra-ui/utils"
 import { AvatarStylesProvider } from "./avatar-context"
 import { AvatarImage, GenericAvatarIcon } from "./avatar-image"
 import { initials } from "./avatar-name"
@@ -97,6 +97,4 @@ export const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
   )
 })
 
-if (__DEV__) {
-  Avatar.displayName = "Avatar"
-}
+Avatar.displayName = "Avatar"

utilities/merge-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/merge-utils",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "merge",

utilities/object-utils/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/object-utils
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/object-utils
+# or
+npm i @chakra-ui/object-utils
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

utilities/object-utils/index.ts

@@ -0,0 +1 @@
+export * from "./src"

utilities/object-utils/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@chakra-ui/object-utils",
+  "version": "2.0.0",
+  "description": "",
+  "keywords": [
+    "object",
+    "utilities",
+    "chakra"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "utilities/object-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  }
+}

utilities/object-utils/src/index.ts

@@ -0,0 +1,31 @@
+export function compact<T extends Record<any, any>>(object: T) {
+  const clone = Object.assign({}, object)
+  for (let key in clone) {
+    if (clone[key] === undefined) delete clone[key]
+  }
+  return clone
+}
+
+export function omit<T extends Record<any, any>>(
+  object: T,
+  keysToOmit: string[] = [],
+) {
+  const clone = Object.assign({}, object)
+  for (let key of keysToOmit) {
+    if (key in clone) delete clone[key]
+  }
+  return clone
+}
+
+export function pick<T extends Record<any, any>, K extends keyof T>(
+  object: T,
+  keysToPick: K[],
+) {
+  const result = {} as { [P in K]: T[P] }
+  for (const key of keysToPick) {
+    if (key in object) {
+      result[key] = object[key]
+    }
+  }
+  return result
+}