diff --git a/README.md b/README.md index 0c24f14..147c77e 100644 --- a/README.md +++ b/README.md @@ -32,15 +32,15 @@ Check out these demos: - [Usage](#usage) - [Extra Props](#extra-props) - - [`size`](#size--options-sm-md-lg--default-md) + - [`size`](#size--options-sm--md--lg--default-md) - [`colorScheme`](#colorscheme) - - [`tagVariant`](#tagvariant--options-subtle-solid-outline--default-subtle) + - [`tagVariant`](#tagvariant--options-subtle--solid--outline--default-subtle) - [`isInvalid`](#isinvalid--default-false) - [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500) - [`useBasicStyles`](#usebasicstyles--default-false) - - [`hasStickyGroupHeaders`](#hasstickygroupheaders--default-false) - - [`selectedOptionStyle`](#selectedoptionstyle--options-color-check--default-color) + - [`selectedOptionStyle`](#selectedoptionstyle--options-color--check--default-color) - [`selectedOptionColor`](#selectedoptioncolor--default-blue) + - [`hasStickyGroupHeaders`](#hasstickygroupheaders--default-false) - [`isFixed`](#isfixed) - [Styling](#styling) - [`chakraStyles`](#chakrastyles) @@ -95,13 +95,13 @@ const { } = require("chakra-react-select"); ``` -All of the types and other exports from the original `react-select` package are also exported from this package, so you can import any of them if you need them. +All of exports, including types, from the original `react-select` package are also exported from this package, so you can import any of them if you need them. The only exception is the root `Select` components. -In order to use this component, you can implement it and use it like you would normally use [react-select](https://react-select.com/home). It should accept almost all of the props that the original takes, with a few additions and exceptions listed below. +Implementing this component in your application should be almost identical to how you'd normally use [react-select](https://react-select.com/home). It will accept all of the props that the original package does, with a few additions and exceptions listed below. So if you have a question on basic usage, your best bet is to check the original docs or google "How to (some functionality) with react-select" and just swap out `react-select` for `chakra-react-select`. ## Extra Props -#### `size` — Options: `sm`, `md`, `lg` — Default: `md` +#### `size` — Options: `sm` | `md` | `lg` — Default: `md` You can pass the `size` prop with either `sm`, `md`, or `lg` (default is `md`). These will reflect the sizes available on the [Chakra `` component](https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input) (with the exception of `xs` because it's too small to work). @@ -115,6 +115,8 @@ return ( ); ``` +[![CS-JS]](https://codesandbox.io/s/chakra-react-select-sizes-w9sf8e?file=/example.js) + #### `colorScheme` You can pass the `colorScheme` prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in [the Chakra docs](https://chakra-ui.com/docs/components/tag/props), or if you have a custom color palette, any of the custom color names in that will be available instead. @@ -141,7 +143,9 @@ return ( ); ``` -#### `tagVariant` — Options: `subtle`, `solid`, `outline` — Default: `subtle` +[![CS-JS]](https://codesandbox.io/s/chakra-react-select-color-schemes-c38jlo?file=/example.js) + +#### `tagVariant` — Options: `subtle` | `solid` | `outline` — Default: `subtle` You can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline` (default is `subtle`). These will reflect the `variant` prop available on the [Chakra `` component](https://chakra-ui.com/docs/components/tag/props). @@ -167,6 +171,8 @@ return ( ); ``` +[![CS-JS]](https://codesandbox.io/s/chakra-react-select-tag-variants-w31gnt?file=/example.js) + #### `isInvalid` — Default: `false` You can pass `isInvalid` to the select component to style it like the Chakra `` is styled when it receives the same prop. @@ -191,6 +197,8 @@ return ( ); ``` +[![CS-JS]](https://codesandbox.io/s/chakra-react-select-invalid-disabled-0hyl8l?file=/example.js) + #### `focusBorderColor` — Default: `blue.500` | `errorBorderColor` — Default: `red.500` The props `focusBorderColor` and `errorBorderColor` can be passed with Chakra color strings which will emulate the respective props being passed to [Chakra's `` component](https://chakra-ui.com/docs/components/input#changing-the-focus-and-error-border-colors). @@ -198,14 +206,16 @@ The props `focusBorderColor` and `errorBorderColor` can be passed with Chakra co ```js return ( <> + - ; -``` - -[![CS-JS]](https://codesandbox.io/s/chakra-react-select-hasstickygroupheaders-wg39g?file=/example.js) - -**NOTE:** It has recently been discovered that when using this prop, navigating up through the available options with the arrow key will keep the focused option underneath the header, as it will not scroll enough to account for it being there. So if this is an issue for you, avoid this prop. A fix for this is being investigated. - -![Sticky Group Headers](./github/sticky-group-headers.png) +[![CS-JS]](https://codesandbox.io/s/chakra-react-select-usebasicstyles-jjnqsd?file=/example.js) -#### `selectedOptionStyle` — Options: `color`, `check` — Default: `color` +#### `selectedOptionStyle` — Options: `color` | `check` — Default: `color` -In `v1.3.0` you can now pass the prop `selectedOptionStyle` with either `"color"` or `"check"` (defaults to `"color"`). The default option `"color"` will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively if you pass `"check"` for the value, the selected option will be styled like the [Chakra UI Menu component](https://chakra-ui.com/docs/components/menu#menu-option-groups) and include a check icon next to the selected option(s). If `isMulti` and `selectedOptionStyle="check"` are passed, space will only be added for the check marks if `hideSelectedOptions={false}` is also passed. +As of `v1.3.0` you can pass the prop `selectedOptionStyle` with either `"color"` or `"check"`. The default option `"color"` will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively if you pass `"check"` for the value, the selected option will be styled like the [Chakra UI Menu component](https://chakra-ui.com/docs/components/menu#menu-option-groups) and include a check icon next to the selected option(s). If `isMulti` and `selectedOptionStyle="check"` are passed, space will only be added for the check marks if `hideSelectedOptions={false}` is also passed. ```js return ( @@ -251,6 +249,8 @@ return ( ![Check Highlighted Selected Option](./github/check-selected-option.png) +[![CS-JS]](https://codesandbox.io/s/chakra-react-select-border-selectedoptionstyle-yxkcos?file=/example.js) + #### `selectedOptionColor` — Default: `blue` If you choose to stick with the default `selectedOptionStyle="color"`, you have one additional styling option. If you do not like the default of blue for the highlight color, you can pass the `selectedOptionColor` prop to change it. This prop will accept any named color from your color theme, and it will use the `500` value in light mode or the `300` value in dark mode. @@ -268,6 +268,22 @@ return ( ![Purple Selected Option Color (dark mode)](./github/purple-selected-option-dark.png) +[![CS-JS]](https://codesandbox.io/s/chakra-react-select-border-selectedoptioncolor-yyd321?file=/example.js) + +#### `hasStickyGroupHeaders` — Default: `false` + +One additional feature which isn’t specific to Chakra or react-select is sticky group headers. It adds a border to the bottom of the header and keeps it in view while its corresponding group of options is visible. This can be very nice for when you have long lists of grouped options so you can always tell which group of options you're looking at. To add it, pass the `hasStickyGroupHeaders` prop to the select component. + +```js +return ; }; ``` -One example of how you might use this is to customize the component `react-google-places-autocomplete`, which is an autocomplete dropdown for Google Places that uses the `AsyncSelect` from `react-select` as it's core. Therefore, it accepts all of the same select props as the core react-select does which means you can use the `useChakraSelectProps` hook to style it: +One example of how you might use this is to customize the component `react-google-places-autocomplete`, which is an autocomplete dropdown for Google Places that uses the `AsyncSelect` from `react-select` as it's core. Therefore, it accepts all of the same select props as the core react-select does meaning you can use the `useChakraSelectProps` hook to style it: ```jsx import { useState } from "react"; diff --git a/package-lock.json b/package-lock.json index f545021..74a9ece 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "chakra-react-select", - "version": "4.1.4", + "version": "4.1.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "chakra-react-select", - "version": "4.1.4", + "version": "4.1.5", "license": "MIT", "dependencies": { "react-select": "^5.4.0" diff --git a/package.json b/package.json index 7a7588e..a84f709 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chakra-react-select", - "version": "4.1.4", + "version": "4.1.5", "description": "A Chakra UI wrapper for the popular library React Select", "license": "MIT", "author": "Chris Sandvik ", diff --git a/src/chakra-components/containers.tsx b/src/chakra-components/containers.tsx index f57aac0..992d76a 100644 --- a/src/chakra-components/containers.tsx +++ b/src/chakra-components/containers.tsx @@ -30,10 +30,7 @@ export const SelectContainer = < const initialSx: CSSObject = { position: "relative", direction: isRtl ? "rtl" : undefined, - // When disabled, react-select sets the pointer-state to none which prevents - // the `not-allowed` cursor style from chakra from getting applied to the - // Control when it is disabled - pointerEvents: "auto", + ...(isDisabled ? { cursor: "not-allowed" } : {}), }; const sx = chakraStyles?.container diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx index 4fa49d2..03824d9 100644 --- a/src/chakra-components/control.tsx +++ b/src/chakra-components/control.tsx @@ -59,6 +59,7 @@ const Control = < overflow: "hidden", height: "auto", minHeight: heights[size || "md"], + ...(isDisabled ? { pointerEvents: "none" } : {}), }; const sx = chakraStyles?.control diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts index 42c1a32..66718d6 100644 --- a/src/module-augmentation.ts +++ b/src/module-augmentation.ts @@ -28,7 +28,7 @@ declare module "react-select/dist/declarations/src/Select" { * Options: `sm` | `md` | `lg` * * @defaultValue `md` - * @see {@link https://github.com/csandman/chakra-react-select#size--options-sm-md-lg--default-md} + * @see {@link https://github.com/csandman/chakra-react-select#size--options-sm--md--lg--default-md} * @see {@link https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input} */ size?: Size; @@ -82,7 +82,7 @@ declare module "react-select/dist/declarations/src/Select" { * Options: "subtle" | "solid" | "outline" * * @defaultValue `subtle` - * @see {@link https://github.com/csandman/chakra-react-select#tagvariant--options-subtle-solid-outline--default-subtle} + * @see {@link https://github.com/csandman/chakra-react-select#tagvariant--options-subtle--solid--outline--default-subtle} * @see {@link https://chakra-ui.com/docs/data-display/tag#props} */ tagVariant?: TagVariant; @@ -104,7 +104,7 @@ declare module "react-select/dist/declarations/src/Select" { * Options: `color` | `check` * * @defaultValue `color` - * @see {@link https://github.com/csandman/chakra-react-select#selectedoptionstyle--options-color-check--default-color} + * @see {@link https://github.com/csandman/chakra-react-select#selectedoptionstyle--options-color--check--default-color} * @see {@link https://chakra-ui.com/docs/components/menu#menu-option-groups} */ selectedOptionStyle?: SelectedOptionStyle;