First of all I'm sorry if this is not the correct place to do this.

So I'm seeing this UI library and it's astonishing. I didn't see such beauty in a while and I'm wondering if we could extend this exact lib to React Native.

I know it's a huge step and I don't expect it to be fast, but in my point of view it would be amazing since I don't know many libraries that has this kind of support.

What do you think? We can create a RFC or an umbrella issue/PR adding that possibility. I think it would be awesome to replicate the exact same styles to the mobile platform, since they are amazing.

Thanks in advance!

We're currently migrating the codebase to TypeScript to provide better type safety across all components.

If you have any typescript related concerns, kindly comment below and find a walkaround for now till the TS version is released.

Cheers.

PS: Want to contribute to the migration, check out the dev-ts branch.

WAI-ARIA Authoring Practices has a section about building accessible carousel components:

A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides. Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and "rotates" the next or previous slide into view. In some implementations, rotation automatically starts when the page loads, and it may also automatically stop once all the slides have been displayed. While a slide may contain any type of content, image carousels where each slide contains nothing more than a single image are common.

I think there is a great opportunity to build a composable component by following Reach UI's Philosophy. As I've observed, there are several layers of abstraction:

• Carousel – Similar to Reach UI's Dialog, it would just wrap the 2 children below
  • CarouselControls – Contains Rotation Control, Next Slide Control, Previous Slide Control and Slide Picker Controls
  • CarouselRotator – Touch-controllable scroll container with a hidden scrollbar
    • CarouselSlide – Holds content to be presented

I've already started building the foundation of some components above, mostly by following a CSS-Tricks article about Scroll Snap:

CarouselRotator

import { Flex, FlexProps } from '@chakra-ui/core';
import React from 'react';
import { MarginProps, ResponsiveValue } from 'styled-system';
import CarouselSlide from './CarouselSlide';

// TODO: https://www.w3.org/TR/wai-aria-practices-1.1/#grouped-carousel-elements

function negateResponsiveValue<T>(value: ResponsiveValue<T>) {
  if (value == null) return value;
  if (typeof value === 'number') return -value;
  if (typeof value === 'string') return `-${value}`;
  if (Array.isArray(value)) return value.map(v => (v != null ? `${-v}` : v));
  return Object.fromEntries(
    Object.entries(value).map(([k, v]) => [k, v != null ? `${-v}` : v]),
  );
}

export interface CarouselProps extends FlexProps {
  children: React.ReactComponentElement<typeof CarouselSlide>[];
  slideIndex?: number;
  spacing?: MarginProps['margin'];
  spacingX?: MarginProps['mx'];
  spacingY?: MarginProps['my'];
}

export default function Carousel({
  children,
  slideIndex = 0,
  spacing,
  spacingX,
  spacingY,
  ...restProps
}: CarouselProps) {
  return (
    <Flex
      as="section"
      aria-roledescription="carousel"
      aria-live="polite" // The carousel is NOT automatically rotating
      my={negateResponsiveValue(spacingY != null ? spacingY : spacing)}
      overflow="auto"
      css={{
        scrollSnapType: 'x mandatory',
        // TODO: Leave vendor prefixing to the underlying library
        '::-webkit-scrollbar': { width: 0 },
        '-msOverflowStyle': 'none',
        scrollbarWidth: 'none',
      }}
      {...restProps}
    >
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          inert: i !== slideIndex ? '' : undefined,
          px: spacingX != null ? spacingX : spacing,
          py: spacingY != null ? spacingY : spacing,
        }),
      )}
    </Flex>
  );
}

There is still a lot of work to do, e.g. adding support for automatic rotating by setting aria-live to off.

CarouselSlide

import { Box, BoxProps } from '@chakra-ui/core';
import React from 'react';

// TODO: Follow the status of https://github.com/WICG/inert and remove polyfill
import 'wicg-inert';

export default function CarouselSlide({
  children,
  inert,
  ...restProps
}: BoxProps) {
  return (
    <Box
      role="group"
      aria-roledescription="slide"
      flex="0 0 100%"
      css={{ scrollSnapAlign: 'center' }}
      {...restProps}
    >
      {/* TODO: Remove extra `div` once `shouldForwardProp` of `Box` supports `inert` */}
      <div inert={inert}>{children}</div>
    </Box>
  );
}

The inert attribute is required to disable tab navigation to undisplayed slides.

declarations.d.ts

Unfortunately, TypeScript and React don't support the inert attribute yet, thus, it cannot be specified as a boolean, but an empty string: ''.

declare module 'react' {
  interface DOMAttributes<T> {
    inert?: '' | undefined;
  }
}

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      inert?: '' | undefined;
    }
  }
}

export {};

Hi,

After upgrade to @[email protected], my application working on Next.js throw a warning error.

Maybe has some breaking changes, the internal auto-id hook instead of @reach-ui/auto-id.

We are starting the development of Chakra UI v2 🎉

The scope of this upcoming major release is to support React 18 and remove long known deprecations. We keep the scope as narrow as possible to provide feature-scoped major releases to all our users and a smooth upgrade experience.

We switched our default branch from main to next. This allows us to publish the pre-release version á la @chakra-ui/[email protected]. The first next release was published moments ago.

With this in place, we can test the React 18 support in our applications and resolve upcoming issues until we are confident to release Chakra UI v2.

If you experience any React 18 related issues or tips we should know about, feel free to comment below and we'll look into it.

Upgrade guide

1. Update react, react-dom and their respective @types/ package to version 18
2. Upgrade to the next pre-release
3. Test and report any issues you have below.

Join our Discord Server for React 18 issues: https://discord.gg/kfp3UQh4Y2

A Multiselect is a common input, and it seems like Chakra is missing it.

The API would use a compound component API. Example:

<Multiselect
  selectedValues={[1, 2]}
  onSelectedValuesChange={newValues => /* ... */}/>
  <Option optionValue={1}>One</Option>
  <Option optionValue={2}>Two</Option>
  <Option optionValue={3}>Three</Option>
</Multiselect>

The API could be simpler and use strict props, but it would be less flexible. The compound component pattern would allow people to switch out the <Option /> component.

I would like to contribute to Chakra by writing this component, does this sound like a good addition?

Description

Whenever I use an accordion with NextJs, I get mismatches for ids.

Link to Reproduction

https://codesandbox.io/s/snowy-thunder-gxsfl?file=/pages/index.tsx:0-1603

Steps to reproduce

First thing first, I can't reproduce it with the codesandbox. I think it's running next start while you only see the errors with next dev...

I still linked a codesandbox with something that will reproduce the problem when ran in local.

To reproduce, I simply create a new page, let's say "accordion.tsx" with this code taken directly from the documentation:

import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Box,
  Heading
} from "@chakra-ui/react";
import React from "react";

export default function IndexPage() {
  return (
    <article>
      <Heading>Welcome to Chakra UI example</Heading>
      <Accordion allowToggle>
        <AccordionItem>
          <h2>
            <AccordionButton as="button" id="ttr">
              <Box flex="1" textAlign="left">
                Section 1 title
              </Box>
              <AccordionIcon />
            </AccordionButton>
          </h2>
          <AccordionPanel pb={4}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem>
          <h2>
            <AccordionButton>
              <Box flex="1" textAlign="left">
                Section 2 title
              </Box>
              <AccordionIcon />
            </AccordionButton>
          </h2>
          <AccordionPanel pb={4}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    </article>
  );
}

Load the page, look at the console and I get:

Warning: Prop `id` did not match. Server: "accordion-button-3" Client: "accordion-button-6"

This is new from Chakra 1.6.4.

Everything was working fine in my project with 1.6.3.

When I migrated to 1.6.4, I saw there had been a big modification for generating ids so they could better match between server and client. (supposedly, I never had the problem before so I have no idea why it was "fixed")

I looked at the modified file and it was a huge change. I tried it as is, but I couldn't make it work at all in my project because with 1.6.4 pretty much all ids were a mismatch now...

Since I was using Chakra's useId hook for my own custom components, I created a new useId with the old code and removed the import from Chakra. Everything went back to normal.

I didn't use any accordion at the time, so I never saw any other problem. But obviously, anything that would use Chakra 1.6.4 useId will behave incorrectly with NextJs, as we can see with Accordion.

I figured someone would eventually create an issue because the console is completely red when used with NextJs in SSG... Turns out I'm the first to report it after all :(

Chakra UI Version

1.6.4

Browser

MS Edge 91.0.864.64 (latest at the moment)

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

I tried passing my own id to the accordion button, but it's simply ignored by Chakra implementation, it overrides it with it's own automatic id. This should be looked at, if I could somehow pass my own id, I could easily patch in the old version to generate ids, the one that worked 100% with NextJs.

Screenshot of a simple page with only the accordion on it

Screenshot of the console for that same page

Screenshot of React Dev Tools on the Accordion Button (id = "ttr")

Screenshot of React Dev Tools on the Accordion Button sub component "button" (id = "accordion-button-6")

I have no idea why on the server the id is accordion-button-3 while on the client it's accordion-button-6.

My repository is private, but I could invite someone from the staff to debug it if necessary.

If you require anything else, don't hesitate to ask.

Regards,

TheThirdRace

Description

When I setup a NextJS 13 typescript project and install chakra-ui, and add tag, the next server crash and returns an ESM related error:

Server Error

SyntaxError: Named export 'cancelSync' not found. The requested module 'framesync' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'framesync';
const { cancelSync, getFrameData } = pkg;
This error happened while generating the page. Any console logs will be displayed in the terminal window.

Link to Reproduction

https://codesandbox.io/p/sandbox/nifty-hill-uoc5q2

Steps to reproduce

1. Setup a NextJS project: yarn create next-app --typescript
2. Add chakra-ui: yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
3. Add ChakraProvider tags to _app.jsx

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

Chakra UI Version

^2.4.5

Browser

Mozilla Firefox 108.0.1 (64 Bits) & Brave 1.46.144

Operating System

• [ ] macOS
• [ ] Windows
• [X] Linux

Additional Information

I found a few somehow related issues concerning Chakra UI & ESM clashes, such as #6942 but I didn't manage to fix this issue. The codesandbox was made with the nextJS template provided, it uses npm but still has the same error.

My package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.4.5",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@next/font": "13.1.1",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "eslint": "8.30.0",
    "eslint-config-next": "13.1.1",
    "framer-motion": "^6",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.4"
  }
}

It seems the whole lib is imported when the only Button is used.

But https://bundlephobia.com/[email protected] says the lib is tree shakeable.

Is there any working example? Thank you.

Description

Warning: ReactDOM.render is no longer supported in React 18.

Link to Reproduction

https://github.com/performautodev/my-app

Steps to reproduce

Created with

npx create-next-app@latest --ts

=> no errors

Add chakra

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

=> when i added ChakraProvider error appear :o

next-dev.js?3515:25 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

look at "./2022-03-30_13-42-43.png"

https://github.com/performautodev/my-app

Chakra UI Version

1.8.7

Browser

Version 99.0.4844.82 (Official Build) (64-bit)

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

Operating System:
Platform: win32
Arch: x64 Version: Windows 10 Pro Binaries: Node: 16.14.2 npm: N/A Yarn: N/A pnpm: N/A Relevant packages:
next: 12.1.3-canary.0
react: 18.0.0 react-dom: 18.0.0

=> NextJS post : https://github.com/vercel/next.js/issues/35723

Feature request

Is your feature request related to a problem? Please describe.

I am trying to style a component from an external library using Chakra multipart component theming, the component has multiple className props for each of it's part I want to pass the part styles from the styleConfig to the part className.

Describe the solution you'd like

I want to be able to do something similar to this

export const CustomComponent= () => {
    const styles = useStyleConfig('CustomComponent', {});
    return (
        <ExternalComponent 
          className={styles.container}
          wrapperClassName={styles.wrapper}
          // or 
          otherClassName={sx(styles.other)}  />
    );
};

Is this already possible? if so maybe we could add this to the docs.

If it's not, what is the recommended alternative?

Describe alternatives you've considered

I can just write CSS classNames but I wanted to use the design tokens from the theme

Description

I want to add loading attr for Avatar component to have lazy-loading function, but it doesn't work well because the loading attribute doesn't be passed to use-image hook so it still loaded each image in the first time instead of scrolling

at line 34 of avatar-image.tsx

Link to Reproduction

https://codesandbox.io/s/dark-wind-xc0t2m?file=/src/index.js

Steps to reproduce

1. Open dev tool and go to Network tab
2. Filter with image
3. Go to sandbox
4. Comment and uncomment Success or Failure example and see the differences (Remember refresh the whole page cuz cache)
5. You can see the lazyloading function of original img tag works well but Image or Avatar doesn't.

Chakra UI Version

3.2.1

Browser

No response

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

No response

Description

I have following child component which is a part of form with reset button , on click of it I need range slider position back to default values. On click of reset button the state value changes however the position rangeslider thumb doesn't change

<FormControl sx={styles.formControl}> <FormLabel sx={styles.legend}>Year

        <Box px={6}>
            <RangeSlider aria-label={['min', 'max']} defaultValue={[2010, 2022]} min={2010} max={2022} step={1} onChangeEnd={(val) => handleChangePrice(val)}>
                <RangeSliderTrack bg='lightgray'>
                    <RangeSliderFilledTrack bg='gray5' />
                </RangeSliderTrack>
                <RangeSliderThumb boxSize={10} index={0}>
                    <Box color='gray5' as={BiChevronLeftCircle} boxSize={10} />
                </RangeSliderThumb>
                <RangeSliderThumb boxSize={10} index={1}>
                    <Box color='gray5' as={BiChevronRightCircle} boxSize={10} />
                </RangeSliderThumb>
            </RangeSlider>
        </Box>
        <Flex>
            <Box px='4'>
                {minYear}
            </Box>
            <Spacer />
            <Box px='4'>
                {maxYear}
            </Box>
        </Flex>
    </FormControl>

Link to Reproduction

dont have link

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Chakra UI Version

2.2.4

Browser

No response

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

Description

Hey! Lover of Chakra here, huge respect for this project ♥️

So I've always wondered why there's only a Heading component, I get that you can set the "as" attribute for h1, h2, h3, etc... but styling this seems awkward unless I'm missing something.

Essentially, what I'd like to do is:

<Heading variant="h1">
<Heading variant="h2">
<Heading variant="h3">
<Heading variant="h4">
<Heading variant="h5">

And automatically make the variant set my styles and the as attribute to the respective header level.

I've tried this in the theme:

  variants: {
    h1: { fontSize: "2xl", as: "h1" },
    h2: { fontSize: "xl", as: "h2" },
    h3: { fontSize: "lg", as: "h3" },
    h4: { fontSize: "md", as: "h4" },
    h5: { fontSize: "sm", as: "h5" },
    h6: { fontSize: "sm", as: "h6" },
  },

But the resulting HTML shows each heading as a h2.

For now I can just write this:

<Heading as="h1" variant="h1">
<Heading as="h2" variant="h2">
<Heading as="h3" variant="h3">
<Heading as="h4" variant="h4">
<Heading as="h5" variant="h5">

Which is fine but I can imagine forgetting to add this repetition from time to time.

What I think is going on here is that Chakra's theming allows changing styles only, but not changing the underlying element type. If this is the case, this totally makes sense and I can imagine there may be some complexity in allowing themes to change the resulting element type.

So I'm wondering if there's a way I can drive the styles from the as prop instead of a variant.

Anyway, thanks!

Problem Statement/Justification

It would make semantic heading levels easier to style and use.

Proposed Solution or API

Allow themes to set as or allow themes to derive styles from as.

Alternatives

My alternative is quite simple, just create my own custom components , etc... which I'm quite happy to do!

Additional Information

No response

Description

After the browser's translation function is enabled, the official website https://chakra-ui.com/getting-started/with-framer will crash If the official website is developed with chakra-ui, it is a bug in chakra-ui

Link to Reproduction

https://chakra-ui.com/getting-started/with-framer

Steps to reproduce

1. Go to 'open url https://chakra-ui.com/getting-started/with-framer'
2. Click on '翻译成中文'
3. wait or click somthing of the website
4. See error crash

Chakra UI Version

0

Browser

Microsoft Edge 108.0.1462.54

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [c5be1bc73]:
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [c5be1bc73]:
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [c5be1bc73]:
  • @chakra-ui/[email protected]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [c5be1bc73]:
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [c5be1bc73]:
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]

@chakra-ui/[email protected]

Patch Changes

• #6905 c5be1bc73 Thanks @bertho-zero! - Fixed issue where style overrides does not respect order of precedence due to the use of Object.assign.

  To illustrate the issue, consider the following example:

  const stylesFromTheme = {
    px: 8,
    padding: 0,
  }
  
  const stylesFromProps = {
    px: 4,
  }
  
  const style = Object.assign({}, stylesFromTheme, stylesFromProps)
  // Result: { px: 4, padding: 0 }
  // Expected: { padding: 0, px: 4 }
  

  The issue is that Object.assign will replace properties in place with values from the override objects. This is not the desired behavior for style overrides hence a custom assignAfter function is used instead

• Updated dependencies [c5be1bc73]:

  • @chakra-ui/[email protected]
  • @chakra-ui/[email protected]

@chakra-ui/[email protected]

Patch Changes

• #6905 c5be1bc73 Thanks @bertho-zero! - Fixed issue where style overrides does not respect order of precedence due to the use of Object.assign.

  To illustrate the issue, consider the following example:

  const stylesFromTheme = {
    px: 8,
    padding: 0,
  }
  
  const stylesFromProps = {
    px: 4,
  }
  
  const style = Object.assign({}, stylesFromTheme, stylesFromProps)
  // Result: { px: 4, padding: 0 }
  // Expected: { padding: 0, px: 4 }
  

  The issue is that Object.assign will replace properties in place with values from the override objects. This is not the desired behavior for style overrides hence a custom assignAfter function is used instead

@chakra-ui/[email protected]

Patch Changes

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

@chakra-ui/[email protected]

Patch Changes

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

Description

Expected base style for Card component to be overwritten however, there's some inconsistencies-- i.e. works for bg and fontWeight, but not for borderRadius and shadow.

Please see commented lines: https://codesandbox.io/s/elastic-varahamihira-uhz824?file=/src/theme.js

Link to Reproduction

https://codesandbox.io/s/elastic-varahamihira-uhz824?file=/src/theme.js

Steps to reproduce

No response

Chakra UI Version

2.4.6

Browser

No response

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

No response