Merge branch 'feat/theming' into aria-role-fix

.eslintignore

@@ -1,3 +1,5 @@
 node_modules/
 dist/
 tmp/
+codemod/**/*.js
+codemod/**/*.d.ts

.eslintrc

@@ -63,5 +63,16 @@
         }
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["codemod/**/*.ts"],
+      "rules": {
+        "no-console": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "import/no-dynamic-require": "off",
+        "global-require": "off"
+      }
+    }
+  ]
 }

.github/workflows/build.yml

@@ -19,11 +19,11 @@ jobs:
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
           cache: "npm"
 
       - name: Install Dependencies
-        run: npm install
+        run: npm ci
 
       - name: Build package
         run: npm run build --if-present

.github/workflows/lint.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 16
           cache: "npm"
 
       - name: Install Dependencies

README.md

@@ -65,6 +65,7 @@ https://react-select.com/home
     - [Caveats](#caveats)
     - [Examples](#examples)
   - [Theme Styles](#theme-styles)
+  - [Extending the Theme](#extending-the-theme)
   - [`className`](#classname)
 - [TypeScript Support](#typescript-support)
 - [Customizing Components](#customizing-components)
@@ -681,6 +682,129 @@ color scheme will also be reflected in these custom components.
 appear in all instances of that component. Otherwise, just change the individual
 components' styles using the `chakraStyles` prop.
 
+### Extending the Theme
+
+As of `v5.0.0`, it is now possible to customize your Select instances globally
+by extending the Chakra theme! These theme styles are layered on top of the
+theme styles pulled from other Chakra components, for backwards compatibility's
+sake, but will always override those. They will also be overridden by any styles
+passed into [`chakraStyles`](#chakrastyles), so it's somewhat of the middle
+layer of styles.
+
+The theme styles can be defined using Chakra's
+[multipart component style config](https://chakra-ui.com/docs/styled-system/component-style#styling-multipart-components).
+
+There are a few ways these theme styles can be written, either with static style
+objects/functions, or with the `createMultiStyleConfigHelpers` function which
+gives you a couple other helper functions to define your styles in a more
+type-safe way. The documentation on these style definitions is a bit sparse, so
+I highly recommend looking at the source code for some of the built in Chakra
+component themes for further examples:
+
+- `Input` -
+  https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts
+- `Tag` -
+  https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts
+- `Menu` -
+  https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts
+
+Every key that can be used in the `chakraStyles` object can also be used for the
+theme styles. Here's an example of how it can be implemented:
+
+```tsx
+import { createMultiStyleConfigHelpers, extendTheme } from "@chakra-ui/react";
+import { chakraReactSelectAnatomy } from "chakra-react-select";
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(chakraReactSelectAnatomy.keys);
+
+const ChakraReactSelect = defineMultiStyleConfig({
+  baseStyle: definePartsStyle({
+    clearIndicator: {},
+    container: {},
+    control: {},
+    dropdownIndicator: {},
+    downChevron: {},
+    crossIcon: {},
+    group: {},
+    groupHeading: {},
+    indicatorsContainer: {},
+    indicatorSeparator: {},
+    input: {},
+    inputContainer: {},
+    loadingIndicator: {},
+    loadingMessage: {},
+    menu: {},
+    menuList: {},
+    multiValue: {},
+    multiValueLabel: {},
+    multiValueRemove: {},
+    noOptionsMessage: {},
+    option: {},
+    placeholder: {},
+    singleValue: {},
+    valueContainer: {},
+  }),
+  sizes: {
+    sm: definePartsStyle((props) => {
+      // All of the select props are passed into these style functions
+      // and can be used to modify your final styles.
+      const { colorScheme: c } = props;
+
+      return {
+        control: {
+          bg: `colors.${c}.100`,
+        },
+      };
+    }),
+    md: definePartsStyle({
+      control: {},
+      // ...
+    }),
+    lg: definePartsStyle({
+      control: {},
+      // ...
+    }),
+  },
+  variants: {
+    outline: definePartsStyle({
+      control: {},
+      // ...
+    }),
+    filled: definePartsStyle({
+      // ...
+    }),
+    flushed: definePartsStyle({
+      // ...
+    }),
+    unstyled: definePartsStyle({
+      // ...
+    }),
+  },
+  defaultProps: {
+    size: "md",
+    variant: "outline",
+  },
+});
+
+const theme = extendTheme({
+  components: {
+    ChakraReactSelect,
+  },
+});
+
+const Root = () => {
+  return (
+    <ChakraProvider theme={theme}>
+      <App />
+    </ChakraProvider>
+  );
+};
+```
+
+When calling `createMultiStyleConfigHelpers` you should only include the keys
+for the theme styles actually intend to use
+
 ### `className`
 
 This package implements the same classNames on the sub components as the

codemod/.gitignore

@@ -0,0 +1,4 @@
+dist
+*.d.ts
+*.js
+*.js.map

codemod/README.md

@@ -0,0 +1,55 @@
+# Chakra React Select Codemods
+
+A collection (only one for now) of Codemod transformations to help you upgrade
+your codebase when a Chakra React Select feature is deprecated.
+
+Codemods are transformations that run on your codebase programmatically. This
+allows for a large amount of changes to be applied without having to manually go
+through every file.
+
+These codemods are based on
+[the codemods offered by Next.js](https://github.com/vercel/next.js/tree/canary/packages/next-codemod),
+and are written using [`jscodeshift`](https://github.com/facebook/jscodeshift).
+
+## Usage
+
+In your terminal, navigate (`cd`) into your project's folder, then run:
+
+```sh
+npx crs-codemod <transform> <path>
+```
+
+Replacing `<transform>` and `<path>` with appropriate values.
+
+- `transform` - name of transform
+- `path` - files or directory to transform
+- `--dry` Do a dry-run, no code will be edited
+- `--print` Prints the changed output for comparison
+
+## Chakra React Select Codemods
+
+### Version 5 (`v5`)
+
+```sh
+npx crs-codemod v5 .
+# or
+npx crs-codemod v5 ./src
+```
+
+This codemod runs on all versions of the `Select` component (`Select`,
+`AsyncSelect`, `AsyncCreatableSelect`, `CreatableSelect`), and performs the
+following modifications to your every instance of them:
+
+- Removes the `useBasicStyles` prop.
+  - These styles are now the defaults, so this prop was removed in `v5.0.0`.
+- Renames the prop `selectedOptionColor` to `selectedOptionColorScheme`.
+  - This prop was renamed in
+    [`v4.6.0`](https://github.com/csandman/chakra-react-select/releases/tag/v4.6.0)
+    to reduce confusion about what values can be passed to it. It has been fully
+    removed in `v5.0.0`.
+- Removes the `hasStickyGroupHeaders` prop
+  - This prop was deprecated in
+    [`v4.6.0`](https://github.com/csandman/chakra-react-select/releases/tag/v4.6.0)
+    as well due to it not working properly with keyboard navigation, and being
+    outside the scope of the intentions for this project. It has also been fully
+    removed in `v5.0.0`.