@foxford/ui 2.42.0 → 2.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Chip/constants.js +1 -1
- package/components/Chip/constants.js.map +1 -1
- package/components/Chip/constants.mjs +1 -1
- package/components/Chip/constants.mjs.map +1 -1
- package/components/Dropdown/Dropdown.js +1 -1
- package/components/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.mjs +1 -1
- package/components/Dropdown/Dropdown.mjs.map +1 -1
- package/components/Dropdown/DropdownMenu.js +2 -0
- package/components/Dropdown/DropdownMenu.js.map +1 -0
- package/components/Dropdown/DropdownMenu.mjs +2 -0
- package/components/Dropdown/DropdownMenu.mjs.map +1 -0
- package/components/Dropdown/constants.js +1 -1
- package/components/Dropdown/constants.js.map +1 -1
- package/components/Dropdown/constants.mjs +1 -1
- package/components/Dropdown/constants.mjs.map +1 -1
- package/components/Dropdown/style.js +1 -1
- package/components/Dropdown/style.js.map +1 -1
- package/components/Dropdown/style.mjs +1 -1
- package/components/Dropdown/style.mjs.map +1 -1
- package/components/Dropdown/utils.js.map +1 -1
- package/components/Dropdown/utils.mjs.map +1 -1
- package/components/Menu/Menu.js +1 -1
- package/components/Menu/Menu.js.map +1 -1
- package/components/Menu/Menu.mjs +1 -1
- package/components/Menu/Menu.mjs.map +1 -1
- package/components/MenuComponent/MenuComponent.js +1 -1
- package/components/MenuComponent/MenuComponent.js.map +1 -1
- package/components/MenuComponent/MenuComponent.mjs +1 -1
- package/components/MenuComponent/MenuComponent.mjs.map +1 -1
- package/components/MenuComponent/constants.js +1 -1
- package/components/MenuComponent/constants.js.map +1 -1
- package/components/MenuComponent/constants.mjs +1 -1
- package/components/MenuComponent/constants.mjs.map +1 -1
- package/components/MenuComponent/style.js +1 -1
- package/components/MenuComponent/style.js.map +1 -1
- package/components/MenuComponent/style.mjs +1 -1
- package/components/MenuComponent/style.mjs.map +1 -1
- package/components/MenuContainer/MenuContainer.js +1 -1
- package/components/MenuContainer/MenuContainer.js.map +1 -1
- package/components/MenuContainer/MenuContainer.mjs +1 -1
- package/components/MenuContainer/MenuContainer.mjs.map +1 -1
- package/dts/index.d.ts +16 -10
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';exports.SIZES={xxxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},l:{fontSize:18,minHeight:40,padding:8,borderRadius:8},m:{fontSize:16,minHeight:36,padding:7,borderRadius:8},s:{fontSize:14,minHeight:32,padding:6,borderRadius:7},xs:{fontSize:12,minHeight:20,padding:4,borderRadius:
|
|
1
|
+
'use strict';exports.SIZES={xxxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},l:{fontSize:18,minHeight:40,padding:8,borderRadius:8},m:{fontSize:16,minHeight:36,padding:7,borderRadius:8},s:{fontSize:14,minHeight:32,padding:6,borderRadius:7},xs:{fontSize:12,minHeight:20,padding:4,borderRadius:6},xxs:{fontSize:12,minHeight:20,padding:4,borderRadius:6},xxxs:{fontSize:12,minHeight:20,padding:4,borderRadius:6}};
|
|
2
2
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n l: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n m: {\n fontSize: 16,\n minHeight: 36,\n padding: 7,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minHeight: 32,\n padding: 6,\n borderRadius: 7,\n },\n xs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius:
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n l: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n m: {\n fontSize: 16,\n minHeight: 36,\n padding: 7,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minHeight: 32,\n padding: 6,\n borderRadius: 7,\n },\n xs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n xxs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n xxxs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n}\n"],"names":["xxxl","fontSize","minHeight","padding","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"2BAGkD,CAChDA,KAAM,CACJC,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBC,IAAK,CACHJ,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBE,GAAI,CACFL,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBG,EAAG,CACDN,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBI,EAAG,CACDP,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBK,EAAG,CACDR,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBM,GAAI,CACFT,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBO,IAAK,CACHV,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBQ,KAAM,CACJX,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const SIZES={xxxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},l:{fontSize:18,minHeight:40,padding:8,borderRadius:8},m:{fontSize:16,minHeight:36,padding:7,borderRadius:8},s:{fontSize:14,minHeight:32,padding:6,borderRadius:7},xs:{fontSize:12,minHeight:20,padding:4,borderRadius:
|
|
1
|
+
const SIZES={xxxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xxl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},xl:{fontSize:18,minHeight:40,padding:8,borderRadius:8},l:{fontSize:18,minHeight:40,padding:8,borderRadius:8},m:{fontSize:16,minHeight:36,padding:7,borderRadius:8},s:{fontSize:14,minHeight:32,padding:6,borderRadius:7},xs:{fontSize:12,minHeight:20,padding:4,borderRadius:6},xxs:{fontSize:12,minHeight:20,padding:4,borderRadius:6},xxxs:{fontSize:12,minHeight:20,padding:4,borderRadius:6}};export{SIZES};
|
|
2
2
|
//# sourceMappingURL=constants.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n l: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n m: {\n fontSize: 16,\n minHeight: 36,\n padding: 7,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minHeight: 32,\n padding: 6,\n borderRadius: 7,\n },\n xs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius:
|
|
1
|
+
{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Chip/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xxl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n xl: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n l: {\n fontSize: 18,\n minHeight: 40,\n padding: 8,\n borderRadius: 8,\n },\n m: {\n fontSize: 16,\n minHeight: 36,\n padding: 7,\n borderRadius: 8,\n },\n s: {\n fontSize: 14,\n minHeight: 32,\n padding: 6,\n borderRadius: 7,\n },\n xs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n xxs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n xxxs: {\n fontSize: 12,\n minHeight: 20,\n padding: 4,\n borderRadius: 6,\n },\n}\n"],"names":["SIZES","xxxl","fontSize","minHeight","padding","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAGO,MAAMA,MAAqC,CAChDC,KAAM,CACJC,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBC,IAAK,CACHJ,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBE,GAAI,CACFL,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBG,EAAG,CACDN,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBI,EAAG,CACDP,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBK,EAAG,CACDR,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBM,GAAI,CACFT,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBO,IAAK,CACHV,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc,GAEhBQ,KAAM,CACJX,SAAU,GACVC,UAAW,GACXC,QAAS,EACTC,aAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var fuse=require('../../external/.pnpm/fuse.js@7.0.0/node_modules/fuse.js/dist/fuse.js');var withMergedProps=require('../../hocs/withMergedProps.js');var dom=require('../../shared/utils/dom.js');var constants$1=require('../../shared/constants.js');var DropdownMenuNoOptions=require('./DropdownMenuNoOptions.js');var constants=require('./constants.js');var utils=require('./utils.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var Chip=require('../Chip/Chip.js');var MenuComponent=require('../MenuComponent/MenuComponent.js');var MenuList=require('../MenuList/MenuList.js');var ListItem=require('../ListItem/ListItem.js');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:r="m",name:o="fox-dropdown",labelPosition:n="dynamic",optionsMultiToggle:s=!0,loading:a=!1,iconProps:i={},menuProps:l={},closeMenuOnScroll:c,contrast:u,defaultSelectedOption:d,icon:p,inputMode:b,label:g,loadingMessage:v,loadingIcon:m,loadingIconProps:C,maxLength:h,multiple:f,onCloseMenu:k,onOpenMenu:x,onSelectOption:$,options:y,optionsMultiToggleCaption:I,optionsEmptyMessage:D,optionsEmptyIcon:w,optionsEmptyIconProps:M,palette:q,placeholder:j,readOnly:L,required:P,status:R,sizeXXS:S,sizeXS:E,sizeS:z,sizeM:T,sizeL:F,sizeXL:K,sizeUnits:O,form:B,...X}=e;const H={size:r,sizeXXS:S,sizeXS:E,sizeS:z,sizeM:T,sizeL:F,sizeXL:K,sizeUnits:O};const N={size:24,color:X.disabled?'content-disabled':'content-onmain-tertiary'};const U=React.useMemo((()=>{const e=new fuse.default(y,{threshold:.4,ignoreLocation:!0,keys:[constants.FuseSearchKeys.text,constants.FuseSearchKeys.tags]});return t=>t.length===0?y:e.search(t).map((e=>e.item))}),[y]);const[_,Z]=React.useState((()=>f?'':utils.getDropdownInputText(d)));const[A,V]=React.useState((()=>utils.getDropdownInputValue(d)));const[G,J]=React.useState((()=>utils.getDropdownInputMultipleValue(d)));const[Q,W]=React.useState((()=>U(_)));const[Y,ee]=React.useState(!1);const te=f?utils.groupDropdownOptions(y,G):[[],[]];const re=Y&&!X.disabled;const oe=Q.length===0||a;const ne=Boolean(re||_);const se=f?G.length===0:A.length===0;const ae=te[0].length>0&&te[1].length===0;const ie=te[0].length>0&&te[1].length>0;const le=React.useRef(null);const ce=React.useRef(null);const ue=React.useRef(null);const de=React.useRef(null);const pe=React.useRef(_);const be=React.useRef(re);React.useEffect((()=>(_===pe.current?W(U(_)):(pe.current=_,de.current=setTimeout((()=>{W(U(_))}),150)),()=>{de.current&&clearTimeout(de.current)})),[U,_]),React.useEffect((()=>{re!==be.current&&(re&&x&&x(),!re&&k&&k(),be.current=re)}),[re,k,x]),React.useEffect((()=>{const handleScroll=e=>{le.current?.focus(),ee(!1),e.currentTarget&&e.currentTarget.removeEventListener(e.type,handleScroll)};return c&&re&&document.addEventListener('scroll',handleScroll),()=>{document.removeEventListener('scroll',handleScroll)}}),[c,re]);const syncInputTextWithSelectedOption=()=>{let e='';if(!f){const t=y.find((e=>e.value===A));e=t?t.text:''}Z(e)};return require$$0.jsx(FormInputLabel.FormInputLabel,{...X,...H,ref:t,label:g,labelPosition:n,active:ne,onColored:u,error:R==='error',success:R==='success',icon:[p,require$$0.jsx(style.ChevronIcon,{up:re},'chevron')],iconProps:{...N,...i},palette:{color:X.disabled?q.labelColorDisabled:q.labelColor,colorHover:X.disabled?q.labelColorDisabled:q.labelColorHover,backgroundColor:X.disabled?q.backgroundColorDisabled:q.backgroundColor,backgroundColorHover:X.disabled?q.backgroundColorDisabled:q.backgroundColorHover,borderColor:X.disabled?q.borderColorDisabled:q.borderColor,borderColorHover:X.disabled?q.borderColorDisabled:q.borderColor},onClick:e=>{X.onClick&&X.onClick(e),X.disabled||(le.current?.focus(),re?ce.current&&e.target instanceof Node&&!ce.current.contains(e.target)&&ee(!1):ee(!0))},onKeyUp:e=>{X.onKeyUp&&X.onKeyUp(e),constants$1.keyboardKeys.Esc.validate(e.key)&&(le.current?.focus(),ee(!1))},onPointerDown:e=>{X.onPointerDown&&X.onPointerDown(e),e.target!==le.current&&e.target instanceof Node&&e.currentTarget.contains(e.target)&&e.preventDefault()},onBlur:e=>{X.onBlur&&X.onBlur(e),e.currentTarget.contains(e.relatedTarget)||(syncInputTextWithSelectedOption(),ee(!1))},input:require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsx(style.Input,{ref:le,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",inputMode:b,maxLength:h,placeholder:j,readOnly:L,required:P&&se,disabled:X.disabled,label:g,labelPosition:n,active:ne,value:_,palette:{color:q.color,colorDisabled:q.colorDisabled,placeholderColor:q.placeholderColor,placeholderColorDisabled:q.placeholderColorDisabled},onClick:e=>{re&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{Z(e.currentTarget.value),ee(!0)},onKeyDown:e=>{constants$1.keyboardKeys.Enter.validate(e.key)&&(syncInputTextWithSelectedOption(),ee(!1)),!constants$1.keyboardKeys.Space.validate(e.key)||re&&e.currentTarget.selectionStart!==0||(e.preventDefault(),ee((e=>!e))),constants$1.keyboardKeys.ArrowDown.validate(e.key)&&ue.current&&(e.preventDefault(),dom.focusFirstFocusable(ue.current))}}),f?G.map((e=>require$$0.jsx("input",{type:"hidden",name:o,value:e,form:B,disabled:X.disabled},e))):A.length>0&&require$$0.jsx("input",{type:"hidden",name:o,value:A,form:B,disabled:X.disabled})]}),addon:f&&G.length>0?require$$0.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,disabled:X.disabled,cursor:X.disabled?'not-allowed':void 0,text:G.length,textProps:{appearance:'caption',size:'xs'},palette:X.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},discardButtonProps:{contrast:!X.disabled,onKeyDown:e=>{constants$1.keyboardKeys.ArrowDown.validate(e.key)&&ue.current&&(e.preventDefault(),dom.focusFirstFocusable(ue.current))},onClick:e=>{e.stopPropagation(),L||(J([]),$&&$([]),le.current?.focus(),ee(!0))}}}):void 0,dropdown:re?require$$0.jsx(MenuComponent.MenuComponent,{...l,ref:ce,sizeUnits:"%",sizes:constants.SIZES_MENU,size:l.size??100,tabIndex:oe?void 0:0,secondary:!u,elevated:u,disableAutoFocus:!0,palette:{backgroundColor:q.menuBackgroundColor,borderColor:q.menuBorderColor},onFocus:e=>{ue.current&&e.target===e.currentTarget&&(ue.current.contains(e.relatedTarget)?le.current?.focus():dom.focusFirstFocusable(ue.current))},onKeyDown:e=>{constants$1.keyboardKeys.Enter.validate(e.key)&&(le.current?.focus(),syncInputTextWithSelectedOption(),ee(!1))},children:oe?require$$0.jsx(DropdownMenuNoOptions.DropdownMenuNoOptions,{loading:a,loadingMessage:v,loadingIcon:m,loadingIconProps:{...N,...C},emptyMessage:D,emptyIcon:w,emptyIconProps:{...N,...M}}):require$$0.jsx(MenuList.MenuList,f?{ref:ue,children:_.length>0?require$$0.jsx(require$$0.Fragment,{children:Q.map((e=>{const t=G.includes(e.value);const r=e.status??R;const n=t&&r==='error';const s=t&&r==='success';return React.createElement(ListItem.ListItem,{...H,key:e.value,text:e.text,danger:n,success:s,disabled:X.disabled,active:t,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:o,value:e.value,checked:t,error:n,success:s,onChange:r=>{if(!L){const o=t?G.filter((t=>t!==e.value)):[...G,r.currentTarget.value];J(o),$&&$(y.filter((e=>o.includes(e.value))))}}})})}))}):require$$0.jsxs(require$$0.Fragment,{children:[s&&require$$0.jsx(ListItem.ListItem,{...H,text:I,disabled:X.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{L&&e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:o,checked:ae,indeterminate:ie,error:(ae||ie)&&R==='error',success:(ae||ie)&&R==='success',onChange:()=>{if(!L){const e=ae||ie?[]:y.map((e=>e.value));J(e),$&&$(e.length===0?[]:y)}}})}),s&&require$$0.jsx(MenuDivider.MenuDivider,{}),te[0].map((e=>{const t=e.status??R;const r=t==='error';const n=t==='success';return React.createElement(ListItem.ListItem,{...H,key:e.value,active:!0,text:e.text,danger:r,success:n,disabled:X.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{L&&e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:o,value:e.value,checked:!0,error:r,success:n,onChange:e=>{if(!L){const t=G.filter((t=>t!==e.currentTarget.value));J(t),$&&$(y.filter((e=>t.includes(e.value))))}}})})})),te[0].length>0&&te[1].length>0&&require$$0.jsx(MenuDivider.MenuDivider,{}),te[1].map((e=>React.createElement(ListItem.ListItem,{...H,key:e.value,text:e.text,disabled:X.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{L&&e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:o,value:e.value,checked:!1,onChange:e=>{if(!L){const t=[...G,e.currentTarget.value];J(t),$&&$(y.filter((e=>t.includes(e.value))))}}})})))]})}:{ref:ue,children:Q.map((e=>{const t=A===e.value;return React.createElement(ListItem.ListItem,{...H,key:e.value,text:e.text,active:t,danger:t&&R==='error',success:t&&R==='success',disabled:X.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:r=>{if(r.stopPropagation(),!L){const r=t?{value:'',text:''}:e;Z(r.text),V(r.value),$&&$(r.value?r:null),le.current?.focus(),ee(!r.value)}}})}))})}):void 0})})),{sizes:constants.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
|
|
1
|
+
'use strict';var React=require('react');var fuse=require('../../external/.pnpm/fuse.js@7.0.0/node_modules/fuse.js/dist/fuse.js');var withMergedProps=require('../../hocs/withMergedProps.js');var dom=require('../../shared/utils/dom.js');var constants$1=require('../../shared/constants.js');var DropdownMenu=require('./DropdownMenu.js');var DropdownMenuNoOptions=require('./DropdownMenuNoOptions.js');var constants=require('./constants.js');var utils=require('./utils.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var Chip=require('../Chip/Chip.js');var MenuList=require('../MenuList/MenuList.js');var ListItem=require('../ListItem/ListItem.js');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef(((e,o)=>{const{size:t="m",name:r="fox-dropdown",labelPosition:n="dynamic",optionsMultiToggle:s=!0,loading:a=!1,iconProps:i={},menuProps:l={},autoFocus:c,closeMenuOnScroll:u,contrast:d,selectedOption:p,defaultSelectedOption:b,icon:g,inputMode:v,label:m,loadingMessage:C,loadingIcon:f,loadingIconProps:h,maxLength:k,multiple:x,onCloseMenu:D,onOpenMenu:I,onSelectOption:$,options:w,optionsMultiToggleCaption:y,optionsEmptyMessage:q,optionsEmptyIcon:M,optionsEmptyIconProps:j,palette:L,placeholder:R,readOnly:P,required:E,status:S,sizeXXS:z,sizeXS:T,sizeS:F,sizeM:K,sizeL:O,sizeXL:B,form:X,...H}=e;const N={size:t,sizeXXS:z,sizeXS:T,sizeS:F,sizeM:K,sizeL:O,sizeXL:B};const _={size:24,color:H.disabled?'content-disabled':'content-onmain-tertiary'};const V=React.useMemo((()=>{const e=new fuse.default(w,{threshold:.4,ignoreLocation:!0,keys:[constants.FuseSearchKeys.text,constants.FuseSearchKeys.tags]});return o=>o.length===0?w:e.search(o).map((e=>e.item))}),[w]);const[Z,A]=React.useState((()=>x?'':utils.getDropdownInputText(p!==void 0?p:b)));const[U,G]=React.useState((()=>utils.getDropdownInputValue(p!==void 0?p:b)));const[J,Q]=React.useState((()=>utils.getDropdownInputMultipleValue(p!==void 0?p:b)));const[W,Y]=React.useState((()=>V(Z)));const[ee,oe]=React.useState(!1);const te=x?utils.groupDropdownOptions(w,J):[[],[]];const re=ee&&!H.disabled;const ne=W.length===0||a;const se=Boolean(re||Z);const ae=x?J.length===0:U.length===0;const ie=te[0].length>0&&te[1].length===0;const le=te[0].length>0&&te[1].length>0;const ce=React.useRef(null);const ue=React.useRef(null);const de=React.useRef(null);const pe=React.useRef(null);const be=React.useRef(Z);const ge=React.useRef(re);React.useEffect((()=>(Z===be.current?Y(V(Z)):(be.current=Z,pe.current=setTimeout((()=>{Y(V(Z))}),150)),()=>{pe.current&&clearTimeout(pe.current)})),[V,Z]),React.useLayoutEffect((()=>{p!==void 0&&(x?Q(utils.getDropdownInputMultipleValue(p)):(A(utils.getDropdownInputText(p)),G(utils.getDropdownInputValue(p))))}),[x,p]),React.useEffect((()=>{re!==ge.current&&(re&&I&&I(),!re&&D&&D(),ge.current=re)}),[re,D,I]),React.useEffect((()=>{const handleScroll=e=>{ce.current?.focus(),oe(!1),e.currentTarget&&e.currentTarget.removeEventListener(e.type,handleScroll)};return u&&re&&document.addEventListener('scroll',handleScroll),()=>{document.removeEventListener('scroll',handleScroll)}}),[u,re]);const syncInputTextWithSelectedOption=()=>{let e='';if(!x){const o=w.find((e=>e.value===U));e=o?o.text:''}A(e)};return require$$0.jsx(FormInputLabel.FormInputLabel,{...H,...N,ref:o,label:m,labelPosition:n,active:se,onColored:d,error:S==='error',success:S==='success',icon:[g,require$$0.jsx(style.ChevronIcon,{up:re},'chevron')],iconProps:{..._,...i},palette:{color:H.disabled?L.labelColorDisabled:L.labelColor,colorHover:H.disabled?L.labelColorDisabled:L.labelColorHover,backgroundColor:H.disabled?L.backgroundColorDisabled:L.backgroundColor,backgroundColorHover:H.disabled?L.backgroundColorDisabled:L.backgroundColorHover,borderColor:H.disabled?L.borderColorDisabled:L.borderColor,borderColorHover:H.disabled?L.borderColorDisabled:L.borderColor},onClick:e=>{H.onClick&&H.onClick(e),H.disabled||(ce.current?.focus(),re?ue.current&&e.target instanceof Node&&!ue.current.contains(e.target)&&oe(!1):oe(!0))},onKeyUp:e=>{H.onKeyUp&&H.onKeyUp(e),constants$1.keyboardKeys.Esc.validate(e.key)&&(ce.current?.focus(),oe(!1))},onPointerDown:e=>{H.onPointerDown&&H.onPointerDown(e),e.target!==ce.current&&e.target instanceof Node&&e.currentTarget.contains(e.target)&&e.preventDefault()},onBlur:e=>{H.onBlur&&H.onBlur(e),e.currentTarget.contains(e.relatedTarget)||(syncInputTextWithSelectedOption(),oe(!1))},input:require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsx(style.Input,{ref:ce,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",autoFocus:c,inputMode:v,maxLength:k,placeholder:R,readOnly:P,required:E&&ae,disabled:H.disabled,label:m,labelPosition:n,active:se,value:Z,palette:{color:L.color,colorDisabled:L.colorDisabled,placeholderColor:L.placeholderColor,placeholderColorDisabled:L.placeholderColorDisabled},onClick:e=>{re&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{A(e.currentTarget.value),oe(!0)},onKeyDown:e=>{constants$1.keyboardKeys.Enter.validate(e.key)&&(syncInputTextWithSelectedOption(),oe(!1)),!constants$1.keyboardKeys.Space.validate(e.key)||re&&e.currentTarget.selectionStart!==0||(e.preventDefault(),oe((e=>!e))),constants$1.keyboardKeys.ArrowDown.validate(e.key)&&de.current&&(e.preventDefault(),dom.focusFirstFocusable(de.current))}}),x?J.map((e=>require$$0.jsx("input",{type:"hidden",name:r,value:e,form:X,disabled:H.disabled},e))):U.length>0&&require$$0.jsx("input",{type:"hidden",name:r,value:U,form:X,disabled:H.disabled})]}),addon:x&&J.length>0?require$$0.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,disabled:H.disabled,cursor:H.disabled?'not-allowed':void 0,text:J.length,textProps:{appearance:'caption',size:'xs'},palette:H.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},discardButtonProps:{contrast:!H.disabled,onKeyDown:e=>{constants$1.keyboardKeys.ArrowDown.validate(e.key)&&de.current&&(e.preventDefault(),dom.focusFirstFocusable(de.current))},onClick:e=>{e.stopPropagation(),P||(p===void 0&&Q([]),$&&$([]),ce.current?.focus(),oe(!0))}}}):void 0,dropdown:re?require$$0.jsx(DropdownMenu.DropdownMenu,{...l,ref:ue,tabIndex:ne?void 0:0,secondary:!d,elevated:d,disableAutoFocus:!0,palette:{backgroundColor:L.menuBackgroundColor,borderColor:L.menuBorderColor},onFocus:e=>{de.current&&e.target===e.currentTarget&&(de.current.contains(e.relatedTarget)?ce.current?.focus():dom.focusFirstFocusable(de.current))},onKeyDown:e=>{constants$1.keyboardKeys.Enter.validate(e.key)&&(ce.current?.focus(),syncInputTextWithSelectedOption(),oe(!1))},children:ne?require$$0.jsx(DropdownMenuNoOptions.DropdownMenuNoOptions,{loading:a,loadingMessage:C,loadingIcon:f,loadingIconProps:{..._,...h},emptyMessage:q,emptyIcon:M,emptyIconProps:{..._,...j}}):require$$0.jsx(MenuList.MenuList,x?{ref:de,children:Z.length>0?require$$0.jsx(require$$0.Fragment,{children:W.map((e=>{const o=J.includes(e.value);const t=e.status??S;const n=o&&t==='error';const s=o&&t==='success';return React.createElement(ListItem.ListItem,{...N,key:e.value,text:e.text,danger:n,success:s,disabled:H.disabled,active:o,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:r,value:e.value,checked:o,error:n,success:s,onChange:e=>{if(!P){const t=o?J.filter((o=>o!==e.currentTarget.value)):[...J,e.currentTarget.value];p===void 0&&Q(t),$&&$(w.filter((e=>t.includes(e.value))))}}})})}))}):require$$0.jsxs(require$$0.Fragment,{children:[s&&require$$0.jsx(ListItem.ListItem,{...N,text:y,disabled:H.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{P&&e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:r,checked:ie,indeterminate:le,error:(ie||le)&&S==='error',success:(ie||le)&&S==='success',onChange:()=>{if(!P){const e=ie||le?[]:w.map((e=>e.value));p===void 0&&Q(e),$&&$(e.length===0?[]:w)}}})}),s&&require$$0.jsx(MenuDivider.MenuDivider,{}),te[0].map((e=>{const o=e.status??S;const t=o==='error';const n=o==='success';return React.createElement(ListItem.ListItem,{...N,key:e.value,active:!0,text:e.text,danger:t,success:n,disabled:H.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{P&&e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:r,value:e.value,checked:!0,error:t,success:n,onChange:e=>{if(!P){const o=J.filter((o=>o!==e.currentTarget.value));p===void 0&&Q(o),$&&$(w.filter((e=>o.includes(e.value))))}}})})})),te[0].length>0&&te[1].length>0&&require$$0.jsx(MenuDivider.MenuDivider,{}),te[1].map((e=>React.createElement(ListItem.ListItem,{...N,key:e.value,text:e.text,disabled:H.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{P&&e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:r,value:e.value,checked:!1,onChange:e=>{if(!P){const o=[...J,e.currentTarget.value];p===void 0&&Q(o),$&&$(w.filter((e=>o.includes(e.value))))}}})})))]})}:{ref:de,children:W.map((e=>{const o=U===e.value;return React.createElement(ListItem.ListItem,{...N,key:e.value,text:e.text,active:o,danger:o&&S==='error',success:o&&S==='success',disabled:H.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:t=>{if(t.stopPropagation(),!P){const t=o?null:e;p===void 0&&(A(utils.getDropdownInputText(t)),G(utils.getDropdownInputValue(t))),$&&$(t),ce.current?.focus(),oe(!t)}}})}))})}):void 0})})),{sizes:constants.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useMemo } from 'react'\nimport Fuse from 'fuse.js'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { MenuComponent } from 'components/MenuComponent'\nimport { MenuList } from 'components/MenuList'\nimport { MenuDivider } from 'components/MenuDivider'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { Chip } from 'components/Chip'\nimport type { IconProps } from 'components/Icon'\nimport { DropdownMenuNoOptions } from './DropdownMenuNoOptions'\nimport { SIZES, SIZES_CHECKBOX, SIZES_MENU, FuseSearchKeys } from './constants'\nimport {\n getDropdownInputText,\n getDropdownInputValue,\n getDropdownInputMultipleValue,\n groupDropdownOptions,\n} from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption } from './types'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dropdown/types.ts).\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n optionsMultiToggle = true,\n loading = false,\n iconProps = {},\n menuProps = {},\n closeMenuOnScroll,\n contrast,\n defaultSelectedOption,\n icon,\n inputMode,\n label,\n loadingMessage,\n loadingIcon,\n loadingIconProps,\n maxLength,\n multiple,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n optionsEmptyIconProps,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n form,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n }\n\n const iconBaseProps: IconProps = {\n size: 24,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const getRelevantOptions = useMemo(() => {\n const fuse = new Fuse<DropdownOption>(options, {\n threshold: 0.4,\n ignoreLocation: true,\n keys: [FuseSearchKeys.text, FuseSearchKeys.tags],\n })\n\n return (pattern: string): DropdownOption[] =>\n pattern.length === 0 ? options : fuse.search(pattern).map((result) => result.item)\n }, [options])\n\n const [inputText, setInputText] = useState<string>(() =>\n multiple ? '' : getDropdownInputText(defaultSelectedOption)\n )\n\n const [inputValue, setInputValue] = useState<string>(() => getDropdownInputValue(defaultSelectedOption))\n\n const [inputMultipleValue, setInputMultipleValue] = useState<string[]>(() =>\n getDropdownInputMultipleValue(defaultSelectedOption)\n )\n\n const [menuRelevantOptions, setMenuRelevantOptions] = useState<DropdownOption[]>(() =>\n getRelevantOptions(inputText)\n )\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptionsGroups: ReturnType<typeof groupDropdownOptions> = multiple\n ? groupDropdownOptions(options, inputMultipleValue)\n : [[], []]\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n const menuNoRelevantOptions = menuRelevantOptions.length === 0 || loading\n\n const inputActive = Boolean(menuOpen || inputText)\n const inputValueEmpty = multiple ? inputMultipleValue.length === 0 : inputValue.length === 0\n\n const multiToggleChecked = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length === 0\n const multiToggleIndeterminate = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0\n\n const inputRef = useRef<HTMLInputElement | null>(null)\n const menuRef = useRef<HTMLDivElement | null>(null)\n const menuListRef = useRef<HTMLUListElement | null>(null)\n\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const inputTextPrevRef = useRef<string>(inputText)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n useEffect(() => {\n if (inputText === inputTextPrevRef.current) {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n } else {\n inputTextPrevRef.current = inputText\n timeoutIdRef.current = setTimeout(() => {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n }, 150)\n }\n\n return () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current)\n }\n }\n }, [getRelevantOptions, inputText])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n const handleScroll = (evt: Event) => {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n\n if (evt.currentTarget) {\n evt.currentTarget.removeEventListener(evt.type, handleScroll)\n }\n }\n\n if (closeMenuOnScroll && menuOpen) {\n document.addEventListener('scroll', handleScroll)\n }\n\n return () => {\n document.removeEventListener('scroll', handleScroll)\n }\n }, [closeMenuOnScroll, menuOpen])\n\n const syncInputTextWithSelectedOption = () => {\n let selectedOptionText = ''\n\n if (!multiple) {\n const selectedOption = options.find((option) => option.value === inputValue)\n selectedOptionText = selectedOption ? selectedOption.text : ''\n }\n\n setInputText(selectedOptionText)\n }\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n onColored={contrast}\n error={status === 'error'}\n success={status === 'success'}\n icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{ ...iconBaseProps, ...iconProps }}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n colorHover: rootProps.disabled ? palette.labelColorDisabled : palette.labelColorHover,\n backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n borderColorHover: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n onClick={(evt) => {\n if (rootProps.onClick) rootProps.onClick(evt)\n\n if (rootProps.disabled) return\n\n inputRef.current?.focus()\n\n if (!menuOpen) {\n setMenuOpenRequest(true)\n } else if (menuRef.current && evt.target instanceof Node && !menuRef.current.contains(evt.target)) {\n setMenuOpenRequest(false)\n }\n }}\n onKeyUp={(evt) => {\n if (rootProps.onKeyUp) rootProps.onKeyUp(evt)\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n if (evt.target !== inputRef.current && evt.target instanceof Node && evt.currentTarget.contains(evt.target)) {\n evt.preventDefault()\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (!evt.currentTarget.contains(evt.relatedTarget)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n input={\n <>\n <Styled.Input\n ref={inputRef}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n inputMode={inputMode}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required && inputValueEmpty}\n disabled={rootProps.disabled}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n value={inputText}\n palette={{\n color: palette.color,\n colorDisabled: palette.colorDisabled,\n placeholderColor: palette.placeholderColor,\n placeholderColorDisabled: palette.placeholderColorDisabled,\n }}\n onClick={(evt) => {\n if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n evt.stopPropagation()\n }\n }}\n onChange={(evt) => {\n setInputText(evt.currentTarget.value)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n }}\n />\n {multiple\n ? inputMultipleValue.map((value) => (\n <input\n key={value}\n type='hidden'\n name={name}\n value={value}\n form={form}\n disabled={rootProps.disabled}\n />\n ))\n : inputValue.length > 0 && (\n <input type='hidden' name={name} value={inputValue} form={form} disabled={rootProps.disabled} />\n )}\n </>\n }\n addon={\n multiple && inputMultipleValue.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={inputMultipleValue.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n discardButtonProps={{\n contrast: !rootProps.disabled,\n onKeyDown: (evt) => {\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n },\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n setInputMultipleValue([])\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : undefined\n }\n dropdown={\n menuOpen ? (\n <MenuComponent\n {...menuProps}\n ref={menuRef}\n sizeUnits='%'\n sizes={SIZES_MENU}\n size={menuProps.size ?? 100}\n tabIndex={menuNoRelevantOptions ? undefined : 0}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n onFocus={(evt) => {\n if (!menuListRef.current) return\n\n if (evt.target === evt.currentTarget) {\n if (menuListRef.current.contains(evt.relatedTarget)) {\n inputRef.current?.focus()\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n >\n {menuNoRelevantOptions ? (\n <DropdownMenuNoOptions\n loading={loading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{ ...iconBaseProps, ...loadingIconProps }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{ ...iconBaseProps, ...optionsEmptyIconProps }}\n />\n ) : multiple ? (\n <MenuList ref={menuListRef}>\n {inputText.length > 0 ? (\n <>\n {menuRelevantOptions.map((option) => {\n const optionSelected = inputMultipleValue.includes(option.value)\n\n const optionStatus = option.status ?? status\n const optionErrorStatus = optionSelected && optionStatus === 'error'\n const optionSuccessStatus = optionSelected && optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n active={optionSelected}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={optionSelected}\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = optionSelected\n ? inputMultipleValue.filter((value) => value !== option.value)\n : [...inputMultipleValue, evt.currentTarget.value]\n\n setInputMultipleValue(update)\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n </>\n ) : (\n <>\n {optionsMultiToggle && (\n <ListItem\n {...sizeProps}\n text={optionsMultiToggleCaption}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n checked={multiToggleChecked}\n indeterminate={multiToggleIndeterminate}\n error={(multiToggleChecked || multiToggleIndeterminate) && status === 'error'}\n success={(multiToggleChecked || multiToggleIndeterminate) && status === 'success'}\n onChange={() => {\n if (!readOnly) {\n const update =\n multiToggleChecked || multiToggleIndeterminate\n ? []\n : options.map((option) => option.value)\n\n setInputMultipleValue(update)\n\n if (onSelectOption) onSelectOption(update.length === 0 ? [] : options)\n }\n }}\n />\n }\n />\n )}\n {optionsMultiToggle && <MenuDivider />}\n {menuOptionsGroups[0].map((option) => {\n const optionStatus = option.status ?? status\n const optionErrorStatus = optionStatus === 'error'\n const optionSuccessStatus = optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n active\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = inputMultipleValue.filter(\n (value) => value !== evt.currentTarget.value\n )\n\n setInputMultipleValue(update)\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n {menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0 && <MenuDivider />}\n {menuOptionsGroups[1].map((option) => (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={false}\n onChange={(evt) => {\n if (!readOnly) {\n const update = [...inputMultipleValue, evt.currentTarget.value]\n\n setInputMultipleValue(update)\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n ))}\n </>\n )}\n </MenuList>\n ) : (\n <MenuList ref={menuListRef}>\n {menuRelevantOptions.map((option) => {\n const optionSelected = inputValue === option.value\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n active={optionSelected}\n danger={optionSelected && status === 'error'}\n success={optionSelected && status === 'success'}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n const update = optionSelected ? { value: '', text: '' } : option\n\n setInputText(update.text)\n setInputValue(update.value)\n\n if (onSelectOption) onSelectOption(update.value ? update : null)\n\n inputRef.current?.focus()\n\n setMenuOpenRequest(!update.value)\n }\n }}\n />\n )\n })}\n </MenuList>\n )}\n </MenuComponent>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","optionsMultiToggle","loading","iconProps","menuProps","closeMenuOnScroll","contrast","defaultSelectedOption","icon","inputMode","label","loadingMessage","loadingIcon","loadingIconProps","maxLength","multiple","onCloseMenu","onOpenMenu","onSelectOption","options","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","optionsEmptyIconProps","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","form","rootProps","sizeProps","iconBaseProps","color","disabled","getRelevantOptions","useMemo","fuse","Fuse","default","threshold","ignoreLocation","keys","FuseSearchKeys","text","tags","pattern","length","search","map","result","item","inputText","setInputText","useState","getDropdownInputText","inputValue","setInputValue","getDropdownInputValue","inputMultipleValue","setInputMultipleValue","getDropdownInputMultipleValue","menuRelevantOptions","setMenuRelevantOptions","menuOpenRequest","setMenuOpenRequest","menuOptionsGroups","groupDropdownOptions","menuOpen","menuNoRelevantOptions","inputActive","Boolean","inputValueEmpty","multiToggleChecked","multiToggleIndeterminate","inputRef","useRef","menuRef","menuListRef","timeoutIdRef","inputTextPrevRef","menuOpenPrevRef","useEffect","current","setTimeout","clearTimeout","handleScroll","evt","focus","currentTarget","removeEventListener","type","document","addEventListener","syncInputTextWithSelectedOption","selectedOptionText","selectedOption","find","option","value","_jsx","FormInputLabel","active","onColored","error","success","jsx","Styled","up","labelColorDisabled","labelColor","colorHover","labelColorHover","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","borderColorHover","onClick","target","Node","contains","onKeyUp","keyboardKeys","Esc","validate","key","onPointerDown","preventDefault","onBlur","relatedTarget","input","_jsxs","jsxs","_Fragment","children","autoComplete","autoCapitalize","autoCorrect","spellCheck","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","onKeyDown","Enter","Space","prev","ArrowDown","focusFirstFocusable","addon","Chip","black","cursor","undefined","textProps","appearance","discardButtonProps","dropdown","MenuComponent","sizes","SIZES_MENU","tabIndex","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","onFocus","DropdownMenuNoOptions","emptyMessage","emptyIcon","emptyIconProps","MenuList","optionSelected","includes","optionStatus","optionErrorStatus","optionSuccessStatus","_createElement","ListItem","danger","borderRadius","ellipsis","wordBreak","control","InputCheckbox","SIZES_CHECKBOX","checked","update","filter","indeterminate","MenuDivider","createElement","SIZES","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react'\nimport Fuse from 'fuse.js'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { MenuList } from 'components/MenuList'\nimport { MenuDivider } from 'components/MenuDivider'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { Chip } from 'components/Chip'\nimport type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { DropdownMenuNoOptions } from './DropdownMenuNoOptions'\nimport { SIZES, SIZES_CHECKBOX, FuseSearchKeys } from './constants'\nimport {\n getDropdownInputText,\n getDropdownInputValue,\n getDropdownInputMultipleValue,\n groupDropdownOptions,\n} from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption } from './types'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dropdown/types.ts).\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n optionsMultiToggle = true,\n loading = false,\n iconProps = {},\n menuProps = {},\n autoFocus,\n closeMenuOnScroll,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n inputMode,\n label,\n loadingMessage,\n loadingIcon,\n loadingIconProps,\n maxLength,\n multiple,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n optionsEmptyIconProps,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n form,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconBaseProps: IconProps = {\n size: 24,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const getRelevantOptions = useMemo(() => {\n const fuse = new Fuse<DropdownOption>(options, {\n threshold: 0.4,\n ignoreLocation: true,\n keys: [FuseSearchKeys.text, FuseSearchKeys.tags],\n })\n\n return (pattern: string): DropdownOption[] =>\n pattern.length === 0 ? options : fuse.search(pattern).map((result) => result.item)\n }, [options])\n\n const [inputText, setInputText] = useState<string>(() => {\n if (multiple) return ''\n\n if (selectedOption !== undefined) return getDropdownInputText(selectedOption)\n\n return getDropdownInputText(defaultSelectedOption)\n })\n\n const [inputValue, setInputValue] = useState<string>(() => {\n if (selectedOption !== undefined) return getDropdownInputValue(selectedOption)\n\n return getDropdownInputValue(defaultSelectedOption)\n })\n\n const [inputMultipleValue, setInputMultipleValue] = useState<string[]>(() => {\n if (selectedOption !== undefined) return getDropdownInputMultipleValue(selectedOption)\n\n return getDropdownInputMultipleValue(defaultSelectedOption)\n })\n\n const [menuRelevantOptions, setMenuRelevantOptions] = useState<DropdownOption[]>(() =>\n getRelevantOptions(inputText)\n )\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptionsGroups: ReturnType<typeof groupDropdownOptions> = multiple\n ? groupDropdownOptions(options, inputMultipleValue)\n : [[], []]\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n const menuNoRelevantOptions = menuRelevantOptions.length === 0 || loading\n\n const inputActive = Boolean(menuOpen || inputText)\n const inputValueEmpty = multiple ? inputMultipleValue.length === 0 : inputValue.length === 0\n\n const multiToggleChecked = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length === 0\n const multiToggleIndeterminate = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0\n\n const inputRef = useRef<HTMLInputElement | null>(null)\n const menuRef = useRef<HTMLDivElement | null>(null)\n const menuListRef = useRef<HTMLUListElement | null>(null)\n\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const inputTextPrevRef = useRef<string>(inputText)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n useEffect(() => {\n if (inputText === inputTextPrevRef.current) {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n } else {\n inputTextPrevRef.current = inputText\n timeoutIdRef.current = setTimeout(() => {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n }, 150)\n }\n\n return () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current)\n }\n }\n }, [getRelevantOptions, inputText])\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (multiple) {\n setInputMultipleValue(getDropdownInputMultipleValue(selectedOption))\n } else {\n setInputText(getDropdownInputText(selectedOption))\n setInputValue(getDropdownInputValue(selectedOption))\n }\n }, [multiple, selectedOption])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n const handleScroll = (evt: Event) => {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n\n if (evt.currentTarget) {\n evt.currentTarget.removeEventListener(evt.type, handleScroll)\n }\n }\n\n if (closeMenuOnScroll && menuOpen) {\n document.addEventListener('scroll', handleScroll)\n }\n\n return () => {\n document.removeEventListener('scroll', handleScroll)\n }\n }, [closeMenuOnScroll, menuOpen])\n\n const syncInputTextWithSelectedOption = () => {\n let selectedOptionText = ''\n\n if (!multiple) {\n const selected = options.find((option) => option.value === inputValue)\n selectedOptionText = selected ? selected.text : ''\n }\n\n setInputText(selectedOptionText)\n }\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n onColored={contrast}\n error={status === 'error'}\n success={status === 'success'}\n icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{ ...iconBaseProps, ...iconProps }}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n colorHover: rootProps.disabled ? palette.labelColorDisabled : palette.labelColorHover,\n backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n borderColorHover: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n onClick={(evt) => {\n if (rootProps.onClick) rootProps.onClick(evt)\n\n if (rootProps.disabled) return\n\n inputRef.current?.focus()\n\n if (!menuOpen) {\n setMenuOpenRequest(true)\n } else if (menuRef.current && evt.target instanceof Node && !menuRef.current.contains(evt.target)) {\n setMenuOpenRequest(false)\n }\n }}\n onKeyUp={(evt) => {\n if (rootProps.onKeyUp) rootProps.onKeyUp(evt)\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n if (evt.target !== inputRef.current && evt.target instanceof Node && evt.currentTarget.contains(evt.target)) {\n evt.preventDefault()\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (!evt.currentTarget.contains(evt.relatedTarget)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n input={\n <>\n <Styled.Input\n ref={inputRef}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n autoFocus={autoFocus}\n inputMode={inputMode}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required && inputValueEmpty}\n disabled={rootProps.disabled}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n value={inputText}\n palette={{\n color: palette.color,\n colorDisabled: palette.colorDisabled,\n placeholderColor: palette.placeholderColor,\n placeholderColorDisabled: palette.placeholderColorDisabled,\n }}\n onClick={(evt) => {\n if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n evt.stopPropagation()\n }\n }}\n onChange={(evt) => {\n setInputText(evt.currentTarget.value)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n }}\n />\n {multiple\n ? inputMultipleValue.map((value) => (\n <input\n key={value}\n type='hidden'\n name={name}\n value={value}\n form={form}\n disabled={rootProps.disabled}\n />\n ))\n : inputValue.length > 0 && (\n <input type='hidden' name={name} value={inputValue} form={form} disabled={rootProps.disabled} />\n )}\n </>\n }\n addon={\n multiple && inputMultipleValue.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={inputMultipleValue.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n discardButtonProps={{\n contrast: !rootProps.disabled,\n onKeyDown: (evt) => {\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n },\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setInputMultipleValue([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : undefined\n }\n dropdown={\n menuOpen ? (\n <DropdownMenu\n {...menuProps}\n ref={menuRef}\n tabIndex={menuNoRelevantOptions ? undefined : 0}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n onFocus={(evt) => {\n if (!menuListRef.current) return\n\n if (evt.target === evt.currentTarget) {\n if (menuListRef.current.contains(evt.relatedTarget)) {\n inputRef.current?.focus()\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n >\n {menuNoRelevantOptions ? (\n <DropdownMenuNoOptions\n loading={loading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{ ...iconBaseProps, ...loadingIconProps }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{ ...iconBaseProps, ...optionsEmptyIconProps }}\n />\n ) : multiple ? (\n <MenuList ref={menuListRef}>\n {inputText.length > 0 ? (\n <>\n {menuRelevantOptions.map((option) => {\n const selected = inputMultipleValue.includes(option.value)\n\n const optionStatus = option.status ?? status\n const optionErrorStatus = selected && optionStatus === 'error'\n const optionSuccessStatus = selected && optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n active={selected}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={selected}\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = selected\n ? inputMultipleValue.filter((value) => value !== evt.currentTarget.value)\n : [...inputMultipleValue, evt.currentTarget.value]\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n </>\n ) : (\n <>\n {optionsMultiToggle && (\n <ListItem\n {...sizeProps}\n text={optionsMultiToggleCaption}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n checked={multiToggleChecked}\n indeterminate={multiToggleIndeterminate}\n error={(multiToggleChecked || multiToggleIndeterminate) && status === 'error'}\n success={(multiToggleChecked || multiToggleIndeterminate) && status === 'success'}\n onChange={() => {\n if (!readOnly) {\n const update =\n multiToggleChecked || multiToggleIndeterminate\n ? []\n : options.map((option) => option.value)\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) onSelectOption(update.length === 0 ? [] : options)\n }\n }}\n />\n }\n />\n )}\n {optionsMultiToggle && <MenuDivider />}\n {menuOptionsGroups[0].map((option) => {\n const optionStatus = option.status ?? status\n const optionErrorStatus = optionStatus === 'error'\n const optionSuccessStatus = optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n active\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = inputMultipleValue.filter(\n (value) => value !== evt.currentTarget.value\n )\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n {menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0 && <MenuDivider />}\n {menuOptionsGroups[1].map((option) => (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={false}\n onChange={(evt) => {\n if (!readOnly) {\n const update = [...inputMultipleValue, evt.currentTarget.value]\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n ))}\n </>\n )}\n </MenuList>\n ) : (\n <MenuList ref={menuListRef}>\n {menuRelevantOptions.map((option) => {\n const selected = inputValue === option.value\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n active={selected}\n danger={selected && status === 'error'}\n success={selected && status === 'success'}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n const update = selected ? null : option\n\n if (selectedOption === undefined) {\n setInputText(getDropdownInputText(update))\n setInputValue(getDropdownInputValue(update))\n }\n\n if (onSelectOption) onSelectOption(update)\n\n inputRef.current?.focus()\n\n setMenuOpenRequest(!update)\n }\n }}\n />\n )\n })}\n </MenuList>\n )}\n </DropdownMenu>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","optionsMultiToggle","loading","iconProps","menuProps","autoFocus","closeMenuOnScroll","contrast","selectedOption","defaultSelectedOption","icon","inputMode","label","loadingMessage","loadingIcon","loadingIconProps","maxLength","multiple","onCloseMenu","onOpenMenu","onSelectOption","options","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","optionsEmptyIconProps","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","rootProps","sizeProps","iconBaseProps","color","disabled","getRelevantOptions","useMemo","fuse","Fuse","default","threshold","ignoreLocation","keys","FuseSearchKeys","text","tags","pattern","length","search","map","result","item","inputText","setInputText","useState","getDropdownInputText","undefined","inputValue","setInputValue","getDropdownInputValue","inputMultipleValue","setInputMultipleValue","getDropdownInputMultipleValue","menuRelevantOptions","setMenuRelevantOptions","menuOpenRequest","setMenuOpenRequest","menuOptionsGroups","groupDropdownOptions","menuOpen","menuNoRelevantOptions","inputActive","Boolean","inputValueEmpty","multiToggleChecked","multiToggleIndeterminate","inputRef","useRef","menuRef","menuListRef","timeoutIdRef","inputTextPrevRef","menuOpenPrevRef","useEffect","current","setTimeout","clearTimeout","useLayoutEffect","handleScroll","evt","focus","currentTarget","removeEventListener","type","document","addEventListener","syncInputTextWithSelectedOption","selectedOptionText","selected","find","option","value","_jsx","FormInputLabel","active","onColored","error","success","jsx","Styled","up","labelColorDisabled","labelColor","colorHover","labelColorHover","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","borderColorHover","onClick","target","Node","contains","onKeyUp","keyboardKeys","Esc","validate","key","onPointerDown","preventDefault","onBlur","relatedTarget","input","_jsxs","jsxs","_Fragment","children","autoComplete","autoCapitalize","autoCorrect","spellCheck","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","onKeyDown","Enter","Space","prev","ArrowDown","focusFirstFocusable","addon","Chip","black","cursor","textProps","appearance","discardButtonProps","dropdown","DropdownMenu","tabIndex","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","onFocus","DropdownMenuNoOptions","emptyMessage","emptyIcon","emptyIconProps","MenuList","includes","optionStatus","optionErrorStatus","optionSuccessStatus","_createElement","ListItem","danger","borderRadius","ellipsis","wordBreak","control","InputCheckbox","sizes","SIZES_CHECKBOX","checked","update","filter","indeterminate","MenuDivider","createElement","SIZES","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef,useMemo,useState,useRef,useEffect,createElement}from'react';import Fuse from'../../external/.pnpm/fuse.js@7.0.0/node_modules/fuse.js/dist/fuse.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DropdownMenuNoOptions}from'./DropdownMenuNoOptions.mjs';import{SIZES,FuseSearchKeys,
|
|
1
|
+
import{forwardRef,useMemo,useState,useRef,useEffect,useLayoutEffect,createElement}from'react';import Fuse from'../../external/.pnpm/fuse.js@7.0.0/node_modules/fuse.js/dist/fuse.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DropdownMenu}from'./DropdownMenu.mjs';import{DropdownMenuNoOptions}from'./DropdownMenuNoOptions.mjs';import{SIZES,FuseSearchKeys,SIZES_CHECKBOX}from'./constants.mjs';import{getDropdownInputText,getDropdownInputValue,getDropdownInputMultipleValue,groupDropdownOptions}from'./utils.mjs';import{ChevronIcon,Input}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{Chip}from'../Chip/Chip.mjs';import{MenuList}from'../MenuList/MenuList.mjs';import{ListItem}from'../ListItem/ListItem.mjs';import{InputCheckbox}from'../InputCheckbox/InputCheckbox.mjs';import{MenuDivider}from'../MenuDivider/MenuDivider.mjs';const COMPONENT_NAME='Dropdown';const Dropdown=withMergedProps(forwardRef(((e,o)=>{const{size:t="m",name:r="fox-dropdown",labelPosition:n="dynamic",optionsMultiToggle:s=!0,loading:a=!1,iconProps:l={},menuProps:i={},autoFocus:c,closeMenuOnScroll:d,contrast:u,selectedOption:p,defaultSelectedOption:m,icon:b,inputMode:g,label:f,loadingMessage:v,loadingIcon:C,loadingIconProps:h,maxLength:k,multiple:x,onCloseMenu:w,onOpenMenu:y,onSelectOption:D,options:I,optionsMultiToggleCaption:M,optionsEmptyMessage:j,optionsEmptyIcon:E,optionsEmptyIconProps:S,palette:P,placeholder:L,readOnly:F,required:T,status:z,sizeXXS:K,sizeXS:O,sizeS:B,sizeM:R,sizeL:X,sizeXL:H,form:N,..._}=e;const V={size:t,sizeXXS:K,sizeXS:O,sizeS:B,sizeM:R,sizeL:X,sizeXL:H};const Z={size:24,color:_.disabled?'content-disabled':'content-onmain-tertiary'};const A=useMemo((()=>{const e=new Fuse(I,{threshold:.4,ignoreLocation:!0,keys:[FuseSearchKeys.text,FuseSearchKeys.tags]});return o=>o.length===0?I:e.search(o).map((e=>e.item))}),[I]);const[U,q]=useState((()=>x?'':getDropdownInputText(p!==void 0?p:m)));const[G,J]=useState((()=>getDropdownInputValue(p!==void 0?p:m)));const[Q,W]=useState((()=>getDropdownInputMultipleValue(p!==void 0?p:m)));const[Y,$]=useState((()=>A(U)));const[ee,oe]=useState(!1);const te=x?groupDropdownOptions(I,Q):[[],[]];const re=ee&&!_.disabled;const ne=Y.length===0||a;const se=Boolean(re||U);const ae=x?Q.length===0:G.length===0;const le=te[0].length>0&&te[1].length===0;const ie=te[0].length>0&&te[1].length>0;const ce=useRef(null);const de=useRef(null);const ue=useRef(null);const pe=useRef(null);const me=useRef(U);const be=useRef(re);useEffect((()=>(U===me.current?$(A(U)):(me.current=U,pe.current=setTimeout((()=>{$(A(U))}),150)),()=>{pe.current&&clearTimeout(pe.current)})),[A,U]),useLayoutEffect((()=>{p!==void 0&&(x?W(getDropdownInputMultipleValue(p)):(q(getDropdownInputText(p)),J(getDropdownInputValue(p))))}),[x,p]),useEffect((()=>{re!==be.current&&(re&&y&&y(),!re&&w&&w(),be.current=re)}),[re,w,y]),useEffect((()=>{const handleScroll=e=>{ce.current?.focus(),oe(!1),e.currentTarget&&e.currentTarget.removeEventListener(e.type,handleScroll)};return d&&re&&document.addEventListener('scroll',handleScroll),()=>{document.removeEventListener('scroll',handleScroll)}}),[d,re]);const syncInputTextWithSelectedOption=()=>{let e='';if(!x){const o=I.find((e=>e.value===G));e=o?o.text:''}q(e)};return jsx(FormInputLabel,{..._,...V,ref:o,label:f,labelPosition:n,active:se,onColored:u,error:z==='error',success:z==='success',icon:[b,jsx(ChevronIcon,{up:re},'chevron')],iconProps:{...Z,...l},palette:{color:_.disabled?P.labelColorDisabled:P.labelColor,colorHover:_.disabled?P.labelColorDisabled:P.labelColorHover,backgroundColor:_.disabled?P.backgroundColorDisabled:P.backgroundColor,backgroundColorHover:_.disabled?P.backgroundColorDisabled:P.backgroundColorHover,borderColor:_.disabled?P.borderColorDisabled:P.borderColor,borderColorHover:_.disabled?P.borderColorDisabled:P.borderColor},onClick:e=>{_.onClick&&_.onClick(e),_.disabled||(ce.current?.focus(),re?de.current&&e.target instanceof Node&&!de.current.contains(e.target)&&oe(!1):oe(!0))},onKeyUp:e=>{_.onKeyUp&&_.onKeyUp(e),keyboardKeys.Esc.validate(e.key)&&(ce.current?.focus(),oe(!1))},onPointerDown:e=>{_.onPointerDown&&_.onPointerDown(e),e.target!==ce.current&&e.target instanceof Node&&e.currentTarget.contains(e.target)&&e.preventDefault()},onBlur:e=>{_.onBlur&&_.onBlur(e),e.currentTarget.contains(e.relatedTarget)||(syncInputTextWithSelectedOption(),oe(!1))},input:jsxs(Fragment,{children:[jsx(Input,{ref:ce,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",autoFocus:c,inputMode:g,maxLength:k,placeholder:L,readOnly:F,required:T&&ae,disabled:_.disabled,label:f,labelPosition:n,active:se,value:U,palette:{color:P.color,colorDisabled:P.colorDisabled,placeholderColor:P.placeholderColor,placeholderColorDisabled:P.placeholderColorDisabled},onClick:e=>{re&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{q(e.currentTarget.value),oe(!0)},onKeyDown:e=>{keyboardKeys.Enter.validate(e.key)&&(syncInputTextWithSelectedOption(),oe(!1)),!keyboardKeys.Space.validate(e.key)||re&&e.currentTarget.selectionStart!==0||(e.preventDefault(),oe((e=>!e))),keyboardKeys.ArrowDown.validate(e.key)&&ue.current&&(e.preventDefault(),focusFirstFocusable(ue.current))}}),x?Q.map((e=>jsx("input",{type:"hidden",name:r,value:e,form:N,disabled:_.disabled},e))):G.length>0&&jsx("input",{type:"hidden",name:r,value:G,form:N,disabled:_.disabled})]}),addon:x&&Q.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,disabled:_.disabled,cursor:_.disabled?'not-allowed':void 0,text:Q.length,textProps:{appearance:'caption',size:'xs'},palette:_.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},discardButtonProps:{contrast:!_.disabled,onKeyDown:e=>{keyboardKeys.ArrowDown.validate(e.key)&&ue.current&&(e.preventDefault(),focusFirstFocusable(ue.current))},onClick:e=>{e.stopPropagation(),F||(p===void 0&&W([]),D&&D([]),ce.current?.focus(),oe(!0))}}}):void 0,dropdown:re?jsx(DropdownMenu,{...i,ref:de,tabIndex:ne?void 0:0,secondary:!u,elevated:u,disableAutoFocus:!0,palette:{backgroundColor:P.menuBackgroundColor,borderColor:P.menuBorderColor},onFocus:e=>{ue.current&&e.target===e.currentTarget&&(ue.current.contains(e.relatedTarget)?ce.current?.focus():focusFirstFocusable(ue.current))},onKeyDown:e=>{keyboardKeys.Enter.validate(e.key)&&(ce.current?.focus(),syncInputTextWithSelectedOption(),oe(!1))},children:ne?jsx(DropdownMenuNoOptions,{loading:a,loadingMessage:v,loadingIcon:C,loadingIconProps:{...Z,...h},emptyMessage:j,emptyIcon:E,emptyIconProps:{...Z,...S}}):jsx(MenuList,x?{ref:ue,children:U.length>0?jsx(Fragment,{children:Y.map((e=>{const o=Q.includes(e.value);const t=e.status??z;const n=o&&t==='error';const s=o&&t==='success';return createElement(ListItem,{...V,key:e.value,text:e.text,danger:n,success:s,disabled:_.disabled,active:o,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsx(InputCheckbox,{sizes:SIZES_CHECKBOX,form:"none",name:r,value:e.value,checked:o,error:n,success:s,onChange:e=>{if(!F){const t=o?Q.filter((o=>o!==e.currentTarget.value)):[...Q,e.currentTarget.value];p===void 0&&W(t),D&&D(I.filter((e=>t.includes(e.value))))}}})})}))}):jsxs(Fragment,{children:[s&&jsx(ListItem,{...V,text:M,disabled:_.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{F&&e.stopPropagation()},control:jsx(InputCheckbox,{sizes:SIZES_CHECKBOX,form:"none",name:r,checked:le,indeterminate:ie,error:(le||ie)&&z==='error',success:(le||ie)&&z==='success',onChange:()=>{if(!F){const e=le||ie?[]:I.map((e=>e.value));p===void 0&&W(e),D&&D(e.length===0?[]:I)}}})}),s&&jsx(MenuDivider,{}),te[0].map((e=>{const o=e.status??z;const t=o==='error';const n=o==='success';return createElement(ListItem,{...V,key:e.value,active:!0,text:e.text,danger:t,success:n,disabled:_.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{F&&e.stopPropagation()},control:jsx(InputCheckbox,{sizes:SIZES_CHECKBOX,form:"none",name:r,value:e.value,checked:!0,error:t,success:n,onChange:e=>{if(!F){const o=Q.filter((o=>o!==e.currentTarget.value));p===void 0&&W(o),D&&D(I.filter((e=>o.includes(e.value))))}}})})})),te[0].length>0&&te[1].length>0&&jsx(MenuDivider,{}),te[1].map((e=>createElement(ListItem,{...V,key:e.value,text:e.text,disabled:_.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{F&&e.stopPropagation()},control:jsx(InputCheckbox,{sizes:SIZES_CHECKBOX,form:"none",name:r,value:e.value,checked:!1,onChange:e=>{if(!F){const o=[...Q,e.currentTarget.value];p===void 0&&W(o),D&&D(I.filter((e=>o.includes(e.value))))}}})})))]})}:{ref:ue,children:Y.map((e=>{const o=G===e.value;return createElement(ListItem,{...V,key:e.value,text:e.text,active:o,danger:o&&z==='error',success:o&&z==='success',disabled:_.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:t=>{if(t.stopPropagation(),!F){const t=o?null:e;p===void 0&&(q(getDropdownInputText(t)),J(getDropdownInputValue(t))),D&&D(t),ce.current?.focus(),oe(!t)}}})}))})}):void 0})})),{sizes:SIZES,displayName:"Dropdown"});export{COMPONENT_NAME,Dropdown};
|
|
2
2
|
//# sourceMappingURL=Dropdown.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.mjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useMemo } from 'react'\nimport Fuse from 'fuse.js'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { MenuComponent } from 'components/MenuComponent'\nimport { MenuList } from 'components/MenuList'\nimport { MenuDivider } from 'components/MenuDivider'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { Chip } from 'components/Chip'\nimport type { IconProps } from 'components/Icon'\nimport { DropdownMenuNoOptions } from './DropdownMenuNoOptions'\nimport { SIZES, SIZES_CHECKBOX, SIZES_MENU, FuseSearchKeys } from './constants'\nimport {\n getDropdownInputText,\n getDropdownInputValue,\n getDropdownInputMultipleValue,\n groupDropdownOptions,\n} from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption } from './types'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dropdown/types.ts).\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n optionsMultiToggle = true,\n loading = false,\n iconProps = {},\n menuProps = {},\n closeMenuOnScroll,\n contrast,\n defaultSelectedOption,\n icon,\n inputMode,\n label,\n loadingMessage,\n loadingIcon,\n loadingIconProps,\n maxLength,\n multiple,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n optionsEmptyIconProps,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n form,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n }\n\n const iconBaseProps: IconProps = {\n size: 24,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const getRelevantOptions = useMemo(() => {\n const fuse = new Fuse<DropdownOption>(options, {\n threshold: 0.4,\n ignoreLocation: true,\n keys: [FuseSearchKeys.text, FuseSearchKeys.tags],\n })\n\n return (pattern: string): DropdownOption[] =>\n pattern.length === 0 ? options : fuse.search(pattern).map((result) => result.item)\n }, [options])\n\n const [inputText, setInputText] = useState<string>(() =>\n multiple ? '' : getDropdownInputText(defaultSelectedOption)\n )\n\n const [inputValue, setInputValue] = useState<string>(() => getDropdownInputValue(defaultSelectedOption))\n\n const [inputMultipleValue, setInputMultipleValue] = useState<string[]>(() =>\n getDropdownInputMultipleValue(defaultSelectedOption)\n )\n\n const [menuRelevantOptions, setMenuRelevantOptions] = useState<DropdownOption[]>(() =>\n getRelevantOptions(inputText)\n )\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptionsGroups: ReturnType<typeof groupDropdownOptions> = multiple\n ? groupDropdownOptions(options, inputMultipleValue)\n : [[], []]\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n const menuNoRelevantOptions = menuRelevantOptions.length === 0 || loading\n\n const inputActive = Boolean(menuOpen || inputText)\n const inputValueEmpty = multiple ? inputMultipleValue.length === 0 : inputValue.length === 0\n\n const multiToggleChecked = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length === 0\n const multiToggleIndeterminate = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0\n\n const inputRef = useRef<HTMLInputElement | null>(null)\n const menuRef = useRef<HTMLDivElement | null>(null)\n const menuListRef = useRef<HTMLUListElement | null>(null)\n\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const inputTextPrevRef = useRef<string>(inputText)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n useEffect(() => {\n if (inputText === inputTextPrevRef.current) {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n } else {\n inputTextPrevRef.current = inputText\n timeoutIdRef.current = setTimeout(() => {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n }, 150)\n }\n\n return () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current)\n }\n }\n }, [getRelevantOptions, inputText])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n const handleScroll = (evt: Event) => {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n\n if (evt.currentTarget) {\n evt.currentTarget.removeEventListener(evt.type, handleScroll)\n }\n }\n\n if (closeMenuOnScroll && menuOpen) {\n document.addEventListener('scroll', handleScroll)\n }\n\n return () => {\n document.removeEventListener('scroll', handleScroll)\n }\n }, [closeMenuOnScroll, menuOpen])\n\n const syncInputTextWithSelectedOption = () => {\n let selectedOptionText = ''\n\n if (!multiple) {\n const selectedOption = options.find((option) => option.value === inputValue)\n selectedOptionText = selectedOption ? selectedOption.text : ''\n }\n\n setInputText(selectedOptionText)\n }\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n onColored={contrast}\n error={status === 'error'}\n success={status === 'success'}\n icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{ ...iconBaseProps, ...iconProps }}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n colorHover: rootProps.disabled ? palette.labelColorDisabled : palette.labelColorHover,\n backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n borderColorHover: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n onClick={(evt) => {\n if (rootProps.onClick) rootProps.onClick(evt)\n\n if (rootProps.disabled) return\n\n inputRef.current?.focus()\n\n if (!menuOpen) {\n setMenuOpenRequest(true)\n } else if (menuRef.current && evt.target instanceof Node && !menuRef.current.contains(evt.target)) {\n setMenuOpenRequest(false)\n }\n }}\n onKeyUp={(evt) => {\n if (rootProps.onKeyUp) rootProps.onKeyUp(evt)\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n if (evt.target !== inputRef.current && evt.target instanceof Node && evt.currentTarget.contains(evt.target)) {\n evt.preventDefault()\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (!evt.currentTarget.contains(evt.relatedTarget)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n input={\n <>\n <Styled.Input\n ref={inputRef}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n inputMode={inputMode}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required && inputValueEmpty}\n disabled={rootProps.disabled}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n value={inputText}\n palette={{\n color: palette.color,\n colorDisabled: palette.colorDisabled,\n placeholderColor: palette.placeholderColor,\n placeholderColorDisabled: palette.placeholderColorDisabled,\n }}\n onClick={(evt) => {\n if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n evt.stopPropagation()\n }\n }}\n onChange={(evt) => {\n setInputText(evt.currentTarget.value)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n }}\n />\n {multiple\n ? inputMultipleValue.map((value) => (\n <input\n key={value}\n type='hidden'\n name={name}\n value={value}\n form={form}\n disabled={rootProps.disabled}\n />\n ))\n : inputValue.length > 0 && (\n <input type='hidden' name={name} value={inputValue} form={form} disabled={rootProps.disabled} />\n )}\n </>\n }\n addon={\n multiple && inputMultipleValue.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={inputMultipleValue.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n discardButtonProps={{\n contrast: !rootProps.disabled,\n onKeyDown: (evt) => {\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n },\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n setInputMultipleValue([])\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : undefined\n }\n dropdown={\n menuOpen ? (\n <MenuComponent\n {...menuProps}\n ref={menuRef}\n sizeUnits='%'\n sizes={SIZES_MENU}\n size={menuProps.size ?? 100}\n tabIndex={menuNoRelevantOptions ? undefined : 0}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n onFocus={(evt) => {\n if (!menuListRef.current) return\n\n if (evt.target === evt.currentTarget) {\n if (menuListRef.current.contains(evt.relatedTarget)) {\n inputRef.current?.focus()\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n >\n {menuNoRelevantOptions ? (\n <DropdownMenuNoOptions\n loading={loading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{ ...iconBaseProps, ...loadingIconProps }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{ ...iconBaseProps, ...optionsEmptyIconProps }}\n />\n ) : multiple ? (\n <MenuList ref={menuListRef}>\n {inputText.length > 0 ? (\n <>\n {menuRelevantOptions.map((option) => {\n const optionSelected = inputMultipleValue.includes(option.value)\n\n const optionStatus = option.status ?? status\n const optionErrorStatus = optionSelected && optionStatus === 'error'\n const optionSuccessStatus = optionSelected && optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n active={optionSelected}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={optionSelected}\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = optionSelected\n ? inputMultipleValue.filter((value) => value !== option.value)\n : [...inputMultipleValue, evt.currentTarget.value]\n\n setInputMultipleValue(update)\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n </>\n ) : (\n <>\n {optionsMultiToggle && (\n <ListItem\n {...sizeProps}\n text={optionsMultiToggleCaption}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n checked={multiToggleChecked}\n indeterminate={multiToggleIndeterminate}\n error={(multiToggleChecked || multiToggleIndeterminate) && status === 'error'}\n success={(multiToggleChecked || multiToggleIndeterminate) && status === 'success'}\n onChange={() => {\n if (!readOnly) {\n const update =\n multiToggleChecked || multiToggleIndeterminate\n ? []\n : options.map((option) => option.value)\n\n setInputMultipleValue(update)\n\n if (onSelectOption) onSelectOption(update.length === 0 ? [] : options)\n }\n }}\n />\n }\n />\n )}\n {optionsMultiToggle && <MenuDivider />}\n {menuOptionsGroups[0].map((option) => {\n const optionStatus = option.status ?? status\n const optionErrorStatus = optionStatus === 'error'\n const optionSuccessStatus = optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n active\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = inputMultipleValue.filter(\n (value) => value !== evt.currentTarget.value\n )\n\n setInputMultipleValue(update)\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n {menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0 && <MenuDivider />}\n {menuOptionsGroups[1].map((option) => (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={false}\n onChange={(evt) => {\n if (!readOnly) {\n const update = [...inputMultipleValue, evt.currentTarget.value]\n\n setInputMultipleValue(update)\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n ))}\n </>\n )}\n </MenuList>\n ) : (\n <MenuList ref={menuListRef}>\n {menuRelevantOptions.map((option) => {\n const optionSelected = inputValue === option.value\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n active={optionSelected}\n danger={optionSelected && status === 'error'}\n success={optionSelected && status === 'success'}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n const update = optionSelected ? { value: '', text: '' } : option\n\n setInputText(update.text)\n setInputValue(update.value)\n\n if (onSelectOption) onSelectOption(update.value ? update : null)\n\n inputRef.current?.focus()\n\n setMenuOpenRequest(!update.value)\n }\n }}\n />\n )\n })}\n </MenuList>\n )}\n </MenuComponent>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","optionsMultiToggle","loading","iconProps","menuProps","closeMenuOnScroll","contrast","defaultSelectedOption","icon","inputMode","label","loadingMessage","loadingIcon","loadingIconProps","maxLength","multiple","onCloseMenu","onOpenMenu","onSelectOption","options","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","optionsEmptyIconProps","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","form","rootProps","sizeProps","iconBaseProps","color","disabled","getRelevantOptions","useMemo","fuse","Fuse","threshold","ignoreLocation","keys","FuseSearchKeys","text","tags","pattern","length","search","map","result","item","inputText","setInputText","useState","getDropdownInputText","inputValue","setInputValue","getDropdownInputValue","inputMultipleValue","setInputMultipleValue","getDropdownInputMultipleValue","menuRelevantOptions","setMenuRelevantOptions","menuOpenRequest","setMenuOpenRequest","menuOptionsGroups","groupDropdownOptions","menuOpen","menuNoRelevantOptions","inputActive","Boolean","inputValueEmpty","multiToggleChecked","multiToggleIndeterminate","inputRef","useRef","menuRef","menuListRef","timeoutIdRef","inputTextPrevRef","menuOpenPrevRef","useEffect","current","setTimeout","clearTimeout","handleScroll","evt","focus","currentTarget","removeEventListener","type","document","addEventListener","syncInputTextWithSelectedOption","selectedOptionText","selectedOption","find","option","value","_jsx","FormInputLabel","active","onColored","error","success","Styled","up","labelColorDisabled","labelColor","colorHover","labelColorHover","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","borderColorHover","onClick","target","Node","contains","onKeyUp","keyboardKeys","Esc","validate","key","onPointerDown","preventDefault","onBlur","relatedTarget","input","_jsxs","_Fragment","children","autoComplete","autoCapitalize","autoCorrect","spellCheck","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","onKeyDown","Enter","Space","prev","ArrowDown","focusFirstFocusable","addon","Chip","black","cursor","undefined","textProps","appearance","discardButtonProps","dropdown","MenuComponent","sizes","SIZES_MENU","tabIndex","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","onFocus","DropdownMenuNoOptions","emptyMessage","emptyIcon","emptyIconProps","MenuList","optionSelected","includes","optionStatus","optionErrorStatus","optionSuccessStatus","_createElement","ListItem","danger","borderRadius","ellipsis","wordBreak","control","InputCheckbox","SIZES_CHECKBOX","checked","update","filter","indeterminate","MenuDivider","SIZES","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.mjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react'\nimport Fuse from 'fuse.js'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { MenuList } from 'components/MenuList'\nimport { MenuDivider } from 'components/MenuDivider'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { Chip } from 'components/Chip'\nimport type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { DropdownMenuNoOptions } from './DropdownMenuNoOptions'\nimport { SIZES, SIZES_CHECKBOX, FuseSearchKeys } from './constants'\nimport {\n getDropdownInputText,\n getDropdownInputValue,\n getDropdownInputMultipleValue,\n groupDropdownOptions,\n} from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption } from './types'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dropdown/types.ts).\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n optionsMultiToggle = true,\n loading = false,\n iconProps = {},\n menuProps = {},\n autoFocus,\n closeMenuOnScroll,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n inputMode,\n label,\n loadingMessage,\n loadingIcon,\n loadingIconProps,\n maxLength,\n multiple,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n optionsEmptyIconProps,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n form,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconBaseProps: IconProps = {\n size: 24,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const getRelevantOptions = useMemo(() => {\n const fuse = new Fuse<DropdownOption>(options, {\n threshold: 0.4,\n ignoreLocation: true,\n keys: [FuseSearchKeys.text, FuseSearchKeys.tags],\n })\n\n return (pattern: string): DropdownOption[] =>\n pattern.length === 0 ? options : fuse.search(pattern).map((result) => result.item)\n }, [options])\n\n const [inputText, setInputText] = useState<string>(() => {\n if (multiple) return ''\n\n if (selectedOption !== undefined) return getDropdownInputText(selectedOption)\n\n return getDropdownInputText(defaultSelectedOption)\n })\n\n const [inputValue, setInputValue] = useState<string>(() => {\n if (selectedOption !== undefined) return getDropdownInputValue(selectedOption)\n\n return getDropdownInputValue(defaultSelectedOption)\n })\n\n const [inputMultipleValue, setInputMultipleValue] = useState<string[]>(() => {\n if (selectedOption !== undefined) return getDropdownInputMultipleValue(selectedOption)\n\n return getDropdownInputMultipleValue(defaultSelectedOption)\n })\n\n const [menuRelevantOptions, setMenuRelevantOptions] = useState<DropdownOption[]>(() =>\n getRelevantOptions(inputText)\n )\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptionsGroups: ReturnType<typeof groupDropdownOptions> = multiple\n ? groupDropdownOptions(options, inputMultipleValue)\n : [[], []]\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n const menuNoRelevantOptions = menuRelevantOptions.length === 0 || loading\n\n const inputActive = Boolean(menuOpen || inputText)\n const inputValueEmpty = multiple ? inputMultipleValue.length === 0 : inputValue.length === 0\n\n const multiToggleChecked = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length === 0\n const multiToggleIndeterminate = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0\n\n const inputRef = useRef<HTMLInputElement | null>(null)\n const menuRef = useRef<HTMLDivElement | null>(null)\n const menuListRef = useRef<HTMLUListElement | null>(null)\n\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const inputTextPrevRef = useRef<string>(inputText)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n useEffect(() => {\n if (inputText === inputTextPrevRef.current) {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n } else {\n inputTextPrevRef.current = inputText\n timeoutIdRef.current = setTimeout(() => {\n setMenuRelevantOptions(getRelevantOptions(inputText))\n }, 150)\n }\n\n return () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current)\n }\n }\n }, [getRelevantOptions, inputText])\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (multiple) {\n setInputMultipleValue(getDropdownInputMultipleValue(selectedOption))\n } else {\n setInputText(getDropdownInputText(selectedOption))\n setInputValue(getDropdownInputValue(selectedOption))\n }\n }, [multiple, selectedOption])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n const handleScroll = (evt: Event) => {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n\n if (evt.currentTarget) {\n evt.currentTarget.removeEventListener(evt.type, handleScroll)\n }\n }\n\n if (closeMenuOnScroll && menuOpen) {\n document.addEventListener('scroll', handleScroll)\n }\n\n return () => {\n document.removeEventListener('scroll', handleScroll)\n }\n }, [closeMenuOnScroll, menuOpen])\n\n const syncInputTextWithSelectedOption = () => {\n let selectedOptionText = ''\n\n if (!multiple) {\n const selected = options.find((option) => option.value === inputValue)\n selectedOptionText = selected ? selected.text : ''\n }\n\n setInputText(selectedOptionText)\n }\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n onColored={contrast}\n error={status === 'error'}\n success={status === 'success'}\n icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{ ...iconBaseProps, ...iconProps }}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n colorHover: rootProps.disabled ? palette.labelColorDisabled : palette.labelColorHover,\n backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n borderColorHover: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n onClick={(evt) => {\n if (rootProps.onClick) rootProps.onClick(evt)\n\n if (rootProps.disabled) return\n\n inputRef.current?.focus()\n\n if (!menuOpen) {\n setMenuOpenRequest(true)\n } else if (menuRef.current && evt.target instanceof Node && !menuRef.current.contains(evt.target)) {\n setMenuOpenRequest(false)\n }\n }}\n onKeyUp={(evt) => {\n if (rootProps.onKeyUp) rootProps.onKeyUp(evt)\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n if (evt.target !== inputRef.current && evt.target instanceof Node && evt.currentTarget.contains(evt.target)) {\n evt.preventDefault()\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (!evt.currentTarget.contains(evt.relatedTarget)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n input={\n <>\n <Styled.Input\n ref={inputRef}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n autoFocus={autoFocus}\n inputMode={inputMode}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required && inputValueEmpty}\n disabled={rootProps.disabled}\n label={label}\n labelPosition={labelPosition}\n active={inputActive}\n value={inputText}\n palette={{\n color: palette.color,\n colorDisabled: palette.colorDisabled,\n placeholderColor: palette.placeholderColor,\n placeholderColorDisabled: palette.placeholderColorDisabled,\n }}\n onClick={(evt) => {\n if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n evt.stopPropagation()\n }\n }}\n onChange={(evt) => {\n setInputText(evt.currentTarget.value)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n }}\n />\n {multiple\n ? inputMultipleValue.map((value) => (\n <input\n key={value}\n type='hidden'\n name={name}\n value={value}\n form={form}\n disabled={rootProps.disabled}\n />\n ))\n : inputValue.length > 0 && (\n <input type='hidden' name={name} value={inputValue} form={form} disabled={rootProps.disabled} />\n )}\n </>\n }\n addon={\n multiple && inputMultipleValue.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={inputMultipleValue.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n discardButtonProps={{\n contrast: !rootProps.disabled,\n onKeyDown: (evt) => {\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuListRef.current) {\n evt.preventDefault()\n focusFirstFocusable(menuListRef.current)\n }\n },\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setInputMultipleValue([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : undefined\n }\n dropdown={\n menuOpen ? (\n <DropdownMenu\n {...menuProps}\n ref={menuRef}\n tabIndex={menuNoRelevantOptions ? undefined : 0}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n onFocus={(evt) => {\n if (!menuListRef.current) return\n\n if (evt.target === evt.currentTarget) {\n if (menuListRef.current.contains(evt.relatedTarget)) {\n inputRef.current?.focus()\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n syncInputTextWithSelectedOption()\n setMenuOpenRequest(false)\n }\n }}\n >\n {menuNoRelevantOptions ? (\n <DropdownMenuNoOptions\n loading={loading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{ ...iconBaseProps, ...loadingIconProps }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{ ...iconBaseProps, ...optionsEmptyIconProps }}\n />\n ) : multiple ? (\n <MenuList ref={menuListRef}>\n {inputText.length > 0 ? (\n <>\n {menuRelevantOptions.map((option) => {\n const selected = inputMultipleValue.includes(option.value)\n\n const optionStatus = option.status ?? status\n const optionErrorStatus = selected && optionStatus === 'error'\n const optionSuccessStatus = selected && optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n active={selected}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={selected}\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = selected\n ? inputMultipleValue.filter((value) => value !== evt.currentTarget.value)\n : [...inputMultipleValue, evt.currentTarget.value]\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n </>\n ) : (\n <>\n {optionsMultiToggle && (\n <ListItem\n {...sizeProps}\n text={optionsMultiToggleCaption}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n checked={multiToggleChecked}\n indeterminate={multiToggleIndeterminate}\n error={(multiToggleChecked || multiToggleIndeterminate) && status === 'error'}\n success={(multiToggleChecked || multiToggleIndeterminate) && status === 'success'}\n onChange={() => {\n if (!readOnly) {\n const update =\n multiToggleChecked || multiToggleIndeterminate\n ? []\n : options.map((option) => option.value)\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) onSelectOption(update.length === 0 ? [] : options)\n }\n }}\n />\n }\n />\n )}\n {optionsMultiToggle && <MenuDivider />}\n {menuOptionsGroups[0].map((option) => {\n const optionStatus = option.status ?? status\n const optionErrorStatus = optionStatus === 'error'\n const optionSuccessStatus = optionStatus === 'success'\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n active\n text={option.text}\n danger={optionErrorStatus}\n success={optionSuccessStatus}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked\n error={optionErrorStatus}\n success={optionSuccessStatus}\n onChange={(evt) => {\n if (!readOnly) {\n const update = inputMultipleValue.filter(\n (value) => value !== evt.currentTarget.value\n )\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n )\n })}\n {menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0 && <MenuDivider />}\n {menuOptionsGroups[1].map((option) => (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n if (readOnly) evt.stopPropagation()\n }}\n control={\n <InputCheckbox\n sizes={SIZES_CHECKBOX}\n form='none'\n name={name}\n value={option.value}\n checked={false}\n onChange={(evt) => {\n if (!readOnly) {\n const update = [...inputMultipleValue, evt.currentTarget.value]\n\n if (selectedOption === undefined) {\n setInputMultipleValue(update)\n }\n\n if (onSelectOption) {\n onSelectOption(options.filter((option) => update.includes(option.value)))\n }\n }\n }}\n />\n }\n />\n ))}\n </>\n )}\n </MenuList>\n ) : (\n <MenuList ref={menuListRef}>\n {menuRelevantOptions.map((option) => {\n const selected = inputValue === option.value\n\n return (\n <ListItem\n {...sizeProps}\n key={option.value}\n text={option.text}\n active={selected}\n danger={selected && status === 'error'}\n success={selected && status === 'success'}\n disabled={rootProps.disabled}\n borderRadius={8}\n ellipsis={false}\n textProps={{ wordBreak: 'break-word' }}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n const update = selected ? null : option\n\n if (selectedOption === undefined) {\n setInputText(getDropdownInputText(update))\n setInputValue(getDropdownInputValue(update))\n }\n\n if (onSelectOption) onSelectOption(update)\n\n inputRef.current?.focus()\n\n setMenuOpenRequest(!update)\n }\n }}\n />\n )\n })}\n </MenuList>\n )}\n </DropdownMenu>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","optionsMultiToggle","loading","iconProps","menuProps","autoFocus","closeMenuOnScroll","contrast","selectedOption","defaultSelectedOption","icon","inputMode","label","loadingMessage","loadingIcon","loadingIconProps","maxLength","multiple","onCloseMenu","onOpenMenu","onSelectOption","options","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","optionsEmptyIconProps","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","rootProps","sizeProps","iconBaseProps","color","disabled","getRelevantOptions","useMemo","fuse","Fuse","threshold","ignoreLocation","keys","FuseSearchKeys","text","tags","pattern","length","search","map","result","item","inputText","setInputText","useState","getDropdownInputText","undefined","inputValue","setInputValue","getDropdownInputValue","inputMultipleValue","setInputMultipleValue","getDropdownInputMultipleValue","menuRelevantOptions","setMenuRelevantOptions","menuOpenRequest","setMenuOpenRequest","menuOptionsGroups","groupDropdownOptions","menuOpen","menuNoRelevantOptions","inputActive","Boolean","inputValueEmpty","multiToggleChecked","multiToggleIndeterminate","inputRef","useRef","menuRef","menuListRef","timeoutIdRef","inputTextPrevRef","menuOpenPrevRef","useEffect","current","setTimeout","clearTimeout","useLayoutEffect","handleScroll","evt","focus","currentTarget","removeEventListener","type","document","addEventListener","syncInputTextWithSelectedOption","selectedOptionText","selected","find","option","value","_jsx","FormInputLabel","active","onColored","error","success","Styled","up","labelColorDisabled","labelColor","colorHover","labelColorHover","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","borderColorHover","onClick","target","Node","contains","onKeyUp","keyboardKeys","Esc","validate","key","onPointerDown","preventDefault","onBlur","relatedTarget","input","_jsxs","_Fragment","children","autoComplete","autoCapitalize","autoCorrect","spellCheck","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","onKeyDown","Enter","Space","prev","ArrowDown","focusFirstFocusable","addon","Chip","black","cursor","textProps","appearance","discardButtonProps","dropdown","DropdownMenu","tabIndex","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","onFocus","DropdownMenuNoOptions","emptyMessage","emptyIcon","emptyIconProps","MenuList","includes","optionStatus","optionErrorStatus","optionSuccessStatus","_createElement","ListItem","danger","borderRadius","ellipsis","wordBreak","control","InputCheckbox","sizes","SIZES_CHECKBOX","checked","update","filter","indeterminate","MenuDivider","SIZES","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const DropdownMenu=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:s="fluid",...t}=e;return require$$0.jsx(style.PositionedMenuComponent,{...t,size:s,ref:r})})),{sizes:constants.SIZES_MENU,displayName:'DropdownMenu'});exports.DropdownMenu=DropdownMenu;
|
|
2
|
+
//# sourceMappingURL=DropdownMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","sources":["../../../../src/components/Dropdown/DropdownMenu.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_MENU } from './constants'\nimport * as Styled from './style'\nimport type { DropdownMenuProps } from './types'\n\nconst COMPONENT_NAME = 'DropdownMenu'\n\nconst DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps> = withMergedProps<\n DropdownMenuProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const { size = 'fluid', ...restProps } = props\n\n return <Styled.PositionedMenuComponent {...restProps} size={size} ref={ref} />\n }),\n {\n sizes: SIZES_MENU,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DropdownMenu }\n"],"names":["DropdownMenu","withMergedProps","forwardRef","props","ref","size","restProps","_jsx","Styled","sizes","SIZES_MENU","displayName"],"mappings":"yNAQMA,MAAAA,aAAmEC,gBAAAA,gBAIvEC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KAAEA,EAAO,WAAYC,GAAcH,EAEzC,OAAOI,WAAAA,IAACC,MAAAA,wBAA8B,IAAKF,EAAWD,KAAMA,EAAMD,IAAKA,GAAO,IAEhF,CACEK,MAAOC,UAAUA,WACjBC,YAbmB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_MENU}from'./constants.mjs';import{PositionedMenuComponent}from'./style.mjs';import{jsx}from'react/jsx-runtime';const DropdownMenu=withMergedProps(forwardRef(((o,r)=>{const{size:e="fluid",...s}=o;return jsx(PositionedMenuComponent,{...s,size:e,ref:r})})),{sizes:SIZES_MENU,displayName:'DropdownMenu'});export{DropdownMenu};
|
|
2
|
+
//# sourceMappingURL=DropdownMenu.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownMenu.mjs","sources":["../../../../src/components/Dropdown/DropdownMenu.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_MENU } from './constants'\nimport * as Styled from './style'\nimport type { DropdownMenuProps } from './types'\n\nconst COMPONENT_NAME = 'DropdownMenu'\n\nconst DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps> = withMergedProps<\n DropdownMenuProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const { size = 'fluid', ...restProps } = props\n\n return <Styled.PositionedMenuComponent {...restProps} size={size} ref={ref} />\n }),\n {\n sizes: SIZES_MENU,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DropdownMenu }\n"],"names":["DropdownMenu","withMergedProps","forwardRef","props","ref","size","restProps","_jsx","Styled","sizes","SIZES_MENU","displayName"],"mappings":"sNAQMA,MAAAA,aAAmEC,gBAIvEC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KAAEA,EAAO,WAAYC,GAAcH,EAEzC,OAAOI,IAACC,wBAA8B,IAAKF,EAAWD,KAAMA,EAAMD,IAAKA,GAAO,IAEhF,CACEK,MAAOC,WACPC,YAbmB"}
|