Skip to content

Latest commit

 

History

History
2598 lines (1851 loc) · 95.8 KB

v1.7.0.mdx

File metadata and controls

2598 lines (1851 loc) · 95.8 KB
Raw
title description releaseUrl releaseDate version
Version 1.7.0
Explore the changelog for Chakra UI version 1.7.0. Learn about the latest features, bug fixes, and improvements.
November 11, 2021
1.7.0

@chakra-ui/accordion@1.4.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/alert@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/anatomy@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/avatar@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/breadcrumb@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/button@1.5.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/checkbox@1.6.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/clickable@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/close-button@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/color-mode@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

  • #4989 013c90d89 Thanks @takethefake! - Fixed color mode behavior priority in the following order:

    • if useSystemColorMode is true system-color will be used as default - initial colormode is the fallback if system color mode isn't resolved

    • if --chakra-ui-color-mode is defined through e.g. ColorModeScript this will be used

    • if colorModeManager = localStorage and a value is defined for chakra-ui-color-mode this will be used

    • if initialColorMode = system system-color will be used as default - initial colormode is the fallback if system color mode isn't resolved

    • if initialColorMode = 'light'|'dark' the corresponding value will be used

  • Updated dependencies [6095eaf9a]

@chakra-ui/control-box@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/counter@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/css-reset@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @chakra-ui/css-reset

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

  • toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @chakra-ui/css-reset

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @chakra-ui/css-reset

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @chakra-ui/css-reset

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @chakra-ui/css-reset

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @chakra-ui/css-reset

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @chakra-ui/css-reset

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Features

  • add svg improvements in css reset (071c329)
  • move font feature settings to stat and add default to css reset (2c1ba4b)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @chakra-ui/css-reset

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Bug Fixes

  • issue with input element ui and css-reset (cc221de)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @chakra-ui/css-reset

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @chakra-ui/css-reset

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes

  • #891 (e107acc)
  • select: remove duplicate Select arrow in ie11 (c21681b)
  • use pseudo element instead of pseudo class (756cdae)

@chakra-ui/descendant@2.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/editable@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/react-env@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/focus-lock@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/form-control@1.5.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/hooks@1.7.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/icon@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/icons@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/image@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/input@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/layout@1.5.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/live-region@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/media-query@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/menu@1.8.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/modal@1.10.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

  • #4995 802e0a4d2 Thanks @jesstelford! - react-focus-lock@2.5.1 includes a dependency update of focus-lock from 0.8.1 -> 0.9.1. The change in focus-lock includes a fix for performance in JSDOM: theKashey/focus-lock#24

    JSDOM is used when testing react components in jest and other unit testing frameworks. In particular, when used with @testing-library/react for simulating real user input.

    Locally tested on an Apple M1 Air using a moderately complex <Modal> component (which contained inputs, react-hook-form usage, etc). Before this change: 20,149ms After this change: 2,347ms

    Approx. 10x performance increase.

  • Updated dependencies [6095eaf9a]

@chakra-ui/number-input@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/pin-input@1.7.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/popover@1.10.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/popper@2.4.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/portal@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/progress@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/provider@1.7.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/radio@1.4.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/react@1.7.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/react-utils@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/select@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

  • #5010 0dd56ab1b Thanks @jrolfs! - Fixed an styling issue where it was not possible to customize the icon spacing of the Select component.

  • Updated dependencies [6095eaf9a]

@chakra-ui/skeleton@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/skip-nav@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/slider@1.5.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

  • #5020 c7277cdf7 Thanks @burhanuday! - fixed the bug in RangeSlider where an index out of bounds error would occur incase of stacked thumb
  • Updated dependencies [6095eaf9a]

@chakra-ui/spinner@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/stat@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/styled-system@1.14.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/switch@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/system@1.8.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/table@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/tabs@1.6.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/tag@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/textarea@1.2.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/theme@1.12.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

  • #5010 0dd56ab1b Thanks @jrolfs! - Fixed an styling issue where it was not possible to customize the icon spacing of the Select component.

  • Updated dependencies [6095eaf9a]

@chakra-ui/theme-tools@1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/toast@1.4.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/tooltip@1.4.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/transition@1.4.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/utils@1.9.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

@chakra-ui/visually-hidden@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/cli@1.6.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

@chakra-ui/props-docs@1.0.38

Patch Changes

@chakra-ui/test-utils@1.1.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    // Won't work 🎇
import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"

// Works ✅
import { useOutsideClick } from "@chakra-ui/hooks"

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

create-react-app-ts@1.1.1

Patch Changes

gatsby-starter-default@0.3.1

Patch Changes

chakra-nextjs@1.1.1

Patch Changes

chakra-nextjs-ts@1.1.1

Patch Changes

@chakra-ui/docs@2.1.5

Patch Changes