chakra-react-select - npm Package Compare versions

Comparing version 5.0.0-rc.8 to 5.0.0-rc.9

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { ResponsiveObject, ThemeTypings, SystemStyleObject } from '@chakra-ui/system';
+import { ResponsiveObject, ThemeTypings, SystemStyleObject } from '@chakra-ui/react';
 import * as react_select from 'react-select';
@@ -92,3 +92,3 @@ import { GroupBase, ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, GroupProps, GroupHeadingProps, IndicatorsContainerProps, IndicatorSeparatorProps, InputProps, LoadingIndicatorProps, NoticeProps, MenuProps, MenuListProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, ValueContainerProps, Props, SelectInstance, StylesConfig, ThemeConfig } from 'react-select';
 
-declare const useChakraSelectProps: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ components, theme, size, tagColorScheme, isDisabled, isInvalid, isReadOnly, required, isRequired, inputId, tagVariant, selectedOptionStyle, selectedOptionColorScheme, variant, focusBorderColor, errorBorderColor, chakraStyles, onFocus, onBlur, menuIsOpen, ...props }: Props<Option, IsMulti, Group>) => Props<Option, IsMulti, Group>;
+declare const useChakraSelectProps: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ components, theme, size, isDisabled, isInvalid, isReadOnly, required, isRequired, inputId, selectedOptionStyle, selectedOptionColorScheme, variant, tagColorScheme, tagVariant, focusBorderColor, errorBorderColor, chakraStyles, onFocus, onBlur, menuIsOpen, ...props }: Props<Option, IsMulti, Group>) => Props<Option, IsMulti, Group>;
 
@@ -95,0 +95,0 @@ /**

dist/index.js

 'use strict';
 
 var react = require('react');
-var tt = require('react-select');
-var formControl = require('@chakra-ui/form-control');
-var system = require('@chakra-ui/system');
-var layout = require('@chakra-ui/layout');
-var mediaQuery = require('@chakra-ui/media-query');
+var at = require('react-select');
+var react$1 = require('@chakra-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
-var icon = require('@chakra-ui/icon');
-var spinner = require('@chakra-ui/spinner');
-var menu = require('@chakra-ui/menu');
-var it = require('react-select/creatable');
-var ut = require('react-select/async');
-var St = require('react-select/async-creatable');
+var mt = require('react-select/creatable');
+var bt = require('react-select/async');
+var Gt = require('react-select/async-creatable');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var tt__default = /*#__PURE__*/_interopDefault(tt);
-var it__default = /*#__PURE__*/_interopDefault(it);
-var ut__default = /*#__PURE__*/_interopDefault(ut);
-var St__default = /*#__PURE__*/_interopDefault(St);
+var at__default = /*#__PURE__*/_interopDefault(at);
+var mt__default = /*#__PURE__*/_interopDefault(mt);
+var bt__default = /*#__PURE__*/_interopDefault(bt);
+var Gt__default = /*#__PURE__*/_interopDefault(Gt);
 
-var A=e=>{let{className:s,clearValue:o,cx:n,getStyles:r,getClassNames:t,getValue:l,hasValue:i,isMulti:p,isRtl:a,options:c,selectOption:d,selectProps:m,setValue:x,theme:f,...u}=e;return {...u}},be=e=>typeof e=="string"&&["sm","md","lg"].includes(e),Pe=e=>be(e)?e:e==="xs"?"sm":e==="xl"?"lg":"md",y=e=>{let s=system.useTheme(),o=Pe(s.components.Input.defaultProps.size),n=e!=null?e:o;return mediaQuery.useBreakpointValue(typeof n=="string"?[n]:n,{fallback:"md"})||o};var E=e=>{let{children:s,className:o,cx:n,innerProps:r,isDisabled:t,isRtl:l,hasValue:i,selectProps:{chakraStyles:p}}=e,a={position:"relative",direction:l?"rtl":void 0,...t?{cursor:"not-allowed"}:{}},c=p!=null&&p.container?p.container(a,e):a;return jsxRuntime.jsx(layout.Box,{...r,className:n({"--is-disabled":t,"--is-rtl":l,"--has-value":i},o),sx:c,children:s})},W=e=>{let{children:s,className:o,cx:n,isMulti:r,hasValue:t,innerProps:l,selectProps:{chakraStyles:i,size:p,variant:a,focusBorderColor:c,errorBorderColor:d,controlShouldRenderValue:m}}=e,x=y(p),f=system.useMultiStyleConfig("Input",{size:x,variant:a,focusBorderColor:c,errorBorderColor:d}),u={display:r&&t&&m?"flex":"grid",alignItems:"center",flex:1,paddingY:"2px",paddingX:f.field.px,flexWrap:"wrap",WebkitOverflowScrolling:"touch",position:"relative",overflow:"hidden"},S=i!=null&&i.valueContainer?i.valueContainer(u,e):u;return jsxRuntime.jsx(layout.Box,{...l,className:n({"value-container":!0,"value-container--is-multi":r,"value-container--has-value":t},o),sx:S,children:s})},Y=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t}}=e,l={display:"flex",alignItems:"center",alignSelf:"stretch",flexShrink:0},i=t!=null&&t.indicatorsContainer?t.indicatorsContainer(l,e):l;return jsxRuntime.jsx(layout.Box,{...r,className:n({indicators:!0},o),sx:i,children:s})};var Me=e=>{let{className:s,cx:o,children:n,innerRef:r,innerProps:t,isDisabled:l,isFocused:i,menuIsOpen:p,selectProps:{chakraStyles:a,size:c,variant:d,focusBorderColor:m,errorBorderColor:x,isInvalid:f,isReadOnly:u}}=e,S=y(c),{field:{height:g,h:G,...b}}=system.useMultiStyleConfig("Input",{size:S,variant:d,focusBorderColor:m,errorBorderColor:x}),C={...b,position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",padding:0,overflow:"hidden",height:"auto",minH:g||G,...l?{pointerEvents:"none"}:{}},B=a!=null&&a.control?a.control(C,e):C;return jsxRuntime.jsx(layout.Box,{ref:r,className:o({control:!0,"control--is-disabled":l,"control--is-focused":i,"control--menu-is-open":p},s),sx:B,...t,"data-focus":i?!0:void 0,"data-focus-visible":i?!0:void 0,"data-invalid":f?!0:void 0,"data-disabled":l?!0:void 0,"data-readonly":u?!0:void 0,children:n})},$=e=>{let{className:s,cx:o,selectProps:{chakraStyles:n}}=e,r={opacity:1,display:"none"},t=n!=null&&n.indicatorSeparator?n.indicatorSeparator(r,e):r;return jsxRuntime.jsx(layout.Divider,{className:o({"indicator-separator":!0},s),sx:t,orientation:"vertical"})},he=e=>jsxRuntime.jsx(icon.Icon,{role:"presentation",focusable:"false","aria-hidden":"true",...e,children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"})}),Z=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l,focusBorderColor:i,errorBorderColor:p,variant:a}}=e,c=y(l),m={...system.useMultiStyleConfig("Select",{size:c,variant:a,focusBorderColor:i,errorBorderColor:p}).icon,display:"inline-flex",alignItems:"center",justifyContent:"center",position:"static",marginRight:2,marginLeft:1,pointerEvents:"none"},x=t!=null&&t.dropdownIndicator?t.dropdownIndicator(m,e):m,f={height:"1em",width:"1em"},u=t!=null&&t.downChevron?t.downChevron(f,e):f;return jsxRuntime.jsx(layout.Box,{...r,className:n({indicator:!0,"dropdown-indicator":!0},o),sx:x,children:s||jsxRuntime.jsx(he,{sx:u})})},Be=e=>jsxRuntime.jsx(icon.Icon,{focusable:"false","aria-hidden":!0,...e,children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"})}),J=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l}}=e,i=y(l),a={...system.useStyleConfig("CloseButton",{size:i}),marginX:1,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,cursor:"pointer"},c=t!=null&&t.clearIndicator?t.clearIndicator(a,e):a,d={width:"1em",height:"1em"},m=t!=null&&t.crossIcon?t.crossIcon(d,e):d;return jsxRuntime.jsx(layout.Box,{role:"button",className:n({indicator:!0,"clear-indicator":!0},o),sx:c,"aria-label":"Clear selected options",...r,children:s||jsxRuntime.jsx(Be,{sx:m})})},K=e=>{let{className:s,cx:o,innerProps:n,selectProps:{chakraStyles:r,size:t},color:l,emptyColor:i,speed:p,thickness:a,spinnerSize:c}=e,d=y(t),x={sm:"xs",md:"sm",lg:"md"}[d],f={marginRight:3},u=r!=null&&r.loadingIndicator?r.loadingIndicator(f,e):f;return jsxRuntime.jsx(spinner.Spinner,{className:o({indicator:!0,"loading-indicator":!0},s),sx:u,...n,size:c||x,color:l,emptyColor:i,speed:p,thickness:a})},Q=Me;var we=e=>{let{className:s,cx:o,value:n,selectProps:{chakraStyles:r,isReadOnly:t}}=e,{innerRef:l,isDisabled:i,isHidden:p,inputClassName:a,...c}=A(e),d={gridArea:"1 / 2",minW:"2px",border:0,margin:0,outline:0,padding:0},m={flex:"1 1 auto",display:"inline-grid",gridArea:"1 / 1 / 2 / 3",gridTemplateColumns:"0 min-content",color:"inherit",marginX:"0.125rem",paddingY:"0.125rem",visibility:i?"hidden":"visible",transform:n?"translateZ(0)":"",_after:{content:'attr(data-value) " "',visibility:"hidden",whiteSpace:"pre",padding:0,...d}},x=r!=null&&r.inputContainer?r.inputContainer(m,e):m,f={background:0,opacity:p?0:1,width:"100%",...d},u=r!=null&&r.input?r.input(f,e):f;return jsxRuntime.jsx(layout.Box,{className:o({"input-container":!0},s),"data-value":n||"",sx:x,children:jsxRuntime.jsx(system.chakra.input,{className:o({input:!0},a),ref:l,sx:u,disabled:i,readOnly:t?!0:void 0,...c})})},q=we;var Ve=e=>e?{bottom:"top",top:"bottom"}[e]:"top",Ae=e=>{let{className:s,cx:o,children:n,innerProps:r,innerRef:t,placement:l,selectProps:{chakraStyles:i}}=e,p={position:"absolute",[Ve(l)]:"100%",marginY:"8px",width:"100%",zIndex:1},a=i!=null&&i.menu?i.menu(p,e):p;return jsxRuntime.jsx(menu.Menu,{children:jsxRuntime.jsx(layout.Box,{...r,ref:t,className:o({menu:!0},s),sx:a,children:n})})},te=Ae,oe=e=>{var b;let{className:s,cx:o,innerRef:n,children:r,maxHeight:t,isMulti:l,innerProps:i,selectProps:{chakraStyles:p,size:a,variant:c,focusBorderColor:d,errorBorderColor:m}}=e,x=system.useMultiStyleConfig("Menu"),f=y(a),S=system.useMultiStyleConfig("Input",{size:f,variant:c,focusBorderColor:d,errorBorderColor:m}).field,g={...x.list,minW:"100%",maxHeight:`${t}px`,overflowY:"auto","--input-border-radius":S==null?void 0:S["--input-border-radius"],borderRadius:(S==null?void 0:S.borderRadius)||((b=x.list)==null?void 0:b.borderRadius),position:"relative",WebkitOverflowScrolling:"touch"},G=p!=null&&p.menuList?p.menuList(g,e):g;return jsxRuntime.jsx(layout.Box,{...i,className:o({"menu-list":!0,"menu-list--is-multi":l},s),sx:G,ref:n,children:r})},ne=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l}}=e,i=y(l),a={color:"chakra-subtle-text",textAlign:"center",paddingY:{sm:"6px",md:"8px",lg:"10px"}[i],fontSize:i},c=t!=null&&t.loadingMessage?t.loadingMessage(a,e):a;return jsxRuntime.jsx(layout.Box,{...r,className:n({"menu-notice":!0,"menu-notice--loading":!0},o),sx:c,children:s})},se=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l}}=e,i=y(l),a={color:"chakra-subtle-text",textAlign:"center",paddingY:{sm:"6px",md:"8px",lg:"10px"}[i],fontSize:i},c=t!=null&&t.noOptionsMessage?t.noOptionsMessage(a,e):a;return jsxRuntime.jsx(layout.Box,{...r,className:n({"menu-notice":!0,"menu-notice--no-options":!0},o),sx:c,children:s})},re=e=>{let{children:s,className:o,cx:n,theme:r,getStyles:t,Heading:l,headingProps:i,label:p,selectProps:a,innerProps:c,getClassNames:d}=e,{chakraStyles:m}=a,x={},f=m!=null&&m.group?m.group(x,e):x;return jsxRuntime.jsxs(layout.Box,{...c,className:n({group:!0},o),sx:f,children:[jsxRuntime.jsx(l,{...i,selectProps:a,cx:n,theme:r,getStyles:t,getClassNames:d,children:p}),jsxRuntime.jsx(layout.Box,{children:s})]})},ie=e=>{let{cx:s,className:o,selectProps:{chakraStyles:n,size:r}}=e,{data:t,...l}=A(e),i=system.useMultiStyleConfig("Menu"),p=y(r),a={sm:"xs",md:"sm",lg:"md"},c={sm:"0.4rem 0.8rem",md:"0.5rem 1rem",lg:"0.6rem 1.2rem"},d={...i.groupTitle,fontSize:a[p],padding:c[p],margin:0},m=n!=null&&n.groupHeading?n.groupHeading(d,e):d;return jsxRuntime.jsx(layout.Box,{...l,className:s({"group-heading":!0},o),sx:m})},je=e=>jsxRuntime.jsx("svg",{viewBox:"0 0 14 14",width:"1em",height:"1em",...e,children:jsxRuntime.jsx("polygon",{fill:"currentColor",points:"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"})}),le=e=>{let{className:s,cx:o,innerRef:n,innerProps:r,children:t,isFocused:l,isDisabled:i,isSelected:p,selectProps:{chakraStyles:a,size:c,isMulti:d,hideSelectedOptions:m,selectedOptionStyle:x,selectedOptionColorScheme:f}}=e,u=system.useMultiStyleConfig("Menu").item,S=y(c),g={sm:"0.6rem",md:"0.8rem",lg:"1rem"},G={sm:"0.3rem",md:"0.4rem",lg:"0.5rem"},b=system.useColorModeValue(`${f}.500`,`${f}.300`),h=system.useColorModeValue("white","black"),C=x==="check"&&(!d||m===!1),B=x==="color",O={...u,cursor:"pointer",display:"flex",alignItems:"center",width:"100%",textAlign:"start",fontSize:S,paddingX:g[S],paddingY:G[S],...B&&{_selected:{bg:b,color:h,_active:{bg:b}}}},w=a!=null&&a.option?a.option(O,e):O;return jsxRuntime.jsxs(layout.Box,{...r,className:o({option:!0,"option--is-disabled":i,"option--is-focused":l,"option--is-selected":p},s),sx:w,ref:n,"data-focus":l?!0:void 0,"aria-disabled":i?!0:void 0,"aria-selected":p,children:[C&&jsxRuntime.jsx(menu.MenuIcon,{fontSize:"0.8em",marginEnd:"0.75rem",opacity:p?1:0,children:jsxRuntime.jsx(je,{})}),t]})};var De=e=>typeof e=="object"&&e!==null&&"colorScheme"in e&&typeof e.colorScheme=="string",Te=e=>typeof e=="object"&&e!==null&&"variant"in e&&typeof e.variant=="string",ce=e=>typeof e=="object"&&e!==null&&"isFixed"in e&&typeof e.isFixed=="boolean",He=e=>{let{children:s,className:o,components:n,cx:r,data:t,innerProps:l,isDisabled:i,isFocused:p,removeProps:a,selectProps:c,cropWithEllipsis:d}=e,{Container:m,Label:x,Remove:f}=n,{chakraStyles:u,tagColorScheme:S,tagVariant:g,size:G}=c,b=y(G),h="",C="",B=!1;De(t)&&(h=t.colorScheme),Te(t)&&(C=t.variant),ce(t)&&(B=t.isFixed);let O=system.useMultiStyleConfig("Tag",{size:b,colorScheme:h||S,variant:C||g||(B?"solid":"subtle")}),w={...O.container,display:"flex",alignItems:"center",minWidth:0,margin:"0.125rem"},N=u!=null&&u.multiValue?u.multiValue(w,e):w,k={...O.label,overflow:"hidden",textOverflow:d||d===void 0?"ellipsis":void 0,whiteSpace:"nowrap"},R=u!=null&&u.multiValueLabel?u.multiValueLabel(k,e):k,L={...O.closeButton,display:"flex",alignItems:"center",justifyContent:"center"},V=u!=null&&u.multiValueRemove?u.multiValueRemove(L,e):L;return jsxRuntime.jsxs(m,{data:t,innerProps:{className:r({"multi-value":!0,"multi-value--is-disabled":i},o),...l},sx:N,selectProps:c,children:[jsxRuntime.jsx(x,{data:t,innerProps:{className:r({"multi-value__label":!0},o)},sx:R,selectProps:c,children:s}),jsxRuntime.jsx(f,{data:t,innerProps:{className:r({"multi-value__remove":!0},o),"aria-label":`Remove ${s||"option"}`,...a},sx:V,selectProps:c,isFocused:p})]})},ue=e=>{let{children:s,innerProps:o,sx:n}=e;return jsxRuntime.jsx(system.chakra.span,{...o,sx:n,children:s})},de=e=>{let{children:s,innerProps:o,sx:n}=e;return jsxRuntime.jsx(system.chakra.span,{...o,sx:n,children:s})},Ee=e=>jsxRuntime.jsx(icon.Icon,{verticalAlign:"inherit",viewBox:"0 0 512 512",...e,children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"})}),me=e=>{let{children:s,innerProps:o,isFocused:n,data:r,sx:t}=e;return ce(r)&&r.isFixed?null:jsxRuntime.jsx(layout.Box,{...o,role:"button",sx:t,"data-focus":n?!0:void 0,"data-focus-visible":n?!0:void 0,children:s||jsxRuntime.jsx(Ee,{})})};var xe=He;var _e=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t}}=e,l={gridArea:"1 / 1 / 2 / 3",color:"chakra-placeholder-color",mx:"0.125rem",userSelect:"none"},i=t!=null&&t.placeholder?t.placeholder(l,e):l;return jsxRuntime.jsx(layout.Box,{...r,className:n({placeholder:!0},o),sx:i,children:s})},fe=_e;var Ze=e=>{let{children:s,className:o,cx:n,isDisabled:r,innerProps:t,selectProps:{chakraStyles:l}}=e,i={gridArea:"1 / 1 / 2 / 3",mx:"0.125rem",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},p=l!=null&&l.singleValue?l.singleValue(i,e):i;return jsxRuntime.jsx(layout.Box,{className:n({"single-value":!0,"single-value--is-disabled":r},o),sx:p,...t,children:s})},Se=Ze;var Ke={ClearIndicator:J,Control:Q,DropdownIndicator:Z,Group:re,GroupHeading:ie,IndicatorSeparator:$,IndicatorsContainer:Y,Input:q,LoadingIndicator:K,LoadingMessage:ne,Menu:te,MenuList:oe,MultiValue:xe,MultiValueContainer:ue,MultiValueLabel:de,MultiValueRemove:me,NoOptionsMessage:se,Option:le,Placeholder:fe,SelectContainer:E,SingleValue:Se,ValueContainer:W},H=Ke;var qe=({components:e={},theme:s,size:o,tagColorScheme:n="gray",isDisabled:r,isInvalid:t,isReadOnly:l,required:i,isRequired:p,inputId:a,tagVariant:c,selectedOptionStyle:d="color",selectedOptionColorScheme:m="blue",variant:x,focusBorderColor:f,errorBorderColor:u,chakraStyles:S={},onFocus:g,onBlur:G,menuIsOpen:b,...h})=>{var V;let C=system.useTheme(),{variant:B}=C.components.Input.defaultProps,O=formControl.useFormControl({id:a,isDisabled:r,isInvalid:t,isRequired:p,isReadOnly:l,onFocus:g,onBlur:G}),w=b!=null?b:O.readOnly?!1:void 0,N=d;["color","check"].includes(d)||(N="color");let R=m;return typeof R!="string"&&(R="blue"),{components:{...H,...e},tagColorScheme:n,size:o,tagVariant:c,selectedOptionStyle:N,selectedOptionColorScheme:R,variant:x!=null?x:B,chakraStyles:S,focusBorderColor:f,errorBorderColor:u,onFocus:O.onFocus,onBlur:O.onBlur,isDisabled:O.disabled,isInvalid:!!O["aria-invalid"],inputId:O.id,isReadOnly:O.readOnly,required:i!=null?i:O.required,menuIsOpen:w,...h,"aria-invalid":(V=h["aria-invalid"])!=null?V:O["aria-invalid"]}},M=qe;var ot=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(tt__default.default,{ref:s,...o})}),nt=ot;var lt=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(it__default.default,{ref:s,...o})}),at=lt;var dt=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(ut__default.default,{ref:s,...o})}),mt=dt;var Ot=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(St__default.default,{ref:s,...o})}),yt=Ot;
+var j=e=>{let{className:s,clearValue:o,cx:n,getStyles:r,getClassNames:t,getValue:l,hasValue:i,isMulti:p,isRtl:a,options:c,selectOption:m,selectProps:u,setValue:x,theme:f,...d}=e;return {...d}},he=e=>typeof e=="string"&&["sm","md","lg"].includes(e),Be=e=>he(e)?e:e==="xs"?"sm":e==="xl"?"lg":"md",O=e=>{let s=react$1.useTheme(),o=Be(s.components.Input.defaultProps.size),n=e!=null?e:o;return react$1.useBreakpointValue(typeof n=="string"?[n]:n,{fallback:"md"})||o};var J=e=>{let{children:s,className:o,cx:n,innerProps:r,isDisabled:t,isRtl:l,hasValue:i,selectProps:{chakraStyles:p}}=e,a={position:"relative",direction:l?"rtl":void 0,...t?{cursor:"not-allowed"}:{}},c=p!=null&&p.container?p.container(a,e):a;return jsxRuntime.jsx(react$1.Box,{...r,className:n({"--is-disabled":t,"--is-rtl":l,"--has-value":i},o),sx:c,children:s})},K=e=>{let{children:s,className:o,cx:n,isMulti:r,hasValue:t,innerProps:l,selectProps:{chakraStyles:i,size:p,variant:a,focusBorderColor:c,errorBorderColor:m,controlShouldRenderValue:u}}=e,x=O(p),f=react$1.useMultiStyleConfig("Input",{size:x,variant:a,focusBorderColor:c,errorBorderColor:m}),d={display:r&&t&&u?"flex":"grid",alignItems:"center",flex:1,paddingY:"2px",paddingX:f.field.px,flexWrap:"wrap",WebkitOverflowScrolling:"touch",position:"relative",overflow:"hidden"},S=i!=null&&i.valueContainer?i.valueContainer(d,e):d;return jsxRuntime.jsx(react$1.Box,{...l,className:n({"value-container":!0,"value-container--is-multi":r,"value-container--has-value":t},o),sx:S,children:s})},Q=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t}}=e,l={display:"flex",alignItems:"center",alignSelf:"stretch",flexShrink:0},i=t!=null&&t.indicatorsContainer?t.indicatorsContainer(l,e):l;return jsxRuntime.jsx(react$1.Box,{...r,className:n({indicators:!0},o),sx:i,children:s})};var Ne=e=>{let{className:s,cx:o,children:n,innerRef:r,innerProps:t,isDisabled:l,isFocused:i,menuIsOpen:p,selectProps:{chakraStyles:a,size:c,variant:m,focusBorderColor:u,errorBorderColor:x,isInvalid:f,isReadOnly:d}}=e,S=O(c),{field:{height:G,h:C,...y}}=react$1.useMultiStyleConfig("Input",{size:S,variant:m,focusBorderColor:u,errorBorderColor:x}),b={...y,position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",padding:0,overflow:"hidden",height:"auto",minH:G||C,...l?{pointerEvents:"none"}:{}},B=a!=null&&a.control?a.control(b,e):b;return jsxRuntime.jsx(react$1.Box,{ref:r,className:o({control:!0,"control--is-disabled":l,"control--is-focused":i,"control--menu-is-open":p},s),sx:B,...t,"data-focus":i?!0:void 0,"data-focus-visible":i?!0:void 0,"data-invalid":f?!0:void 0,"data-disabled":l?!0:void 0,"data-readonly":d?!0:void 0,children:n})},ee=e=>{let{className:s,cx:o,selectProps:{chakraStyles:n}}=e,r={opacity:1,display:"none"},t=n!=null&&n.indicatorSeparator?n.indicatorSeparator(r,e):r;return jsxRuntime.jsx(react$1.Divider,{className:o({"indicator-separator":!0},s),sx:t,orientation:"vertical"})},Ve=e=>jsxRuntime.jsx(react$1.Icon,{role:"presentation",focusable:"false","aria-hidden":"true",...e,children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"})}),te=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l,focusBorderColor:i,errorBorderColor:p,variant:a}}=e,c=O(l),u={...react$1.useMultiStyleConfig("Select",{size:c,variant:a,focusBorderColor:i,errorBorderColor:p}).icon,display:"inline-flex",alignItems:"center",justifyContent:"center",position:"static",marginRight:2,marginLeft:1,pointerEvents:"none"},x=t!=null&&t.dropdownIndicator?t.dropdownIndicator(u,e):u,f={height:"1em",width:"1em"},d=t!=null&&t.downChevron?t.downChevron(f,e):f;return jsxRuntime.jsx(react$1.Box,{...r,className:n({indicator:!0,"dropdown-indicator":!0},o),sx:x,children:s||jsxRuntime.jsx(Ve,{sx:d})})},Ae=e=>jsxRuntime.jsx(react$1.Icon,{focusable:"false","aria-hidden":!0,...e,children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"})}),oe=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l}}=e,i=O(l),a={...react$1.useStyleConfig("CloseButton",{size:i}),marginX:1,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,cursor:"pointer"},c=t!=null&&t.clearIndicator?t.clearIndicator(a,e):a,m={width:"1em",height:"1em"},u=t!=null&&t.crossIcon?t.crossIcon(m,e):m;return jsxRuntime.jsx(react$1.Box,{role:"button",className:n({indicator:!0,"clear-indicator":!0},o),sx:c,"aria-label":"Clear selected options",...r,children:s||jsxRuntime.jsx(Ae,{sx:u})})},ne=e=>{let{className:s,cx:o,innerProps:n,selectProps:{chakraStyles:r,size:t},color:l,emptyColor:i,speed:p,thickness:a,spinnerSize:c}=e,m=O(t),x={sm:"xs",md:"sm",lg:"md"}[m],f={marginRight:3},d=r!=null&&r.loadingIndicator?r.loadingIndicator(f,e):f;return jsxRuntime.jsx(react$1.Spinner,{className:o({indicator:!0,"loading-indicator":!0},s),sx:d,...n,size:c||x,color:l,emptyColor:i,speed:p,thickness:a})},se=Ne;var Le=e=>{let{className:s,cx:o,value:n,selectProps:{chakraStyles:r,isReadOnly:t}}=e,{innerRef:l,isDisabled:i,isHidden:p,inputClassName:a,...c}=j(e),m={gridArea:"1 / 2",minW:"2px",border:0,margin:0,outline:0,padding:0},u={flex:"1 1 auto",display:"inline-grid",gridArea:"1 / 1 / 2 / 3",gridTemplateColumns:"0 min-content",color:"inherit",marginX:"0.125rem",paddingY:"0.125rem",visibility:i?"hidden":"visible",transform:n?"translateZ(0)":"",_after:{content:'attr(data-value) " "',visibility:"hidden",whiteSpace:"pre",padding:0,...m}},x=r!=null&&r.inputContainer?r.inputContainer(u,e):u,f={background:0,opacity:p?0:1,width:"100%",...m},d=r!=null&&r.input?r.input(f,e):f;return jsxRuntime.jsx(react$1.Box,{className:o({"input-container":!0},s),"data-value":n||"",sx:x,children:jsxRuntime.jsx(react$1.chakra.input,{className:o({input:!0},a),ref:l,sx:d,disabled:i,readOnly:t?!0:void 0,...c})})},ie=Le;var Te=e=>e?{bottom:"top",top:"bottom"}[e]:"top",He=e=>{let{className:s,cx:o,children:n,innerProps:r,innerRef:t,placement:l,selectProps:{chakraStyles:i}}=e,p={position:"absolute",[Te(l)]:"100%",marginY:"8px",width:"100%",zIndex:1},a=i!=null&&i.menu?i.menu(p,e):p;return jsxRuntime.jsx(react$1.Menu,{children:jsxRuntime.jsx(react$1.Box,{...r,ref:t,className:o({menu:!0},s),sx:a,children:n})})},ae=He,pe=e=>{var y;let{className:s,cx:o,innerRef:n,children:r,maxHeight:t,isMulti:l,innerProps:i,selectProps:{chakraStyles:p,size:a,variant:c,focusBorderColor:m,errorBorderColor:u}}=e,x=react$1.useMultiStyleConfig("Menu"),f=O(a),S=react$1.useMultiStyleConfig("Input",{size:f,variant:c,focusBorderColor:m,errorBorderColor:u}).field,G={...x.list,minW:"100%",maxHeight:`${t}px`,overflowY:"auto","--input-border-radius":S==null?void 0:S["--input-border-radius"],borderRadius:(S==null?void 0:S.borderRadius)||((y=x.list)==null?void 0:y.borderRadius),position:"relative",WebkitOverflowScrolling:"touch"},C=p!=null&&p.menuList?p.menuList(G,e):G;return jsxRuntime.jsx(react$1.Box,{...i,className:o({"menu-list":!0,"menu-list--is-multi":l},s),sx:C,ref:n,children:r})},ce=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l}}=e,i=O(l),a={color:"chakra-subtle-text",textAlign:"center",paddingY:{sm:"6px",md:"8px",lg:"10px"}[i],fontSize:i},c=t!=null&&t.loadingMessage?t.loadingMessage(a,e):a;return jsxRuntime.jsx(react$1.Box,{...r,className:n({"menu-notice":!0,"menu-notice--loading":!0},o),sx:c,children:s})},ue=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t,size:l}}=e,i=O(l),a={color:"chakra-subtle-text",textAlign:"center",paddingY:{sm:"6px",md:"8px",lg:"10px"}[i],fontSize:i},c=t!=null&&t.noOptionsMessage?t.noOptionsMessage(a,e):a;return jsxRuntime.jsx(react$1.Box,{...r,className:n({"menu-notice":!0,"menu-notice--no-options":!0},o),sx:c,children:s})},de=e=>{let{children:s,className:o,cx:n,theme:r,getStyles:t,Heading:l,headingProps:i,label:p,selectProps:a,innerProps:c,getClassNames:m}=e,{chakraStyles:u}=a,x={},f=u!=null&&u.group?u.group(x,e):x;return jsxRuntime.jsxs(react$1.Box,{...c,className:n({group:!0},o),sx:f,children:[jsxRuntime.jsx(l,{...i,selectProps:a,cx:n,theme:r,getStyles:t,getClassNames:m,children:p}),jsxRuntime.jsx(react$1.Box,{children:s})]})},me=e=>{let{cx:s,className:o,selectProps:{chakraStyles:n,size:r}}=e,{data:t,...l}=j(e),i=react$1.useMultiStyleConfig("Menu"),p=O(r),a={sm:"xs",md:"sm",lg:"md"},c={sm:"0.4rem 0.8rem",md:"0.5rem 1rem",lg:"0.6rem 1.2rem"},m={...i.groupTitle,fontSize:a[p],padding:c[p],margin:0},u=n!=null&&n.groupHeading?n.groupHeading(m,e):m;return jsxRuntime.jsx(react$1.Box,{...l,className:s({"group-heading":!0},o),sx:u})},Ee=e=>jsxRuntime.jsx("svg",{viewBox:"0 0 14 14",width:"1em",height:"1em",...e,children:jsxRuntime.jsx("polygon",{fill:"currentColor",points:"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"})}),xe=e=>{let{className:s,cx:o,innerRef:n,innerProps:r,children:t,isFocused:l,isDisabled:i,isSelected:p,selectProps:{chakraStyles:a,size:c,isMulti:m,hideSelectedOptions:u,selectedOptionStyle:x,selectedOptionColorScheme:f}}=e,d=react$1.useMultiStyleConfig("Menu").item,S=O(c),G={sm:"0.6rem",md:"0.8rem",lg:"1rem"},C={sm:"0.3rem",md:"0.4rem",lg:"0.5rem"},y=react$1.useColorModeValue(`${f}.500`,`${f}.300`),h=react$1.useColorModeValue("white","black"),b=x==="check"&&(!m||u===!1),B=x==="color",v={...d,cursor:"pointer",display:"flex",alignItems:"center",width:"100%",textAlign:"start",fontSize:S,paddingX:G[S],paddingY:C[S],...B&&{_selected:{bg:y,color:h,_active:{bg:y}}}},R=a!=null&&a.option?a.option(v,e):v;return jsxRuntime.jsxs(react$1.Box,{...r,className:o({option:!0,"option--is-disabled":i,"option--is-focused":l,"option--is-selected":p},s),sx:R,ref:n,"data-focus":l?!0:void 0,"aria-disabled":i?!0:void 0,"aria-selected":p,children:[b&&jsxRuntime.jsx(react$1.MenuIcon,{fontSize:"0.8em",marginEnd:"0.75rem",opacity:p?1:0,children:jsxRuntime.jsx(Ee,{})}),t]})};var Xe=e=>typeof e=="object"&&e!==null&&"colorScheme"in e&&typeof e.colorScheme=="string",$e=e=>typeof e=="object"&&e!==null&&"variant"in e&&typeof e.variant=="string",Oe=e=>typeof e=="object"&&e!==null&&"isFixed"in e&&typeof e.isFixed=="boolean",Ze=e=>{let{children:s,className:o,components:n,cx:r,data:t,innerProps:l,isDisabled:i,isFocused:p,removeProps:a,selectProps:c,cropWithEllipsis:m}=e,{Container:u,Label:x,Remove:f}=n,{chakraStyles:d,tagColorScheme:S,tagVariant:G,size:C}=c,y=O(C),h="",b="",B=!1;Xe(t)&&(h=t.colorScheme),$e(t)&&(b=t.variant),Oe(t)&&(B=t.isFixed);let v=react$1.useMultiStyleConfig("Tag",{size:y,colorScheme:h||S,variant:b||G||(B?"solid":"subtle")}),R={...v.container,display:"flex",alignItems:"center",minWidth:0,margin:"0.125rem"},I=d!=null&&d.multiValue?d.multiValue(R,e):R,V={...v.label,overflow:"hidden",textOverflow:m||m===void 0?"ellipsis":void 0,whiteSpace:"nowrap"},A=d!=null&&d.multiValueLabel?d.multiValueLabel(V,e):V,L={...v.closeButton,display:"flex",alignItems:"center",justifyContent:"center"},N=d!=null&&d.multiValueRemove?d.multiValueRemove(L,e):L;return jsxRuntime.jsxs(u,{data:t,innerProps:{className:r({"multi-value":!0,"multi-value--is-disabled":i},o),...l},sx:I,selectProps:c,children:[jsxRuntime.jsx(x,{data:t,innerProps:{className:r({"multi-value__label":!0},o)},sx:A,selectProps:c,children:s}),jsxRuntime.jsx(f,{data:t,innerProps:{className:r({"multi-value__remove":!0},o),"aria-label":`Remove ${s||"option"}`,...a},sx:N,selectProps:c,isFocused:p})]})},be=e=>{let{children:s,innerProps:o,sx:n}=e;return jsxRuntime.jsx(react$1.chakra.span,{...o,sx:n,children:s})},ye=e=>{let{children:s,innerProps:o,sx:n}=e;return jsxRuntime.jsx(react$1.chakra.span,{...o,sx:n,children:s})},Je=e=>jsxRuntime.jsx(react$1.Icon,{verticalAlign:"inherit",viewBox:"0 0 512 512",...e,children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"})}),Pe=e=>{let{children:s,innerProps:o,isFocused:n,data:r,sx:t}=e;return Oe(r)&&r.isFixed?null:jsxRuntime.jsx(react$1.Box,{...o,role:"button",sx:t,"data-focus":n?!0:void 0,"data-focus-visible":n?!0:void 0,children:s||jsxRuntime.jsx(Je,{})})};var Ie=Ze;var Ue=e=>{let{children:s,className:o,cx:n,innerProps:r,selectProps:{chakraStyles:t}}=e,l={gridArea:"1 / 1 / 2 / 3",color:"chakra-placeholder-color",mx:"0.125rem",userSelect:"none"},i=t!=null&&t.placeholder?t.placeholder(l,e):l;return jsxRuntime.jsx(react$1.Box,{...r,className:n({placeholder:!0},o),sx:i,children:s})},ge=Ue;var tt=e=>{let{children:s,className:o,cx:n,isDisabled:r,innerProps:t,selectProps:{chakraStyles:l}}=e,i={gridArea:"1 / 1 / 2 / 3",mx:"0.125rem",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},p=l!=null&&l.singleValue?l.singleValue(i,e):i;return jsxRuntime.jsx(react$1.Box,{className:n({"single-value":!0,"single-value--is-disabled":r},o),sx:p,...t,children:s})},Ge=tt;var nt={ClearIndicator:oe,Control:se,DropdownIndicator:te,Group:de,GroupHeading:me,IndicatorSeparator:ee,IndicatorsContainer:Q,Input:ie,LoadingIndicator:ne,LoadingMessage:ce,Menu:ae,MenuList:pe,MultiValue:Ie,MultiValueContainer:be,MultiValueLabel:ye,MultiValueRemove:Pe,NoOptionsMessage:ue,Option:xe,Placeholder:ge,SelectContainer:J,SingleValue:Ge,ValueContainer:K},H=nt;var it=({components:e={},theme:s,size:o,isDisabled:n,isInvalid:r,isReadOnly:t,required:l,isRequired:i,inputId:p,selectedOptionStyle:a="color",selectedOptionColorScheme:c="blue",variant:m,tagColorScheme:u,tagVariant:x,focusBorderColor:f,errorBorderColor:d,chakraStyles:S={},onFocus:G,onBlur:C,menuIsOpen:y,...h})=>{var E,W,Y,_,X,$,Z;let b=react$1.useTheme(),{variant:B="outline"}=(Y=(W=(E=b==null?void 0:b.components)==null?void 0:E.Input)==null?void 0:W.defaultProps)!=null?Y:{},{colorScheme:v="gray",variant:R="subtle"}=($=(X=(_=b==null?void 0:b.components)==null?void 0:_.Tag)==null?void 0:X.defaultProps)!=null?$:{},I=react$1.useFormControl({id:p,isDisabled:n,isInvalid:r,isRequired:i,isReadOnly:t,onFocus:G,onBlur:C}),V=y!=null?y:I.readOnly?!1:void 0,A=a;["color","check"].includes(a)||(A="color");let N=c;return typeof N!="string"&&(N="blue"),{components:{...H,...e},size:o,selectedOptionStyle:A,selectedOptionColorScheme:N,variant:m!=null?m:B,tagColorScheme:u!=null?u:v,tagVariant:x!=null?x:R,chakraStyles:S,focusBorderColor:f,errorBorderColor:d,onFocus:I.onFocus,onBlur:I.onBlur,isDisabled:I.disabled,isInvalid:!!I["aria-invalid"],inputId:I.id,isReadOnly:I.readOnly,required:l!=null?l:I.required,menuIsOpen:V,...h,"aria-invalid":(Z=h["aria-invalid"])!=null?Z:I["aria-invalid"]}},M=it;var pt=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(at__default.default,{ref:s,...o})}),ct=pt;var xt=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(mt__default.default,{ref:s,...o})}),ft=xt;var yt=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(bt__default.default,{ref:s,...o})}),Pt=yt;var Ct=react.forwardRef((e,s)=>{let o=M(e);return jsxRuntime.jsx(Gt__default.default,{ref:s,...o})}),Mt=Ct;
 
 Object.defineProperty(exports, "useCreatable", {
 	enumerable: true,
-	get: function () { return it.useCreatable; }
+	get: function () { return mt.useCreatable; }
 });
 Object.defineProperty(exports, "useAsync", {
 	enumerable: true,
-	get: function () { return ut.useAsync; }
+	get: function () { return bt.useAsync; }
 });
-exports.AsyncCreatableSelect = yt;
-exports.AsyncSelect = mt;
-exports.CreatableSelect = at;
-exports.Select = nt;
+exports.AsyncCreatableSelect = Mt;
+exports.AsyncSelect = Pt;
+exports.CreatableSelect = ft;
+exports.Select = ct;
 exports.chakraComponents = H;
 exports.useChakraSelectProps = M;
-Object.keys(tt).forEach(function (k) {
+Object.keys(at).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
-		get: function () { return tt[k]; }
+		get: function () { return at[k]; }
 	});
@@ -45,0 +39,0 @@ });

package.json

 {
   "name": "chakra-react-select",
-  "version": "5.0.0-rc.8",
+  "version": "5.0.0-rc.9",
   "description": "A Chakra UI wrapper for the popular library React Select",
@@ -52,11 +52,11 @@ "license": "MIT",
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.15.4",
-    "@chakra-ui/react": "^2.8.2",
+    "@arethetypeswrong/cli": "^0.16.4",
+    "@chakra-ui/react": "^2.10.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.11",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
@@ -68,7 +68,7 @@ "eslint": "^8.57.0",
     "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
@@ -79,4 +79,4 @@ "prettier": "^3.3.3",
     "react-dom": "^18.3.1",
-    "tsup": "^8.2.4",
-    "typescript": "^5.5.4"
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3"
   },
@@ -83,0 +83,0 @@ "keywords": [

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

270322

increased by0.31%

Worsened metrics

Lines of code

459

decreased by-2.13%

No dependency changes