chakra-react-select - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

dist/cjs/chakra-components.js

@@ -10,4 +10,12 @@ "use strict";
 
-var _react2 = require("@chakra-ui/react");
+var _icon = require("@chakra-ui/icon");
 
+var _layout = require("@chakra-ui/layout");
+
+var _menu = require("@chakra-ui/menu");
+
+var _spinner = require("@chakra-ui/spinner");
+
+var _system = require("@chakra-ui/system");
+
 var _utils = require("./utils");
@@ -48,3 +56,3 @@
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.container ? chakraStyles.container(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     className: cx({
@@ -83,3 +91,3 @@ "--is-disabled": isDisabled,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.valueContainer ? chakraStyles.valueContainer(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {
     className: cx({
@@ -106,3 +114,3 @@ "value-container": true,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.indicatorsContainer ? chakraStyles.indicatorsContainer(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {
     className: cx({
@@ -130,3 +138,3 @@ indicators: true
       errorBorderColor = _props$selectProps2.errorBorderColor;
-  var inputStyles = (0, _react2.useMultiStyleConfig)("Input", {
+  var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
     focusBorderColor: focusBorderColor,
@@ -151,5 +159,5 @@ errorBorderColor: errorBorderColor,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.control ? chakraStyles.control(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.StylesProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_system.StylesProvider, {
     value: inputStyles
-  }, /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     ref: innerRef,
@@ -187,3 +195,3 @@ className: cx({
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.placeholder ? chakraStyles.placeholder(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     className: cx({
@@ -216,3 +224,3 @@ placeholder: true
 
-  var _useMultiStyleConfig = (0, _react2.useMultiStyleConfig)("Tag", {
+  var _useMultiStyleConfig = (0, _system.useMultiStyleConfig)("Tag", {
     size: size,
@@ -282,3 +290,3 @@ colorScheme: data.colorScheme || colorScheme,
       sx = props.sx;
-  return /*#__PURE__*/_react["default"].createElement(_react2.chakra.span, _extends({}, innerProps, {
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.span, _extends({}, innerProps, {
     sx: sx
@@ -292,3 +300,3 @@ }), children);
       sx = props.sx;
-  return /*#__PURE__*/_react["default"].createElement(_react2.chakra.span, _extends({}, innerProps, {
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.span, _extends({}, innerProps, {
     sx: sx
@@ -300,3 +308,3 @@ }), children);
 var TagCloseIcon = function TagCloseIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement(_react2.Icon, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_icon.Icon, _extends({
     verticalAlign: "inherit",
@@ -321,3 +329,3 @@ viewBox: "0 0 512 512"
 
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({}, innerProps, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
     role: "button",
@@ -349,3 +357,3 @@ sx: sx,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.singleValue ? chakraStyles.singleValue(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     className: cx({
@@ -368,3 +376,3 @@ "single-value": true,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.indicatorSeparator ? chakraStyles.indicatorSeparator(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Divider, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Divider, {
     className: cx({
@@ -379,3 +387,3 @@ "indicator-separator": true
 var CloseIcon = function CloseIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement(_react2.Icon, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_icon.Icon, _extends({
     focusable: "false",
@@ -398,3 +406,3 @@ "aria-hidden": true
       chakraStyles = _props$selectProps4.chakraStyles;
-  var closeButtonStyles = (0, _react2.useStyleConfig)("CloseButton", {
+  var closeButtonStyles = (0, _system.useStyleConfig)("CloseButton", {
     size: size
@@ -413,3 +421,3 @@ });
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.clearIndicator ? chakraStyles.clearIndicator(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     role: "button",
@@ -431,3 +439,3 @@ className: cx({
 
-var ChevronDownIcon = (0, _react2.createIcon)({
+var ChevronDownIcon = (0, _icon.createIcon)({
   displayName: "ChevronDownIcon",
@@ -450,3 +458,3 @@ d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
 
-  var _useStyles = (0, _react2.useStyles)(),
+  var _useStyles = (0, _system.useStyles)(),
       addon = _useStyles.addon;
@@ -472,3 +480,3 @@
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({}, innerProps, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
     className: cx({
@@ -502,3 +510,3 @@ indicator: true,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.loadingIndicator ? chakraStyles.loadingIndicator(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Spinner, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_spinner.Spinner, _extends({
     className: cx({
@@ -523,3 +531,3 @@ indicator: true,
       chakraStyles = props.selectProps.chakraStyles;
-  var menuStyles = (0, _react2.useMultiStyleConfig)("Menu", {});
+  var menuStyles = (0, _system.useMultiStyleConfig)("Menu", {});
 
@@ -540,3 +548,3 @@ var initialStyles = _objectSpread(_objectSpread(_objectSpread({
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.menu ? chakraStyles.menu(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     ref: innerRef,
@@ -547,3 +555,3 @@ className: cx({
     sx: sx
-  }, innerProps), /*#__PURE__*/_react["default"].createElement(_react2.StylesProvider, {
+  }, innerProps), /*#__PURE__*/_react["default"].createElement(_system.StylesProvider, {
     value: menuStyles
@@ -564,6 +572,6 @@ }, children));
 
-  var _useStyles2 = (0, _react2.useStyles)(),
+  var _useStyles2 = (0, _system.useStyles)(),
       list = _useStyles2.list;
 
-  var borderRadii = (0, _react2.useTheme)().radii;
+  var borderRadii = (0, _system.useTheme)().radii;
 
@@ -577,3 +585,3 @@ var initialStyles = _objectSpread(_objectSpread({}, list), {}, {
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.menuList ? chakraStyles.menuList(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {
     className: cx({
@@ -600,3 +608,3 @@ "menu-list": true,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.group ? chakraStyles.group({}, props) : {};
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {
     className: cx({
@@ -611,3 +619,3 @@ group: true
     getStyles: getStyles
-  }), label), /*#__PURE__*/_react["default"].createElement(_react2.Box, null, children));
+  }), label), /*#__PURE__*/_react["default"].createElement(_layout.Box, null, children));
 };
@@ -624,7 +632,7 @@
 
-  var _useStyles3 = (0, _react2.useStyles)(),
+  var _useStyles3 = (0, _system.useStyles)(),
       groupTitle = _useStyles3.groupTitle,
       bg = _useStyles3.list.bg;
 
-  var chakraTheme = (0, _react2.useTheme)();
+  var chakraTheme = (0, _system.useTheme)();
   var fontSizes = {
@@ -652,3 +660,3 @@ sm: chakraTheme.fontSizes.xs,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.groupHeading ? chakraStyles.groupHeading(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {
     className: cx({
@@ -692,3 +700,3 @@ "group-heading": true
       chakraStyles = _props$selectProps9.chakraStyles;
-  var itemStyles = (0, _react2.useStyles)().item;
+  var itemStyles = (0, _system.useStyles)().item;
   var paddings = {
@@ -701,4 +709,4 @@ sm: "0.3rem 0.6rem",
 
-  var selectedBg = (0, _react2.useColorModeValue)("".concat(selectedOptionColor, ".500"), "".concat(selectedOptionColor, ".300"));
-  var selectedColor = (0, _react2.useColorModeValue)("white", "black"); // Don't create exta space for the checkmark if using a multi select with
+  var selectedBg = (0, _system.useColorModeValue)("".concat(selectedOptionColor, ".500"), "".concat(selectedOptionColor, ".300"));
+  var selectedColor = (0, _system.useColorModeValue)("white", "black"); // Don't create exta space for the checkmark if using a multi select with
   // options that dissapear when they're selected
@@ -728,3 +736,3 @@
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.option ? chakraStyles.option(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     role: "button",
@@ -740,4 +748,5 @@ className: cx({
   }, innerProps, {
-    disabled: isDisabled ? true : undefined
-  }), showCheckIcon && /*#__PURE__*/_react["default"].createElement(_react2.MenuIcon, {
+    "data-disabled": isDisabled ? true : undefined,
+    "aria-disabled": isDisabled ? true : undefined
+  }), showCheckIcon && /*#__PURE__*/_react["default"].createElement(_menu.MenuIcon, {
     fontSize: "0.8em",
@@ -776,3 +785,3 @@ marginEnd: "0.75rem",
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.loadingMessage ? chakraStyles.loadingMessage(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     className: cx({
@@ -812,3 +821,3 @@ "menu-notice": true,
   var sx = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.noOptionsMessage ? chakraStyles.noOptionsMessage(initialStyles, props) : initialStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, _extends({
     className: cx({
@@ -868,3 +877,3 @@ "menu-notice": true,
   var inputStyles = chakraStyles !== null && chakraStyles !== void 0 && chakraStyles.input ? chakraStyles.input(initialInputStyles, props) : initialInputStyles;
-  return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {
     className: cx({
@@ -875,3 +884,3 @@ "input-container": true
     sx: containerStyles
-  }, /*#__PURE__*/_react["default"].createElement(_react2.chakra.input, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(_system.chakra.input, _extends({
     className: cx({
@@ -878,0 +887,0 @@ input: true

dist/cjs/use-chakra-select-props.js

@@ -8,4 +8,6 @@ "use strict";
 
-var _react = require("@chakra-ui/react");
+var _formControl = require("@chakra-ui/form-control");
 
+var _system = require("@chakra-ui/system");
+
 var _chakraComponents = _interopRequireDefault(require("./chakra-components"));
@@ -58,3 +60,3 @@
   // `isInvalid`
-  var inputProps = (0, _react.useFormControl)({
+  var inputProps = (0, _formControl.useFormControl)({
     id: inputId,
@@ -68,3 +70,3 @@ isDisabled: isDisabled,
 
-  var placeholderColor = (0, _react.useColorModeValue)("gray.400", "whiteAlpha.400"); // Ensure that the size used is one of the options, either `sm`, `md`, or `lg`
+  var placeholderColor = (0, _system.useColorModeValue)("gray.400", "whiteAlpha.400"); // Ensure that the size used is one of the options, either `sm`, `md`, or `lg`
 
@@ -71,0 +73,0 @@ var realSize = size;

dist/esm/chakra-components.js

@@ -16,3 +16,7 @@ var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
 import React from "react";
-import { Box, Divider, Icon, MenuIcon, Spinner, StylesProvider, chakra, createIcon, useColorModeValue, useMultiStyleConfig, useStyleConfig, useStyles, useTheme } from "@chakra-ui/react";
+import { Icon, createIcon } from "@chakra-ui/icon";
+import { Box, Divider } from "@chakra-ui/layout";
+import { MenuIcon } from "@chakra-ui/menu";
+import { Spinner } from "@chakra-ui/spinner";
+import { StylesProvider, chakra, useColorModeValue, useMultiStyleConfig, useStyleConfig, useStyles, useTheme } from "@chakra-ui/system";
 import { cleanCommonProps } from "./utils";
@@ -751,3 +755,4 @@
   }, innerProps, {
-    disabled: isDisabled ? true : undefined
+    "data-disabled": isDisabled ? true : undefined,
+    "aria-disabled": isDisabled ? true : undefined
   }), showCheckIcon && /*#__PURE__*/React.createElement(MenuIcon, {
@@ -754,0 +759,0 @@ fontSize: "0.8em",

dist/esm/use-chakra-select-props.js

@@ -13,3 +13,4 @@ var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "inputId", "tagVariant", "hasStickyGroupHeaders", "selectedOptionStyle", "selectedOptionColor", "focusBorderColor", "errorBorderColor", "chakraStyles", "onFocus", "onBlur"];
 
-import { useColorModeValue, useFormControl } from "@chakra-ui/react";
+import { useFormControl } from "@chakra-ui/form-control";
+import { useColorModeValue } from "@chakra-ui/system";
 import chakraComponents from "./chakra-components";
@@ -16,0 +17,0 @@

dist/types/index.d.ts

@@ -1,2 +0,2 @@
-import type { SystemStyleObject } from "@chakra-ui/react";
+import type { SystemStyleObject } from "@chakra-ui/system";
 import type { GroupBase } from "react-select";
@@ -3,0 +3,0 @@ declare module "react-select/dist/declarations/src/components/MultiValue" {

dist/types/types.d.ts

@@ -1,2 +0,2 @@
-import type { CSSWithMultiValues, RecursiveCSSObject, SystemStyleObject } from "@chakra-ui/react";
+import type { CSSWithMultiValues, RecursiveCSSObject, SystemStyleObject } 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";
@@ -3,0 +3,0 @@ export interface SxProps extends CSSWithMultiValues {

package.json

 {
   "name": "chakra-react-select",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "A Chakra UI wrapper for the popular library React Select",
@@ -42,3 +42,8 @@ "license": "MIT",
   "peerDependencies": {
-    "@chakra-ui/react": "^1.6.0",
+    "@chakra-ui/form-control": "^1.0.0",
+    "@chakra-ui/icon": "^2.0.0",
+    "@chakra-ui/layout": "^1.0.0",
+    "@chakra-ui/menu": "^1.0.0",
+    "@chakra-ui/spinner": "^1.0.0",
+    "@chakra-ui/system": "^1.2.0",
     "react": ">=16.8.6",
@@ -45,0 +50,0 @@ "react-dom": ">=16.8.6"

src/types.ts

@@ -5,3 +5,3 @@ import type {
   SystemStyleObject,
-} from "@chakra-ui/react";
+} from "@chakra-ui/system";
 import type {
@@ -8,0 +8,0 @@ ClearIndicatorProps,

src/use-chakra-select-props.ts

@@ -1,2 +0,3 @@
-import { useColorModeValue, useFormControl } from "@chakra-ui/react";
+import { useFormControl } from "@chakra-ui/form-control";
+import { useColorModeValue } from "@chakra-ui/system";
 import type { GroupBase, Props } from "react-select";
@@ -3,0 +4,0 @@ import chakraComponents from "./chakra-components";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

337919

increased by0.51%

Lines of code

4056

increased by0.3%

Worsened metrics

Dependency count

9

increased by125%

No dependency changes