Skip to content
This repository has been archived by the owner on Nov 17, 2024. It is now read-only.

fix(deps): update dependency @chakra-ui/react to v3 #2166

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented May 12, 2022

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@chakra-ui/react (source) 1.8.9 -> 3.1.2 age adoption passing confidence

Release Notes

chakra-ui/chakra-ui (@​chakra-ui/react)

v3.1.2

Compare Source

Patch Changes
  • 65952d7
    Thanks @​segunadebayo! - - General: Fix
    issue where value change types were not re-exported from Ark UI

    • Layer Style: Fix issue where fill.surface layer style doesn't render
      the correct styles
    • Pagination: Fix issue where PaginationPageText did not render the
      correct page range

v3.1.1

Compare Source

Patch Changes
  • #​9128
    0715e2c
    Thanks @​coverlv! - Fix issue where
    useBreakpointValue throws error if ssr is false

  • #​9103
    1254769
    Thanks @​Newbie012! - - Checkbox: Fix issue
    where checkmark doesn't show on Safari

    • Alert: Fix issue where indicator icon is not visible on Safari
    • ClientOnly: Fix issue where returned the incorrect type leading to TS
      error like ClientOnly cannot be used as a JSX component.
    • Fieldset: Fix issue where anatomy is not exported
    • Timeline: Refactor variants such that it responds to colorPalette

v3.1.0

Compare Source

Minor Changes
  • 9a27c2c
    Thanks @​segunadebayo! - - System: Fix
    issue where using as prop with logic based components doesn't work as
    expected.

    • DataList: Add support for bold variant.

    • Button: Tweak the horizontal padding when size is sm.

    • Snippets

      • Slider: Add showValue prop to render the text value of the slider.
      • Select
        • Add HiddenSelect to ensure it works in form submissions.
        • Fix type inference is lost when using SelectRoot component from
          snippet
        • Fix issue where form data is not populated when using native form
          element
      • ColorMode: Fix type error when using the latest next-themes.
      • Provider: Forward props to ColorModeProvider powered by next-themes
        for better customization.
    • Toggle: Add Toggle component for toggling between two states. It
      composes the Button component.

v3.0.2

Compare Source

Patch Changes
  • 20b91bd
    Thanks @​segunadebayo! - - InputAddon:
    Fix issue with input addon not stretched correctly.
    • Snippets / Toaster: Improve toaster styling by adding
      width={{ md: "sm" }} to the toast root.

v3.0.1

Compare Source

Patch Changes
  • c0020c9
    Thanks @​segunadebayo! - Fix issue where
    using keyframe interpolation in animation prop doesn't work

  • 7d4f898
    Thanks @​segunadebayo! - Fix issue where
    scrollBehavior=outside doesn't allow scrolling outside the dialog content

v3.0.0

Major Changes
  • #​8153
    7b6e66a
    Thanks @​segunadebayo! - Prepares the ground
    for the next version Chakra that leverages Ark UI.

    User Facing

    • Consolidate all component packages into a single package
    • Remove all deprecated components and APIs
    • Simplify the Changelogs for all v2 releases

    Infrastructure

    • Simplify the repo infrastructure and release process
    • Migrate from jest to vitest
    • Migrate from tsup to custom rollup setup for better bundling strategy
  • #​8815
    806be96
    Thanks @​isBatak! - Remove the @chakra-ui/hooks
    package in favour of using dedicated, robust libraries like react-use and
    usehooks-ts

Minor Changes
  • #​8121
    170198f
    Thanks @​kkieninger! - ### Fixed

    • Fix hard-coded z-index for Menu in favor of one defined from the theme
    • Fix problem with leading and trailing spaces when getting initials for the
      Avatar component
    • Suppress unnecessary re-renders of Checkbox and Radio component
Added
  • Add CSS accentColor property to style props
  • Add support for asChild in chakra factory
  • Export toastStore from toast component
  • Upgrade framer-motion to allow for skipAnimations
  • Add component namespace to reduce imports and provide better composition
  • Modal, Drawer: Add default preserveScrollBarGap
Changed

Redesign the component themes and anatomy

  • 192c6b1
    Thanks @​segunadebayo! - Add new fieldset
    component

  • 07b04b1
    Thanks @​segunadebayo! - - [NEW]: Add
    RatingGroup, SegmentControl

    • [NEW]: Add EmptyState component for empty states
    • [NEW]: Add RadioCard and CheckboxCard components for card-based
      selection
  • #​8568
    5fd993b
    Thanks @​isBatak! - Add Collapsible recipe with
    default open/close animation

  • 3fc49ca
    Thanks @​segunadebayo! - Add support for
    FormatNumber and FormatByte components

  • 3ccbbdf
    Thanks @​segunadebayo! - ### Motion Styles

    Add support for motionStyle props.

    The idea is to pair them with text styles and layer styles to create this
    three-part mixin that can make your styles a lot cleaner.

    Motion styles focus solely on animations, allowing you to orchestrate
    animation properties.

    import { defineMotionStyles } from "@​chakra-ui/react"
    
    export const motionStyles = defineMotionStyles({
      "slide-fade-in": {
        value: {
          transformOrigin: "var(--transform-origin)",
          animationDuration: "fast",
          "&[data-placement^=top]": {
            animationName: "slide-from-top, fade-in",
          },
          "&[data-placement^=bottom]": {
            animationName: "slide-from-bottom, fade-in",
          },
          "&[data-placement^=left]": {
            animationName: "slide-from-left, fade-in",
          },
          "&[data-placement^=right]": {
            animationName: "slide-from-right, fade-in",
          },
        },
      },
    })
Built-in Keyframe Animations

Chakra new provides built-in keyframe animations that you can use to create
your own motion styles.

Slide: slide-from-top, slide-from-bottom, slide-from-left,
slide-from-right, slide-to-top, slide-to-bottom, slide-to-left,
slide-to-right

Slide Full: slide-from-top-full, slide-from-bottom-full,
slide-from-left-full, slide-from-right-full, slide-to-top-full,
slide-to-bottom-full, slide-to-left-full, slide-to-right-full

Fade: fade-in, fade-out

Scale: scale-in, scale-out

You can compose these animations using the animationName property in your
motion styles to create really cool animations. No JS required.

<Box animationName="slide-from-top, fade-in" animationDuration="fast">
  Slide from top and fade in
</Box>
  • 3ccbbdf
    Thanks @​segunadebayo! - Add support for
    built-in layer styles to help prototype faster with automatic dark mode.
    Paired with colorPalette, you can create beautiful designs with little code
    that adapts to dark mode automatically.

    Fill Layer Styles: fill.muted, fill.solid, fill.surface

    <Box layerStyle="fill.muted" colorPalette="red">
      This is a subtle fill layer
    </Box>

    Border Layer Styles: outline.muted, outline.solid

    <Box layerStyle="outline.muted" colorPalette="red">
      This is a subtle outline layer
    </Box>

    Indicator Styles: indicator.top, indicator.end, indicator.bottom,
    indicator.start

    <Box layerStyle="indicator.top" colorPalette="red">
      This is a top indicator layer
    </Box>

    Disabled Styles: disabled

    <Box _disabled={{ layerStyle: "disabled" }}>Disabled Button</Box>

    You can combine these layer styles to create very complex designs with little
    code.

    <Box
      layerStyle="fill.muted"
      _hover={{ layerStyle: "outline.solid" }}
      colorPalette="red"
    >
      This is a complex layer
    </Box>
  • de9c0a0
    Thanks @​segunadebayo! - Add DataList
    component

  • e77a9b8
    Thanks @​segunadebayo! - - Add new Timeline
    component to presenting chronological information or activities.

    • Trim generated className in the DOM.
    • Add neutral status to Alert component
  • 763329e
    Thanks @​segunadebayo! - Add preset and
    preset-base entrypoints.

    • The preset entrypoint exposes the default theme and recipes for Chakra.
    • The preset-base entrypoint exposes the base utilities and conditions used
      internally.
  • 925cfd9
    Thanks @​segunadebayo! - Add ActionBar,
    Status, Rating, Pagination components

  • e9a1537
    Thanks @​segunadebayo! - BREAKING: Change
    signature of useRecipe, useSlotRecipe, createSlotRecipeContext

createSlotRecipeContext

Before:

const { withProvider, withContext } = createSlotRecipeContext("accordion")

After:

const { withProvider, withContext } = createSlotRecipeContext({
  key: "accordion",
})
useSlotRecipe

Before:

const recipe = useSlotRecipe("accordion")

After:

const recipe = useSlotRecipe({ key: "accordion" })
  • 3908155
    Thanks @​segunadebayo! - Rename
    createStyleContext to createSlotRecipeContext

  • c654ee3
    Thanks @​segunadebayo! - Improve performance
    of styled components to avoid unneeded re-renders.

  • edec8f7
    Thanks @​segunadebayo! - Add clipboard
    composition

  • 5093e18
    Thanks @​segunadebayo! - Add cursor pointer
    to button

  • 4c6838c
    Thanks @​segunadebayo! - - Rename onLabel
    and offLabel to trackLabel

    • Add support for thumbLabel prop for rendering an icon within thumb
  • #​8393
    623e558
    Thanks @​segunadebayo! - - Integrate Ark UI
    components to reduce maintenance surface.

    • Add FileUpload component
    • Remove trigger=hover in favor of HoverCard
    • Replace Tooltip, Popover and HoverCard with those from Ark UI
  • 945a777
    Thanks @​segunadebayo! - BREAKING: Integrate
    Ark v4. This mostly affects the custom select component that requires the use
    of createListCollection now.

  • c26acf0
    Thanks @​segunadebayo! - Add support for
    cursor token type

  • 55c0839
    Thanks @​segunadebayo! - Move the Prose
    component to snippets so it can be customized by the user.

  • 952647a
    Thanks @​segunadebayo! - Add CardTitle and
    CardDescription components

  • f4762bf
    Thanks @​segunadebayo! - Add support for
    merging multiple system configs into one within createSystem

    Before:

    const config = mergeConfigs(defaultConfig, customConfig)
    export const system = createSystem(config)

    After:

    const system = createSystem(defaultConfig, customConfig)
  • #​8218
    a89c598
    Thanks @​segunadebayo! - Add support for
    custom theme conditions or pseudo props via theme.conditions

    // theme.ts
    
    const theme = extendTheme({
      conditions: {
        _closed: "[data-state='closed']", // pseudo prop
      },
    })

    This allows you to use the pseudo prop in your components

    <Box data-state="closed" _closed={{ bg: "red.200" }}>
      This box is closed
    </Box>

    For TypeScript users, you need to use the Chakra CLI to generate the types
    for your custom conditions.

    pnpm chakra-cli tokens src/theme/index.ts
  • c2f45ca
    Thanks @​segunadebayo! - Rename
    Fieldset.Control to Fieldset.Content

  • 1738b90
    Thanks @​segunadebayo! - - Icon: Set
    asChild to true by default to reduce repetition

    • All components

      • Ensure consistent sizing convention (units of 4px). Smaller elements start
        at 20px, larger elements start at 40px
      • Ensure focus ring matches the colorPalette
    • Input, Textarea: Rename filled variant to subtle

    • Tags: Add new Tag.StartElement and Tag.EndElement components to allow
      for easier styling of the start and end elements

  • 3ccbbdf
    Thanks @​segunadebayo! - Redesign Stepper
    component. It's now called Steps and manages the state internally, no need
    to use useSteps anymore.

    We've also improved the accessibility of the component by leveraging the tabs
    pattern and adding the required ARIA attributes.

    <Steps.Root defaultIndex={0} count={2}>
      <Steps.List>
        <Steps.Item index={0}>
          <Steps.Trigger>
            <Steps.Title>Step 1</Steps.Title>
          </Steps.Trigger>
          <Steps.Separator />
        </Steps.Item>
    
        <Steps.Item index={1}>
          <Steps.Trigger>
            <Steps.Title>Step 2</Steps.Title>
          </Steps.Trigger>
          <Steps.Separator />
        </Steps.Item>
      </Steps.List>
    
      <Steps.Content index={0}>Step 1</Steps.Content>
      <Steps.Content index={1}>Step 2</Steps.Content>
      <Steps.CompleteContent>Complete</Steps.CompleteContent>
    </Steps.Root>

    Using the CLI, you can also scaffold an already composed stepper component

    chakra composition add steps
  • 548470d
    Thanks @​segunadebayo! - Add custom select
    from Ark UI and design recipe

  • 8b110da
    Thanks @​segunadebayo! - Support inlining
    recipe in createRecipeContext and createSlotRecipeContext for better DX
    when shipping libraries based on Chakra.

    This reduces the need for using the Chakra CLI to generate types for custom
    components.

  • 05793a2
    Thanks @​segunadebayo! - - Make gray the
    default color palette.

    • Change avatar sm size to 36px for consistency.
    • Move bg for outline component variants.
  • 43f2c7d
    Thanks @​segunadebayo! - - CheckboxCard
    [New]

    Add support for a new CheckboxCard component that can be used to render a
    card with a checkbox.

    <CheckboxCard.Root>
      <CheckboxCard.Control>
        <Stack gap="0" flex="1">
          <CheckboxCard.Label>Checkbox</CheckboxCard.Label>
          <Text>Some description</Text>
        </Stack>
    
        <CheckboxCard.HiddenInput />
        <CheckboxCard.Indicator />
      </CheckboxCard.Control>
    </CheckboxCard.Root>
    • Checkmark [New]

      Add new checkmark component for rendering a static checkmark icon with the
      checked, disabled, and indeterminate state baked in.

    <Stack>
      <Checkmark />
      <Checkmark checked />
      <Checkmark indeterminate />
      <Checkmark disabled />
      <Checkmark checked disabled />
      <Checkmark indeterminate disabled />
    </Stack>
    • EmptyState [New]

      Add new EmptyState component for rendering an empty state message with a
      title, description, and optional action button.

    <EmptyState.Root>
      <EmptyState.Content>
        <EmptyState.Indicator>
          <HiTemplate />
        </EmptyState.Indicator>
    
        <VStack textAlign="center">
          <Text fontWeight="medium">No template found</Text>
          <Text fontSize="sm" color="fg.muted">
            Try creating a new template with the button below
          </Text>
        </VStack>
    
        <Button variant="outline">
          <HiPlus /> Create Template
        </Button>
      </EmptyState.Content>
    </EmptyState.Root>
  • e119ae9
    Thanks @​segunadebayo! - Rename
    motionStyle to animationStyle for better intuitiveness

  • #​8575
    d4522d9
    Thanks @​isBatak! - Align theme recipe name with
    panda

  • 3ccbbdf
    Thanks @​segunadebayo! - Add support for
    focusRing and focusRingColor style props that allow to quickly style focus
    visible state of form controls.

    The focus ring values can be either extend or contain

    <Box asChild focusRing="extend" focusRingColor="pink.500">
      <input type="text" />
    </Box>
  • 4ff153f
    Thanks @​segunadebayo! - Speed up
    intellisence for style props, and add support for strictTokens in the CLI.

  • 47a8a9e
    Thanks @​segunadebayo! - - Add inherit to
    Spinner recipe size

    • Refactor button and link button snippets
  • b6d1d0d
    Thanks @​segunadebayo! - Simplify spinner
    component to use less custom props.

    • Removed emptyColor, prefer to use --spinner-track-color
    • Removed speed, prefer to use animationDuration
    • Removed thickness, prefer to use borderWidth
  • #​8218
    a89c598
    Thanks @​segunadebayo! - Add support for
    _open and _closed pseudo props for styling their respective selectors.

    • _open: &[data-state=open], &[open]
    • _closed: &[data-state=closed]
    • _groupOpen: [data-group][data-state=open] &
    • _groupClosed: [data-group][data-state=closed] &

    Extend the existing pseudo props to support new selectors`

    • _placeholder now supports &[data-placeholder]
    • _placeholderShow now supports &[data-placeholder-shown]
    • _fullscreen now supports &[data-fullscreen]
    • _empty now supports &[data-empty]
    • _expanded now supports &[data-state=expanded]
    • _checked now supports &[data-state-checked]
  • #​8569
    eb26857
    Thanks @​isBatak! - Fix the boxSize type to
    allow number values.

  • 47b3b5a
    Thanks @​segunadebayo! - Support array in
    conditions object. This matches the API in Panda CSS and allow users to define
    complex selectors like media hover queries.

  • e4f2df0
    Thanks @​segunadebayo! - Add Prose
    component to help style markdown content.

  • c243698
    Thanks @​segunadebayo! - - Add
    referrerPolicy to Avatar component.

    • Add CheckboxDescription, CheckboxCardDescription and RadioCardDescription
    • Swap muted and subtle color tokens
Patch Changes

v2.8.2

Compare Source

Patch Changes

v2.8.1

Compare Source

Patch Changes

v2.8.0

Compare Source

Minor Changes
  • 754d9d4f4
    Thanks @​segunadebayo! - To improve support
    for the App Router, all components and hooks are exported with the
    "use client" directive.
Patch Changes

v2.7.1

Compare Source

Patch Changes
  • #​7730
    2456a7090
    Thanks @​TylerAPfledderer! - Expose the
    skip nav components and types to the main package

    import {
      SkipNavLink,
      type SkipNavLinkProps,
      SkipNavContent,
      type SkipNavContentProps,
    } from "@&#8203;chakra-ui/react"

v2.7.0

Compare Source

Minor Changes
  • c31df5a4b
    Thanks @​segunadebayo! - - Add new
    Indicator layout component. Useful for positioning an element in the corners
    of another element.

    For example, let's say you want to position a notification badge in the top
    end corner of a box. You can use the Indicator component to achieve this.

    <Box position="relative" width="80px" height="80px" bg="gray.50">
      <Indicator placement="top-end">
        <Circle size="5" bg="red.100">
          3
        </Circle>
      </Indicator>
    </Box>
    • Refactored the Stack and Wrap components to use the flex gap instead of
      the owl selector & > * ~ * for spacing.

      This fixes an issue where you can't use raw text nodes as a child of the
      Stack or Wrap component.

Patch Changes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.


  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 58eeeaa to 26402f4 Compare May 13, 2022 18:26
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 26402f4 to 633971a Compare May 13, 2022 22:56
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 633971a to 708fd5f Compare May 17, 2022 01:52
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 708fd5f to 0ed5f04 Compare May 17, 2022 17:55
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 0ed5f04 to ce52622 Compare May 19, 2022 23:48
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from ce52622 to 4785e18 Compare May 22, 2022 06:09
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 4785e18 to 3db1d99 Compare May 24, 2022 12:59
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 3db1d99 to 1493ed5 Compare May 24, 2022 18:25
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 1493ed5 to 06fc924 Compare May 25, 2022 21:23
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 06fc924 to 77bb709 Compare May 26, 2022 20:05
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 77bb709 to eb44ce8 Compare June 6, 2022 21:05
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from eb44ce8 to 67552e8 Compare June 7, 2022 13:52
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 67552e8 to 7e167ef Compare June 7, 2022 21:46
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 7e167ef to f5efd7e Compare June 10, 2022 18:07
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from f5efd7e to c4de69e Compare June 11, 2022 02:37
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 06a7e07 to 7899a45 Compare March 24, 2023 18:57
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 7899a45 to 3cae8c6 Compare March 27, 2023 11:29
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 3cae8c6 to 54bb64a Compare March 30, 2023 20:30
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 3294959 to 4ce176a Compare May 31, 2023 09:58
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 4ce176a to 2691e62 Compare June 19, 2023 17:12
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 2691e62 to a14bb23 Compare July 18, 2023 23:10
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from a14bb23 to 86f976d Compare September 8, 2023 23:45
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 86f976d to b1b5d16 Compare November 9, 2023 15:58
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from b1b5d16 to 142ee4a Compare November 16, 2023 18:05
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 142ee4a to fe15d1b Compare June 26, 2024 06:16
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 5 times, most recently from 19cf505 to e933902 Compare October 4, 2024 22:11
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from ee535eb to 482e759 Compare October 16, 2024 16:51
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 482e759 to 6665974 Compare October 22, 2024 22:34
@renovate renovate bot changed the title fix(deps): update dependency @chakra-ui/react to v2 fix(deps): update dependency @chakra-ui/react to v3 Oct 22, 2024
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 376770b to 9270301 Compare October 30, 2024 23:58
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 5206a69 to 22e3a23 Compare November 9, 2024 21:57
@renovate renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 22e3a23 to 12f4029 Compare November 16, 2024 05:46
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

0 participants