({ ...provided, zIndex: 100 })
- }}
- chakraStyles={{
- // All other component styles
+ menuPortal: (provided) => ({ ...provided, zIndex: 100 }),
}}
+ chakraStyles={
+ {
+ // All other component styles
+ }
+ }
/>
-)
+);
```
-2. Pass the `classNamePrefix` prop [as described below]() and style the `MenuPortal` with CSS using the className `prefix__menu-portal`.
+2. Pass the `classNamePrefix` prop [as described below]() and style the
+ `MenuPortal` with CSS using the className `prefix__menu-portal`.
```jsx
// example.js
-import "styles.css"
+import "styles.css";
return (
@@ -490,7 +712,10 @@ This package implements the same classNames on the sub components as the origina
>
> ```
>
-> While we encourage you to use the new Styles API, you still have the option of styling via CSS classes. This ensures compatibility with [styled components](https://www.styled-components.com/), [CSS modules](https://github.com/css-modules/css-modules) and other libraries.
+> While we encourage you to use the new Styles API, you still have the option of
+> styling via CSS classes. This ensures compatibility with
+> [styled components](https://www.styled-components.com/),
+> [CSS modules](https://github.com/css-modules/css-modules) and other libraries.
Here is an example of using classNames to style the components:
@@ -498,19 +723,50 @@ Here is an example of using classNames to style the components:
## TypeScript Support
-This package has always supported typescript, however until `3.0.0` none of the type inference was working on the props passed into this component. Now that they are, you may need to pass in some generics in order for your component to work properly.
+This package has always supported typescript, however until `3.0.0` none of the
+type inference was working on the props passed into this component. Now that
+they are, you may need to pass in some generics for your component to work
+properly, but **in most cases you shouldn't need to**. Here is a snippet from
+the original documentation on the subject:
-This package exports all of the named module members of the original `react-select` in case you need their built in types in any of your variable declarations. The root select `Props` type that is exported by `react-select` has been extended using module augmentation,[[1]](https://react-select.com/typescript#custom-select-props) [[2]](https://github.com/JedWatson/react-select/issues/4804#issuecomment-927223471) so if you import that type it will include all of the extra props offered. This package also exports a few custom types that are specific to the custom props offered by this package:
-
-- `ChakraStylesConfig` — The type for the prop `chakraStyles` that can be passed to customize the component styles. This is almost identical to the built in `StylesConfig` type, however it uses Chakra's [`CSSObject`](https://github.com/chakra-ui/chakra-ui/blob/790d2417a3f5d59e2d69229a027af671c2dc0cbc/packages/styled-system/src/system.types.ts#L81) type instead of react-select's emotion styles.
-- `OptionBase` — A type for your individual select options that includes the custom props for styling each of your selected options. This type is made to give you a base to extend off of and pass in as a generic to the root `Select` component.
+> ### Select generics
+>
+> There are three generics used by the Select component: `Option`, `IsMulti`,
+> and `Group`. All of them are optional and TypeScript attempts to detect them
+> automatically, but sometimes it might need some help. Many of the
+> `react-select` types include the three generics like this:
+>
+> — https://react-select.com/typescript
+
+Read their [full documentation](https://react-select.com/typescript) on the
+topic for more info.
+
+This package exports all of the named module members of the original
+`react-select` in case you need their built-in types in any of your variable
+declarations. The root select `Props` type that is exported by `react-select`
+has been extended using module
+augmentation,[[1]](https://react-select.com/typescript#custom-select-props) [[2]](https://github.com/JedWatson/react-select/issues/4804#issuecomment-927223471)
+so if you import that type it will include all of the extra props offered. This
+package also exports a few custom types that are specific to the custom props
+offered by this package:
+
+- `ChakraStylesConfig` — The type for the prop `chakraStyles` that can be passed
+ to customize the component styles. This is almost identical to the built-in
+ `StylesConfig` type, however, it uses Chakra's
+ [`CSSObject`](https://github.com/chakra-ui/chakra-ui/blob/790d2417a3f5d59e2d69229a027af671c2dc0cbc/packages/styled-system/src/system.types.ts#L81)
+ type instead of react-select's emotion styles.
+- `OptionBase` — A type for your individual select options that includes the
+ custom props for styling each of your selected options. This type is made to
+ give you a base to extend off of and pass in as a generic to the root `Select`
+ component.
- Each of the four Select components has a type exported with it:
- `SelectComponent`
- `AsyncSelectComponent`
- `CreatableSelectComponent`
- `AsyncCreatableSelectComponent`
-Here is an example of how to pass in the proper generics to `chakra-react-select`:
+Here is an example of how to pass in the proper generics to
+`chakra-react-select`:
````ts
import { GroupBase, OptionBase, Select } from "chakra-react-select";
@@ -524,7 +780,6 @@ import { GroupBase, OptionBase, Select } from "chakra-react-select";
* type OptionBase = {
* variant?: string;
* colorScheme?: string;
- * isFixed?: boolean;
* isDisabled?: boolean;
* };
* ```
@@ -548,7 +803,7 @@ const colorOptions = [
function CustomMultiSelect() {
return {
- >
+ > // <-- None of these generics should be required
isMulti
name="colors"
options={colorOptions}
@@ -560,9 +815,22 @@ function CustomMultiSelect() {
## Customizing Components
-Like the original `react-select`, this package exports all of the custom components that make up the overall select. However, instead of being exported as `components` they are exported as `chakraComponents` in order to leave the original `components` export from react-select alone (you can export that as well if you'd like). When implementing this component, you have the option to wrap these components and alter their state and the children they return [in the same way the original does](https://react-select.com/components#defining-components).
-
-It's important to note however, that there are 3 components offered in the original `react-select` that are missing from `chakraComponents`. These are the `CrossIcon`, `DownChevron`, and `MenuPortal`. The `MenuPortal` could not be replaced at all [as mentioned earlier](#caveats), so if you'd like to customize it, use the original from the `components` import. The icons posed issues with prop compatibility when passing them into the core `Select` so the easiest way to replace them would be to use a custom `DropdownIndicator` or `ClearIndicator` and pass custom icons in as children:
+Like the original `react-select`, this package exports all of the custom
+components that make up the overall select. However, instead of being exported
+as `components` they are exported as `chakraComponents` to leave the original
+`components` export from react-select alone (you can export that as well if
+you'd like). When implementing this component, you have the option to wrap these
+components and alter their state and the children they return
+[in the same way the original does](https://react-select.com/components#defining-components).
+
+It's important to note, however, that there are 3 components offered in the
+original `react-select` that are missing from `chakraComponents`. These are the
+`CrossIcon`, `DownChevron`, and `MenuPortal`. The `MenuPortal` could not be
+replaced at all [as mentioned earlier](#caveats), so if you'd like to customize
+it, use the original from the `components` import. The icons posed issues with
+prop compatibility when passing them into the core `Select` so the easiest way
+to replace them would be to use a custom `DropdownIndicator` or `ClearIndicator`
+and pass custom icons in as children:
```js
const components = {
@@ -581,7 +849,8 @@ const components = {
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-custom-icons-xf7scd?file=/example.js)
-Here's a complete example of how you might use custom components to create a select with a custom `Option`:
+Here's a complete example of how you might use custom components to create a
+select with a custom `Option`:
```ts
import { Icon } from "@chakra-ui/react";
@@ -641,7 +910,14 @@ const Example = () => (
### Custom `LoadingIndicator` (Chakra `Spinner`)
-For most sub components, the styling can be easily accomplished using the [`chakraStyles`](#chakrastyles) prop. However, in the case of the `LoadingIndicator` there are a few props which do not directly correlate very well with styling props. To solve that problem, the `chakraComponents.LoadingIndicator` component can be passed a few extra props which are normally available on the Chakra UI [`Spinner`](https://chakra-ui.com/docs/components/spinner). Here is an example demonstrating which extra props are offered:
+For most sub components, the styling can be easily accomplished using the
+[`chakraStyles`](#chakrastyles) prop. However, in the case of the
+`LoadingIndicator` there are a few props which do not directly correlate very
+well with styling props. To solve that problem, the
+`chakraComponents.LoadingIndicator` component can be passed a few extra props
+which are normally available on the Chakra UI
+[`Spinner`](https://chakra-ui.com/docs/components/spinner). Here is an example
+demonstrating which extra props are offered:
```jsx
import { AsyncSelect, chakraComponents } from "chakra-react-select";
@@ -691,22 +967,42 @@ const App = () => (
## `useChakraSelectProps`
-Being a wrapper for `react-select`, all of the customizations done to react-select are passed in as props. There is a hook, [`useChakraSelectProps`](https://github.com/csandman/chakra-react-select/blob/main/src/use-chakra-select-props.ts) that handles merging any extra customizations from the end user with the customizations done by this package. In some cases you may simply want to use this hook to get the custom props and pass them into a `react-select` instance yourself.
+Being a wrapper for `react-select`, all of the customizations done to
+react-select are passed in as props. There is a hook,
+[`useChakraSelectProps`](https://github.com/csandman/chakra-react-select/blob/main/src/use-chakra-select-props.ts)
+that handles merging any extra customizations from the end user with the
+customizations done by this package. In some cases you may simply want to use
+this hook to get the custom props and pass them into a `react-select` instance
+yourself.
-To do so, simply import the hook from this package, and call it by passing in any extra custom props you'd like into it and spread it onto a base `react-select` component:
+To do so, simply import the hook from this package, and call it by passing in
+any extra custom props you'd like into it and spread it onto a base
+`react-select` component:
```jsx
+import { useState } from "react";
import { useChakraSelectProps } from "chakra-react-select";
import Select from "react-select";
+import { options } from "./data";
-const CustomSelect = (customSelectProps) => {
- const selectProps = useChakraSelectProps(customSelectProps);
+const CustomSelect = () => {
+ const [selectedOptions, setSelectedOptions] = useState([]);
+
+ const selectProps = useChakraSelectProps({
+ isMulti: true,
+ value: selectedOptions,
+ onChange: setSelectedOptions,
+ });
return ",
@@ -12,6 +12,13 @@
"bugs": {
"url": "https://github.com/csandman/chakra-react-select/issues"
},
+ "exports": {
+ ".": {
+ "types": "./dist/types/index.d.ts",
+ "module": "./dist/esm/index.js",
+ "default": "./dist/cjs/index.js"
+ }
+ },
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"files": [
@@ -27,23 +34,24 @@
"format:code": "prettier --write .",
"format:package": "prettier-package-json --write",
"lint": "concurrently npm:lint:*",
- "lint-fix": "eslint --fix src",
"lint:src": "eslint .",
"lint:types": "tsc --noEmit",
+ "lint-fix": "eslint --fix src",
"prepare": "husky install",
- "postpublish": "git push --tags",
"prepublishOnly": "npm run build",
+ "postpublish": "git push --tags",
"start": "nodemon --watch src --exec npm run build -e ts,tsx"
},
"sideEffects": false,
"types": "dist/types/index.d.ts",
"dependencies": {
- "react-select": "^5.4.0"
+ "react-select": "5.7.4"
},
"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",
@@ -52,44 +60,46 @@
"react-dom": "^18.0.0"
},
"devDependencies": {
- "@babel/cli": "^7.18.9",
- "@babel/core": "^7.18.9",
+ "@babel/cli": "^7.22.9",
+ "@babel/core": "^7.22.9",
"@babel/plugin-proposal-class-properties": "^7.18.6",
- "@babel/preset-env": "^7.18.9",
- "@babel/preset-react": "^7.18.6",
- "@babel/preset-typescript": "^7.18.6",
- "@chakra-ui/babel-plugin": "^1.0.4",
- "@chakra-ui/form-control": "^2.0.4",
- "@chakra-ui/icon": "^3.0.4",
- "@chakra-ui/layout": "^2.1.1",
- "@chakra-ui/menu": "^2.0.6",
- "@chakra-ui/spinner": "^2.0.4",
- "@chakra-ui/system": "^2.2.2",
- "@emotion/react": "^11.9.3",
- "@emotion/styled": "^11.9.3",
- "@trivago/prettier-plugin-sort-imports": "^3.3.0",
- "@types/react": "^18.0.15",
- "@typescript-eslint/eslint-plugin": "^5.30.7",
- "@typescript-eslint/parser": "^5.30.7",
- "concurrently": "^7.3.0",
+ "@babel/preset-env": "^7.22.9",
+ "@babel/preset-react": "^7.22.5",
+ "@babel/preset-typescript": "^7.22.5",
+ "@chakra-ui/babel-plugin": "^1.0.8",
+ "@chakra-ui/form-control": "^2.1.0",
+ "@chakra-ui/icon": "^3.2.0",
+ "@chakra-ui/layout": "^2.3.0",
+ "@chakra-ui/media-query": "^3.3.0",
+ "@chakra-ui/menu": "^2.2.0",
+ "@chakra-ui/spinner": "^2.1.0",
+ "@chakra-ui/system": "^2.6.0",
+ "@emotion/react": "^11.11.1",
+ "@emotion/styled": "^11.11.0",
+ "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+ "@types/react": "^18.2.15",
+ "@typescript-eslint/eslint-plugin": "^6.1.0",
+ "@typescript-eslint/parser": "^6.1.0",
+ "concurrently": "^8.2.0",
"cross-env": "^7.0.3",
- "eslint": "^8.20.0",
+ "eslint": "^8.45.0",
"eslint-config-airbnb": "^19.0.4",
- "eslint-config-airbnb-typescript": "^17.0.0",
- "eslint-config-prettier": "^8.5.0",
- "eslint-plugin-import": "^2.26.0",
- "eslint-plugin-jsx-a11y": "^6.6.0",
- "eslint-plugin-react": "^7.30.1",
+ "eslint-config-airbnb-typescript": "^17.1.0",
+ "eslint-config-prettier": "^8.8.0",
+ "eslint-plugin-deprecation": "^1.4.1",
+ "eslint-plugin-import": "^2.27.5",
+ "eslint-plugin-jsx-a11y": "^6.7.1",
+ "eslint-plugin-react": "^7.33.0",
"eslint-plugin-react-hooks": "^4.6.0",
- "husky": "^8.0.1",
- "lint-staged": "^13.0.3",
- "nodemon": "^2.0.19",
- "prettier": "^2.7.1",
- "prettier-package-json": "^2.6.4",
+ "husky": "^8.0.3",
+ "lint-staged": "^13.2.3",
+ "nodemon": "^3.0.1",
+ "prettier": "^3.0.0",
+ "prettier-package-json": "^2.8.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "rimraf": "^3.0.2",
- "typescript": "^4.7.4"
+ "rimraf": "^5.0.1",
+ "typescript": "^5.1.6"
},
"keywords": [
"accessibility",
@@ -109,12 +119,6 @@
"access": "public",
"registry": "https://registry.npmjs.org/"
},
- "exports": {
- ".": {
- "require": "./dist/cjs/index.js",
- "default": "./dist/esm/index.js"
- }
- },
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"*": "prettier --ignore-unknown --write",
diff --git a/src/chakra-components/containers.tsx b/src/chakra-components/containers.tsx
index f57aac0..0aa1a96 100644
--- a/src/chakra-components/containers.tsx
+++ b/src/chakra-components/containers.tsx
@@ -1,18 +1,19 @@
import React from "react";
import { Box } from "@chakra-ui/layout";
-import type { CSSObject } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/system";
+import { useMultiStyleConfig } from "@chakra-ui/system";
import type {
ContainerProps,
GroupBase,
IndicatorsContainerProps,
ValueContainerProps,
} from "react-select";
-import type { SizeProps } from "../types";
+import { useSize } from "../utils";
export const SelectContainer = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: ContainerProps
) => {
@@ -27,13 +28,10 @@ export const SelectContainer = <
selectProps: { chakraStyles },
} = props;
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
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
@@ -61,7 +59,7 @@ export const SelectContainer = <
export const ValueContainer = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: ValueContainerProps
) => {
@@ -72,20 +70,33 @@ export const ValueContainer = <
isMulti,
hasValue,
innerProps,
- selectProps: { size, chakraStyles },
+ selectProps: {
+ chakraStyles,
+ size: sizeProp,
+ variant,
+ focusBorderColor,
+ errorBorderColor,
+ controlShouldRenderValue,
+ },
} = props;
- const px: SizeProps = {
- sm: "0.75rem",
- md: "1rem",
- lg: "1rem",
- };
+ const size = useSize(sizeProp);
- const initialSx: CSSObject = {
- display: "flex",
+ // Getting the css from input instead of select
+ // to fit better with each of the variants
+ const inputStyles = useMultiStyleConfig("Input", {
+ size,
+ variant,
+ focusBorderColor,
+ errorBorderColor,
+ });
+
+ const initialSx: SystemStyleObject = {
+ display: isMulti && hasValue && controlShouldRenderValue ? "flex" : "grid",
alignItems: "center",
flex: 1,
- padding: `0.125rem ${px[size || "md"]}`,
+ paddingY: "2px",
+ paddingX: inputStyles.field.px,
flexWrap: "wrap",
WebkitOverflowScrolling: "touch",
position: "relative",
@@ -117,7 +128,7 @@ export const ValueContainer = <
export const IndicatorsContainer = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: IndicatorsContainerProps
) => {
@@ -129,7 +140,7 @@ export const IndicatorsContainer = <
selectProps: { chakraStyles },
} = props;
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
display: "flex",
alignItems: "center",
alignSelf: "stretch",
diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index 4fa49d2..17f4679 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -4,7 +4,7 @@ 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 { CSSObject } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/system";
import type {
ClearIndicatorProps,
ControlProps,
@@ -14,11 +14,12 @@ import type {
LoadingIndicatorProps,
} from "react-select";
import type { SizeProps } from "../types";
+import { useSize } from "../utils";
const Control = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: ControlProps
) => {
@@ -32,33 +33,47 @@ const Control = <
isFocused,
menuIsOpen,
selectProps: {
- size,
- isInvalid,
chakraStyles,
+ size: sizeProp,
+ variant,
focusBorderColor,
errorBorderColor,
+ isInvalid,
+ isReadOnly,
},
} = props;
- const inputStyles = useMultiStyleConfig("Input", {
+ const size = useSize(sizeProp);
+ const {
+ field: { height, h, ...fieldStyles },
+ } = useMultiStyleConfig("Input", {
+ size,
+ variant,
focusBorderColor,
errorBorderColor,
- size,
});
- const heights: SizeProps = {
- sm: 8,
- md: 10,
- lg: 12,
- };
+ /**
+ * `@chakra-ui/theme@3.2.0` introduced a breaking change that switched from using `h` to `height` for the Input sizing.
+ *
+ * We need to keep checking for either to maintain backwards compatibility.
+ *
+ * @see {@link https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Ftheme%403.2.0}
+ */
+ const minH = height || h;
- const initialSx: CSSObject = {
- ...inputStyles.field,
+ const initialSx: SystemStyleObject = {
+ ...fieldStyles,
+ position: "relative",
display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ flexWrap: "wrap",
padding: 0,
overflow: "hidden",
height: "auto",
- minHeight: heights[size || "md"],
+ minH,
+ ...(isDisabled ? { pointerEvents: "none" } : {}),
};
const sx = chakraStyles?.control
@@ -83,6 +98,7 @@ const Control = <
data-focus-visible={isFocused ? true : undefined}
data-invalid={isInvalid ? true : undefined}
data-disabled={isDisabled ? true : undefined}
+ aria-readonly={isReadOnly ? true : undefined}
>
{children}
@@ -92,19 +108,19 @@ const Control = <
export const IndicatorSeparator = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: IndicatorSeparatorProps
) => {
const {
className,
cx,
- selectProps: { chakraStyles, useBasicStyles },
+ selectProps: { chakraStyles, useBasicStyles, variant },
} = props;
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
opacity: 1,
- ...(useBasicStyles && { display: "none" }),
+ ...(useBasicStyles || variant !== "outline" ? { display: "none" } : {}),
};
const sx = chakraStyles?.indicatorSeparator
@@ -137,7 +153,7 @@ export const DownChevron = (props: IconProps) => (
export const DropdownIndicator = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: DropdownIndicatorProps
) => {
@@ -147,18 +163,21 @@ export const DropdownIndicator = <
cx,
innerProps,
selectProps: {
- size,
chakraStyles,
useBasicStyles,
+ size: sizeProp,
focusBorderColor,
errorBorderColor,
+ variant,
},
} = props;
+ const size = useSize(sizeProp);
const inputStyles = useMultiStyleConfig("Input", {
+ size,
+ variant,
focusBorderColor,
errorBorderColor,
- size,
});
const iconSizes: SizeProps = {
@@ -166,9 +185,9 @@ export const DropdownIndicator = <
md: "20px",
lg: "24px",
};
- const iconSize = iconSizes[size || "md"];
+ const iconSize = iconSizes[size];
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
...inputStyles.addon,
display: "flex",
alignItems: "center",
@@ -176,7 +195,6 @@ export const DropdownIndicator = <
height: "100%",
borderRadius: 0,
borderWidth: 0,
- cursor: "pointer",
fontSize: iconSize,
...(useBasicStyles && {
background: "transparent",
@@ -195,7 +213,7 @@ export const DropdownIndicator = <
height: "1em",
width: "1em",
};
- const iconSx: CSSObject = chakraStyles?.downChevron
+ const iconSx: SystemStyleObject = chakraStyles?.downChevron
? chakraStyles.downChevron(initialIconStyles, props)
: initialIconStyles;
@@ -233,7 +251,7 @@ export const CrossIcon = (props: IconProps) => (
export const ClearIndicator = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: ClearIndicatorProps
) => {
@@ -242,14 +260,15 @@ export const ClearIndicator = <
className,
cx,
innerProps,
- selectProps: { size, chakraStyles },
+ selectProps: { chakraStyles, size: sizeProp },
} = props;
+ const size = useSize(sizeProp);
const closeButtonStyles = useStyleConfig("CloseButton", {
size,
});
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
...closeButtonStyles,
marginX: 1,
display: "flex",
@@ -262,11 +281,11 @@ export const ClearIndicator = <
? chakraStyles.clearIndicator(initialSx, props)
: initialSx;
- const initialIconStyles: CSSObject = {
+ const initialIconStyles: SystemStyleObject = {
width: "1em",
height: "1em",
};
- const iconSx: CSSObject = chakraStyles?.crossIcon
+ const iconSx: SystemStyleObject = chakraStyles?.crossIcon
? chakraStyles.crossIcon(initialIconStyles, props)
: initialIconStyles;
@@ -292,7 +311,7 @@ export const ClearIndicator = <
export const LoadingIndicator = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: LoadingIndicatorProps
) => {
@@ -300,7 +319,7 @@ export const LoadingIndicator = <
className,
cx,
innerProps,
- selectProps: { size, chakraStyles },
+ selectProps: { chakraStyles, size: sizeProp },
color,
emptyColor,
speed,
@@ -308,15 +327,15 @@ export const LoadingIndicator = <
spinnerSize: propsSpinnerSize,
} = props;
+ const size = useSize(sizeProp);
const spinnerSizes: SizeProps = {
sm: "xs",
md: "sm",
lg: "md",
};
+ const spinnerSize = spinnerSizes[size];
- const spinnerSize = spinnerSizes[size || "md"];
-
- const initialSx: CSSObject = { marginRight: 3 };
+ const initialSx: SystemStyleObject = { marginRight: 3 };
const sx = chakraStyles?.loadingIndicator
? chakraStyles.loadingIndicator(initialSx, props)
diff --git a/src/chakra-components/input.tsx b/src/chakra-components/input.tsx
index 849fce7..d027ba8 100644
--- a/src/chakra-components/input.tsx
+++ b/src/chakra-components/input.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { Box } from "@chakra-ui/layout";
-import type { CSSObject } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/system";
import { chakra } from "@chakra-ui/system";
import type { GroupBase, InputProps } from "react-select";
import { cleanCommonProps } from "../utils";
@@ -8,7 +8,7 @@ import { cleanCommonProps } from "../utils";
const Input = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: InputProps
) => {
@@ -21,16 +21,16 @@ const Input = <
const { innerRef, isDisabled, isHidden, inputClassName, ...innerProps } =
cleanCommonProps(props);
- const spacingSx: CSSObject = {
+ const spacingSx: SystemStyleObject = {
gridArea: "1 / 2",
- font: "inherit",
minW: "2px",
border: 0,
margin: 0,
outline: 0,
+ padding: 0,
};
- const initialContainerSx: CSSObject = {
+ const initialContainerSx: SystemStyleObject = {
flex: "1 1 auto",
display: "inline-grid",
gridArea: "1 / 1 / 2 / 3",
@@ -38,6 +38,10 @@ const Input = <
color: "inherit",
marginX: "0.125rem",
paddingY: "0.125rem",
+ visibility: isDisabled ? "hidden" : "visible",
+ // Force css to recompute when value change due to @emotion bug.
+ // We can remove it whenever the bug is fixed.
+ transform: value ? "translateZ(0)" : "",
_after: {
content: 'attr(data-value) " "',
visibility: "hidden",
@@ -50,9 +54,7 @@ const Input = <
? chakraStyles.inputContainer(initialContainerSx, props)
: initialContainerSx;
- const initialInputSx: CSSObject = {
- label: "input",
- color: "inherit",
+ const initialInputSx: SystemStyleObject = {
background: 0,
opacity: isHidden ? 0 : 1,
width: "100%",
@@ -73,7 +75,7 @@ const Input = <
ref={innerRef}
sx={inputSx}
disabled={isDisabled}
- readOnly={isReadOnly}
+ readOnly={isReadOnly ? true : undefined}
aria-readonly={isReadOnly ? true : undefined}
aria-required={isRequired ? true : undefined}
{...innerProps}
diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index e6b47b3..48751ce 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -1,15 +1,10 @@
import React from "react";
-import type { IconProps } from "@chakra-ui/icon";
-import Icon from "@chakra-ui/icon";
import { Box } from "@chakra-ui/layout";
-import { MenuIcon } from "@chakra-ui/menu";
-import type { CSSObject } from "@chakra-ui/system";
-import {
- useColorModeValue,
- useMultiStyleConfig,
- useTheme,
-} from "@chakra-ui/system";
+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 type {
+ CoercedMenuPlacement,
GroupBase,
GroupHeadingProps,
GroupProps,
@@ -19,6 +14,12 @@ import type {
OptionProps,
} from "react-select";
import type { SizeProps, ThemeObject } from "../types";
+import { useSize } from "../utils";
+
+const alignToControl = (placement: CoercedMenuPlacement) => {
+ const placementToCSSProp = { bottom: "top", top: "bottom" };
+ return placement ? placementToCSSProp[placement] : "top";
+};
const Menu = >(
props: MenuProps
@@ -33,14 +34,12 @@ const Menu = >(
selectProps: { chakraStyles },
} = props;
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
position: "absolute",
- ...(placement === "bottom" && { top: "100%" }),
- ...(placement === "top" && { bottom: "100%" }),
+ [alignToControl(placement)]: "100%",
marginY: "8px",
width: "100%",
zIndex: 1,
- overflow: "hidden",
};
const sx = chakraStyles?.menu
@@ -48,14 +47,16 @@ const Menu = >(
: initialSx;
return (
-
- {children}
-
+
+
+ {children}
+
+
);
};
@@ -64,7 +65,7 @@ export default Menu;
export const MenuList = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: MenuListProps
) => {
@@ -76,18 +77,39 @@ export const MenuList = <
maxHeight,
isMulti,
innerProps,
- selectProps: { size, chakraStyles },
+ selectProps: {
+ chakraStyles,
+ size: sizeProp,
+ variant,
+ focusBorderColor,
+ errorBorderColor,
+ },
} = props;
const menuStyles = useMultiStyleConfig("Menu");
- const borderRadii: SizeProps = useTheme().radii;
-
- const initialSx: CSSObject = {
+ // We're pulling in the border radius from the theme for the input component
+ // so we can match the menu lists' border radius to it, but in 2.8.0 the value
+ // was changed to being pulled from a theme variable instead of being hardcoded
+ const size = useSize(sizeProp);
+ const inputStyles = useMultiStyleConfig("Input", {
+ size,
+ variant,
+ focusBorderColor,
+ errorBorderColor,
+ });
+ const fieldStyles = inputStyles.field as Record;
+
+ const initialSx: SystemStyleObject = {
...menuStyles.list,
+ minW: "100%",
maxHeight: `${maxHeight}px`,
overflowY: "auto",
- borderRadius: borderRadii[size || "md"],
+ // This is hacky, but it works. May be removed in the future
+ "--input-border-radius": fieldStyles?.["--input-border-radius"],
+ borderRadius: fieldStyles?.borderRadius || menuStyles.list?.borderRadius,
+ position: "relative", // required for offset[Height, Top] > keyboard scroll
+ WebkitOverflowScrolling: "touch",
};
const sx = chakraStyles?.menuList
@@ -116,7 +138,7 @@ export const MenuList = <
export const LoadingMessage = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: NoticeProps
) => {
@@ -125,33 +147,22 @@ export const LoadingMessage = <
className,
cx,
innerProps,
- selectProps: { size, chakraStyles },
+ selectProps: { chakraStyles, size: sizeProp },
} = props;
- /**
- * The chakra UI global placeholder color
- *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
- */
- const color = useColorModeValue("gray.400", "whiteAlpha.400");
-
- const fontSizes: SizeProps = {
- sm: "0.875rem",
- md: "1rem",
- lg: "1.125rem",
- };
+ const size = useSize(sizeProp);
- const paddings: SizeProps = {
- sm: "6px 9px",
- md: "8px 12px",
- lg: "10px 15px",
+ const verticalPaddings: SizeProps = {
+ sm: "6px",
+ md: "8px",
+ lg: "10px",
};
- const initialSx: CSSObject = {
- color,
+ const initialSx: SystemStyleObject = {
+ color: "chakra-subtle-text",
textAlign: "center",
- padding: paddings[size || "md"],
- fontSize: fontSizes[size || "md"],
+ paddingY: verticalPaddings[size],
+ fontSize: size,
};
const sx = chakraStyles?.loadingMessage
@@ -178,7 +189,7 @@ export const LoadingMessage = <
export const NoOptionsMessage = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: NoticeProps
) => {
@@ -187,33 +198,22 @@ export const NoOptionsMessage = <
className,
cx,
innerProps,
- selectProps: { size, chakraStyles },
+ selectProps: { chakraStyles, size: sizeProp },
} = props;
- /**
- * The chakra UI global placeholder color
- *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
- */
- const color = useColorModeValue("gray.400", "whiteAlpha.400");
+ const size = useSize(sizeProp);
- const fontSizes: SizeProps = {
- sm: "0.875rem",
- md: "1rem",
- lg: "1.125rem",
+ const verticalPaddings: SizeProps = {
+ sm: "6px",
+ md: "8px",
+ lg: "10px",
};
- const paddings: SizeProps = {
- sm: "6px 9px",
- md: "8px 12px",
- lg: "10px 15px",
- };
-
- const initialSx: CSSObject = {
- color,
+ const initialSx: SystemStyleObject = {
+ color: "chakra-subtle-text",
textAlign: "center",
- padding: paddings[size || "md"],
- fontSize: fontSizes[size || "md"],
+ paddingY: verticalPaddings[size],
+ fontSize: size,
};
const sx = chakraStyles?.noOptionsMessage
@@ -240,7 +240,7 @@ export const NoOptionsMessage = <
export const Group = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: GroupProps
) => {
@@ -255,6 +255,7 @@ export const Group = <
label,
selectProps,
innerProps,
+ getClassNames,
} = props;
const { chakraStyles } = selectProps;
@@ -269,6 +270,7 @@ export const Group = <
cx={cx}
theme={theme}
getStyles={getStyles}
+ getClassNames={getClassNames}
>
{label}
@@ -280,7 +282,7 @@ export const Group = <
export const GroupHeading = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: GroupHeadingProps
) => {
@@ -288,16 +290,18 @@ export const GroupHeading = <
cx,
className,
children,
- selectProps: { size, hasStickyGroupHeaders, chakraStyles },
+ // eslint-disable-next-line deprecation/deprecation
+ selectProps: { chakraStyles, size: sizeProp, hasStickyGroupHeaders },
} = props;
const menuStyles = useMultiStyleConfig("Menu");
- const chakraTheme = useTheme();
+ const size = useSize(sizeProp);
+
const fontSizes: SizeProps = {
- sm: chakraTheme.fontSizes.xs,
- md: chakraTheme.fontSizes.sm,
- lg: chakraTheme.fontSizes.md,
+ sm: "xs",
+ md: "sm",
+ lg: "md",
};
const paddings: SizeProps = {
sm: "0.4rem 0.8rem",
@@ -305,10 +309,10 @@ export const GroupHeading = <
lg: "0.6rem 1.2rem",
};
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
...menuStyles.groupTitle,
- fontSize: fontSizes[size || "md"],
- padding: paddings[size || "md"],
+ fontSize: fontSizes[size],
+ padding: paddings[size],
margin: 0,
borderBottomWidth: hasStickyGroupHeaders ? "1px" : 0,
position: hasStickyGroupHeaders ? "sticky" : "static",
@@ -331,21 +335,21 @@ export const GroupHeading = <
/**
* The `CheckIcon` component from the Chakra UI Menu
*
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/menu/src/menu.tsx#L314}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/eb0316ddf96dd259433724062e923c33e6eee729/packages/components/menu/src/menu-item-option.tsx#L10-L17}
*/
-const CheckIcon = (props: IconProps) => (
-
+const CheckIcon: React.FC> = (props) => (
+
+
);
export const Option = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: OptionProps
) => {
@@ -359,16 +363,18 @@ export const Option = <
isDisabled,
isSelected,
selectProps: {
- size,
+ chakraStyles,
+ size: sizeProp,
isMulti,
hideSelectedOptions,
selectedOptionStyle,
- selectedOptionColor,
- chakraStyles,
+ selectedOptionColorScheme,
},
} = props;
- const menuItemStyles = useMultiStyleConfig("Menu").item as ThemeObject;
+ const size = useSize(sizeProp);
+
+ const menuItemStyles: ThemeObject = useMultiStyleConfig("Menu").item;
const paddings: SizeProps = {
sm: "0.3rem 0.6rem",
@@ -382,8 +388,8 @@ export const Option = <
* @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/components/input.ts#L73}
*/
const selectedBg = useColorModeValue(
- `${selectedOptionColor}.500`,
- `${selectedOptionColor}.300`
+ `${selectedOptionColorScheme}.500`,
+ `${selectedOptionColorScheme}.300`
);
const selectedColor = useColorModeValue("white", "black");
@@ -396,15 +402,14 @@ export const Option = <
const shouldHighlight: boolean =
selectedOptionStyle === "color" && isSelected;
- const initialSx: CSSObject = {
+ const initialSx: SystemStyleObject = {
...menuItemStyles,
display: "flex",
alignItems: "center",
width: "100%",
textAlign: "start",
fontSize: size,
- padding: paddings[size || "md"],
- bg: "transparent",
+ padding: paddings[size],
...(isFocused && menuItemStyles._focus),
...(shouldHighlight && {
bg: selectedBg,
diff --git a/src/chakra-components/multi-value.tsx b/src/chakra-components/multi-value.tsx
index 52c0889..b9e5387 100644
--- a/src/chakra-components/multi-value.tsx
+++ b/src/chakra-components/multi-value.tsx
@@ -2,7 +2,7 @@ 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 { CSSObject } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/system";
import { chakra, useMultiStyleConfig } from "@chakra-ui/system";
import type {
GroupBase,
@@ -10,20 +10,30 @@ import type {
MultiValueProps,
MultiValueRemoveProps,
} from "react-select";
-
-const hasColorScheme = (option: unknown): option is { colorScheme: unknown } =>
- typeof option === "object" && option !== null && "colorScheme" in option;
-
-const hasIsFixed = (option: unknown): option is { isFixed: unknown } =>
- typeof option === "object" && option !== null && "isFixed" in option;
-
-const hasVariant = (option: unknown): option is { variant: unknown } =>
- typeof option === "object" && option !== null && "variant" in option;
+import { useSize } from "../utils";
+
+const hasColorScheme = (option: unknown): option is { colorScheme: string } =>
+ typeof option === "object" &&
+ option !== null &&
+ "colorScheme" in option &&
+ typeof option.colorScheme === "string";
+
+const hasVariant = (option: unknown): option is { variant: string } =>
+ typeof option === "object" &&
+ option !== null &&
+ "variant" in option &&
+ typeof option.variant === "string";
+
+const hasIsFixed = (option: unknown): option is { isFixed: boolean } =>
+ typeof option === "object" &&
+ option !== null &&
+ "isFixed" in option &&
+ typeof option.isFixed === "boolean";
const MultiValue = <
Option = unknown,
IsMulti extends boolean = boolean,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: MultiValueProps
) => {
@@ -38,26 +48,29 @@ const MultiValue = <
isFocused,
removeProps,
selectProps,
+ cropWithEllipsis,
} = props;
const { Container, Label, Remove } = components;
- const { chakraStyles, colorScheme, tagVariant, size } = selectProps;
+ const { chakraStyles, colorScheme, tagVariant, size: sizeProp } = selectProps;
+
+ const size = useSize(sizeProp);
let optionColorScheme = "";
let optionVariant = "";
let optionIsFixed = false;
- if (hasColorScheme(data) && typeof data.colorScheme === "string") {
+ if (hasColorScheme(data)) {
optionColorScheme = data.colorScheme;
}
- if (hasVariant(data) && typeof data.variant === "string") {
+ if (hasVariant(data)) {
optionVariant = data.variant;
}
if (hasIsFixed(data)) {
- optionIsFixed = !!data.isFixed;
+ optionIsFixed = data.isFixed;
}
const tagStyles = useMultiStyleConfig("Tag", {
@@ -67,28 +80,35 @@ const MultiValue = <
optionVariant || tagVariant || (optionIsFixed ? "solid" : "subtle"),
});
- const containerInitialSx: CSSObject = {
+ const containerInitialSx: SystemStyleObject = {
...tagStyles.container,
- display: "inline-flex",
- verticalAlign: "top",
+ display: "flex",
alignItems: "center",
- maxWidth: "100%",
+ minWidth: 0, // resolves flex/text-overflow bug
margin: "0.125rem",
};
- const containerSx: CSSObject = chakraStyles?.multiValue
+ const containerSx: SystemStyleObject = chakraStyles?.multiValue
? chakraStyles.multiValue(containerInitialSx, props)
: containerInitialSx;
- const labelInitialSx: CSSObject = tagStyles.label;
+ const labelInitialSx: SystemStyleObject = {
+ ...tagStyles.label,
+ overflow: "hidden",
+ textOverflow:
+ cropWithEllipsis || cropWithEllipsis === undefined
+ ? "ellipsis"
+ : undefined,
+ whiteSpace: "nowrap",
+ };
const labelSx = chakraStyles?.multiValueLabel
? chakraStyles.multiValueLabel(labelInitialSx, props)
: labelInitialSx;
- const removeInitialSx: CSSObject = {
+ const removeInitialSx: SystemStyleObject = {
+ ...tagStyles.closeButton,
display: "flex",
alignItems: "center",
justifyContent: "center",
- ...tagStyles.closeButton,
};
const removeSx = chakraStyles?.multiValueRemove
? chakraStyles.multiValueRemove(removeInitialSx, props)
@@ -148,7 +168,7 @@ const MultiValue = <
const MultiValueContainer = <
Option = unknown,
IsMulti extends boolean = boolean,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: MultiValueGenericProps
) => {
@@ -164,7 +184,7 @@ const MultiValueContainer = <
const MultiValueLabel = <
Option = unknown,
IsMulti extends boolean = boolean,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: MultiValueGenericProps
) => {
@@ -194,7 +214,7 @@ const TagCloseIcon = (props: IconProps) => (
const MultiValueRemove = <
Option = unknown,
IsMulti extends boolean = boolean,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: MultiValueRemoveProps
) => {
diff --git a/src/chakra-components/placeholder.tsx b/src/chakra-components/placeholder.tsx
index d88975c..2e08d96 100644
--- a/src/chakra-components/placeholder.tsx
+++ b/src/chakra-components/placeholder.tsx
@@ -1,13 +1,12 @@
import React from "react";
import { Box } from "@chakra-ui/layout";
-import type { CSSObject } from "@chakra-ui/system";
-import { useColorModeValue } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/system";
import type { GroupBase, PlaceholderProps } from "react-select";
const Placeholder = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: PlaceholderProps
) => {
@@ -19,19 +18,10 @@ const Placeholder = <
selectProps: { chakraStyles },
} = props;
- /**
- * The chakra UI global placeholder color
- *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
- */
- const placeholderColor = useColorModeValue("gray.400", "whiteAlpha.400");
-
- const initialSx: CSSObject = {
- color: placeholderColor,
+ const initialSx: SystemStyleObject = {
+ gridArea: "1 / 1 / 2 / 3",
+ color: "chakra-placeholder-color",
mx: "0.125rem",
- position: "absolute",
- top: "50%",
- transform: "translateY(-50%)",
userSelect: "none",
};
diff --git a/src/chakra-components/single-value.tsx b/src/chakra-components/single-value.tsx
index 25ec008..e4b85ec 100644
--- a/src/chakra-components/single-value.tsx
+++ b/src/chakra-components/single-value.tsx
@@ -1,12 +1,12 @@
import React from "react";
import { Box } from "@chakra-ui/layout";
-import type { CSSObject } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/system";
import type { GroupBase, SingleValueProps } from "react-select";
const SingleValue = <
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
>(
props: SingleValueProps
) => {
@@ -19,16 +19,13 @@ const SingleValue = <
selectProps: { chakraStyles },
} = props;
- const initialSx: CSSObject = {
- label: "singleValue",
+ const initialSx: SystemStyleObject = {
+ gridArea: "1 / 1 / 2 / 3",
mx: "0.125rem",
- maxWidth: `calc(100% - 0.5rem)`,
+ maxWidth: "100%",
overflow: "hidden",
- position: "absolute",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
- top: "50%",
- transform: "translateY(-50%)",
};
const sx = chakraStyles?.singleValue
diff --git a/src/index.ts b/src/index.ts
index b34aa83..29edbe4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,21 +1,19 @@
import "./module-augmentation";
-export { default as Select } from "./select";
-export { default as CreatableSelect } from "./creatable-select";
-export { default as AsyncSelect } from "./async-select";
-export { default as AsyncCreatableSelect } from "./async-creatable-select";
+export { default as Select } from "./select/select";
+export { default as CreatableSelect } from "./select/creatable-select";
+export { default as AsyncSelect } from "./select/async-select";
+export { default as AsyncCreatableSelect } from "./select/async-creatable-select";
export { default as chakraComponents } from "./chakra-components";
-
export { default as useChakraSelectProps } from "./use-chakra-select-props";
-export type { SelectComponent } from "./select";
-export type { CreatableSelectComponent } from "./creatable-select";
-export type { AsyncSelectComponent } from "./async-select";
-export type { AsyncCreatableSelectComponent } from "./async-creatable-select";
+export type { SelectComponent } from "./select/select";
+export type { CreatableSelectComponent } from "./select/creatable-select";
+export type { AsyncSelectComponent } from "./select/async-select";
+export type { AsyncCreatableSelectComponent } from "./select/async-creatable-select";
export type {
- SxProps,
SizeProps,
Size,
TagVariant,
@@ -27,6 +25,8 @@ export type {
// Forward all available exports from the original `react-select` package
export * from "react-select";
-export * from "react-select/async";
-export * from "react-select/async-creatable";
-export * from "react-select/creatable";
+export { useAsync } from "react-select/async";
+export { useCreatable } from "react-select/creatable";
+export type { AsyncProps } from "react-select/async";
+export type { CreatableProps } from "react-select/creatable";
+export type { AsyncCreatableProps } from "react-select/async-creatable";
diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts
index 42c1a32..b517afc 100644
--- a/src/module-augmentation.ts
+++ b/src/module-augmentation.ts
@@ -1,11 +1,12 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
-import type { CSSObject } from "@chakra-ui/system";
-import type { GroupBase } from "react-select";
+import type { SystemStyleObject } from "@chakra-ui/system";
+import type { GroupBase, StylesConfig, ThemeConfig } from "react-select";
import type {
ChakraStylesConfig,
SelectedOptionStyle,
- Size,
+ SizeProp,
TagVariant,
+ Variant,
} from "./types";
/**
@@ -14,40 +15,43 @@ import type {
*
* @see {@link https://react-select.com/typescript#custom-select-props}
*/
-
declare module "react-select/dist/declarations/src/Select" {
export interface Props<
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
> {
/**
* The size of the base control; matches the sizes of the chakra Input
- * component with the exception of `xs`
+ * component with the exception of `xs`. A [responsive style array/object](https://chakra-ui.com/docs/features/responsive-styles) can
+ * also be passed.
*
* 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-responsivevaluesm--md--lg--default-md}
* @see {@link https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input}
*/
- size?: Size;
+ size?: SizeProp;
/**
* Determines whether or not to style the input with the invalid border
- * color
+ * color.
*
* If the `aria-invalid` prop is not passed, this prop will also set that
*
* @defaultValue `false`
- * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false}
+ * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false--isreadonly---default-false}
* @see {@link https://chakra-ui.com/docs/components/input/props}
+ * @see {@link https://chakra-ui.com/docs/components/form-control/props}
*/
isInvalid?: boolean;
/**
- * If `true`, the form control will be `readonly`
+ * If `true`, the form control will be `readonly`.
*
+ * @defaultValue `false`
+ * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false--isreadonly---default-false}
* @see {@link https://chakra-ui.com/docs/components/input/props}
* @see {@link https://chakra-ui.com/docs/components/form-control/props}
*/
@@ -55,6 +59,7 @@ declare module "react-select/dist/declarations/src/Select" {
/**
* If true, the form control will be required. This has 2 side effects:
+ *
* - The `FormLabel` will show a required indicator
* - The form element (e.g, Input) will have `aria-required` set to true
*
@@ -65,9 +70,9 @@ declare module "react-select/dist/declarations/src/Select" {
/**
* A color name that matches a key from your chakra theme and will
- * determine the color scheme of your `MultiValue` component
+ * determine the color scheme of your `MultiValue` component.
*
- * The styling matches the chakra `Tag` component
+ * The styling matches the chakra `Tag` component.
*
* @defaultValue `"gray"`
* @see {@link https://github.com/csandman/chakra-react-select#colorscheme}
@@ -77,12 +82,13 @@ declare module "react-select/dist/declarations/src/Select" {
/**
* The `variant` prop that will be forwarded to your `MultiValue` component
- * which is represented by a chakra `Tag`
+ * which is represented by a chakra `Tag`. You can also use any custom
+ * variants you have added to your theme.
*
* 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;
@@ -90,21 +96,22 @@ declare module "react-select/dist/declarations/src/Select" {
/**
* Passing `true` for this prop will make the group headers
* `position: sticky` and keep them stuck to the top while their
- * corresponding group is in view
+ * corresponding group is in view.
*
* @defaultValue `false`
- * @see {@link https://github.com/csandman/chakra-react-select#hasstickygroupheaders--default-false}
+ * @deprecated This prop should probably not have existed and will be
+ * removed soon.
*/
hasStickyGroupHeaders?: boolean;
/**
* Whether to style a selected option by highlighting it in a solid color
- * or adding a check mark next to it like the chakra `Menu` component
+ * or adding a check mark next to it like the chakra `Menu` component.
*
* 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;
@@ -115,13 +122,18 @@ declare module "react-select/dist/declarations/src/Select" {
* and the `300` value in dark mode.
*
* @defaultValue `blue`
- * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolor--default-blue}
+ * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolorscheme--default-blue}
+ */
+ selectedOptionColorScheme?: string;
+
+ /**
+ * @deprecated Replaced by {@link selectedOptionColorScheme}
*/
selectedOptionColor?: string;
/**
* The color value to style the border of the `Control` with when the
- * select is focused
+ * select is focused.
*
* @defaultValue Light mode: `blue.500` | Dark mode: `blue.300`
* @see {@link https://github.com/csandman/chakra-react-select#focusbordercolor--default-blue500--errorbordercolor--default-red500}
@@ -131,7 +143,7 @@ declare module "react-select/dist/declarations/src/Select" {
/**
* The color value to style the border of the `Control` with when
- * `isInvalid` is passed to the select
+ * `isInvalid` is passed to the select.
*
* @defaultValue Light mode: `red.500` | Dark mode: `red.300`
* @see {@link https://github.com/csandman/chakra-react-select#focusbordercolor--default-blue500--errorbordercolor--default-red500}
@@ -141,7 +153,7 @@ declare module "react-select/dist/declarations/src/Select" {
/**
* Style transformation methods for each of the rendered components using,
- * Chakra's `CSSObject` and the props passed into each component
+ * Chakra's `SystemStyleObject` and the props passed into each component.
*
* @see {@link https://github.com/csandman/chakra-react-select#chakrastyles}
* @see {@link https://react-select.com/styles#style-object}
@@ -150,13 +162,38 @@ declare module "react-select/dist/declarations/src/Select" {
/**
* If passed, the dropdown indicator will be styled the same as Chakra UI's
- * `Select` component
+ * `Select` component.
*
* @defaultValue `false`
* @see {@link https://github.com/csandman/chakra-react-select#usebasicstyles--default-false}
* @see {@link https://chakra-ui.com/docs/components/select}
*/
useBasicStyles?: boolean;
+
+ /**
+ * The main style variant of the `Select` component. This will use styles
+ * from Chakra's `Input` component and any custom variants you have added to
+ * your theme may be used.
+ *
+ * Options: `outline` | `filled` | `flushed` | `unstyled`
+ *
+ * @defaultValue `outline`
+ * @see {@link https://chakra-ui.com/docs/components/select#changing-the-appearance}
+ * @see {@link https://github.com/csandman/chakra-react-select#variant--options-outline--filled--flushed--unstyled--default-outline}
+ */
+ variant?: Variant;
+
+ /**
+ * @deprecated This prop is not used in `chakra-react-select`, use
+ * {@link chakraStyles} instead.
+ */
+ styles: StylesConfig;
+
+ /**
+ * @deprecated This prop is not used in `chakra-react-select`, all theme
+ * values are pulled from your Chakra UI theme.
+ */
+ theme?: ThemeConfig;
}
}
@@ -164,26 +201,26 @@ declare module "react-select/dist/declarations/src/components/MultiValue" {
export interface MultiValueProps<
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
> {
- sx: CSSObject;
+ sx: SystemStyleObject;
}
export interface MultiValueGenericProps<
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
> {
- sx: CSSObject;
+ sx: SystemStyleObject;
}
export interface MultiValueRemoveProps<
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
> {
isFocused: boolean;
- sx: CSSObject;
+ sx: SystemStyleObject;
}
}
@@ -191,19 +228,19 @@ declare module "react-select/dist/declarations/src/components/indicators" {
export interface LoadingIndicatorProps<
Option,
IsMulti extends boolean,
- Group extends GroupBase
+ Group extends GroupBase ,
> {
/**
- * The color of the filled in area of the spinner
+ * The color of the filled in area of the spinner.
*
- * Defaults to your Chakra theme's text color
+ * Defaults to your Chakra theme's text color.
*
* @defaultValue Light mode: `gray.700` | Dark mode: `whiteAlpha.900`
*/
color?: string;
/**
- * The color of the empty area in the spinner
+ * The color of the empty area in the spinner.
*
* @defaultValue `transparent`
* @see {@link https://chakra-ui.com/docs/components/spinner#spinner-with-empty-area-color}
@@ -213,7 +250,7 @@ declare module "react-select/dist/declarations/src/components/indicators" {
/**
* The size prop for the Chakra ``](https://developer.mozilla.org/en-US/docs/Web/CSS/time) variable which uses either seconds or milliseconds
+ * This speed is represented by a
+ * [CSS ``](https://developer.mozilla.org/en-US/docs/Web/CSS/time)
+ * variable which uses either seconds or milliseconds.
*
* @defaultValue `0.45s`
* @example
@@ -234,7 +273,7 @@ declare module "react-select/dist/declarations/src/components/indicators" {
speed?: string;
/**
- * The thickness of the spinner
+ * The thickness of the spinner.
*
* @defaultValue `2px`
* @example
diff --git a/src/async-creatable-select.tsx b/src/select/async-creatable-select.tsx
similarity index 90%
rename from src/async-creatable-select.tsx
rename to src/select/async-creatable-select.tsx
index a8b58bf..ed405a9 100644
--- a/src/async-creatable-select.tsx
+++ b/src/select/async-creatable-select.tsx
@@ -3,12 +3,12 @@ import type { MutableRefObject, ReactElement, RefAttributes } from "react";
import type { GroupBase, SelectInstance } from "react-select";
import AsyncCreatableReactSelect from "react-select/async-creatable";
import type { AsyncCreatableProps } from "react-select/async-creatable";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
export type AsyncCreatableSelectComponent = <
Option = unknown,
IsMulti extends boolean = false,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: AsyncCreatableProps &
RefAttributes>
diff --git a/src/async-select.tsx b/src/select/async-select.tsx
similarity index 89%
rename from src/async-select.tsx
rename to src/select/async-select.tsx
index 6c22641..16c23aa 100644
--- a/src/async-select.tsx
+++ b/src/select/async-select.tsx
@@ -3,12 +3,12 @@ import type { MutableRefObject, ReactElement, RefAttributes } from "react";
import type { GroupBase, SelectInstance } from "react-select";
import AsyncReactSelect from "react-select/async";
import type { AsyncProps } from "react-select/async";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
export type AsyncSelectComponent = <
Option = unknown,
IsMulti extends boolean = false,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: AsyncProps &
RefAttributes>
diff --git a/src/creatable-select.tsx b/src/select/creatable-select.tsx
similarity index 90%
rename from src/creatable-select.tsx
rename to src/select/creatable-select.tsx
index e19186f..c2f7078 100644
--- a/src/creatable-select.tsx
+++ b/src/select/creatable-select.tsx
@@ -3,12 +3,12 @@ import type { MutableRefObject, ReactElement, RefAttributes } from "react";
import type { GroupBase, SelectInstance } from "react-select";
import CreatableReactSelect from "react-select/creatable";
import type { CreatableProps } from "react-select/creatable";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
export type CreatableSelectComponent = <
Option = unknown,
IsMulti extends boolean = false,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: CreatableProps &
RefAttributes>
diff --git a/src/select.tsx b/src/select/select.tsx
similarity index 88%
rename from src/select.tsx
rename to src/select/select.tsx
index c00d560..bf6f053 100644
--- a/src/select.tsx
+++ b/src/select/select.tsx
@@ -2,12 +2,12 @@ import React, { forwardRef } from "react";
import type { MutableRefObject, ReactElement, RefAttributes } from "react";
import ReactSelect from "react-select";
import type { GroupBase, Props, SelectInstance } from "react-select";
-import useChakraSelectProps from "./use-chakra-select-props";
+import useChakraSelectProps from "../use-chakra-select-props";
export type SelectComponent = <
Option = unknown,
IsMulti extends boolean = false,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>(
props: Props &
RefAttributes>
diff --git a/src/types.ts b/src/types.ts
index 168e2b3..87cb0bc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,7 +1,7 @@
import type {
- CSSObject,
- CSSWithMultiValues,
- RecursiveCSSObject,
+ Pseudos,
+ ResponsiveObject,
+ SystemStyleObject,
} from "@chakra-ui/system";
import type {
ClearIndicatorProps,
@@ -25,12 +25,15 @@ import type {
ValueContainerProps,
} from "react-select";
-export interface SxProps extends CSSWithMultiValues {
- _disabled?: CSSWithMultiValues;
- _focus?: CSSWithMultiValues;
-}
-
-export type ThemeObject = RecursiveCSSObject;
+/**
+ * This is needed because Chakra improperly types their `SystemStyleObject` to not include pseudo selectors,
+ * even though the objects actually include them.
+ *
+ * @see {@link https://github.com/chakra-ui/chakra-ui/issues/6261}
+ */
+export type ThemeObject = SystemStyleObject & {
+ [K in keyof Pseudos]?: SystemStyleObject;
+};
export interface SizeProps {
sm: PropType;
@@ -40,19 +43,28 @@ export interface SizeProps {
export type Size = "sm" | "md" | "lg";
-export type TagVariant = "subtle" | "solid" | "outline";
+export type SizeProp = Size | ResponsiveObject | Size[];
+
+export type TagVariant = "subtle" | "solid" | "outline" | (string & {});
export type SelectedOptionStyle = "color" | "check";
+export type Variant =
+ | "outline"
+ | "filled"
+ | "flushed"
+ | "unstyled"
+ | (string & {});
+
export type StylesFunction = (
- provided: CSSObject,
+ provided: SystemStyleObject,
state: ComponentProps
-) => CSSObject;
+) => SystemStyleObject;
export interface ChakraStylesConfig<
Option = unknown,
IsMulti extends boolean = boolean,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
> {
clearIndicator?: StylesFunction>;
container?: StylesFunction>;
diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts
index 0a7d0bf..c96928c 100644
--- a/src/use-chakra-select-props.ts
+++ b/src/use-chakra-select-props.ts
@@ -1,16 +1,18 @@
import { useFormControl } from "@chakra-ui/form-control";
+import { useTheme } from "@chakra-ui/system";
import type { GroupBase, Props } from "react-select";
import chakraComponents from "./chakra-components";
-import type { SelectedOptionStyle, Size, TagVariant } from "./types";
+import type { SelectedOptionStyle } from "./types";
const useChakraSelectProps = <
Option,
IsMulti extends boolean = false,
- Group extends GroupBase = GroupBase
+ Group extends GroupBase = GroupBase ,
>({
components = {},
+ // eslint-disable-next-line deprecation/deprecation
theme,
- size = "md",
+ size,
colorScheme = "gray",
isDisabled,
isInvalid,
@@ -18,21 +20,25 @@ const useChakraSelectProps = <
isRequired,
inputId,
tagVariant,
- hasStickyGroupHeaders = false,
selectedOptionStyle = "color",
- selectedOptionColor = "blue",
+ selectedOptionColorScheme,
+ // eslint-disable-next-line deprecation/deprecation
+ selectedOptionColor,
+ variant,
focusBorderColor,
errorBorderColor,
chakraStyles = {},
onFocus,
onBlur,
+ menuIsOpen,
...props
}: Props): Props => {
- /**
- * Combine the props passed into the component with the props that can be set
- * on a surrounding form control to get the values of `isDisabled` and
- * `isInvalid`
- */
+ const chakraTheme = useTheme();
+ const { variant: defaultVariant } = chakraTheme.components.Input.defaultProps;
+
+ // Combine the props passed into the component with the props that can be set
+ // on a surrounding form control to get the values of `isDisabled` and
+ // `isInvalid`
const inputProps = useFormControl({
id: inputId,
isDisabled,
@@ -43,36 +49,22 @@ const useChakraSelectProps = <
onBlur,
});
- /** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */
- let realSize: Size = size;
- const sizeOptions: Size[] = ["sm", "md", "lg"];
- if (!sizeOptions.includes(size)) {
- realSize = "md";
- }
-
- /**
- * Ensure that the tag variant used is one of the options, either `subtle`,
- * `solid`, or `outline` (or undefined)
- */
- let realTagVariant: TagVariant | undefined = tagVariant;
- const tagVariantOptions: TagVariant[] = ["subtle", "solid", "outline"];
- if (tagVariant !== undefined) {
- if (!tagVariantOptions.includes(tagVariant)) {
- realTagVariant = "subtle";
- }
- }
+ // Unless `menuIsOpen` is controlled, disable it if the select is readonly
+ const realMenuIsOpen =
+ menuIsOpen ?? (inputProps.readOnly ? false : undefined);
- /** Ensure that the selected option style is either `color` or `check` */
+ // Ensure that the selected option style is either `color` or `check`
let realSelectedOptionStyle: SelectedOptionStyle = selectedOptionStyle;
const selectedOptionStyleOptions: SelectedOptionStyle[] = ["color", "check"];
if (!selectedOptionStyleOptions.includes(selectedOptionStyle)) {
realSelectedOptionStyle = "color";
}
- /** Ensure that the color used for the selected options is a string */
- let realSelectedOptionColor: string = selectedOptionColor;
- if (typeof selectedOptionColor !== "string") {
- realSelectedOptionColor = "blue";
+ // Ensure that the color used for the selected options is a string
+ let realSelectedOptionColorScheme: string =
+ selectedOptionColorScheme || selectedOptionColor || "blue";
+ if (typeof realSelectedOptionColorScheme !== "string") {
+ realSelectedOptionColorScheme = "blue";
}
const select: Props = {
@@ -83,11 +75,11 @@ const useChakraSelectProps = <
},
// Custom select props
colorScheme,
- size: realSize,
- tagVariant: realTagVariant,
+ size,
+ tagVariant,
selectedOptionStyle: realSelectedOptionStyle,
- selectedOptionColor: realSelectedOptionColor,
- hasStickyGroupHeaders,
+ selectedOptionColorScheme: realSelectedOptionColorScheme,
+ variant: variant ?? defaultVariant,
chakraStyles,
focusBorderColor,
errorBorderColor,
@@ -97,11 +89,12 @@ const useChakraSelectProps = <
isDisabled: inputProps.disabled,
isInvalid: !!inputProps["aria-invalid"],
inputId: inputProps.id,
+ isReadOnly: inputProps.readOnly,
+ menuIsOpen: realMenuIsOpen,
...props,
// aria-invalid can be passed to react-select, so we allow that to
// override the `isInvalid` prop
- "aria-invalid":
- props["aria-invalid"] ?? inputProps["aria-invalid"] ? true : undefined,
+ "aria-invalid": props["aria-invalid"] ?? inputProps["aria-invalid"],
};
return select;
diff --git a/src/utils.ts b/src/utils.ts
index ab40595..bd941e6 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,15 +1,20 @@
+import { useBreakpointValue } from "@chakra-ui/media-query";
+import { useTheme } from "@chakra-ui/system";
import type { CommonPropsAndClassName, GroupBase } from "react-select";
+import type { Size, SizeProp } from "./types";
/**
+ * Clean Common Props
+ *
* Borrowed from the original `react-select` package
*
- * @see {@link https://github.com/JedWatson/react-select/blob/2d3d6afe18421ea5b6c3f8f0db479ad323c35639/packages/react-select/src/utils.ts#L74}
+ * @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
*/
export const cleanCommonProps = <
Option,
IsMulti extends boolean,
Group extends GroupBase,
- AdditionalProps
+ AdditionalProps,
>(
props: Partial> &
AdditionalProps
@@ -23,6 +28,7 @@ export const cleanCommonProps = <
clearValue,
cx,
getStyles,
+ getClassNames,
getValue,
hasValue,
isMulti,
@@ -36,3 +42,47 @@ export const cleanCommonProps = <
} = props;
return { ...innerProps };
};
+
+/** A typeguard to ensure the default size on the Input component is valid. */
+const isSize = (size: unknown): size is Size => {
+ const isString = typeof size === "string";
+ return isString && ["sm", "md", "lg"].includes(size);
+};
+
+const getDefaultSize = (size: unknown): Size => {
+ if (isSize(size)) {
+ return size;
+ }
+
+ if (size === "xs") {
+ return "sm";
+ }
+
+ // This shouldn't be necessary but it might help the size get closer to the
+ // user's goal if they have `xl` as a custom size.
+ if (size === "xl") {
+ return "lg";
+ }
+
+ return "md";
+};
+
+export const useSize = (size: SizeProp | undefined): Size => {
+ const chakraTheme = useTheme();
+ const defaultSize = getDefaultSize(
+ chakraTheme.components.Input.defaultProps.size
+ );
+
+ // Ensure that the size used is one of the options, either `sm`, `md`, or `lg`
+ const definedSize: SizeProp = size ?? defaultSize;
+ // Or, if a breakpoint is passed, get the size based on the current screen size
+ const realSize: Size =
+ useBreakpointValue(
+ typeof definedSize === "string" ? [definedSize] : definedSize,
+ {
+ fallback: "md",
+ }
+ ) || defaultSize;
+
+ return realSize;
+};