chakra-react-select - npm Package Compare versions

Comparing version 4.0.3 to 4.1.0

dist/cjs/chakra-components/indicators.js

@@ -23,6 +23,12 @@ "use strict";
       cx = props.cx,
-      chakraStyles = props.selectProps.chakraStyles;
-  var initialStyles = {
+      _props$selectProps = props.selectProps,
+      chakraStyles = _props$selectProps.chakraStyles,
+      useBasicStyles = _props$selectProps.useBasicStyles;
+
+  var initialStyles = _extends({
     opacity: 1
-  };
+  }, useBasicStyles && {
+    display: "none"
+  });
+
   var sx = chakraStyles != null && chakraStyles.indicatorSeparator ? chakraStyles.indicatorSeparator(initialStyles, props) : initialStyles;
@@ -60,5 +66,6 @@ return /*#__PURE__*/_react["default"].createElement(_layout.Divider, {
       innerProps = props.innerProps,
-      _props$selectProps = props.selectProps,
-      size = _props$selectProps.size,
-      chakraStyles = _props$selectProps.chakraStyles;
+      _props$selectProps2 = props.selectProps,
+      size = _props$selectProps2.size,
+      chakraStyles = _props$selectProps2.chakraStyles,
+      useBasicStyles = _props$selectProps2.useBasicStyles;
 
@@ -84,2 +91,8 @@ var _useStyles = (0, _system.useStyles)(),
     fontSize: iconSize
+  }, useBasicStyles && {
+    bg: "transparent",
+    p: 0,
+    w: 6,
+    mx: 2,
+    cursor: "inherit"
   });
@@ -130,5 +143,5 @@
       isFocused = props.isFocused,
-      _props$selectProps2 = props.selectProps,
-      size = _props$selectProps2.size,
-      chakraStyles = _props$selectProps2.chakraStyles;
+      _props$selectProps3 = props.selectProps,
+      size = _props$selectProps3.size,
+      chakraStyles = _props$selectProps3.chakraStyles;
   var closeButtonStyles = (0, _system.useStyleConfig)("CloseButton", {
@@ -173,5 +186,5 @@ size: size
       innerProps = props.innerProps,
-      _props$selectProps3 = props.selectProps,
-      size = _props$selectProps3.size,
-      chakraStyles = _props$selectProps3.chakraStyles,
+      _props$selectProps4 = props.selectProps,
+      size = _props$selectProps4.size,
+      chakraStyles = _props$selectProps4.chakraStyles,
       color = props.color,
@@ -178,0 +191,0 @@ emptyColor = props.emptyColor,

dist/esm/chakra-components/indicators.js

@@ -11,6 +11,12 @@ 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); }
       cx = props.cx,
-      chakraStyles = props.selectProps.chakraStyles;
-  var initialStyles = {
+      _props$selectProps = props.selectProps,
+      chakraStyles = _props$selectProps.chakraStyles,
+      useBasicStyles = _props$selectProps.useBasicStyles;
+
+  var initialStyles = _extends({
     opacity: 1
-  };
+  }, useBasicStyles && {
+    display: "none"
+  });
+
   var sx = chakraStyles != null && chakraStyles.indicatorSeparator ? chakraStyles.indicatorSeparator(initialStyles, props) : initialStyles;
@@ -42,5 +48,6 @@ return /*#__PURE__*/React.createElement(Divider, {
       innerProps = props.innerProps,
-      _props$selectProps = props.selectProps,
-      size = _props$selectProps.size,
-      chakraStyles = _props$selectProps.chakraStyles;
+      _props$selectProps2 = props.selectProps,
+      size = _props$selectProps2.size,
+      chakraStyles = _props$selectProps2.chakraStyles,
+      useBasicStyles = _props$selectProps2.useBasicStyles;
 
@@ -66,2 +73,8 @@ var _useStyles = useStyles(),
     fontSize: iconSize
+  }, useBasicStyles && {
+    bg: "transparent",
+    p: 0,
+    w: 6,
+    mx: 2,
+    cursor: "inherit"
   });
@@ -106,5 +119,5 @@
       isFocused = props.isFocused,
-      _props$selectProps2 = props.selectProps,
-      size = _props$selectProps2.size,
-      chakraStyles = _props$selectProps2.chakraStyles;
+      _props$selectProps3 = props.selectProps,
+      size = _props$selectProps3.size,
+      chakraStyles = _props$selectProps3.chakraStyles;
   var closeButtonStyles = useStyleConfig("CloseButton", {
@@ -146,5 +159,5 @@ size: size
       innerProps = props.innerProps,
-      _props$selectProps3 = props.selectProps,
-      size = _props$selectProps3.size,
-      chakraStyles = _props$selectProps3.chakraStyles,
+      _props$selectProps4 = props.selectProps,
+      size = _props$selectProps4.size,
+      chakraStyles = _props$selectProps4.chakraStyles,
       color = props.color,
@@ -151,0 +164,0 @@ emptyColor = props.emptyColor,

dist/types/module-augmentation.d.ts

@@ -20,3 +20,3 @@ import type { SystemStyleObject } from "@chakra-ui/system";
          * @see {@link https://github.com/csandman/chakra-react-select#size--options-sm-md-lg--default-md}
-         * @see {@link https://chakra-ui.com/docs/form/input#changing-the-size-of-the-input}
+         * @see {@link https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input}
          */
@@ -32,3 +32,3 @@ size?: Size;
          * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false}
-         * @see {@link https://chakra-ui.com/docs/form/input#props}
+         * @see {@link https://chakra-ui.com/docs/components/input/props}
          */
@@ -39,4 +39,4 @@ isInvalid?: boolean;
          *
-         * @see {@link https://chakra-ui.com/docs/components/form/input#props}
-         * @see {@link https://chakra-ui.com/docs/components/form/form-control#props}
+         * @see {@link https://chakra-ui.com/docs/components/input/props}
+         * @see {@link https://chakra-ui.com/docs/components/form-control/props}
          */
@@ -49,4 +49,4 @@ isReadOnly?: boolean;
          *
-         * @see {@link https://chakra-ui.com/docs/components/form/input#props}
-         * @see {@link https://chakra-ui.com/docs/components/form/form-control#props}
+         * @see {@link https://chakra-ui.com/docs/components/input/props}
+         * @see {@link https://chakra-ui.com/docs/components/form-control/props}
          */
@@ -62,3 +62,3 @@ isRequired?: boolean;
          * @see {@link https://github.com/csandman/chakra-react-select#colorscheme}
-         * @see {@link https://chakra-ui.com/docs/data-display/tag#props}
+         * @see {@link https://chakra-ui.com/docs/components/tag/props}
          */
@@ -94,3 +94,3 @@ colorScheme?: string;
          * @see {@link https://github.com/csandman/chakra-react-select#selectedoptionstyle--options-color-check--default-color}
-         * @see {@link https://chakra-ui.com/docs/overlay/menu#menu-option-groups}
+         * @see {@link https://chakra-ui.com/docs/components/menu#menu-option-groups}
          */
@@ -113,3 +113,3 @@ selectedOptionStyle?: SelectedOptionStyle;
          * @see {@link https://github.com/csandman/chakra-react-select#focusbordercolor--default-blue500--errorbordercolor--default-red500}
-         * @see {@link https://chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors}
+         * @see {@link https://chakra-ui.com/docs/components/input#changing-the-focus-and-error-border-colors}
          */
@@ -123,3 +123,3 @@ focusBorderColor?: string;
          * @see {@link https://github.com/csandman/chakra-react-select#focusbordercolor--default-blue500--errorbordercolor--default-red500}
-         * @see {@link https://chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors}
+         * @see {@link https://chakra-ui.com/docs/components/input#changing-the-focus-and-error-border-colors}
          */
@@ -143,2 +143,11 @@ errorBorderColor?: string;
         chakraStyles?: ChakraStylesConfig<Option, IsMulti, Group>;
+        /**
+         * If passed, the dropdown indicator will be styled the same as Chakra UI's
+         * `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;
     }
@@ -172,3 +181,3 @@ }
          * @defaultValue `transparent`
-         * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#spinner-with-empty-area-color}
+         * @see {@link https://chakra-ui.com/docs/components/spinner#spinner-with-empty-area-color}
          */
@@ -181,3 +190,3 @@ emptyColor?: string;
          *
-         * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#spinner-with-different-size}
+         * @see {@link https://chakra-ui.com/docs/components/spinner#spinner-with-different-size}
          */
@@ -195,3 +204,3 @@ spinnerSize?: "xs" | "sm" | "md" | "lg" | "xl";
          * ```
-         * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#props}
+         * @see {@link https://chakra-ui.com/docs/components/spinner/props}
          */
@@ -207,3 +216,3 @@ speed?: string;
          * ```
-         * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#props}
+         * @see {@link https://chakra-ui.com/docs/components/spinner/props}
          */
@@ -210,0 +219,0 @@ thickness?: string;

LICENSE.md

 MIT License
 
-Copyright (c) 2021 Chris Sandvik
+Copyright (c) 2022 Chris Sandvik
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "chakra-react-select",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "A Chakra UI wrapper for the popular library React Select",
@@ -18,4 +18,3 @@ "license": "MIT",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
@@ -43,3 +42,3 @@ "scripts": {
   "dependencies": {
-    "react-select": "^5.3.2"
+    "react-select": "^5.4.0"
   },
@@ -58,8 +57,8 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.2",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
+    "@babel/cli": "^7.18.6",
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@chakra-ui/babel-plugin": "^1.0.3",
@@ -72,11 +71,11 @@ "@chakra-ui/form-control": "^2.0.2",
     "@chakra-ui/system": "^2.1.3",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
-    "@types/react": "^18.0.12",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
-    "concurrently": "^7.2.1",
+    "@types/react": "^18.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "concurrently": "^7.2.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -86,14 +85,14 @@ "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
-    "lint-staged": "^13.0.1",
-    "nodemon": "^2.0.16",
-    "prettier": "^2.6.2",
-    "prettier-package-json": "^2.6.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "lint-staged": "^13.0.3",
+    "nodemon": "^2.0.18",
+    "prettier": "^2.7.1",
+    "prettier-package-json": "^2.6.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.4"
   },
@@ -100,0 +99,0 @@ "keywords": [

README.md

 # chakra-react-select v4
 
-> This version of `chakra-react-select` is updated for [Chakra UI v2](https://chakra-ui.com/guides/migration) which works exclusively with React v18. `chakra-react-select` v3 will be maintained until the majority of users have migrated. If you're still using Chakra UI v1 check [the docs for chakra-react-select v3 here](https://github.com/csandman/chakra-react-select/tree/v3).
+> This version of `chakra-react-select` is updated for [Chakra UI v2](https://chakra-ui.com/getting-started/migration) which works exclusively with React v18. `chakra-react-select` v3 will be maintained until the majority of users have migrated. If you're still using Chakra UI v1 check [the docs for chakra-react-select v3 here](https://github.com/csandman/chakra-react-select/tree/v3).
 
@@ -35,2 +35,3 @@ [![Build Status](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml/badge.svg?branch=main "Build Status")](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml?query=branch%3Amain)
   - [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500)
+  - [`useBasicStyles`](#usebasicstyles--default-false)
   - [`hasStickyGroupHeaders`](#hasstickygroupheaders--default-false)
@@ -57,3 +58,3 @@ - [`selectedOptionStyle`](#selectedoptionstyle--options-color-check--default-color)
 
-In order to use this package, you'll need to have `@chakra-ui/react@2` set up [like in the guide in their docs](https://chakra-ui.com/guides/first-steps). If you already have `@chakra-ui/react@1` set up you can follow the steps in [the official migration guide](https://chakra-ui.com/guides/migration) to update to v2. If you don't have Chakra UI installed already, you can install it like this:
+In order to use this package, you'll need to have `@chakra-ui/react@2` set up [like in the guide in their docs](https://chakra-ui.com/getting-started). If you already have `@chakra-ui/react@1` set up you can follow the steps in [the official migration guide](https://chakra-ui.com/getting-started/migration) to update to v2. If you don't have Chakra UI installed already, you can install it like this:
 
@@ -102,3 +103,3 @@ ```sh
 
-You can pass the `size` prop with either `sm`, `md`, or `lg` (default is `md`). These will reflect the sizes available on the [Chakra `<Input />` component](https://chakra-ui.com/docs/form/input#changing-the-size-of-the-input) (with the exception of `xs` because it's too small to work).
+You can pass the `size` prop with either `sm`, `md`, or `lg` (default is `md`). These will reflect the sizes available on the [Chakra `<Input />` component](https://chakra-ui.com/docs/components/input#changing-the-size-of-the-input) (with the exception of `xs` because it's too small to work).
 
@@ -117,3 +118,3 @@ ```js
 
-You can pass the `colorScheme` prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in [the Chakra docs](https://chakra-ui.com/docs/data-display/tag#props), or if you have a custom color palette, any of the custom color names in that will be available instead.
+You can pass the `colorScheme` prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in [the Chakra docs](https://chakra-ui.com/docs/components/tag/props), or if you have a custom color palette, any of the custom color names in that will be available instead.
 
@@ -144,3 +145,3 @@ Alternatively you can add the `colorScheme` key to any of your options objects and it will only style that option when selected.
 
-You can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline` (default is `subtle`). These will reflect the `variant` prop available on the [Chakra `<Tag />` component](https://chakra-ui.com/docs/data-display/tag#props).
+You can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline` (default is `subtle`). These will reflect the `variant` prop available on the [Chakra `<Tag />` component](https://chakra-ui.com/docs/components/tag/props).
 
@@ -195,3 +196,3 @@ Alternatively you can add the `variant` key to any of your options objects and it will only style that option when selected. This will override the `tagVariant` prop on the select if both are set
 
-The props `focusBorderColor` and `errorBorderColor` can be passed with Chakra color strings which will emulate the respective props being passed to [Chakra's `<Input />` component](https://chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors).
+The props `focusBorderColor` and `errorBorderColor` can be passed with Chakra color strings which will emulate the respective props being passed to [Chakra's `<Input />` component](https://chakra-ui.com/docs/components/input#changing-the-focus-and-error-border-colors).
 
@@ -209,2 +210,16 @@ ```js
 
+#### `useBasicStyles` — Default: `false`
+
+If this prop is passed, the dropdown indicator at the right of the component will be styled in the same way [the original Chakra `Select` component](https://chakra-ui.com/docs/components/select) is styled, instead of being styled as an [`InputRightAddon`](https://chakra-ui.com/docs/components/input#left-and-right-addons). The original purpose of styling it as an addon was to create visual separation between the dropdown indicator and the button for clearing the selected options. However, as this button only appears when `isMulti` is passed, using this style could make more sense for a single select.
+
+```js
+return (
+  <Select useBasicStyles />
+);
+```
+
+![useBasicStyles](./github/use-basic-styles.png)
+
+![useBasicStyles dark mode](./github/use-basic-styles-dark.png)
+
 #### `hasStickyGroupHeaders` — Default: `false`
@@ -226,3 +241,3 @@
 
-In `v1.3.0` you can now pass the prop `selectedOptionStyle` with either `"color"` or `"check"` (defaults to `"color"`). The default option `"color"` will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively if you pass `"check"` for the value, the selected option will be styled like the [Chakra UI Menu component](https://chakra-ui.com/docs/overlay/menu#menu-option-groups) and include a check icon next to the selected option(s). If `isMulti` and `selectedOptionStyle="check"` are passed, space will only be added for the check marks if `hideSelectedOptions={false}` is also passed.
+In `v1.3.0` you can now pass the prop `selectedOptionStyle` with either `"color"` or `"check"` (defaults to `"color"`). The default option `"color"` will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively if you pass `"check"` for the value, the selected option will be styled like the [Chakra UI Menu component](https://chakra-ui.com/docs/components/menu#menu-option-groups) and include a check icon next to the selected option(s). If `isMulti` and `selectedOptionStyle="check"` are passed, space will only be added for the check marks if `hideSelectedOptions={false}` is also passed.
 
@@ -292,3 +307,3 @@ ```js
 
-In order to use the `chakraStyles` prop, first check the documentation for [the original `styles` prop from the react-select docs](https://react-select.com/styles#style-object). This package offers an identical API for the `chakraStyles` prop, however the `provided` and output style objects use [Chakra's `sx` prop](https://chakra-ui.com/docs/features/the-sx-prop) instead of the default emotion styles the original package offers. This allows you to both use the shorthand styling props you'd normally use to style Chakra components, as well as tokens from your theme such as named colors.
+In order to use the `chakraStyles` prop, first check the documentation for [the original `styles` prop from the react-select docs](https://react-select.com/styles#style-object). This package offers an identical API for the `chakraStyles` prop, however the `provided` and output style objects use [Chakra's `sx` prop](https://chakra-ui.com/docs/styled-system/the-sx-prop) instead of the default emotion styles the original package offers. This allows you to both use the shorthand styling props you'd normally use to style Chakra components, as well as tokens from your theme such as named colors.
 
@@ -313,3 +328,3 @@ The API for an individual style function looks like this:
 
-Most of the components rendered by this package use the basic [Chakra `<Box />` component](https://chakra-ui.com/docs/layout/box) with a few exceptions. Here are the style keys offered and the corresponding Chakra component that is rendered:
+Most of the components rendered by this package use the basic [Chakra `<Box />` component](https://chakra-ui.com/docs/components/box) with a few exceptions. Here are the style keys offered and the corresponding Chakra component that is rendered:
 
@@ -432,3 +447,3 @@ - `clearIndicator` - `Box` (uses theme styles for Chakra's `CloseButton`)
 
-As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://chakra-ui.com/docs/theming/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package. Here is a list of all components that will be affected by changes to your global styles:
+As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://chakra-ui.com/docs/styled-system/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package. Here is a list of all components that will be affected by changes to your global styles:
 
@@ -630,3 +645,3 @@ | `react-select` component | `chakra-ui` component styles                                                                                    |
 
-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/feedback/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:
 
@@ -633,0 +648,0 @@ ```jsx

No alert changes

Improved metrics

Number of lines in readme file

776

increased by1.97%

Worsened metrics

Total package byte prevSize

385089

decreased by-11.52%

Number of package files

123

decreased by-13.99%

Lines of code

2812

decreased by-39.36%

Dependency changes

• Updatedreact-select@^5.4.0