chore: update chakra ui

Author: estheragbaje

Diff for: contentlayer.config.ts

@@ -126,6 +126,7 @@ const Changelog = defineDocumentType(() => ({
   fields: {
     title: { type: 'string', required: true },
     description: { type: 'string', required: true },
+    slug: { type: 'string' },
   },
   computedFields: {
     frontMatter: {

Diff for: next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

Diff for: package.json

@@ -23,16 +23,16 @@
     "@chakra-ui/cli": "1.6.0",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/props-docs": "1.0.40",
-    "@chakra-ui/react": "1.7.2",
+    "@chakra-ui/react": "1.7.3",
     "@chakra-ui/skip-nav": "^1.2.1",
     "@chakra-ui/theme-tools": "1.3.1",
     "@chakra-ui/utils": "1.9.1",
     "@docsearch/react": "^1.0.0-alpha.27",
     "@docusaurus/utils": "^2.0.0-alpha.69",
-    "@emotion/react": "^11.6.0",
+    "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@octokit/rest": "^18.12.0",
-    "contentlayer": "^0.0.32",
+    "contentlayer": "^0.0.33",
     "date-fns": "^2.25.0",
     "docsearch.js": "^2.6.3",
     "focus-visible": "5.2.0",
@@ -44,11 +44,11 @@
     "markdown-toc": "^1.2.0",
     "match-sorter": "^6.3.1",
     "mdx-bundler": "^7.0.0",
-    "next": "^12.0.4",
-    "next-contentlayer": "^0.0.32",
+    "next": "^12.0.7",
+    "next-contentlayer": "^0.0.33",
     "next-seo": "^4.28.1",
     "octokit": "^1.7.1",
-    "prism-react-renderer": "^1.1.1",
+    "prism-react-renderer": "^1.2.1",
     "puppeteer": "^11.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -60,7 +60,7 @@
     "react-responsive-masonry": "^2.1.4",
     "react-spinners": "^0.11.0",
     "react-table": "^7.7.0",
-    "remark": "^14.0.1",
+    "remark": "^14.0.2",
     "remark-emoji": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "remark-slug": "^7.0.1",
@@ -72,9 +72,9 @@
   },
   "devDependencies": {
     "@types/github-slugger": "^1.3.0",
-    "@types/node": "^16.11.7",
+    "@types/node": "^16.11.12",
     "@types/puppeteer": "^5.4.4",
-    "@types/react": "^17.0.35",
+    "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/sharp": "^0.29.4",
     "babel-plugin-superjson-next": "^0.4.2",

Diff for: pages/changelog/content.mdx

@@ -1,6 +1,7 @@
 ---
 title: Changelog
 description: The changelog for Chakra UI React
+slug: "/changelog"
 ---
 
 The Changelog gives an overview of the meaningful changes we've made to Chakra
@@ -14,6 +15,138 @@ To better understand the changelog, here are some legends we use:
 - 🐛 Bug fix
 - 🛠 Refactor
 
+
+
+## 09-12-2021
+
+`@chakra-ui/[email protected]`
+
+- Update storybook url configuration for `@chakra-ui/react` to
+  [https://storybook.chakra-ui.com](https://storybook.chakra-ui.com)
+
+**Layout** `v1.6.0`
+
+- Add support for style props `gap`, `columnGap` and `rowGap`. Those CSS
+  properties are valid in a grid or flex context
+
+> For further information see
+> [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+
+- Fix TS issue with Grid component due to the native `gap`, `rowGap` and
+  `columnGap` we added to styled system.
+
+**Styled System** `v1.15.0`
+
+- Add support for style props `gap`, `columnGap` and `rowGap`. Those CSS
+  properties are valid in a grid or flex context
+
+> For further information see
+> [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+
+- Fix issue where `bgGradient` parser doesn't work when a position is specified
+- Fix issue where tokens autocomplete don't show up anymore except user runs the
+  cli command.
+- Fixed issue where multi-value `inset` property doesn't work.
+
+**Menu** `v1.8.2`
+
+- Fix issue where `enabled` TS type was exposed to popover and menu from
+  `UsePopperProps`. This was resolved by omitting `enabled` from the type
+
+**Popover** `v1.11.0`
+
+- Fix issue where `enabled` TS type was exposed to popover and menu from
+  `UsePopperProps`. This was resolved by omitting `enabled` from the type
+- Fix issue where `Popover` will be `display:none` when inner element focused.
+- Add `PopoverAnchor` component which allows you to set the `Popover` reference
+  point without acting as a trigger.
+
+```jsx live=false
+<Popover>
+  {/* triggers the popover to open/close */}
+  <PopoverTrigger>
+    <button>Trigger</button>
+  </PopoverTrigger>
+  {/* popover will be positioned relative to this */}
+  <PopoverAnchor>
+    <Box width="40px" height="40px" />
+  </PopoverAnchor>
+  <PopoverContent>Hello World</PopoverContent>
+</Popover>
+```
+
+**Input** `v1.3.2`
+
+- Fixed an issue where `InputGroup` passes undefined `size` and `variant` props
+  which overrides the ones defined by default in a custom `Input` component.
+
+**System** `v1.8.3`
+
+- Allow retrieving breakpoint tokens when using useToken
+
+**Theme** `v1.12.2`
+
+- Fix issue where tokens autocomplete don't show up anymore except user runs the
+  cli command.
+
+**Toast** `v1.5.0`
+
+- The `toast` function now exposes a `containerStyle` property you can use to
+  override the default styles for the toast container.
+
+```jsx live=false
+function Example() {
+  // Via instantiation
+  const toast = useToast({
+    position: "top",
+    title: "Container style is customizable",
+    containerStyle: {
+      maxWidth: "100%",
+    },
+  })
+
+  // Or via trigger
+  return (
+    <Button
+      onClick={() => {
+        toast({
+          containerStyle: {
+            maxWidth: "100%",
+          },
+        })
+      }}
+    >
+      Click me to show toast with custom container style.
+    </Button>
+  )
+}
+```
+
+- Fix TS issue with toast placement utility
+
+**Tooltip** `v1.4.2`
+
+- Prevent `onKeyDown` callback from de/registering on every call of `useTooltip`
+
+**Media Query** `v1.2.2`
+
+- Improved performance and behavior of `useMediaQuery` hook.
+
+**Transition** `v1.4.2`
+
+- Fixed issue where the `ref` of `Slider` returns `null` due to prop override
+
+**Icon** `v2.0.0`
+
+- Auto assign `key` when passing array of paths to `createIcon`
+
+```jsx live=false
+const HeartIcon = createIcon({
+  displayName: "HeartIcon",
+  path: [<path stroke="none" d="..." fill="none" />, <path d="..." />],
+})
+```
+
 ## 17-11-2021
 
 **Props Docs** `v1.0.40`
@@ -76,10 +209,10 @@ Here's how to resolve it:
 
 ```jsx live=false
 // Won't work 🎇
-import { useOutsideClick } from '@chakra-ui/hooks/dist/use-outside-click'
+import { useOutsideClick } from "@chakra-ui/hooks/dist/use-outside-click"
 
 // Works ✅
-import { useOutsideClick } from '@chakra-ui/hooks'
+import { useOutsideClick } from "@chakra-ui/hooks"
 ```
 
 If this affected your project, we recommend that you import hooks, functions or
@@ -489,10 +622,10 @@ theme but we promise to revisit the typings and API very soon.
 Creating a CSS variable in the theme
 
 ```jsx live=false
-import { cssVar, calc } from '@chakra-ui/theme-tools'
+import { cssVar, calc } from "@chakra-ui/theme-tools"
 
-const $width = cssVar('slider-width')
-const $height = cssVar('slider-height')
+const $width = cssVar("slider-width")
+const $height = cssVar("slider-height")
 
 const $diff = calc($width).subtract($height).toString()
 
@@ -562,7 +695,7 @@ type-safe, multipart component styles.
   root FormControl element to be themed.
 
 ```jsx live=false
-import { extendTheme } from '@chakra-ui/react'
+import { extendTheme } from "@chakra-ui/react"
 
 export const theme = extendTheme({
   components: {
@@ -572,8 +705,8 @@ export const theme = extendTheme({
         custom: {
           // style the root `FormControl` element
           container: {
-            color: 'white',
-            bg: 'blue.900',
+            color: "white",
+            bg: "blue.900",
           },
         },
       },
@@ -755,7 +888,7 @@ export or an export named `theme`.
 
 ```jsx live=false
 // chakra-theme-package/src/index.js
-import { extendTheme } from '@chakra-ui/react'
+import { extendTheme } from "@chakra-ui/react"
 
 const theme = extendTheme({})
 
@@ -887,7 +1020,7 @@ To use this API, you'll need to set `transform` to `auto` or `auto-gpu` (for the
 GPU accelerated version).
 
 ```jsx live=false
-<Circle transform='auto' translateX='4' _hover={{ translateX: '8' }}>
+<Circle transform="auto" translateX="4" _hover={{ translateX: "8" }}>
   <CheckIcon />
 </Circle>
 ```
@@ -1100,35 +1233,35 @@ import {
   withDefaultSize,
   withDefaultVariant,
   withDefaultProps,
-} from '@chakra-ui/react'
+} from "@chakra-ui/react"
 
 const customTheme = extendTheme(
   {
     colors: {
       brand: {
         // ...
-        500: '#b4d455',
+        500: "#b4d455",
         // ...
       },
     },
   },
-  withDefaultColorScheme({ colorScheme: 'brand' }),
+  withDefaultColorScheme({ colorScheme: "brand" }),
   withDefaultSize({
-    size: 'lg',
-    components: ['Input', 'NumberInput', 'PinInput'],
+    size: "lg",
+    components: ["Input", "NumberInput", "PinInput"],
   }),
   withDefaultVariant({
-    variant: 'outline',
-    components: ['Input', 'NumberInput', 'PinInput'],
+    variant: "outline",
+    components: ["Input", "NumberInput", "PinInput"],
   }),
   // or all in one:
   withDefaultProps({
     defaultProps: {
-      colorScheme: 'brand',
-      variant: 'outline',
-      size: 'lg',
+      colorScheme: "brand",
+      variant: "outline",
+      size: "lg",
     },
-    components: ['Input', 'NumberInput', 'PinInput'],
+    components: ["Input", "NumberInput", "PinInput"],
   }),
   // optional:
   yourCustomBaseTheme, // defaults to our chakra default theme
@@ -1175,7 +1308,7 @@ const customTheme = extendTheme(
   or `end`.
 
 ```jsx live=false
-<Button isLoading spinnerPlacement='end'>
+<Button isLoading spinnerPlacement="end">
   Click me
 </Button>
 ```
@@ -1437,7 +1570,7 @@ Popover
 - 🐛 Use `--popover-bg` css property to control popover and arrow background.
 
 ```jsx live=false
-<PopoverContent style={{ '--popover-bg': 'purple' }}>
+<PopoverContent style={{ "--popover-bg": "purple" }}>
   <PopoverArrow />
 </PopoverContent>
 ```
@@ -1557,9 +1690,9 @@ Table
 ```jsx live=false
 <Box
   sx={{
-    '--banner-color': 'colors.red.200',
-    '& .banner': {
-      bg: 'var(--banner-color)',
+    "--banner-color": "colors.red.200",
+    "& .banner": {
+      bg: "var(--banner-color)",
     },
   }}
 />
@@ -1777,7 +1910,7 @@ Table
   `extendTheme` function even further.
 
 ```jsx live=false
-import { extendTheme } from '@chakra-ui/react'
+import { extendTheme } from "@chakra-ui/react"
 
 export const customTheme = extendTheme({
   // here you get autocomplete for
@@ -1819,13 +1952,13 @@ You can get typesafe access to your custom theme like this:
 const theme = {
   textStyles: {
     caps: {
-      fontWeight: 'bold',
-      fontSize: '24px',
+      fontWeight: "bold",
+      fontSize: "24px",
     },
   },
 }
 
-const styles = css({ textStyle: 'caps' })(theme)
+const styles = css({ textStyle: "caps" })(theme)
 ```
 
 This also works for the component theme as well.