Socket
Socket
Sign inDemoInstall

chakra-react-select

Package Overview
Dependencies
Maintainers
1
Versions
123
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

chakra-react-select - npm Package Compare versions

Comparing version 5.0.0-rc.5 to 5.0.0-rc.6

9

dist/index.d.ts

@@ -5,2 +5,3 @@ import { ResponsiveObject, ThemeTypings, SystemStyleObject } from '@chakra-ui/system';

export * from 'react-select';
export { Props as ReactSelectBaseProps } from 'react-select/base';
import { RefAttributes, ReactElement } from 'react';

@@ -242,13 +243,13 @@ import { CreatableProps } from 'react-select/creatable';

declare module "react-select" {
interface MultiValueProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
interface MultiValueProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
sx: SystemStyleObject;
}
interface MultiValueGenericProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
interface MultiValueGenericProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
sx: SystemStyleObject;
}
interface MultiValueRemoveProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
interface MultiValueRemoveProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
isFocused: boolean;
sx: SystemStyleObject;
}
interface LoadingIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
/**

@@ -255,0 +256,0 @@ * The color of the filled in area of the spinner.

@@ -1,2 +0,2 @@

import{forwardRef as et}from"react";import tt from"react-select";import{useFormControl as Qe}from"@chakra-ui/form-control";import{useTheme as Ue}from"@chakra-ui/system";import{Box as F}from"@chakra-ui/layout";import{useMultiStyleConfig as Ie}from"@chakra-ui/system";import{useBreakpointValue as Oe}from"@chakra-ui/media-query";import{useTheme as ye}from"@chakra-ui/system";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=ye(),o=Pe(s.components.Input.defaultProps.size),n=e!=null?e:o;return Oe(typeof n=="string"?[n]:n,{fallback:"md"})||o};import{jsx as D}from"react/jsx-runtime";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 D(F,{...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=Ie("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 D(F,{...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 D(F,{...r,className:n({indicators:!0},o),sx:i,children:s})};import{Icon as _}from"@chakra-ui/icon";import{Box as T,Divider as ge}from"@chakra-ui/layout";import{Spinner as Ge}from"@chakra-ui/spinner";import{useMultiStyleConfig as X,useStyleConfig as Ce}from"@chakra-ui/system";import{jsx as I}from"react/jsx-runtime";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}}=X("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 I(T,{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 I(ge,{className:o({"indicator-separator":!0},s),sx:t,orientation:"vertical"})},he=e=>I(_,{role:"presentation",focusable:"false","aria-hidden":"true",...e,children:I("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={...X("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 I(T,{...r,className:n({indicator:!0,"dropdown-indicator":!0},o),sx:x,children:s||I(he,{sx:u})})},Be=e=>I(_,{focusable:"false","aria-hidden":!0,...e,children:I("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={...Ce("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 I(T,{role:"button",className:n({indicator:!0,"clear-indicator":!0},o),sx:c,"aria-label":"Clear selected options",...r,children:s||I(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 I(Ge,{className:o({indicator:!0,"loading-indicator":!0},s),sx:u,...n,size:c||x,color:l,emptyColor:i,speed:p,thickness:a})},Q=Me;import{Box as ve}from"@chakra-ui/layout";import{chakra as ze}from"@chakra-ui/system";import{jsx as U}from"react/jsx-runtime";var Re=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 U(ve,{className:o({"input-container":!0},s),"data-value":n||"",sx:x,children:U(ze.input,{className:o({input:!0},a),ref:l,sx:u,disabled:i,readOnly:t?!0:void 0,...c})})},q=Re;import{Box as v}from"@chakra-ui/layout";import{Menu as we,MenuIcon as Ne}from"@chakra-ui/menu";import{useColorModeValue as ee,useMultiStyleConfig as j}from"@chakra-ui/system";import{jsx as P,jsxs as ae}from"react/jsx-runtime";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 P(we,{children:P(v,{...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=j("Menu"),f=y(a),S=j("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 P(v,{...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 P(v,{...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 P(v,{...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 ae(v,{...c,className:n({group:!0},o),sx:f,children:[P(l,{...i,selectProps:a,cx:n,theme:r,getStyles:t,getClassNames:d,children:p}),P(v,{children:s})]})},ie=e=>{let{cx:s,className:o,selectProps:{chakraStyles:n,size:r}}=e,{data:t,...l}=A(e),i=j("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 P(v,{...l,className:s({"group-heading":!0},o),sx:m})},je=e=>P("svg",{viewBox:"0 0 14 14",width:"1em",height:"1em",...e,children:P("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=j("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=ee(`${f}.500`,`${f}.300`),h=ee("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}}}},R=a!=null&&a.option?a.option(O,e):O;return ae(v,{...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:[C&&P(Ne,{fontSize:"0.8em",marginEnd:"0.75rem",opacity:p?1:0,children:P(je,{})}),t]})};import{Icon as ke}from"@chakra-ui/icon";import{Box as Le}from"@chakra-ui/layout";import{chakra as pe,useMultiStyleConfig as Fe}from"@chakra-ui/system";import{jsx as z,jsxs as We}from"react/jsx-runtime";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=Fe("Tag",{size:b,colorScheme:h||S,variant:C||g||(B?"solid":"subtle")}),R={...O.container,display:"flex",alignItems:"center",minWidth:0,margin:"0.125rem"},N=u!=null&&u.multiValue?u.multiValue(R,e):R,k={...O.label,overflow:"hidden",textOverflow:d||d===void 0?"ellipsis":void 0,whiteSpace:"nowrap"},w=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 We(m,{data:t,innerProps:{className:r({"multi-value":!0,"multi-value--is-disabled":i},o),...l},sx:N,selectProps:c,children:[z(x,{data:t,innerProps:{className:r({"multi-value__label":!0},o)},sx:w,selectProps:c,children:s}),z(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 z(pe.span,{...o,sx:n,children:s})},de=e=>{let{children:s,innerProps:o,sx:n}=e;return z(pe.span,{...o,sx:n,children:s})},Ee=e=>z(ke,{verticalAlign:"inherit",viewBox:"0 0 512 512",...e,children:z("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:z(Le,{...o,role:"button",sx:t,"data-focus":n?!0:void 0,"data-focus-visible":n?!0:void 0,children:s||z(Ee,{})})};var xe=He;import{Box as Ye}from"@chakra-ui/layout";import{jsx as Xe}from"react/jsx-runtime";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 Xe(Ye,{...r,className:n({placeholder:!0},o),sx:i,children:s})},fe=_e;import{Box as $e}from"@chakra-ui/layout";import{jsx as Je}from"react/jsx-runtime";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 Je($e,{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=Ue(),{variant:B}=C.components.Input.defaultProps,O=Qe({id:a,isDisabled:r,isInvalid:t,isRequired:p,isReadOnly:l,onFocus:g,onBlur:G}),R=b!=null?b:O.readOnly?!1:void 0,N=d;["color","check"].includes(d)||(N="color");let w=m;return typeof w!="string"&&(w="blue"),{components:{...H,...e},tagColorScheme:n,size:o,tagVariant:c,selectedOptionStyle:N,selectedOptionColorScheme:w,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:R,...h,"aria-invalid":(V=h["aria-invalid"])!=null?V:O["aria-invalid"]}},M=qe;import{jsx as st}from"react/jsx-runtime";var ot=et((e,s)=>{let o=M(e);return st(tt,{ref:s,...o})}),nt=ot;import{forwardRef as rt}from"react";import it from"react-select/creatable";import{jsx as pt}from"react/jsx-runtime";var lt=rt((e,s)=>{let o=M(e);return pt(it,{ref:s,...o})}),at=lt;import{forwardRef as ct}from"react";import ut from"react-select/async";import{jsx as xt}from"react/jsx-runtime";var dt=ct((e,s)=>{let o=M(e);return xt(ut,{ref:s,...o})}),mt=dt;import{forwardRef as ft}from"react";import St from"react-select/async-creatable";import{jsx as bt}from"react/jsx-runtime";var Ot=ft((e,s)=>{let o=M(e);return bt(St,{ref:s,...o})}),yt=Ot;export*from"react-select";import{useAsync as Xo}from"react-select/async";import{useCreatable as Zo}from"react-select/creatable";export{yt as AsyncCreatableSelect,mt as AsyncSelect,at as CreatableSelect,nt as Select,H as chakraComponents,Xo as useAsync,M as useChakraSelectProps,Zo as useCreatable};
import{forwardRef as et}from"react";import tt from"react-select";import{useFormControl as Qe}from"@chakra-ui/form-control";import{useTheme as Ue}from"@chakra-ui/system";import{Box as F}from"@chakra-ui/layout";import{useMultiStyleConfig as Ie}from"@chakra-ui/system";import{useBreakpointValue as Oe}from"@chakra-ui/media-query";import{useTheme as ye}from"@chakra-ui/system";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=ye(),o=Pe(s.components.Input.defaultProps.size),n=e!=null?e:o;return Oe(typeof n=="string"?[n]:n,{fallback:"md"})||o};import{jsx as D}from"react/jsx-runtime";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 D(F,{...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=Ie("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 D(F,{...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 D(F,{...r,className:n({indicators:!0},o),sx:i,children:s})};import{Icon as _}from"@chakra-ui/icon";import{Box as T,Divider as ge}from"@chakra-ui/layout";import{Spinner as Ge}from"@chakra-ui/spinner";import{useMultiStyleConfig as X,useStyleConfig as Ce}from"@chakra-ui/system";import{jsx as I}from"react/jsx-runtime";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}}=X("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 I(T,{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 I(ge,{className:o({"indicator-separator":!0},s),sx:t,orientation:"vertical"})},he=e=>I(_,{role:"presentation",focusable:"false","aria-hidden":"true",...e,children:I("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={...X("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 I(T,{...r,className:n({indicator:!0,"dropdown-indicator":!0},o),sx:x,children:s||I(he,{sx:u})})},Be=e=>I(_,{focusable:"false","aria-hidden":!0,...e,children:I("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={...Ce("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 I(T,{role:"button",className:n({indicator:!0,"clear-indicator":!0},o),sx:c,"aria-label":"Clear selected options",...r,children:s||I(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 I(Ge,{className:o({indicator:!0,"loading-indicator":!0},s),sx:u,...n,size:c||x,color:l,emptyColor:i,speed:p,thickness:a})},Q=Me;import{Box as ve}from"@chakra-ui/layout";import{chakra as ze}from"@chakra-ui/system";import{jsx as U}from"react/jsx-runtime";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 U(ve,{className:o({"input-container":!0},s),"data-value":n||"",sx:x,children:U(ze.input,{className:o({input:!0},a),ref:l,sx:u,disabled:i,readOnly:t?!0:void 0,...c})})},q=we;import{Box as v}from"@chakra-ui/layout";import{Menu as Re,MenuIcon as Ne}from"@chakra-ui/menu";import{useColorModeValue as ee,useMultiStyleConfig as j}from"@chakra-ui/system";import{jsx as P,jsxs as ae}from"react/jsx-runtime";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 P(Re,{children:P(v,{...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=j("Menu"),f=y(a),S=j("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 P(v,{...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 P(v,{...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 P(v,{...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 ae(v,{...c,className:n({group:!0},o),sx:f,children:[P(l,{...i,selectProps:a,cx:n,theme:r,getStyles:t,getClassNames:d,children:p}),P(v,{children:s})]})},ie=e=>{let{cx:s,className:o,selectProps:{chakraStyles:n,size:r}}=e,{data:t,...l}=A(e),i=j("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 P(v,{...l,className:s({"group-heading":!0},o),sx:m})},je=e=>P("svg",{viewBox:"0 0 14 14",width:"1em",height:"1em",...e,children:P("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=j("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=ee(`${f}.500`,`${f}.300`),h=ee("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 ae(v,{...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&&P(Ne,{fontSize:"0.8em",marginEnd:"0.75rem",opacity:p?1:0,children:P(je,{})}),t]})};import{Icon as ke}from"@chakra-ui/icon";import{Box as Le}from"@chakra-ui/layout";import{chakra as pe,useMultiStyleConfig as Fe}from"@chakra-ui/system";import{jsx as z,jsxs as We}from"react/jsx-runtime";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=Fe("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 We(m,{data:t,innerProps:{className:r({"multi-value":!0,"multi-value--is-disabled":i},o),...l},sx:N,selectProps:c,children:[z(x,{data:t,innerProps:{className:r({"multi-value__label":!0},o)},sx:R,selectProps:c,children:s}),z(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 z(pe.span,{...o,sx:n,children:s})},de=e=>{let{children:s,innerProps:o,sx:n}=e;return z(pe.span,{...o,sx:n,children:s})},Ee=e=>z(ke,{verticalAlign:"inherit",viewBox:"0 0 512 512",...e,children:z("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:z(Le,{...o,role:"button",sx:t,"data-focus":n?!0:void 0,"data-focus-visible":n?!0:void 0,children:s||z(Ee,{})})};var xe=He;import{Box as Ye}from"@chakra-ui/layout";import{jsx as Xe}from"react/jsx-runtime";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 Xe(Ye,{...r,className:n({placeholder:!0},o),sx:i,children:s})},fe=_e;import{Box as $e}from"@chakra-ui/layout";import{jsx as Je}from"react/jsx-runtime";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 Je($e,{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=Ue(),{variant:B}=C.components.Input.defaultProps,O=Qe({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;import{jsx as st}from"react/jsx-runtime";var ot=et((e,s)=>{let o=M(e);return st(tt,{ref:s,...o})}),nt=ot;import{forwardRef as rt}from"react";import it from"react-select/creatable";import{jsx as pt}from"react/jsx-runtime";var lt=rt((e,s)=>{let o=M(e);return pt(it,{ref:s,...o})}),at=lt;import{forwardRef as ct}from"react";import ut from"react-select/async";import{jsx as xt}from"react/jsx-runtime";var dt=ct((e,s)=>{let o=M(e);return xt(ut,{ref:s,...o})}),mt=dt;import{forwardRef as ft}from"react";import St from"react-select/async-creatable";import{jsx as bt}from"react/jsx-runtime";var Ot=ft((e,s)=>{let o=M(e);return bt(St,{ref:s,...o})}),yt=Ot;export*from"react-select";import{useAsync as Xo}from"react-select/async";import{useCreatable as Zo}from"react-select/creatable";export{yt as AsyncCreatableSelect,mt as AsyncSelect,at as CreatableSelect,nt as Select,H as chakraComponents,Xo as useAsync,M as useChakraSelectProps,Zo as useCreatable};
//# sourceMappingURL=index.js.map
{
"name": "chakra-react-select",
"version": "5.0.0-rc.5",
"version": "5.0.0-rc.6",
"description": "A Chakra UI wrapper for the popular library React Select",

@@ -5,0 +5,0 @@ "license": "MIT",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc