Merge pull request #336 from csandman/fix/switch-to-chakra-ui-react-i…

…mports

.eslintrc

@@ -56,6 +56,7 @@
         "unnamedComponents": "arrow-function"
       }
     ],
+    "react/react-in-jsx-scope": "off",
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/consistent-type-imports": [
       "warn",

package.json

@@ -16,8 +16,7 @@
     ".": {
       "module": "./dist/index.mjs",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -42,55 +41,43 @@
     "start": "nodemon --watch src --exec npm run build -e ts,tsx"
   },
   "dependencies": {
-    "react-select": "5.8.0"
+    "react-select": "5.8.1"
   },
   "peerDependencies": {
-    "@chakra-ui/form-control": "^2.0.0",
-    "@chakra-ui/icon": "^3.0.0",
-    "@chakra-ui/layout": "^2.0.0",
-    "@chakra-ui/media-query": "^3.0.0",
-    "@chakra-ui/menu": "^2.0.0",
-    "@chakra-ui/spinner": "^2.0.0",
-    "@chakra-ui/system": "^2.0.0",
+    "@chakra-ui/react": "2.x",
     "@emotion/react": "^11.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.15.4",
-    "@chakra-ui/form-control": "^2.2.0",
-    "@chakra-ui/icon": "^3.2.0",
-    "@chakra-ui/layout": "^2.3.1",
-    "@chakra-ui/media-query": "^3.3.0",
-    "@chakra-ui/menu": "^2.2.1",
-    "@chakra-ui/spinner": "^2.1.0",
-    "@chakra-ui/system": "^2.6.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@arethetypeswrong/cli": "^0.16.4",
+    "@chakra-ui/react": "^2.10.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.11",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "nodemon": "^3.1.4",
-    "prettier": "^3.3.2",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "nodemon": "^3.1.7",
+    "prettier": "^3.3.3",
     "prettier-package-json": "^2.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tsup": "^8.1.0",
-    "typescript": "^5.5.2"
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3"
   },
   "keywords": [
     "accessibility",

src/chakra-components/containers.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-import { Box } from "@chakra-ui/layout";
-import type { SystemStyleObject } from "@chakra-ui/system";
-import { useMultiStyleConfig } from "@chakra-ui/system";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import type { SystemStyleObject } from "@chakra-ui/react";
 import type {
   ContainerProps,
   GroupBase,

src/chakra-components/control.tsx

@@ -1,10 +1,12 @@
-import React from "react";
-import type { IconProps } from "@chakra-ui/icon";
-import { Icon } from "@chakra-ui/icon";
-import { Box, Divider } from "@chakra-ui/layout";
-import { Spinner } from "@chakra-ui/spinner";
-import { useMultiStyleConfig, useStyleConfig } from "@chakra-ui/system";
-import type { SystemStyleObject } from "@chakra-ui/system";
+import type { IconProps, SystemStyleObject } from "@chakra-ui/react";
+import {
+  Box,
+  Divider,
+  Icon,
+  Spinner,
+  useMultiStyleConfig,
+  useStyleConfig,
+} from "@chakra-ui/react";
 import type {
   ClearIndicatorProps,
   ControlProps,

src/chakra-components/input.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-import { Box } from "@chakra-ui/layout";
-import type { SystemStyleObject } from "@chakra-ui/system";
-import { chakra } from "@chakra-ui/system";
+import { Box, chakra } from "@chakra-ui/react";
+import type { SystemStyleObject } from "@chakra-ui/react";
 import type { GroupBase, InputProps } from "react-select";
 import { cleanCommonProps } from "../utils";
 

src/chakra-components/menu.tsx

@@ -1,8 +1,11 @@
-import React from "react";
-import { Box } from "@chakra-ui/layout";
-import { Menu as ChakraMenu, MenuIcon } from "@chakra-ui/menu";
-import type { PropsOf, SystemStyleObject } from "@chakra-ui/system";
-import { useColorModeValue, useMultiStyleConfig } from "@chakra-ui/system";
+import {
+  Box,
+  Menu as ChakraMenu,
+  MenuIcon,
+  useColorModeValue,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import type { PropsOf, SystemStyleObject } from "@chakra-ui/react";
 import type {
   CoercedMenuPlacement,
   GroupBase,

src/chakra-components/multi-value.tsx

@@ -1,9 +1,5 @@
-import React from "react";
-import type { IconProps } from "@chakra-ui/icon";
-import { Icon } from "@chakra-ui/icon";
-import { Box } from "@chakra-ui/layout";
-import type { SystemStyleObject } from "@chakra-ui/system";
-import { chakra, useMultiStyleConfig } from "@chakra-ui/system";
+import type { IconProps, SystemStyleObject } from "@chakra-ui/react";
+import { Box, Icon, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import type {
   GroupBase,
   MultiValueGenericProps,

src/chakra-components/placeholder.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { Box } from "@chakra-ui/layout";
-import type { SystemStyleObject } from "@chakra-ui/system";
+import { Box } from "@chakra-ui/react";
+import type { SystemStyleObject } from "@chakra-ui/react";
 import type { GroupBase, PlaceholderProps } from "react-select";
 
 const Placeholder = <

src/chakra-components/single-value.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { Box } from "@chakra-ui/layout";
-import type { SystemStyleObject } from "@chakra-ui/system";
+import { Box } from "@chakra-ui/react";
+import type { SystemStyleObject } from "@chakra-ui/react";
 import type { GroupBase, SingleValueProps } from "react-select";
 
 const SingleValue = <

src/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import type { SystemStyleObject } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/react";
 import type { GroupBase, StylesConfig, ThemeConfig } from "react-select";
 import type {
   ChakraStylesConfig,

src/select/async-creatable-select.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import type { GroupBase, SelectInstance } from "react-select";
 import AsyncCreatableReactSelect from "react-select/async-creatable";

src/select/async-select.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import type { GroupBase, SelectInstance } from "react-select";
 import AsyncReactSelect from "react-select/async";

src/select/creatable-select.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import type { GroupBase, SelectInstance } from "react-select";
 import CreatableReactSelect from "react-select/creatable";

src/select/select.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import type { MutableRefObject, ReactElement, RefAttributes } from "react";
 import ReactSelect from "react-select";
 import type { GroupBase, Props, SelectInstance } from "react-select";

src/types.ts

@@ -3,7 +3,7 @@ import type {
   ResponsiveObject,
   SystemStyleObject,
   ThemeTypings,
-} from "@chakra-ui/system";
+} from "@chakra-ui/react";
 import type {
   ClearIndicatorProps,
   ContainerProps,

src/use-chakra-select-props.ts

@@ -1,5 +1,4 @@
-import { useFormControl } from "@chakra-ui/form-control";
-import { useTheme } from "@chakra-ui/system";
+import { useFormControl, useTheme } from "@chakra-ui/react";
 import type { GroupBase, Props } from "react-select";
 import chakraComponents from "./chakra-components";
 import type { SelectedOptionStyle } from "./types";

src/utils.ts

@@ -1,5 +1,4 @@
-import { useBreakpointValue } from "@chakra-ui/media-query";
-import { useTheme } from "@chakra-ui/system";
+import { useBreakpointValue, useTheme } from "@chakra-ui/react";
 import type { CommonPropsAndClassName, GroupBase } from "react-select";
 import type { Size, SizeProp } from "./types";
 

tsconfig.json

@@ -1,18 +1,26 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
     "declaration": true,
     "sourceMap": true,
-    "moduleResolution": "node10",
-    "strict": true,
-    "isolatedModules": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "react-jsx",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
     "forceConsistentCasingInFileNames": true
   },
   "include": ["src"],