chakra-react-select - npm Package Compare versions

Comparing version 4.7.5 to 4.7.6

dist/cjs/chakra-components/control.js

@@ -80,3 +80,3 @@ "use strict";
     "data-disabled": isDisabled ? true : undefined,
-    "aria-readonly": isReadOnly ? true : undefined
+    "data-readonly": isReadOnly ? true : undefined
   }), children);
@@ -109,6 +109,11 @@ };
  *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/icons/src/ChevronDown.tsx}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/icons/src/ChevronDown.tsx}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
  */
 var DownChevron = exports.DownChevron = function DownChevron(props) {
-  return /*#__PURE__*/_react["default"].createElement(_icon.Icon, props, /*#__PURE__*/_react["default"].createElement("path", {
+  return /*#__PURE__*/_react["default"].createElement(_icon.Icon, _extends({
+    role: "presentation",
+    focusable: "false",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
     fill: "currentColor",
@@ -143,3 +148,3 @@ d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
   var iconSize = iconSizes[size];
-  var initialSx = _extends({}, inputStyles.addon, {
+  var initialDropdownIndicatorSx = _extends({}, inputStyles.addon, {
     display: "flex",
@@ -160,8 +165,8 @@ alignItems: "center",
   });
-  var sx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
-  var initialIconStyles = {
+  var dropdownIndicatorSx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialDropdownIndicatorSx, props) : initialDropdownIndicatorSx;
+  var initialDownChevronSx = {
     height: "1em",
     width: "1em"
   };
-  var iconSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialIconStyles, props) : initialIconStyles;
+  var downChevronSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialDownChevronSx, props) : initialDownChevronSx;
   return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
@@ -172,5 +177,5 @@ className: cx({
     }, className),
-    sx: sx
+    sx: dropdownIndicatorSx
   }), children || /*#__PURE__*/_react["default"].createElement(DownChevron, {
-    sx: iconSx
+    sx: downChevronSx
   }));
@@ -182,3 +187,3 @@ };
  *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/close-button/src/close-button.tsx#L12-L21}
  */
@@ -185,0 +190,0 @@ var CrossIcon = exports.CrossIcon = function CrossIcon(props) {

dist/cjs/chakra-components/input.js

@@ -19,4 +19,3 @@ "use strict";
     chakraStyles = _props$selectProps.chakraStyles,
-    isReadOnly = _props$selectProps.isReadOnly,
-    isRequired = _props$selectProps.isRequired;
+    isReadOnly = _props$selectProps.isReadOnly;
   var _cleanCommonProps = (0, _utils.cleanCommonProps)(props),
@@ -75,5 +74,3 @@ innerRef = _cleanCommonProps.innerRef,
     disabled: isDisabled,
-    readOnly: isReadOnly ? true : undefined,
-    "aria-readonly": isReadOnly ? true : undefined,
-    "aria-required": isRequired ? true : undefined
+    readOnly: isReadOnly ? true : undefined
   }, innerProps)));
@@ -80,0 +77,0 @@ };

dist/cjs/chakra-components/menu.js

@@ -10,3 +10,5 @@ "use strict";
 var _utils = require("../utils");
+var _excluded = ["data"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -82,3 +84,5 @@ var alignToControl = function alignToControl(placement) {
   var sx = chakraStyles != null && chakraStyles.menuList ? chakraStyles.menuList(initialSx, props) : initialSx;
-  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
+    role: "listbox"
+  }, innerProps, {
     className: cx({
@@ -163,3 +167,4 @@ "menu-list": true,
   var chakraStyles = selectProps.chakraStyles;
-  var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group({}, props) : {};
+  var initialSx = {};
+  var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group(initialSx, props) : initialSx;
   return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
@@ -181,3 +186,2 @@ className: cx({
     className = props.className,
-    children = props.children,
     _props$selectProps4 = props.selectProps,
@@ -187,2 +191,5 @@ chakraStyles = _props$selectProps4.chakraStyles,
     hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders;
+  var _cleanCommonProps = (0, _utils.cleanCommonProps)(props),
+    data = _cleanCommonProps.data,
+    innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);
   var menuStyles = (0, _system.useMultiStyleConfig)("Menu");
@@ -211,3 +218,3 @@ var size = (0, _utils.useSize)(sizeProp);
   var sx = chakraStyles != null && chakraStyles.groupHeading ? chakraStyles.groupHeading(initialSx, props) : initialSx;
-  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
     className: cx({
@@ -217,3 +224,3 @@ "group-heading": true
     sx: sx
-  }, children);
+  }));
 };
@@ -252,14 +259,19 @@
     selectedOptionColorScheme = _props$selectProps5.selectedOptionColorScheme;
+  var menuItemStyles = (0, _system.useMultiStyleConfig)("Menu").item;
   var size = (0, _utils.useSize)(sizeProp);
-  var menuItemStyles = (0, _system.useMultiStyleConfig)("Menu").item;
-  var paddings = {
-    sm: "0.3rem 0.6rem",
-    md: "0.4rem 0.8rem",
-    lg: "0.5rem 1rem"
+  var horizontalPaddingOptions = {
+    sm: "0.6rem",
+    md: "0.8rem",
+    lg: "1rem"
   };
+  var verticalPaddingOptions = {
+    sm: "0.3rem",
+    md: "0.4rem",
+    lg: "0.5rem"
+  };
 
   /**
-   * Use the same selected color as the border of the select component
+   * Use the same selected color as the border/shadow of the select/input components
    *
-   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/components/input.ts#L73}
+   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/theme/src/components/input.ts#L92-L93}
    */
@@ -272,4 +284,5 @@ var selectedBg = (0, _system.useColorModeValue)(selectedOptionColorScheme + ".500", selectedOptionColorScheme + ".300");
   var showCheckIcon = selectedOptionStyle === "check" && (!isMulti || hideSelectedOptions === false);
-  var shouldHighlight = selectedOptionStyle === "color" && isSelected;
+  var shouldHighlight = selectedOptionStyle === "color";
   var initialSx = _extends({}, menuItemStyles, {
+    cursor: "pointer",
     display: "flex",
@@ -280,15 +293,17 @@ alignItems: "center",
     fontSize: size,
-    padding: paddings[size]
-  }, isFocused && menuItemStyles._focus, shouldHighlight && {
-    bg: selectedBg,
-    color: selectedColor,
-    _active: {
-      bg: selectedBg
+    paddingX: horizontalPaddingOptions[size],
+    paddingY: verticalPaddingOptions[size]
+  }, shouldHighlight && {
+    _selected: {
+      bg: selectedBg,
+      color: selectedColor,
+      _active: {
+        bg: selectedBg
+      }
     }
-  }, isDisabled && menuItemStyles._disabled, isDisabled && {
-    _active: {}
   });
   var sx = chakraStyles != null && chakraStyles.option ? chakraStyles.option(initialSx, props) : initialSx;
-  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
-    role: "button",
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
+    role: "option"
+  }, innerProps, {
     className: cx({
@@ -302,4 +317,5 @@ option: true,
     ref: innerRef,
-    "data-disabled": isDisabled ? true : undefined,
-    "aria-disabled": isDisabled ? true : undefined
+    "data-focus": isFocused ? true : undefined,
+    "aria-disabled": isDisabled ? true : undefined,
+    "aria-selected": isSelected
   }), showCheckIcon && /*#__PURE__*/_react["default"].createElement(_menu.MenuIcon, {
@@ -306,0 +322,0 @@ fontSize: "0.8em",

dist/cjs/utils.js

@@ -15,3 +15,3 @@ "use strict";
  *
- * @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
+ * @see {@link https://github.com/JedWatson/react-select/blob/2f94e8d/packages/react-select/src/utils.ts#L79-L110}
  */
@@ -18,0 +18,0 @@ var cleanCommonProps = exports.cleanCommonProps = function cleanCommonProps(props) {

dist/esm/chakra-components/control.js

@@ -75,3 +75,3 @@ var _excluded = ["height", "h"];
     "data-disabled": isDisabled ? true : undefined,
-    "aria-readonly": isReadOnly ? true : undefined
+    "data-readonly": isReadOnly ? true : undefined
   }), children);
@@ -104,6 +104,11 @@ };
  *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/icons/src/ChevronDown.tsx}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/icons/src/ChevronDown.tsx}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
  */
 export var DownChevron = function DownChevron(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("path", {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    role: "presentation",
+    focusable: "false",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -138,3 +143,3 @@ d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
   var iconSize = iconSizes[size];
-  var initialSx = _extends({}, inputStyles.addon, {
+  var initialDropdownIndicatorSx = _extends({}, inputStyles.addon, {
     display: "flex",
@@ -155,8 +160,8 @@ alignItems: "center",
   });
-  var sx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
-  var initialIconStyles = {
+  var dropdownIndicatorSx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialDropdownIndicatorSx, props) : initialDropdownIndicatorSx;
+  var initialDownChevronSx = {
     height: "1em",
     width: "1em"
   };
-  var iconSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialIconStyles, props) : initialIconStyles;
+  var downChevronSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialDownChevronSx, props) : initialDownChevronSx;
   return /*#__PURE__*/React.createElement(Box, _extends({}, innerProps, {
@@ -167,5 +172,5 @@ className: cx({
     }, className),
-    sx: sx
+    sx: dropdownIndicatorSx
   }), children || /*#__PURE__*/React.createElement(DownChevron, {
-    sx: iconSx
+    sx: downChevronSx
   }));
@@ -177,3 +182,3 @@ };
  *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/close-button/src/close-button.tsx#L12-L21}
  */
@@ -180,0 +185,0 @@ export var CrossIcon = function CrossIcon(props) {

dist/esm/chakra-components/input.js

@@ -14,4 +14,3 @@ var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
     chakraStyles = _props$selectProps.chakraStyles,
-    isReadOnly = _props$selectProps.isReadOnly,
-    isRequired = _props$selectProps.isRequired;
+    isReadOnly = _props$selectProps.isReadOnly;
   var _cleanCommonProps = cleanCommonProps(props),
@@ -70,5 +69,3 @@ innerRef = _cleanCommonProps.innerRef,
     disabled: isDisabled,
-    readOnly: isReadOnly ? true : undefined,
-    "aria-readonly": isReadOnly ? true : undefined,
-    "aria-required": isRequired ? true : undefined
+    readOnly: isReadOnly ? true : undefined
   }, innerProps)));
@@ -75,0 +72,0 @@ };

dist/esm/chakra-components/menu.js

@@ -0,1 +1,3 @@
+var _excluded = ["data"];
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -6,3 +8,3 @@ import React from "react";
 import { useColorModeValue, useMultiStyleConfig } from "@chakra-ui/system";
-import { useSize } from "../utils";
+import { cleanCommonProps, useSize } from "../utils";
 var alignToControl = function alignToControl(placement) {
@@ -77,3 +79,5 @@ var placementToCSSProp = {
   var sx = chakraStyles != null && chakraStyles.menuList ? chakraStyles.menuList(initialSx, props) : initialSx;
-  return /*#__PURE__*/React.createElement(Box, _extends({}, innerProps, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    role: "listbox"
+  }, innerProps, {
     className: cx({
@@ -158,3 +162,4 @@ "menu-list": true,
   var chakraStyles = selectProps.chakraStyles;
-  var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group({}, props) : {};
+  var initialSx = {};
+  var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group(initialSx, props) : initialSx;
   return /*#__PURE__*/React.createElement(Box, _extends({}, innerProps, {
@@ -176,3 +181,2 @@ className: cx({
     className = props.className,
-    children = props.children,
     _props$selectProps4 = props.selectProps,
@@ -182,2 +186,5 @@ chakraStyles = _props$selectProps4.chakraStyles,
     hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders;
+  var _cleanCommonProps = cleanCommonProps(props),
+    data = _cleanCommonProps.data,
+    innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);
   var menuStyles = useMultiStyleConfig("Menu");
@@ -206,3 +213,3 @@ var size = useSize(sizeProp);
   var sx = chakraStyles != null && chakraStyles.groupHeading ? chakraStyles.groupHeading(initialSx, props) : initialSx;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({}, innerProps, {
     className: cx({
@@ -212,3 +219,3 @@ "group-heading": true
     sx: sx
-  }, children);
+  }));
 };
@@ -247,14 +254,19 @@
     selectedOptionColorScheme = _props$selectProps5.selectedOptionColorScheme;
+  var menuItemStyles = useMultiStyleConfig("Menu").item;
   var size = useSize(sizeProp);
-  var menuItemStyles = useMultiStyleConfig("Menu").item;
-  var paddings = {
-    sm: "0.3rem 0.6rem",
-    md: "0.4rem 0.8rem",
-    lg: "0.5rem 1rem"
+  var horizontalPaddingOptions = {
+    sm: "0.6rem",
+    md: "0.8rem",
+    lg: "1rem"
   };
+  var verticalPaddingOptions = {
+    sm: "0.3rem",
+    md: "0.4rem",
+    lg: "0.5rem"
+  };
 
   /**
-   * Use the same selected color as the border of the select component
+   * Use the same selected color as the border/shadow of the select/input components
    *
-   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/components/input.ts#L73}
+   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/theme/src/components/input.ts#L92-L93}
    */
@@ -267,4 +279,5 @@ var selectedBg = useColorModeValue(selectedOptionColorScheme + ".500", selectedOptionColorScheme + ".300");
   var showCheckIcon = selectedOptionStyle === "check" && (!isMulti || hideSelectedOptions === false);
-  var shouldHighlight = selectedOptionStyle === "color" && isSelected;
+  var shouldHighlight = selectedOptionStyle === "color";
   var initialSx = _extends({}, menuItemStyles, {
+    cursor: "pointer",
     display: "flex",
@@ -275,15 +288,17 @@ alignItems: "center",
     fontSize: size,
-    padding: paddings[size]
-  }, isFocused && menuItemStyles._focus, shouldHighlight && {
-    bg: selectedBg,
-    color: selectedColor,
-    _active: {
-      bg: selectedBg
+    paddingX: horizontalPaddingOptions[size],
+    paddingY: verticalPaddingOptions[size]
+  }, shouldHighlight && {
+    _selected: {
+      bg: selectedBg,
+      color: selectedColor,
+      _active: {
+        bg: selectedBg
+      }
     }
-  }, isDisabled && menuItemStyles._disabled, isDisabled && {
-    _active: {}
   });
   var sx = chakraStyles != null && chakraStyles.option ? chakraStyles.option(initialSx, props) : initialSx;
-  return /*#__PURE__*/React.createElement(Box, _extends({}, innerProps, {
-    role: "button",
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    role: "option"
+  }, innerProps, {
     className: cx({
@@ -297,4 +312,5 @@ option: true,
     ref: innerRef,
-    "data-disabled": isDisabled ? true : undefined,
-    "aria-disabled": isDisabled ? true : undefined
+    "data-focus": isFocused ? true : undefined,
+    "aria-disabled": isDisabled ? true : undefined,
+    "aria-selected": isSelected
   }), showCheckIcon && /*#__PURE__*/React.createElement(MenuIcon, {
@@ -301,0 +317,0 @@ fontSize: "0.8em",

dist/esm/utils.js

@@ -11,3 +11,3 @@ var _excluded = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
  *
- * @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
+ * @see {@link https://github.com/JedWatson/react-select/blob/2f94e8d/packages/react-select/src/utils.ts#L79-L110}
  */
@@ -14,0 +14,0 @@ export var cleanCommonProps = function cleanCommonProps(props) {

dist/types/chakra-components/control.d.ts

@@ -8,3 +8,4 @@ import type { IconProps } from "@chakra-ui/icon";
  *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/icons/src/ChevronDown.tsx}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/icons/src/ChevronDown.tsx}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
  */
@@ -16,3 +17,3 @@ export declare const DownChevron: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
  *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/close-button/src/close-button.tsx#L12-L21}
  */
@@ -19,0 +20,0 @@ export declare const CrossIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

dist/types/index.d.ts

@@ -12,3 +12,3 @@ import "./module-augmentation";
 export type { AsyncCreatableSelectComponent } from "./select/async-creatable-select";
-export type { SizeProps, Size, TagVariant, SelectedOptionStyle, StylesFunction, ChakraStylesConfig, OptionBase, } from "./types";
+export type { SizeProps, Size, TagVariant, SelectedOptionStyle, ColorScheme, StylesFunction, ChakraStylesConfig, OptionBase, } from "./types";
 export * from "react-select";
@@ -15,0 +15,0 @@ export { useAsync } from "react-select/async";

dist/types/module-augmentation.d.ts

 import type { SystemStyleObject } from "@chakra-ui/system";
 import type { GroupBase, StylesConfig, ThemeConfig } from "react-select";
-import type { ChakraStylesConfig, SelectedOptionStyle, SizeProp, TagVariant, Variant } from "./types";
+import type { ChakraStylesConfig, ColorScheme, SelectedOptionStyle, SizeProp, TagVariant, Variant } from "./types";
 /**
@@ -55,7 +55,10 @@ * This is necessary for the module `react-select/base` to be seen by TypeScript.
          *
-         * - The `FormLabel` will show a required indicator
-         * - The form element (e.g, Input) will have `aria-required` set to true
+         * - The hidden input element will get the required attribute, triggering native form validation on submit
+         * - The combobox input will have `aria-required` set to true
          *
          * @see {@link https://chakra-ui.com/docs/components/input/props}
          * @see {@link https://chakra-ui.com/docs/components/form-control/props}
+        @@ -86,7 +87,7 @@ declare module "react-select/base" {
+         * @see {@link https://github.com/csandman/chakra-react-select#colorscheme}
+         * @see {@link https://chakra-ui.com/docs/components/tag/props}
          */
@@ -73,3 +76,3 @@ isRequired?: boolean;
          */
-        colorScheme?: string;
+        colorScheme?: ColorScheme;
         /**
@@ -116,7 +119,7 @@ * The `variant` prop that will be forwarded to your `MultiValue` component
          */
-        selectedOptionColorScheme?: string;
+        selectedOptionColorScheme?: ColorScheme;
         /**
          * @deprecated Replaced by {@link selectedOptionColorScheme}
          */
-        selectedOptionColor?: string;
+        selectedOptionColor?: ColorScheme;
         /**
@@ -123,0 +126,0 @@ * The color value to style the border of the `Control` with when the

dist/types/types.d.ts

@@ -1,2 +0,2 @@
-import type { Pseudos, ResponsiveObject, SystemStyleObject } from "@chakra-ui/system";
+import type { Pseudos, ResponsiveObject, SystemStyleObject, ThemeTypings } from "@chakra-ui/system";
 import type { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, GroupBase, GroupHeadingProps, GroupProps, IndicatorSeparatorProps, IndicatorsContainerProps, InputProps, LoadingIndicatorProps, MenuListProps, MenuProps, MultiValueProps, NoticeProps, OptionProps, PlaceholderProps, SingleValueProps, ValueContainerProps } from "react-select";
@@ -19,5 +19,6 @@ /**
 export type SizeProp = Size | ResponsiveObject<Size> | Size[];
-export type TagVariant = "subtle" | "solid" | "outline" | (string & {});
+export type TagVariant = ThemeTypings["components"]["Tag"]["variants"];
 export type SelectedOptionStyle = "color" | "check";
-export type Variant = "outline" | "filled" | "flushed" | "unstyled" | (string & {});
+export type Variant = ThemeTypings["components"]["Input"]["variants"];
+export type ColorScheme = ThemeTypings["colorSchemes"];
 export type StylesFunction<ComponentProps> = (provided: SystemStyleObject, state: ComponentProps) => SystemStyleObject;
@@ -24,0 +25,0 @@ export interface ChakraStylesConfig<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {

dist/types/utils.d.ts

@@ -8,5 +8,5 @@ import type { CommonPropsAndClassName, GroupBase } from "react-select";
  *
- * @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
+ * @see {@link https://github.com/JedWatson/react-select/blob/2f94e8d/packages/react-select/src/utils.ts#L79-L110}
  */
 export declare const cleanCommonProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, AdditionalProps>(props: Partial<CommonPropsAndClassName<Option, IsMulti, Group>> & AdditionalProps) => Omit<AdditionalProps, keyof CommonPropsAndClassName<Option, IsMulti, Group>>;
 export declare const useSize: (size: SizeProp | undefined) => Size;

package.json

 {
   "name": "chakra-react-select",
-  "version": "4.7.5",
+  "version": "4.7.6",
   "description": "A Chakra UI wrapper for the popular library React Select",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

426181

increased by1.13%

Lines of code

2933

increased by1.49%

No dependency changes