v1.4.2.mdx

title	description	releaseUrl	releaseDate	version
Version 1.4.2	Explore the changelog for Chakra UI version 1.4.2. Learn about the latest features, bug fixes, and improvements.	chakra-ui#3643	March 30, 2021	1.4.2

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• 6ab82ca37 Thanks @segunadebayo! - Fix rtl styles for avatar

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

• 69ae9f68e Thanks @segunadebayo! - - Add getRootProps to usecheckbox hook to manage props passed to checkbox container.

  • Forward onFocus and onBlur props to the input element for better integration with form libraries.

  • Ensure the checkbox works when the root element is not label. This helps to fix the current accessibility issues with the Switch component.

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• f9b1a2a9b Thanks @segunadebayo! - Expose setvalue function to allow update state without onchange

Patch Changes

• 428593906 #3664 Thanks @segunadebayo! - Fix issue where onChange is called when value did not change

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

• fa9350eff #3689 Thanks @segunadebayo! - Refactor useFormControlProvider to return prop getters getHelpTextProps, getErrorMessageProps, and getRootProps.

  Detect helper text and error message using ref callback instead of useLayoutEffect

  Create useFormControlProps to provide a way to get the resolved form control props isInvalid, isDisabled, instead of HTML attributes. This will make it easier to integrate with number-input, checkbox, and switch.

  Update aria-describedby id to include feedbackId only when isInvalid is true,

Patch Changes

• 3cc77ce60 Thanks @segunadebayo! - Fix concurrent mode issue with setting state in focus event handler. We use withFlushSync helper to achieve this.
• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• 623e782e8 #3408 Thanks @dodas! - useControllableState: The onChange callback will be called only if the new value isn't equal to the current one.
• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9, 3cc77ce60, fa9350eff]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• 1d85e4729 Thanks @segunadebayo! - Fix: remove redundant role attribute from divider

• f1612df7b #3665 Thanks @burhanuday! - fixed the bug where a margin bottom would get applied to direction=row of stack

• c71cb7b08 Thanks @segunadebayo! - Fix issue where AbsoluteCenter doesn't have position: absolute

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• fa8351d19 Thanks @segunadebayo! - Add assign function to level out API with @xstate/fsm

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• fa9350eff #3689 Thanks @segunadebayo! - ### useNumberInput

  • Forward aria-* props to the input element.
  • Fix issue where onChange was called on mount.
  • Fix issue where onBlur was called twice.
  • Memoize all callback props onFocus, onBlur, getAriaValueText
  • Refactor implicit useFormControl logic to be called from NumberInput instead.
  • Call setFocused.on with ReactDOM.flushSync to prevent concurrent mode issue where setting state in onFocus affects onChange event handler.

• Updated dependencies [623e782e8, a58b724e9, f9b1a2a9b, b724a9dd9, 3cc77ce60, fa9350eff, 428593906]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• a8a841beb Thanks @segunadebayo! - Fix issue where popover arrow can't be overriden

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9, 3cc77ce60, fa9350eff]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]:
  • @chakra-ui/[email protected]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• 32e79f835 #3648 Thanks @segunadebayo! - Add support for css variable tokens. This means you can create a css variable and reference value in the tokens.

  // We're convert `colors.red.200` to `var(--chakra-colors-red-200)`
  <Box
    sx={{
      "--banner-color": "colors.red.200",
      "& .banner": {
        bg: "var(--banner-color)",
      },
    }}
  />

  You can also add fallback values in event the token doesn't exist:

  <Box
    sx={{
      // evaluates to #fff if `colors.red.1000` doesn't exists in theme map
      "--banner-color": "colors.red.1000, #fff",
      "& .banner": {
        bg: "var(--banner-color)",
      },
    }}
  />

  This opens new possbilities with css variables, for example you can apply responsive token values like you would with style props.

  TypeScript support for this is still WIP

  <Box
    sx={{
      "--banner-color": ["colors.red.200", "colors.pink.400"],
      "& .banner": {
        bg: "var(--banner-color)",
      },
    }}
  />

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• eed076c4b #3678 Thanks @segunadebayo! - - Fix use getRootProps from useCheckbox for the root element and memoize styles

  • Add support for children prop as a way to add an accessible label.

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9, 69ae9f68e]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• 36252981a #3636 Thanks @TimKolberger! - - Fixed an issue where the StylesProvider export was not working in every environment
  • Add style config for rotateX, rotateY, scaleX, scaleY
• Updated dependencies [32e79f835, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• aba02eab1 #3678 Thanks @segunadebayo! - ### Switch

  • Add container part
  • Use css vars to handle styles
  • Fix rtl issue

  Stats and Table

  • Fix rtl issue

  • Remove 0 token value from spacing tokens. 0 maps to 0 and there's no need to create a css custom property for that.

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Minor Changes

• a58b724e9 Thanks @segunadebayo! - Add withFlushSync function wrapper to help resolve concurrent mode and onFocus state issues.

  This is a temp fix until the issue is fixed in React.

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a8a841beb, 1d85e4729, 623e782e8, aba02eab1, 36252981a, eed076c4b, 6ab82ca37, f1612df7b, a58b724e9, f9b1a2a9b, b724a9dd9, 3cc77ce60, c71cb7b08, fa9350eff, fa9350eff, 428593906, bb5b004ef, 69ae9f68e]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9, 3cc77ce60, fa9350eff]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [623e782e8, 36252981a, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9, 3cc77ce60, fa9350eff]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• bb5b004ef #3650 Thanks @gmathieu! - Bump @reach/alert to fix yarn pnp issue

• Updated dependencies [623e782e8, aba02eab1, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [623e782e8, a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [32e79f835]

@chakra-ui/[email protected]

Minor Changes

• b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies