diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js index dcd50f86f..3f067e878 100644 --- a/.storybook/postcss.config.js +++ b/.storybook/postcss.config.js @@ -1,5 +1,4 @@ const path = require("path"); -const convertImports = require("postcss-import"); const scopify = require("postcss-scopify"); const { kebabCase } = require("lodash"); @@ -27,5 +26,5 @@ function addIdScope() { module.exports = { exec: true, - plugins: [convertImports(), rewriteRootRule(), addIdScope()], + plugins: [rewriteRootRule(), addIdScope()], }; diff --git a/babel.config.js b/babel.config.js index 6a575ec70..09c3bb7e0 100644 --- a/babel.config.js +++ b/babel.config.js @@ -23,7 +23,7 @@ module.exports = function (api) { const plugins = [ "date-fns", - "babel-plugin-chakra-ui", + "@chakra-ui/babel-plugin", "@babel/plugin-proposal-class-properties", ]; diff --git a/package.json b/package.json index c0da00e32..55ca05c9f 100644 --- a/package.json +++ b/package.json @@ -53,12 +53,12 @@ "tsd": "tsd" }, "dependencies": { - "@chakra-ui/counter": "1.0.0-rc.7", - "@chakra-ui/hooks": "1.0.0-rc.7", - "@chakra-ui/utils": "1.0.0-rc.7", + "@chakra-ui/counter": "1.0.0", + "@chakra-ui/hooks": "1.0.0", + "@chakra-ui/utils": "1.0.0", "@react-aria/button": "3.2.2", "@react-aria/i18n": "3.1.3", - "@react-aria/interactions": "^3.3.0", + "@react-aria/interactions": "^3.3.1", "@react-aria/utils": "3.4.0", "date-fns": "2.16.1", "reakit-system": "0.15.0", @@ -70,39 +70,39 @@ "@babel/core": "7.12.3", "@babel/plugin-proposal-class-properties": "7.12.1", "@babel/preset-env": "7.12.1", - "@babel/preset-react": "7.12.1", + "@babel/preset-react": "7.12.5", "@babel/preset-typescript": "7.12.1", + "@chakra-ui/babel-plugin": "1.0.0", "@commitlint/cli": "11.0.0", "@commitlint/config-conventional": "11.0.0", - "@storybook/addon-a11y": "6.0.28", - "@storybook/addon-actions": "6.0.28", - "@storybook/addon-essentials": "6.0.28", - "@storybook/react": "6.0.28", - "@testing-library/jest-dom": "^5.11.5", - "@testing-library/react": "11.1.0", + "@emotion/css": "11.0.0", + "@storybook/addon-a11y": "6.1.1", + "@storybook/addon-actions": "6.1.1", + "@storybook/addon-essentials": "6.1.1", + "@storybook/react": "6.1.1", + "@testing-library/jest-dom": "^5.11.6", + "@testing-library/react": "11.2.1", "@testing-library/react-hooks": "3.4.2", - "@testing-library/user-event": "12.1.10", + "@testing-library/user-event": "12.2.2", "@types/jest": "26.0.15", "@types/jest-axe": "3.5.1", "@types/jest-in-case": "1.0.3", "@types/mockdate": "^2.0.0", - "@types/react": "16.9.55", + "@types/react": "16.9.56", "@types/react-dom": "16.9.9", "@types/react-transition-group": "4.4.0", "@types/testing-library__jest-dom": "5.9.5", - "@typescript-eslint/eslint-plugin": "4.6.0", - "@typescript-eslint/parser": "4.6.0", + "@typescript-eslint/eslint-plugin": "4.8.1", + "@typescript-eslint/parser": "4.8.1", "babel-eslint": "10.1.0", - "babel-jest": "^26.6.1", - "babel-loader": "^8.1.0", - "babel-plugin-chakra-ui": "1.0.0-rc.7", + "babel-jest": "^26.6.3", + "babel-loader": "^8.2.1", "babel-plugin-date-fns": "^2.0.0", "chalk": "4.1.0", "concurrently": "5.3.0", "conventional-github-releaser": "3.1.5", "cross-env": "7.0.2", - "emotion": "10.0.27", - "eslint": "7.12.1", + "eslint": "7.13.0", "eslint-config-prettier": "6.15.0", "eslint-config-react-app": "6.0.0", "eslint-plugin-flowtype": "5.2.0", @@ -115,37 +115,36 @@ "glob": "^7.1.6", "glob-fs": "^0.1.7", "husky": "4.3.0", - "jest": "26.6.1", + "jest": "26.6.3", "jest-axe": "4.1.0", "jest-in-case": "1.0.2", - "jest-matcher-utils": "26.6.1", + "jest-matcher-utils": "26.6.2", "lint-staged": "10.5.1", "lodash": "4.17.20", "mockdate": "^3.0.2", "outdent": "^0.7.1", - "postcss-import": "^12.0.1", "postcss-scopify": "^0.1.9", - "prettier": "2.1.2", + "prettier": "2.2.0", "raw-loader": "^4.0.2", "react": "16.14.0", "react-dom": "16.14.0", - "react-hook-form": "6.10.1", + "react-hook-form": "6.11.3", "react-is": "^16.13.1", "react-spring": "8.0.27", "react-test-renderer": "16.14.0", "react-transition-group": "4.4.1", - "react-virtual": "^2.3.1", + "react-virtual": "^2.3.2", "reakit": "1.3.0", - "reakit-test-utils": "0.14.5", + "reakit-test-utils": "0.15.0", "rimraf": "3.0.2", - "sort-package-json": "1.46.1", + "sort-package-json": "1.47.0", "standard-version": "9.0.0", "storybook-addon-preview": "^2.1.0", - "ts-jest": "26.4.3", - "ts-morph": "8.1.2", + "ts-jest": "26.4.4", + "ts-morph": "8.2.0", "ts-node": "^9.0.0", "tsd": "^0.13.1", - "typescript": "4.0.5" + "typescript": "4.1.2" }, "peerDependencies": { "react": "^16.8.0", diff --git a/src/accordion/AccordionState.ts b/src/accordion/AccordionState.ts index cb98b4a72..676772c49 100644 --- a/src/accordion/AccordionState.ts +++ b/src/accordion/AccordionState.ts @@ -1,6 +1,6 @@ import * as React from "react"; import { useCompositeState } from "reakit"; -import { useControllableState } from "@chakra-ui/hooks"; + import { SelectedIdPair, AccordionState, @@ -12,6 +12,7 @@ import { AccordionInitialStateMulti, AccordionInitialStateSingle, } from "./types"; +import { useControllableState } from "../utils"; export type AccordionStateReturn = AccordionActions & AccordionState & @@ -69,7 +70,6 @@ export function useAccordionState( defaultValue: defaultSelectedId, value: selectedIdProp, onChange: onSelectedIdChange, - shouldUpdate: (prev, next) => prev !== next, }); // Multiple toggle accordion State @@ -77,7 +77,6 @@ export function useAccordionState( defaultValue: defaultSelectedIds, value: selectedIdsProp, onChange: onSelectedIdsChange, - shouldUpdate: (prev, next) => prev !== next, }); const composite = useCompositeState({ @@ -104,7 +103,14 @@ export function useAccordionState( }, // eslint-disable-next-line react-hooks/exhaustive-deps - [props.allowMultiple, allowToggle, composite.move, selectedId], + [ + props.allowMultiple, + allowToggle, + composite.move, + selectedId, + setSelectedId, + setSelectedIds, + ], ); const unSelect = React.useCallback( @@ -116,7 +122,7 @@ export function useAccordionState( }, // eslint-disable-next-line react-hooks/exhaustive-deps - [composite.move], + [composite.move, setSelectedIds, props.allowMultiple], ); const panels = useCompositeState(); diff --git a/src/accordion/stories/AccordionBasic.stories.tsx b/src/accordion/stories/AccordionBasic.stories.tsx index a1d2d5f78..86d421e69 100644 --- a/src/accordion/stories/AccordionBasic.stories.tsx +++ b/src/accordion/stories/AccordionBasic.stories.tsx @@ -7,10 +7,9 @@ import { App as Accordion } from "./AccordionBasic.component"; import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates"; -export const Default: React.FC> = args => ; +export const Default: React.FC< + Omit +> = args => ; export default { component: Default, diff --git a/src/accordion/stories/AccordionStyled.stories.tsx b/src/accordion/stories/AccordionStyled.stories.tsx index 7e2f79818..d4dc33ffc 100644 --- a/src/accordion/stories/AccordionStyled.stories.tsx +++ b/src/accordion/stories/AccordionStyled.stories.tsx @@ -12,10 +12,9 @@ import { AccordionInitialState } from "../types"; import { App as Accordion } from "./AccordionStyled.component"; import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; -export const Default: React.FC, - keyof CompositeState ->> = args => ; +export const Default: React.FC< + Omit, keyof CompositeState> +> = args => ; export default { component: Default, diff --git a/src/calendar/CalendarState.ts b/src/calendar/CalendarState.ts index 340be77e6..f362288f4 100644 --- a/src/calendar/CalendarState.ts +++ b/src/calendar/CalendarState.ts @@ -25,12 +25,16 @@ import * as React from "react"; import { unstable_useId as useId } from "reakit"; import { useUpdateEffect } from "@chakra-ui/hooks"; import { useDateFormatter } from "@react-aria/i18n"; -import { useControllableState } from "@chakra-ui/hooks"; import { InputBase, ValueBase } from "@react-types/shared"; +import { + parseDate, + stringifyDate, + isInvalidDateRange, + useControllableState, +} from "../utils"; import { RangeValueBase } from "../utils/types"; import { announce } from "../utils/LiveAnnouncer"; -import { isInvalidDateRange, parseDate, stringifyDate } from "../utils"; import { useWeekStart, useWeekDays, generateDaysInMonthArray } from "./helpers"; export interface CalendarInitialState @@ -70,7 +74,6 @@ export function useCalendarState(props: CalendarInitialState = {}) { value: parseDate(initialDate), defaultValue: parseDate(defaultValueProp), onChange, - shouldUpdate: (prev, next) => prev !== next, }); const minValue = parseDate(minValueProp); diff --git a/src/calendar/RangeCalendarState.ts b/src/calendar/RangeCalendarState.ts index aca461f16..fe6b1332c 100644 --- a/src/calendar/RangeCalendarState.ts +++ b/src/calendar/RangeCalendarState.ts @@ -5,14 +5,13 @@ */ import * as React from "react"; import { format, isSameDay } from "date-fns"; -import { useControllableState } from "@chakra-ui/hooks"; import { InputBase, ValueBase, RangeValue } from "@react-types/shared"; import { makeRange } from "./helpers"; import { RangeValueBase } from "../utils/types"; import { announce } from "../utils/LiveAnnouncer"; import { useCalendarState } from "./CalendarState"; -import { parseRangeDate, stringifyDate } from "../utils"; +import { parseRangeDate, stringifyDate, useControllableState } from "../utils"; export interface RangeCalendarInitialState extends ValueBase>, @@ -50,7 +49,6 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) { value: parseRangeDate(initialDate), defaultValue: parseRangeDate(defaultValueProp), onChange, - shouldUpdate: (prev, next) => prev !== next, }); const dateRange = value != null ? value : null; diff --git a/src/datepicker/DatePickerState.ts b/src/datepicker/DatePickerState.ts index 80787f754..2cedae594 100644 --- a/src/datepicker/DatePickerState.ts +++ b/src/datepicker/DatePickerState.ts @@ -5,13 +5,17 @@ */ import * as React from "react"; -import { useControllableState } from "@chakra-ui/hooks"; import { Validation, ValueBase, ValidationState } from "@react-types/shared"; +import { + parseDate, + stringifyDate, + isInvalidDateRange, + useControllableState, +} from "../utils"; import { useCalendarState } from "../calendar"; import { RangeValueBase } from "../utils/types"; import { SegmentInitialState, useSegmentState } from "../segment"; -import { isInvalidDateRange, parseDate, stringifyDate } from "../utils"; import { PickerBaseInitialState, usePickerBaseState } from "../picker-base"; export interface DatePickerInitialState @@ -50,7 +54,6 @@ export const useDatePickerState = (props: DatePickerInitialState = {}) => { value: parseDate(initialDate), defaultValue: parseDate(defaultValueProp) || new Date(), onChange, - shouldUpdate: (prev, next) => prev !== next, }); const minValue = parseDate(minValueProp); diff --git a/src/datepicker/DateRangePickerState.ts b/src/datepicker/DateRangePickerState.ts index b5e57c20f..12ea26cd8 100644 --- a/src/datepicker/DateRangePickerState.ts +++ b/src/datepicker/DateRangePickerState.ts @@ -8,11 +8,9 @@ import { Validation, ValueBase, RangeValue, - FocusableProps, ValidationState, } from "@react-types/shared"; import * as React from "react"; -import { useControllableState } from "@chakra-ui/hooks"; import { useCompositeState, unstable_useId as useId } from "reakit"; import { @@ -20,6 +18,7 @@ import { stringifyDate, parseRangeDate, isInvalidDateRange, + useControllableState, } from "../utils"; import { makeRange } from "../calendar/helpers"; import { RangeValueBase } from "../utils/types"; @@ -76,7 +75,6 @@ export const useDateRangePickerState = ( end: stringifyDate(new Date()), }), onChange, - shouldUpdate: (prev, next) => prev !== next, }); const minValue = parseDate(minValueProp); diff --git a/src/drawer/stories/Drawer.component.tsx b/src/drawer/stories/Drawer.component.tsx index 6b3472e2b..44f6fcbca 100644 --- a/src/drawer/stories/Drawer.component.tsx +++ b/src/drawer/stories/Drawer.component.tsx @@ -1,9 +1,9 @@ import React from "react"; -import { css } from "emotion"; +import { css } from "@emotion/css"; import { Drawer, - TPlacement, + Placement, useDrawerState, DrawerBackdrop, DrawerCloseButton, @@ -13,14 +13,14 @@ import { export const App = () => { const dialog = useDrawerState({ animated: true }); const inputRef = React.useRef(null); - const [placement, setPlacement] = React.useState("left"); + const [placement, setPlacement] = React.useState("left"); return (
Open Drawer