@foxford/ui 2.108.1 → 2.109.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.
Files changed (42) hide show
  1. package/components/Dropdown/Dropdown.js +1 -1
  2. package/components/Dropdown/Dropdown.js.map +1 -1
  3. package/components/Dropdown/Dropdown.mjs +1 -1
  4. package/components/Dropdown/Dropdown.mjs.map +1 -1
  5. package/components/Dropdown/sizes.js +1 -1
  6. package/components/Dropdown/sizes.js.map +1 -1
  7. package/components/Dropdown/sizes.mjs +1 -1
  8. package/components/Dropdown/sizes.mjs.map +1 -1
  9. package/components/FormInputLabel/FormInputLabel.js +1 -1
  10. package/components/FormInputLabel/FormInputLabel.js.map +1 -1
  11. package/components/FormInputLabel/FormInputLabel.mjs +1 -1
  12. package/components/FormInputLabel/FormInputLabel.mjs.map +1 -1
  13. package/components/FormInputLabel/sizes.js +1 -1
  14. package/components/FormInputLabel/sizes.js.map +1 -1
  15. package/components/FormInputLabel/sizes.mjs +1 -1
  16. package/components/FormInputLabel/sizes.mjs.map +1 -1
  17. package/components/FormInputLabel/style.js +1 -1
  18. package/components/FormInputLabel/style.js.map +1 -1
  19. package/components/FormInputLabel/style.mjs +1 -1
  20. package/components/FormInputLabel/style.mjs.map +1 -1
  21. package/components/Input/Input.js +1 -1
  22. package/components/Input/Input.js.map +1 -1
  23. package/components/Input/Input.mjs +1 -1
  24. package/components/Input/Input.mjs.map +1 -1
  25. package/components/Input/sizes.js +1 -1
  26. package/components/Input/sizes.js.map +1 -1
  27. package/components/Input/sizes.mjs +1 -1
  28. package/components/Input/sizes.mjs.map +1 -1
  29. package/components/Input/style.js +1 -1
  30. package/components/Input/style.js.map +1 -1
  31. package/components/Input/style.mjs +1 -1
  32. package/components/Input/style.mjs.map +1 -1
  33. package/components/Textarea/Textarea.js +1 -1
  34. package/components/Textarea/Textarea.js.map +1 -1
  35. package/components/Textarea/Textarea.mjs +1 -1
  36. package/components/Textarea/Textarea.mjs.map +1 -1
  37. package/components/Textarea/sizes.js +1 -1
  38. package/components/Textarea/sizes.js.map +1 -1
  39. package/components/Textarea/sizes.mjs +1 -1
  40. package/components/Textarea/sizes.mjs.map +1 -1
  41. package/dts/index.d.ts +28 -19
  42. package/package.json +2 -2
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollMonitor=require('../../hooks/useScrollMonitor.js');var dom=require('../../shared/utils/dom.js');var misc=require('../../shared/utils/misc.js');var constants=require('../../shared/constants.js');var DropdownMenu=require('./DropdownMenu.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var utils=require('./utils.js');var style=require('./style.js');var DropdownMenuMultiple=require('./DropdownMenuMultiple.js');var DropdownMenuSingle=require('./DropdownMenuSingle.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var Chip=require('../Chip/Chip.js');var IconButton=require('../IconButton/IconButton.js');var index=require('../../icon-pack/src/icons/Close/index.js');var index$1=require('../../icon-pack/src/icons/ChevronDown/index.js');var Icon=require('../Icon/Icon.js');var Slot=require('../Slot/Slot.js');var FormInput=require('../FormInput/FormInput.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef((e,o)=>{const{size:n="m",name:t="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:a=!0,optionsMultiToggle:i=!0,iconProps:l={},menuProps:c={},loadingIconProps:u={},optionsEmptyIconProps:d={},loading:p,autoFocus:b,disableAutoScrollToSelectedOption:g,closeMenuOnScroll:m,scrollMonitorTarget:f,contrast:v,selectedOption:x,defaultSelectedOption:y,icon:D,addonLeft:j,inputMode:w,loadingMessage:C,loadingIcon:M,maxLength:I,multiple:R,clearable:k,onChangeInput:h,onCloseMenu:S,onOpenMenu:O,onSelectOption:T,options:q,loadOptions:F,renderOption:P,groupSelectedOptions:z,optionsMultiToggleCaption:L,optionsEmptyMessage:E,optionsEmptyIcon:B,palette:K,placeholder:X,readOnly:N,required:A,status:H,sizeXXS:$,sizeXS:Z,sizeS:_,sizeM:U,sizeL:G,sizeXL:J,form:Q,label:V,...W}=e;const Y={size:n,sizeXXS:$,sizeXS:Z,sizeS:_,sizeM:U,sizeL:G,sizeXL:J};const ee={...Y,...l,sizes:sizes.SIZES_ICON,color:W.disabled?'content-disabled':'content-onmain-tertiary'};const oe=React.useMemo(()=>W.id??`${t}-${nanoid.nanoid()}`,[t,W.id]);const ne=React.useMemo(()=>nanoid.nanoid(),[]);const te=React.useMemo(()=>nanoid.nanoid(),[]);const[re,se]=hooks.useFilteredOptions({options:q});const[ae,ie,le]=hooks.useLoadedOptions({loadOptions:F,options:q});const[ce,ue]=React.useState(()=>utils.getDropdownSelectedOption(x!==void 0?x:y,R));const[de,pe]=React.useState(()=>utils.getDropdownInputText(ce,R));const[be,ge]=React.useState(!1);const[me,fe]=React.useState(!1);const ve=F?ae:re;const xe=F?p??ie:p;const ye=me&&!W.disabled;const De=A&&ce.length===0;const je=Boolean(ye||de||be);const we=React.useRef(null);const[Ce,Me]=React.useState(null);const Ie=React.useRef(null);const Re=React.useRef(null);const ke=React.useRef(ye);const he=React.useCallback(e=>{pe(e),h&&h(e)},[h]);const Se=React.useCallback(e=>{F?le(e):se(e)},[F,le,se]);const Oe=React.useMemo(()=>misc.createDebouncedCallback(Se,150),[Se]);const preventBlur=e=>{e.target!==we.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&ye&&Ce&&Ce.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:f,onScrollStart:()=>{m&&ye&&(we.current?.focus(),fe(!1))}}),React.useLayoutEffect(()=>{x!==void 0&&(R||ye||he(utils.getDropdownInputText(x)),ue(utils.getDropdownSelectedOption(x,R)))},[R,x,ye,he]),React.useEffect(()=>{ye!==ke.current&&(ye&&O&&O(),!ye&&S&&S(),ke.current=ye)},[ye,S,O]),React.useEffect(()=>{if(!R&&!g&&ye&&!xe&&de.length===0&&Ce&&Re.current){const e=Ce.getBoundingClientRect();const o=Re.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout(()=>{Ce&&Re.current&&Ce.scrollTo(0,Re.current.offsetTop)},0)}},[R,g,ye,xe,de,Ce]),React.useEffect(()=>{W.disabled&&ge(!1)},[W.disabled]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...W,...Y,ref:o,id:oe,onColored:v,primary:a,error:H==='error',success:H==='success',focus:be,palette:{color:W.disabled?K.labelColorDisabled:K.labelColor,backgroundColor:W.disabled?K.backgroundColorDisabled:K.backgroundColor,backgroundColorHover:W.disabled?K.backgroundColorDisabled:K.backgroundColorHover,borderColor:W.disabled?K.borderColorDisabled:K.borderColor},onClick:e=>{W.onClick&&W.onClick(e),W.disabled||(we.current?.focus(),ye?Ce&&e.target instanceof Node&&!Ce.contains(e.target)&&(fe(!1),he(utils.getDropdownInputText(ce,R))):(fe(!0),Se(''),s&&he('')))},onPointerDown:e=>{W.onPointerDown&&W.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{W.onMouseDown&&W.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{W.onFocus&&W.onFocus(e),ge(!0),we.current&&e.target===we.current&&s&&!R&&!ye&&he('')},onBlur:e=>{W.onBlur&&W.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&ye&&Ce&&Ce.contains(e.relatedTarget)||(ge(!1),he(utils.getDropdownInputText(ce,R)),fe(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!De||s||N?null:jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{we.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{...Y,ref:we,role:"combobox","aria-controls":te,"aria-expanded":ye,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:je,label:V,labelId:ne,labelPosition:r,form:Q,autoFocus:b,inputMode:s?w:'none',maxLength:I,placeholder:X,readOnly:N||!s,required:De,disabled:W.disabled,value:de,palette:{color:K.color,colorDisabled:K.colorDisabled,placeholderColor:K.placeholderColor,placeholderColorDisabled:K.placeholderColorDisabled},onClick:e=>{ye&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;he(o),Oe(o),fe(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(he(utils.getDropdownInputText(ce,R)),fe(!1)),!constants.keyboardKeys.Space.validate(e.key)||ye&&e.currentTarget.selectionStart!==0||(e.preventDefault(),ye||(Se(''),s&&he('')),fe(e=>!e)),constants.keyboardKeys.Esc.validate(e.key)&&fe(!1),constants.keyboardKeys.Tab.validate(e.key)&&ye&&(e.preventDefault(),fe(!1)),constants.keyboardKeys.ArrowDown.validate(e.key)&&ye&&Ie.current)if(e.preventDefault(),!R&&Re.current){const e=[...Ie.current.children];const o=e.findIndex(e=>e.contains(Re.current));const n=e[o+1]??e[0];n instanceof HTMLElement&&dom.focusFirstFocusable(n)}else dom.focusFirstFocusable(Ie.current);if(constants.keyboardKeys.ArrowUp.validate(e.key)&&ye&&Ie.current)if(e.preventDefault(),!R&&Re.current){const e=[...Ie.current.children];const o=e.findIndex(e=>e.contains(Re.current));const n=e[o-1]??e[e.length-1];n instanceof HTMLElement&&dom.focusFirstFocusable(n)}else dom.focusLastFocusable(Ie.current)}}),ce.map(e=>jsxRuntime.jsx("input",{type:"hidden",name:t,value:e.value,form:Q,disabled:W.disabled||e.disabled},e.value))]}),addonLeft:D?jsxRuntime.jsx(Icon.Icon,{name:typeof D=='string'?D:void 0,icon:typeof D!='string'?D:void 0,...ee}):j?jsxRuntime.jsx(Slot.Slot,{render:j,props:{iconProps:ee}}):null,addonRight:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[R&&ce.length>0?jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,text:ce.length,textProps:{appearance:'caption',size:'xs'},palette:W.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!W.disabled,onClick:e=>{e.stopPropagation(),N||(x===void 0&&ue([]),T&&T([]),we.current?.focus(),he(''),Se(''),fe(!0))}}}):null,!R&&k&&ce.length>0?jsxRuntime.jsx(IconButton.IconButton,{icon:jsxRuntime.jsx(index.Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:e=>{e.stopPropagation(),N||(x===void 0&&ue([]),T&&T(null),we.current?.focus(),he(''),Se(''),fe(!0))}}):null,jsxRuntime.jsx(style.IconAnimated,{icon:jsxRuntime.jsx(index$1.ChevronDown,{}),up:ye,...ee})]}),dropdown:jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:Me,open:ye,popperReferenceId:oe,secondary:!v,elevated:v,disableAutoFocus:!0,palette:{backgroundColor:K.menuBackgroundColor,borderColor:K.menuBorderColor},empty:ve.length===0,loading:xe,loadingMessage:C,loadingIcon:M,loadingIconProps:{...ee,...u},emptyMessage:E,emptyIcon:B,emptyIconProps:{...ee,...d},onKeyDown:e=>{constants.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),we.current?.focus(),fe(!1)),constants.keyboardKeys.Enter.validate(e.key)&&(we.current?.focus(),he(utils.getDropdownInputText(ce,R)),fe(!1)),constants.keyboardKeys.Esc.validate(e.key)&&(we.current?.focus(),fe(!1)),constants.keyboardKeys.Backspace.validate(e.key)&&!N&&(R||!R&&k)&&(x===void 0&&ue([]),T&&T(R?[]:null),he(''),Se(''))},children:R?jsxRuntime.jsx(DropdownMenuMultiple.DropdownMenuMultiple,{...Y,ref:Ie,inputRef:we,label:V,name:t,disabled:W.disabled,readOnly:N,menuListId:te,inputLabelId:ne,menuOptions:ve,dropdownSelectedOption:ce,inputText:de,optionsMultiToggle:i,groupSelectedOptions:z,optionsMultiToggleCaption:L,renderOption:P,onChange:e=>{x===void 0&&ue(e),T&&T(e)}}):jsxRuntime.jsx(DropdownMenuSingle.DropdownMenuSingle,{...Y,ref:Ie,label:V,readOnly:N,multiple:R,disabled:W.disabled,status:H,menuListId:te,inputLabelId:ne,menuOptions:ve,dropdownSelectedOption:ce,selectedOptionRef:Re,renderOption:P,onChange:e=>{const o={...e};x===void 0&&(he(utils.getDropdownInputText(o)),ue(utils.getDropdownSelectedOption(o))),T&&T(o),we.current?.focus(),fe(!1)}})})})}),{sizes:sizes.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
1
+ 'use strict';var React=require('react');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollMonitor=require('../../hooks/useScrollMonitor.js');var dom=require('../../shared/utils/dom.js');var misc=require('../../shared/utils/misc.js');var constants=require('../../shared/constants.js');var DropdownMenu=require('./DropdownMenu.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var utils=require('./utils.js');var style=require('./style.js');var DropdownMenuMultiple=require('./DropdownMenuMultiple.js');var DropdownMenuSingle=require('./DropdownMenuSingle.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var Chip=require('../Chip/Chip.js');var IconButton=require('../IconButton/IconButton.js');var index=require('../../icon-pack/src/icons/Close/index.js');var index$1=require('../../icon-pack/src/icons/ChevronDown/index.js');var Icon=require('../Icon/Icon.js');var FormInput=require('../FormInput/FormInput.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef((e,o)=>{const{size:n="m",name:t="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:a=!0,optionsMultiToggle:i=!0,iconProps:l={},menuProps:c={},loadingIconProps:u={},optionsEmptyIconProps:d={},loading:p,autoFocus:b,disableAutoScrollToSelectedOption:g,closeMenuOnScroll:m,scrollMonitorTarget:f,contrast:v,selectedOption:x,defaultSelectedOption:y,icon:D,addonLeft:w,inputMode:C,loadingMessage:M,loadingIcon:j,maxLength:R,multiple:I,clearable:k,onChangeInput:h,onCloseMenu:S,onOpenMenu:P,onSelectOption:T,options:O,loadOptions:q,renderOption:F,groupSelectedOptions:z,optionsMultiToggleCaption:L,optionsEmptyMessage:E,optionsEmptyIcon:B,palette:K,placeholder:X,readOnly:A,required:H,status:N,sizeXXS:$,sizeXS:U,sizeS:Z,sizeM:_,sizeL:G,sizeXL:J,form:Q,label:V,...W}=e;const Y={size:n,sizeXXS:$,sizeXS:U,sizeS:Z,sizeM:_,sizeL:G,sizeXL:J};const ee=React.useMemo(()=>W.id??`${t}-${nanoid.nanoid()}`,[t,W.id]);const oe=React.useMemo(()=>nanoid.nanoid(),[]);const ne=React.useMemo(()=>nanoid.nanoid(),[]);const[te,re]=hooks.useFilteredOptions({options:O});const[se,ae,ie]=hooks.useLoadedOptions({loadOptions:q,options:O});const[le,ce]=React.useState(()=>utils.getDropdownSelectedOption(x!==void 0?x:y,I));const[ue,de]=React.useState(()=>utils.getDropdownInputText(le,I));const[pe,be]=React.useState(!1);const[ge,me]=React.useState(!1);const fe=q?se:te;const ve=q?p??ae:p;const xe=ge&&!W.disabled;const ye=H&&le.length===0;const De=Boolean(xe||ue||pe);const we=React.useRef(null);const[Ce,Me]=React.useState(null);const je=React.useRef(null);const Re=React.useRef(null);const Ie=React.useRef(xe);const ke=React.useCallback(e=>{de(e),h&&h(e)},[h]);const he=React.useCallback(e=>{q?ie(e):re(e)},[q,ie,re]);const Se=React.useMemo(()=>misc.createDebouncedCallback(he,150),[he]);const preventBlur=e=>{e.target!==we.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&xe&&Ce&&Ce.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:f,onScrollStart:()=>{m&&xe&&(we.current?.focus(),me(!1))}}),React.useLayoutEffect(()=>{x!==void 0&&(I||xe||ke(utils.getDropdownInputText(x)),ce(utils.getDropdownSelectedOption(x,I)))},[I,x,xe,ke]),React.useEffect(()=>{xe!==Ie.current&&(xe&&P&&P(),!xe&&S&&S(),Ie.current=xe)},[xe,S,P]),React.useEffect(()=>{if(!I&&!g&&xe&&!ve&&ue.length===0&&Ce&&Re.current){const e=Ce.getBoundingClientRect();const o=Re.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout(()=>{Ce&&Re.current&&Ce.scrollTo(0,Re.current.offsetTop)},0)}},[I,g,xe,ve,ue,Ce]),React.useEffect(()=>{W.disabled&&be(!1)},[W.disabled]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...W,...Y,ref:o,id:ee,onColored:v,primary:a,error:N==='error',success:N==='success',focus:pe,palette:{color:W.disabled?K.labelColorDisabled:K.labelColor,backgroundColor:W.disabled?K.backgroundColorDisabled:K.backgroundColor,backgroundColorHover:W.disabled?K.backgroundColorDisabled:K.backgroundColorHover,borderColor:W.disabled?K.borderColorDisabled:K.borderColor},onClick:e=>{W.onClick&&W.onClick(e),W.disabled||(we.current?.focus(),xe?Ce&&e.target instanceof Node&&!Ce.contains(e.target)&&(me(!1),ke(utils.getDropdownInputText(le,I))):(me(!0),he(''),s&&ke('')))},onPointerDown:e=>{W.onPointerDown&&W.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{W.onMouseDown&&W.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{W.onFocus&&W.onFocus(e),be(!0),we.current&&e.target===we.current&&s&&!I&&!xe&&ke('')},onBlur:e=>{W.onBlur&&W.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&xe&&Ce&&Ce.contains(e.relatedTarget)||(be(!1),ke(utils.getDropdownInputText(le,I)),me(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!ye||s||A?null:jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{we.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{...Y,ref:we,role:"combobox","aria-controls":ne,"aria-expanded":xe,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:De,label:V,labelId:oe,labelPosition:r,form:Q,autoFocus:b,inputMode:s?C:'none',maxLength:R,placeholder:X,readOnly:A||!s,required:ye,disabled:W.disabled,value:ue,palette:{color:K.color,colorDisabled:K.colorDisabled,placeholderColor:K.placeholderColor,placeholderColorDisabled:K.placeholderColorDisabled},onClick:e=>{xe&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;ke(o),Se(o),me(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(ke(utils.getDropdownInputText(le,I)),me(!1)),!constants.keyboardKeys.Space.validate(e.key)||xe&&e.currentTarget.selectionStart!==0||(e.preventDefault(),xe||(he(''),s&&ke('')),me(e=>!e)),constants.keyboardKeys.Esc.validate(e.key)&&me(!1),constants.keyboardKeys.Tab.validate(e.key)&&xe&&(e.preventDefault(),me(!1)),constants.keyboardKeys.ArrowDown.validate(e.key)&&xe&&je.current)if(e.preventDefault(),!I&&Re.current){const e=[...je.current.children];const o=e.findIndex(e=>e.contains(Re.current));const n=e[o+1]??e[0];n instanceof HTMLElement&&dom.focusFirstFocusable(n)}else dom.focusFirstFocusable(je.current);if(constants.keyboardKeys.ArrowUp.validate(e.key)&&xe&&je.current)if(e.preventDefault(),!I&&Re.current){const e=[...je.current.children];const o=e.findIndex(e=>e.contains(Re.current));const n=e[o-1]??e[e.length-1];n instanceof HTMLElement&&dom.focusFirstFocusable(n)}else dom.focusLastFocusable(je.current)}}),le.map(e=>jsxRuntime.jsx("input",{type:"hidden",name:t,value:e.value,form:Q,disabled:W.disabled||e.disabled},e.value))]}),addonLeft:w??(D?e=>jsxRuntime.jsx(Icon.Icon,{...e.iconProps,...l,name:typeof D=='string'?D:void 0,icon:typeof D!='string'?D:void 0}):void 0),addonRight:e=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[I&&le.length>0?jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,text:le.length,textProps:{appearance:'caption',size:'xs'},palette:W.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!W.disabled,onClick:e=>{e.stopPropagation(),A||(x===void 0&&ce([]),T&&T([]),we.current?.focus(),ke(''),he(''),me(!0))}}}):null,!I&&k&&le.length>0?jsxRuntime.jsx(IconButton.IconButton,{icon:jsxRuntime.jsx(index.Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:e=>{e.stopPropagation(),A||(x===void 0&&ce([]),T&&T(null),we.current?.focus(),ke(''),he(''),me(!0))}}):null,jsxRuntime.jsx(style.IconAnimated,{...e.iconProps,...l,icon:jsxRuntime.jsx(index$1.ChevronDown,{}),up:xe})]}),dropdown:e=>jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:Me,open:xe,popperReferenceId:ee,secondary:!v,elevated:v,disableAutoFocus:!0,palette:{backgroundColor:K.menuBackgroundColor,borderColor:K.menuBorderColor},empty:fe.length===0,loading:ve,loadingMessage:M,loadingIcon:j,loadingIconProps:{...e.iconProps,...u},emptyMessage:E,emptyIcon:B,emptyIconProps:{...e.iconProps,...d},onKeyDown:e=>{constants.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),we.current?.focus(),me(!1)),constants.keyboardKeys.Enter.validate(e.key)&&(we.current?.focus(),ke(utils.getDropdownInputText(le,I)),me(!1)),constants.keyboardKeys.Esc.validate(e.key)&&(we.current?.focus(),me(!1)),constants.keyboardKeys.Backspace.validate(e.key)&&!A&&(I||!I&&k)&&(x===void 0&&ce([]),T&&T(I?[]:null),ke(''),he(''))},children:I?jsxRuntime.jsx(DropdownMenuMultiple.DropdownMenuMultiple,{...Y,ref:je,inputRef:we,label:V,name:t,disabled:W.disabled,readOnly:A,menuListId:ne,inputLabelId:oe,menuOptions:fe,dropdownSelectedOption:le,inputText:ue,optionsMultiToggle:i,groupSelectedOptions:z,optionsMultiToggleCaption:L,renderOption:F,onChange:e=>{x===void 0&&ce(e),T&&T(e)}}):jsxRuntime.jsx(DropdownMenuSingle.DropdownMenuSingle,{...Y,ref:je,label:V,readOnly:A,multiple:I,disabled:W.disabled,status:N,menuListId:ne,inputLabelId:oe,menuOptions:fe,dropdownSelectedOption:le,selectedOptionRef:Re,renderOption:F,onChange:e=>{const o={...e};x===void 0&&(ke(utils.getDropdownInputText(o)),ce(utils.getDropdownSelectedOption(o))),T&&T(o),we.current?.focus(),me(!1)}})})})}),{sizes:sizes.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, useLayoutEffect, useMemo, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { ChevronDown, Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport type { IconProps } from 'components/Icon'\nimport { Slot } from 'components/Slot'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES, SIZES_ICON } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n addonLeft,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n renderOption,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\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 label,\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 ...sizeProps,\n ...iconProps,\n sizes: SIZES_ICON,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\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 if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n useEffect(() => {\n if (rootProps.disabled) {\n setFocusWithin(false)\n }\n }, [rootProps.disabled])\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n id={formInputLabelId}\n onColored={contrast}\n primary={primary}\n error={status === 'error'}\n success={status === 'success'}\n focus={focusWithin}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\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 }}\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\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n setMenuOpenRequest(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n preventBlur(evt)\n }}\n onMouseDown={(evt) => {\n if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n if (!window.PointerEvent) preventBlur(evt)\n }}\n onFocus={(evt) => {\n if (rootProps.onFocus) rootProps.onFocus(evt)\n\n setFocusWithin(true)\n\n if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n updateInputText('')\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (\n evt.currentTarget.contains(evt.relatedTarget) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n ) {\n return\n }\n\n setFocusWithin(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }}\n input={\n <>\n {inputRequired && !searchable && !readOnly ? (\n <Styled.InputMimic\n required\n type='text'\n inputMode='none'\n form={form}\n tabIndex={-1}\n onFocus={() => {\n inputRef.current?.focus()\n }}\n />\n ) : null}\n <FormInput\n {...sizeProps}\n ref={inputRef}\n role='combobox'\n aria-controls={menuListId}\n aria-expanded={menuOpen}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n active={inputActive}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n form={form}\n autoFocus={autoFocus}\n inputMode={searchable ? inputMode : 'none'}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly || !searchable}\n required={inputRequired}\n disabled={rootProps.disabled}\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 const inputValue = evt.currentTarget.value\n\n updateInputText(inputValue)\n updateOptionsDebounced(inputValue)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n\n if (!menuOpen) {\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n }\n\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n evt.preventDefault()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n\n if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusLastFocusable(menuListRef.current)\n }\n }\n }}\n />\n {dropdownSelectedOption.map((option) => (\n <input\n key={option.value}\n type='hidden'\n name={name}\n value={option.value}\n form={form}\n disabled={rootProps.disabled || option.disabled}\n />\n ))}\n </>\n }\n addonLeft={\n icon ? (\n <Icon\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n {...iconBaseProps}\n />\n ) : addonLeft ? (\n <Slot render={addonLeft} props={{ iconProps: iconBaseProps }} />\n ) : null\n }\n addonRight={\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.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 onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n disabled={rootProps.disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(null)\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n }}\n />\n ) : null}\n <Styled.IconAnimated icon={<ChevronDown />} up={menuOpen} {...iconBaseProps} />\n </>\n }\n dropdown={\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...iconBaseProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...iconBaseProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n renderOption={renderOption}\n onChange={(update) => {\n if (selectedOption === undefined) {\n setDropdownSelectedOption(update)\n }\n\n if (onSelectOption) onSelectOption(update)\n }}\n />\n ) : (\n <DropdownMenuSingle\n {...sizeProps}\n ref={menuListRef}\n label={label}\n readOnly={readOnly}\n multiple={multiple}\n disabled={rootProps.disabled}\n status={status}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n selectedOptionRef={selectedOptionRef}\n renderOption={renderOption}\n onChange={(option) => {\n const update = { ...option }\n\n if (selectedOption === undefined) {\n updateInputText(getDropdownInputText(update))\n setDropdownSelectedOption(getDropdownSelectedOption(update))\n }\n\n if (onSelectOption) onSelectOption(update)\n\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }}\n />\n )}\n </DropdownMenu>\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","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","Icon","Slot","render","addonRight","Chip","black","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","ChevronDown","up","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","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, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { ChevronDown, Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n addonLeft,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n renderOption,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\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 label,\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 formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\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 if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n useEffect(() => {\n if (rootProps.disabled) {\n setFocusWithin(false)\n }\n }, [rootProps.disabled])\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n id={formInputLabelId}\n onColored={contrast}\n primary={primary}\n error={status === 'error'}\n success={status === 'success'}\n focus={focusWithin}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\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 }}\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\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n setMenuOpenRequest(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n preventBlur(evt)\n }}\n onMouseDown={(evt) => {\n if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n if (!window.PointerEvent) preventBlur(evt)\n }}\n onFocus={(evt) => {\n if (rootProps.onFocus) rootProps.onFocus(evt)\n\n setFocusWithin(true)\n\n if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n updateInputText('')\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (\n evt.currentTarget.contains(evt.relatedTarget) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n ) {\n return\n }\n\n setFocusWithin(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }}\n input={\n <>\n {inputRequired && !searchable && !readOnly ? (\n <Styled.InputMimic\n required\n type='text'\n inputMode='none'\n form={form}\n tabIndex={-1}\n onFocus={() => {\n inputRef.current?.focus()\n }}\n />\n ) : null}\n <FormInput\n {...sizeProps}\n ref={inputRef}\n role='combobox'\n aria-controls={menuListId}\n aria-expanded={menuOpen}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n active={inputActive}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n form={form}\n autoFocus={autoFocus}\n inputMode={searchable ? inputMode : 'none'}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly || !searchable}\n required={inputRequired}\n disabled={rootProps.disabled}\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 const inputValue = evt.currentTarget.value\n\n updateInputText(inputValue)\n updateOptionsDebounced(inputValue)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n\n if (!menuOpen) {\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n }\n\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n evt.preventDefault()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n\n if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusLastFocusable(menuListRef.current)\n }\n }\n }}\n />\n {dropdownSelectedOption.map((option) => (\n <input\n key={option.value}\n type='hidden'\n name={name}\n value={option.value}\n form={form}\n disabled={rootProps.disabled || option.disabled}\n />\n ))}\n </>\n }\n addonLeft={\n addonLeft ??\n (icon\n ? (addonLeftProps) => (\n <Icon\n {...addonLeftProps.iconProps}\n {...iconProps}\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n />\n )\n : undefined)\n }\n addonRight={(addonRightProps) => (\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.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 onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n disabled={rootProps.disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(null)\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n }}\n />\n ) : null}\n <Styled.IconAnimated {...addonRightProps.iconProps} {...iconProps} icon={<ChevronDown />} up={menuOpen} />\n </>\n )}\n dropdown={(dropdownProps) => (\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...dropdownProps.iconProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...dropdownProps.iconProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n renderOption={renderOption}\n onChange={(update) => {\n if (selectedOption === undefined) {\n setDropdownSelectedOption(update)\n }\n\n if (onSelectOption) onSelectOption(update)\n }}\n />\n ) : (\n <DropdownMenuSingle\n {...sizeProps}\n ref={menuListRef}\n label={label}\n readOnly={readOnly}\n multiple={multiple}\n disabled={rootProps.disabled}\n status={status}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n selectedOptionRef={selectedOptionRef}\n renderOption={renderOption}\n onChange={(option) => {\n const update = { ...option }\n\n if (selectedOption === undefined) {\n updateInputText(getDropdownInputText(update))\n setDropdownSelectedOption(getDropdownSelectedOption(update))\n }\n\n if (onSelectOption) onSelectOption(update)\n\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }}\n />\n )}\n </DropdownMenu>\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","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","disabled","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","color","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","addonLeftProps","Icon","addonRight","addonRightProps","Chip","black","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","ChevronDown","up","dropdown","dropdownProps","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","sizes","SIZES","displayName"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{forwardRef,useMemo,useState,useRef,useCallback,useLayoutEffect,useEffect}from'react';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollMonitor}from'../../hooks/useScrollMonitor.mjs';import{focusFirstFocusable,focusLastFocusable}from'../../shared/utils/dom.mjs';import{createDebouncedCallback}from'../../shared/utils/misc.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DropdownMenu}from'./DropdownMenu.mjs';import{useFilteredOptions,useLoadedOptions}from'./hooks.mjs';import{SIZES,SIZES_ICON}from'./sizes.mjs';import{getDropdownSelectedOption,getDropdownInputText}from'./utils.mjs';import{IconAnimated,InputMimic}from'./style.mjs';import{DropdownMenuMultiple}from'./DropdownMenuMultiple.mjs';import{DropdownMenuSingle}from'./DropdownMenuSingle.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{Chip}from'../Chip/Chip.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';import{ChevronDown}from'../../icon-pack/src/icons/ChevronDown/index.mjs';import{Icon}from'../Icon/Icon.mjs';import{Slot}from'../Slot/Slot.mjs';import{FormInput}from'../FormInput/FormInput.mjs';const COMPONENT_NAME='Dropdown';const Dropdown=withMergedProps(forwardRef((e,o)=>{const{size:t="m",name:n="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:l=!0,optionsMultiToggle:a=!0,iconProps:i={},menuProps:d={},loadingIconProps:c={},optionsEmptyIconProps:u={},loading:p,autoFocus:m,disableAutoScrollToSelectedOption:f,closeMenuOnScroll:b,scrollMonitorTarget:g,contrast:C,selectedOption:y,defaultSelectedOption:D,icon:w,addonLeft:I,inputMode:M,loadingMessage:k,loadingIcon:S,maxLength:v,multiple:x,clearable:h,onChangeInput:j,onCloseMenu:O,onOpenMenu:T,onSelectOption:F,options:P,loadOptions:E,renderOption:L,groupSelectedOptions:z,optionsMultiToggleCaption:B,optionsEmptyMessage:R,optionsEmptyIcon:K,palette:N,placeholder:A,readOnly:X,required:H,status:q,sizeXXS:Z,sizeXS:_,sizeS:$,sizeM:U,sizeL:G,sizeXL:J,form:Q,label:V,...W}=e;const Y={size:t,sizeXXS:Z,sizeXS:_,sizeS:$,sizeM:U,sizeL:G,sizeXL:J};const ee={...Y,...i,sizes:SIZES_ICON,color:W.disabled?'content-disabled':'content-onmain-tertiary'};const oe=useMemo(()=>W.id??`${n}-${nanoid()}`,[n,W.id]);const te=useMemo(()=>nanoid(),[]);const ne=useMemo(()=>nanoid(),[]);const[re,se]=useFilteredOptions({options:P});const[le,ae,ie]=useLoadedOptions({loadOptions:E,options:P});const[de,ce]=useState(()=>getDropdownSelectedOption(y!==void 0?y:D,x));const[ue,pe]=useState(()=>getDropdownInputText(de,x));const[me,fe]=useState(!1);const[be,ge]=useState(!1);const Ce=E?le:re;const ye=E?p??ae:p;const De=be&&!W.disabled;const we=H&&de.length===0;const Ie=Boolean(De||ue||me);const Me=useRef(null);const[ke,Se]=useState(null);const ve=useRef(null);const xe=useRef(null);const he=useRef(De);const je=useCallback(e=>{pe(e),j&&j(e)},[j]);const Oe=useCallback(e=>{E?ie(e):se(e)},[E,ie,se]);const Te=useMemo(()=>createDebouncedCallback(Oe,150),[Oe]);const preventBlur=e=>{e.target!==Me.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||d.renderInPortal&&De&&ke&&ke.contains(e.target))&&e.preventDefault()};return useScrollMonitor({target:g,onScrollStart:()=>{b&&De&&(Me.current?.focus(),ge(!1))}}),useLayoutEffect(()=>{y!==void 0&&(x||De||je(getDropdownInputText(y)),ce(getDropdownSelectedOption(y,x)))},[x,y,De,je]),useEffect(()=>{De!==he.current&&(De&&T&&T(),!De&&O&&O(),he.current=De)},[De,O,T]),useEffect(()=>{if(!x&&!f&&De&&!ye&&ue.length===0&&ke&&xe.current){const e=ke.getBoundingClientRect();const o=xe.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout(()=>{ke&&xe.current&&ke.scrollTo(0,xe.current.offsetTop)},0)}},[x,f,De,ye,ue,ke]),useEffect(()=>{W.disabled&&fe(!1)},[W.disabled]),jsx(FormInputLabel,{...W,...Y,ref:o,id:oe,onColored:C,primary:l,error:q==='error',success:q==='success',focus:me,palette:{color:W.disabled?N.labelColorDisabled:N.labelColor,backgroundColor:W.disabled?N.backgroundColorDisabled:N.backgroundColor,backgroundColorHover:W.disabled?N.backgroundColorDisabled:N.backgroundColorHover,borderColor:W.disabled?N.borderColorDisabled:N.borderColor},onClick:e=>{W.onClick&&W.onClick(e),W.disabled||(Me.current?.focus(),De?ke&&e.target instanceof Node&&!ke.contains(e.target)&&(ge(!1),je(getDropdownInputText(de,x))):(ge(!0),Oe(''),s&&je('')))},onPointerDown:e=>{W.onPointerDown&&W.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{W.onMouseDown&&W.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{W.onFocus&&W.onFocus(e),fe(!0),Me.current&&e.target===Me.current&&s&&!x&&!De&&je('')},onBlur:e=>{W.onBlur&&W.onBlur(e),e.currentTarget.contains(e.relatedTarget)||d.renderInPortal&&De&&ke&&ke.contains(e.relatedTarget)||(fe(!1),je(getDropdownInputText(de,x)),ge(!1))},input:jsxs(Fragment,{children:[!we||s||X?null:jsx(InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{Me.current?.focus()}}),jsx(FormInput,{...Y,ref:Me,role:"combobox","aria-controls":ne,"aria-expanded":De,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:Ie,label:V,labelId:te,labelPosition:r,form:Q,autoFocus:m,inputMode:s?M:'none',maxLength:v,placeholder:A,readOnly:X||!s,required:we,disabled:W.disabled,value:ue,palette:{color:N.color,colorDisabled:N.colorDisabled,placeholderColor:N.placeholderColor,placeholderColorDisabled:N.placeholderColorDisabled},onClick:e=>{De&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;je(o),Te(o),ge(!0)},onKeyDown:e=>{if(keyboardKeys.Enter.validate(e.key)&&(je(getDropdownInputText(de,x)),ge(!1)),!keyboardKeys.Space.validate(e.key)||De&&e.currentTarget.selectionStart!==0||(e.preventDefault(),De||(Oe(''),s&&je('')),ge(e=>!e)),keyboardKeys.Esc.validate(e.key)&&ge(!1),keyboardKeys.Tab.validate(e.key)&&De&&(e.preventDefault(),ge(!1)),keyboardKeys.ArrowDown.validate(e.key)&&De&&ve.current)if(e.preventDefault(),!x&&xe.current){const e=[...ve.current.children];const o=e.findIndex(e=>e.contains(xe.current));const t=e[o+1]??e[0];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusFirstFocusable(ve.current);if(keyboardKeys.ArrowUp.validate(e.key)&&De&&ve.current)if(e.preventDefault(),!x&&xe.current){const e=[...ve.current.children];const o=e.findIndex(e=>e.contains(xe.current));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusLastFocusable(ve.current)}}),de.map(e=>jsx("input",{type:"hidden",name:n,value:e.value,form:Q,disabled:W.disabled||e.disabled},e.value))]}),addonLeft:w?jsx(Icon,{name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0,...ee}):I?jsx(Slot,{render:I,props:{iconProps:ee}}):null,addonRight:jsxs(Fragment,{children:[x&&de.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,text:de.length,textProps:{appearance:'caption',size:'xs'},palette:W.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!W.disabled,onClick:e=>{e.stopPropagation(),X||(y===void 0&&ce([]),F&&F([]),Me.current?.focus(),je(''),Oe(''),ge(!0))}}}):null,!x&&h&&de.length>0?jsx(IconButton,{icon:jsx(Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:e=>{e.stopPropagation(),X||(y===void 0&&ce([]),F&&F(null),Me.current?.focus(),je(''),Oe(''),ge(!0))}}):null,jsx(IconAnimated,{icon:jsx(ChevronDown,{}),up:De,...ee})]}),dropdown:jsx(DropdownMenu,{...d,setRef:Se,open:De,popperReferenceId:oe,secondary:!C,elevated:C,disableAutoFocus:!0,palette:{backgroundColor:N.menuBackgroundColor,borderColor:N.menuBorderColor},empty:Ce.length===0,loading:ye,loadingMessage:k,loadingIcon:S,loadingIconProps:{...ee,...c},emptyMessage:R,emptyIcon:K,emptyIconProps:{...ee,...u},onKeyDown:e=>{keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),Me.current?.focus(),ge(!1)),keyboardKeys.Enter.validate(e.key)&&(Me.current?.focus(),je(getDropdownInputText(de,x)),ge(!1)),keyboardKeys.Esc.validate(e.key)&&(Me.current?.focus(),ge(!1)),keyboardKeys.Backspace.validate(e.key)&&!X&&(x||!x&&h)&&(y===void 0&&ce([]),F&&F(x?[]:null),je(''),Oe(''))},children:x?jsx(DropdownMenuMultiple,{...Y,ref:ve,inputRef:Me,label:V,name:n,disabled:W.disabled,readOnly:X,menuListId:ne,inputLabelId:te,menuOptions:Ce,dropdownSelectedOption:de,inputText:ue,optionsMultiToggle:a,groupSelectedOptions:z,optionsMultiToggleCaption:B,renderOption:L,onChange:e=>{y===void 0&&ce(e),F&&F(e)}}):jsx(DropdownMenuSingle,{...Y,ref:ve,label:V,readOnly:X,multiple:x,disabled:W.disabled,status:q,menuListId:ne,inputLabelId:te,menuOptions:Ce,dropdownSelectedOption:de,selectedOptionRef:xe,renderOption:L,onChange:e=>{const o={...e};y===void 0&&(je(getDropdownInputText(o)),ce(getDropdownSelectedOption(o))),F&&F(o),Me.current?.focus(),ge(!1)}})})})}),{sizes:SIZES,displayName:"Dropdown"});export{COMPONENT_NAME,Dropdown};
1
+ import{forwardRef,useMemo,useState,useRef,useCallback,useLayoutEffect,useEffect}from'react';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollMonitor}from'../../hooks/useScrollMonitor.mjs';import{focusFirstFocusable,focusLastFocusable}from'../../shared/utils/dom.mjs';import{createDebouncedCallback}from'../../shared/utils/misc.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DropdownMenu}from'./DropdownMenu.mjs';import{useFilteredOptions,useLoadedOptions}from'./hooks.mjs';import{SIZES}from'./sizes.mjs';import{getDropdownSelectedOption,getDropdownInputText}from'./utils.mjs';import{IconAnimated,InputMimic}from'./style.mjs';import{DropdownMenuMultiple}from'./DropdownMenuMultiple.mjs';import{DropdownMenuSingle}from'./DropdownMenuSingle.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{Chip}from'../Chip/Chip.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';import{ChevronDown}from'../../icon-pack/src/icons/ChevronDown/index.mjs';import{Icon}from'../Icon/Icon.mjs';import{FormInput}from'../FormInput/FormInput.mjs';const COMPONENT_NAME='Dropdown';const Dropdown=withMergedProps(forwardRef((o,e)=>{const{size:n="m",name:t="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:l=!0,optionsMultiToggle:a=!0,iconProps:i={},menuProps:d={},loadingIconProps:c={},optionsEmptyIconProps:u={},loading:p,autoFocus:m,disableAutoScrollToSelectedOption:f,closeMenuOnScroll:b,scrollMonitorTarget:g,contrast:y,selectedOption:C,defaultSelectedOption:D,icon:w,addonLeft:M,inputMode:I,loadingMessage:k,loadingIcon:v,maxLength:h,multiple:x,clearable:S,onChangeInput:j,onCloseMenu:O,onOpenMenu:T,onSelectOption:F,options:P,loadOptions:E,renderOption:L,groupSelectedOptions:z,optionsMultiToggleCaption:B,optionsEmptyMessage:R,optionsEmptyIcon:K,palette:N,placeholder:A,readOnly:X,required:H,status:q,sizeXXS:Z,sizeXS:$,sizeS:_,sizeM:U,sizeL:G,sizeXL:J,form:Q,label:V,...W}=o;const Y={size:n,sizeXXS:Z,sizeXS:$,sizeS:_,sizeM:U,sizeL:G,sizeXL:J};const oo=useMemo(()=>W.id??`${t}-${nanoid()}`,[t,W.id]);const eo=useMemo(()=>nanoid(),[]);const no=useMemo(()=>nanoid(),[]);const[to,ro]=useFilteredOptions({options:P});const[so,lo,ao]=useLoadedOptions({loadOptions:E,options:P});const[io,co]=useState(()=>getDropdownSelectedOption(C!==void 0?C:D,x));const[uo,po]=useState(()=>getDropdownInputText(io,x));const[mo,fo]=useState(!1);const[bo,go]=useState(!1);const yo=E?so:to;const Co=E?p??lo:p;const Do=bo&&!W.disabled;const wo=H&&io.length===0;const Mo=Boolean(Do||uo||mo);const Io=useRef(null);const[ko,vo]=useState(null);const ho=useRef(null);const xo=useRef(null);const So=useRef(Do);const jo=useCallback(o=>{po(o),j&&j(o)},[j]);const Oo=useCallback(o=>{E?ao(o):ro(o)},[E,ao,ro]);const To=useMemo(()=>createDebouncedCallback(Oo,150),[Oo]);const preventBlur=o=>{o.target!==Io.current&&o.target instanceof Node&&(o.currentTarget.contains(o.target)||d.renderInPortal&&Do&&ko&&ko.contains(o.target))&&o.preventDefault()};return useScrollMonitor({target:g,onScrollStart:()=>{b&&Do&&(Io.current?.focus(),go(!1))}}),useLayoutEffect(()=>{C!==void 0&&(x||Do||jo(getDropdownInputText(C)),co(getDropdownSelectedOption(C,x)))},[x,C,Do,jo]),useEffect(()=>{Do!==So.current&&(Do&&T&&T(),!Do&&O&&O(),So.current=Do)},[Do,O,T]),useEffect(()=>{if(!x&&!f&&Do&&!Co&&uo.length===0&&ko&&xo.current){const o=ko.getBoundingClientRect();const e=xo.current.getBoundingClientRect();(e.top<o.top||e.bottom>o.bottom)&&setTimeout(()=>{ko&&xo.current&&ko.scrollTo(0,xo.current.offsetTop)},0)}},[x,f,Do,Co,uo,ko]),useEffect(()=>{W.disabled&&fo(!1)},[W.disabled]),jsx(FormInputLabel,{...W,...Y,ref:e,id:oo,onColored:y,primary:l,error:q==='error',success:q==='success',focus:mo,palette:{color:W.disabled?N.labelColorDisabled:N.labelColor,backgroundColor:W.disabled?N.backgroundColorDisabled:N.backgroundColor,backgroundColorHover:W.disabled?N.backgroundColorDisabled:N.backgroundColorHover,borderColor:W.disabled?N.borderColorDisabled:N.borderColor},onClick:o=>{W.onClick&&W.onClick(o),W.disabled||(Io.current?.focus(),Do?ko&&o.target instanceof Node&&!ko.contains(o.target)&&(go(!1),jo(getDropdownInputText(io,x))):(go(!0),Oo(''),s&&jo('')))},onPointerDown:o=>{W.onPointerDown&&W.onPointerDown(o),preventBlur(o)},onMouseDown:o=>{W.onMouseDown&&W.onMouseDown(o),window.PointerEvent||preventBlur(o)},onFocus:o=>{W.onFocus&&W.onFocus(o),fo(!0),Io.current&&o.target===Io.current&&s&&!x&&!Do&&jo('')},onBlur:o=>{W.onBlur&&W.onBlur(o),o.currentTarget.contains(o.relatedTarget)||d.renderInPortal&&Do&&ko&&ko.contains(o.relatedTarget)||(fo(!1),jo(getDropdownInputText(io,x)),go(!1))},input:jsxs(Fragment,{children:[!wo||s||X?null:jsx(InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{Io.current?.focus()}}),jsx(FormInput,{...Y,ref:Io,role:"combobox","aria-controls":no,"aria-expanded":Do,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:Mo,label:V,labelId:eo,labelPosition:r,form:Q,autoFocus:m,inputMode:s?I:'none',maxLength:h,placeholder:A,readOnly:X||!s,required:wo,disabled:W.disabled,value:uo,palette:{color:N.color,colorDisabled:N.colorDisabled,placeholderColor:N.placeholderColor,placeholderColorDisabled:N.placeholderColorDisabled},onClick:o=>{Do&&o.currentTarget.selectionStart!==o.currentTarget.selectionEnd&&o.stopPropagation()},onChange:o=>{const e=o.currentTarget.value;jo(e),To(e),go(!0)},onKeyDown:o=>{if(keyboardKeys.Enter.validate(o.key)&&(jo(getDropdownInputText(io,x)),go(!1)),!keyboardKeys.Space.validate(o.key)||Do&&o.currentTarget.selectionStart!==0||(o.preventDefault(),Do||(Oo(''),s&&jo('')),go(o=>!o)),keyboardKeys.Esc.validate(o.key)&&go(!1),keyboardKeys.Tab.validate(o.key)&&Do&&(o.preventDefault(),go(!1)),keyboardKeys.ArrowDown.validate(o.key)&&Do&&ho.current)if(o.preventDefault(),!x&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const n=o[e+1]??o[0];n instanceof HTMLElement&&focusFirstFocusable(n)}else focusFirstFocusable(ho.current);if(keyboardKeys.ArrowUp.validate(o.key)&&Do&&ho.current)if(o.preventDefault(),!x&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const n=o[e-1]??o[o.length-1];n instanceof HTMLElement&&focusFirstFocusable(n)}else focusLastFocusable(ho.current)}}),io.map(o=>jsx("input",{type:"hidden",name:t,value:o.value,form:Q,disabled:W.disabled||o.disabled},o.value))]}),addonLeft:M??(w?o=>jsx(Icon,{...o.iconProps,...i,name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0}):void 0),addonRight:o=>jsxs(Fragment,{children:[x&&io.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,text:io.length,textProps:{appearance:'caption',size:'xs'},palette:W.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:o=>{o.preventDefault()},onMouseDown:o=>{window.PointerEvent||o.preventDefault()},discardButtonProps:{square:!0,contrast:!W.disabled,onClick:o=>{o.stopPropagation(),X||(C===void 0&&co([]),F&&F([]),Io.current?.focus(),jo(''),Oo(''),go(!0))}}}):null,!x&&S&&io.length>0?jsx(IconButton,{icon:jsx(Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:o=>{o.stopPropagation(),X||(C===void 0&&co([]),F&&F(null),Io.current?.focus(),jo(''),Oo(''),go(!0))}}):null,jsx(IconAnimated,{...o.iconProps,...i,icon:jsx(ChevronDown,{}),up:Do})]}),dropdown:o=>jsx(DropdownMenu,{...d,setRef:vo,open:Do,popperReferenceId:oo,secondary:!y,elevated:y,disableAutoFocus:!0,palette:{backgroundColor:N.menuBackgroundColor,borderColor:N.menuBorderColor},empty:yo.length===0,loading:Co,loadingMessage:k,loadingIcon:v,loadingIconProps:{...o.iconProps,...c},emptyMessage:R,emptyIcon:K,emptyIconProps:{...o.iconProps,...u},onKeyDown:o=>{keyboardKeys.Tab.validate(o.key)&&(o.preventDefault(),Io.current?.focus(),go(!1)),keyboardKeys.Enter.validate(o.key)&&(Io.current?.focus(),jo(getDropdownInputText(io,x)),go(!1)),keyboardKeys.Esc.validate(o.key)&&(Io.current?.focus(),go(!1)),keyboardKeys.Backspace.validate(o.key)&&!X&&(x||!x&&S)&&(C===void 0&&co([]),F&&F(x?[]:null),jo(''),Oo(''))},children:x?jsx(DropdownMenuMultiple,{...Y,ref:ho,inputRef:Io,label:V,name:t,disabled:W.disabled,readOnly:X,menuListId:no,inputLabelId:eo,menuOptions:yo,dropdownSelectedOption:io,inputText:uo,optionsMultiToggle:a,groupSelectedOptions:z,optionsMultiToggleCaption:B,renderOption:L,onChange:o=>{C===void 0&&co(o),F&&F(o)}}):jsx(DropdownMenuSingle,{...Y,ref:ho,label:V,readOnly:X,multiple:x,disabled:W.disabled,status:q,menuListId:no,inputLabelId:eo,menuOptions:yo,dropdownSelectedOption:io,selectedOptionRef:xo,renderOption:L,onChange:o=>{const e={...o};C===void 0&&(jo(getDropdownInputText(e)),co(getDropdownSelectedOption(e))),F&&F(e),Io.current?.focus(),go(!1)}})})})}),{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, useLayoutEffect, useMemo, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { ChevronDown, Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport type { IconProps } from 'components/Icon'\nimport { Slot } from 'components/Slot'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES, SIZES_ICON } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n addonLeft,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n renderOption,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\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 label,\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 ...sizeProps,\n ...iconProps,\n sizes: SIZES_ICON,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\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 if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n useEffect(() => {\n if (rootProps.disabled) {\n setFocusWithin(false)\n }\n }, [rootProps.disabled])\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n id={formInputLabelId}\n onColored={contrast}\n primary={primary}\n error={status === 'error'}\n success={status === 'success'}\n focus={focusWithin}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\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 }}\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\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n setMenuOpenRequest(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n preventBlur(evt)\n }}\n onMouseDown={(evt) => {\n if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n if (!window.PointerEvent) preventBlur(evt)\n }}\n onFocus={(evt) => {\n if (rootProps.onFocus) rootProps.onFocus(evt)\n\n setFocusWithin(true)\n\n if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n updateInputText('')\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (\n evt.currentTarget.contains(evt.relatedTarget) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n ) {\n return\n }\n\n setFocusWithin(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }}\n input={\n <>\n {inputRequired && !searchable && !readOnly ? (\n <Styled.InputMimic\n required\n type='text'\n inputMode='none'\n form={form}\n tabIndex={-1}\n onFocus={() => {\n inputRef.current?.focus()\n }}\n />\n ) : null}\n <FormInput\n {...sizeProps}\n ref={inputRef}\n role='combobox'\n aria-controls={menuListId}\n aria-expanded={menuOpen}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n active={inputActive}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n form={form}\n autoFocus={autoFocus}\n inputMode={searchable ? inputMode : 'none'}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly || !searchable}\n required={inputRequired}\n disabled={rootProps.disabled}\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 const inputValue = evt.currentTarget.value\n\n updateInputText(inputValue)\n updateOptionsDebounced(inputValue)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n\n if (!menuOpen) {\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n }\n\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n evt.preventDefault()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n\n if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusLastFocusable(menuListRef.current)\n }\n }\n }}\n />\n {dropdownSelectedOption.map((option) => (\n <input\n key={option.value}\n type='hidden'\n name={name}\n value={option.value}\n form={form}\n disabled={rootProps.disabled || option.disabled}\n />\n ))}\n </>\n }\n addonLeft={\n icon ? (\n <Icon\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n {...iconBaseProps}\n />\n ) : addonLeft ? (\n <Slot render={addonLeft} props={{ iconProps: iconBaseProps }} />\n ) : null\n }\n addonRight={\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.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 onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n disabled={rootProps.disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(null)\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n }}\n />\n ) : null}\n <Styled.IconAnimated icon={<ChevronDown />} up={menuOpen} {...iconBaseProps} />\n </>\n }\n dropdown={\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...iconBaseProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...iconBaseProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n renderOption={renderOption}\n onChange={(update) => {\n if (selectedOption === undefined) {\n setDropdownSelectedOption(update)\n }\n\n if (onSelectOption) onSelectOption(update)\n }}\n />\n ) : (\n <DropdownMenuSingle\n {...sizeProps}\n ref={menuListRef}\n label={label}\n readOnly={readOnly}\n multiple={multiple}\n disabled={rootProps.disabled}\n status={status}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n selectedOptionRef={selectedOptionRef}\n renderOption={renderOption}\n onChange={(option) => {\n const update = { ...option }\n\n if (selectedOption === undefined) {\n updateInputText(getDropdownInputText(update))\n setDropdownSelectedOption(getDropdownSelectedOption(update))\n }\n\n if (onSelectOption) onSelectOption(update)\n\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }}\n />\n )}\n </DropdownMenu>\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","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","Icon","Slot","render","addonRight","Chip","black","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","ChevronDown","up","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","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, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { ChevronDown, Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n addonLeft,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n renderOption,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\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 label,\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 formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\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 if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n useEffect(() => {\n if (rootProps.disabled) {\n setFocusWithin(false)\n }\n }, [rootProps.disabled])\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n id={formInputLabelId}\n onColored={contrast}\n primary={primary}\n error={status === 'error'}\n success={status === 'success'}\n focus={focusWithin}\n palette={{\n color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\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 }}\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\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n setMenuOpenRequest(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n }\n }}\n onPointerDown={(evt) => {\n if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n preventBlur(evt)\n }}\n onMouseDown={(evt) => {\n if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n if (!window.PointerEvent) preventBlur(evt)\n }}\n onFocus={(evt) => {\n if (rootProps.onFocus) rootProps.onFocus(evt)\n\n setFocusWithin(true)\n\n if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n updateInputText('')\n }\n }}\n onBlur={(evt) => {\n if (rootProps.onBlur) rootProps.onBlur(evt)\n\n if (\n evt.currentTarget.contains(evt.relatedTarget) ||\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n ) {\n return\n }\n\n setFocusWithin(false)\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }}\n input={\n <>\n {inputRequired && !searchable && !readOnly ? (\n <Styled.InputMimic\n required\n type='text'\n inputMode='none'\n form={form}\n tabIndex={-1}\n onFocus={() => {\n inputRef.current?.focus()\n }}\n />\n ) : null}\n <FormInput\n {...sizeProps}\n ref={inputRef}\n role='combobox'\n aria-controls={menuListId}\n aria-expanded={menuOpen}\n type='text'\n autoComplete='off'\n autoCapitalize='off'\n autoCorrect='off'\n spellCheck='false'\n active={inputActive}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n form={form}\n autoFocus={autoFocus}\n inputMode={searchable ? inputMode : 'none'}\n maxLength={maxLength}\n placeholder={placeholder}\n readOnly={readOnly || !searchable}\n required={inputRequired}\n disabled={rootProps.disabled}\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 const inputValue = evt.currentTarget.value\n\n updateInputText(inputValue)\n updateOptionsDebounced(inputValue)\n setMenuOpenRequest(true)\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Enter.validate(evt.key)) {\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n evt.preventDefault()\n\n if (!menuOpen) {\n updateOptions('')\n if (searchable) {\n updateInputText('')\n }\n }\n\n setMenuOpenRequest((prev) => !prev)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n evt.preventDefault()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusFirstFocusable(menuListRef.current)\n }\n }\n\n if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n evt.preventDefault()\n\n if (!multiple && selectedOptionRef.current) {\n const menuItems = [...menuListRef.current.children]\n\n const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n if (focusTarget instanceof HTMLElement) {\n focusFirstFocusable(focusTarget)\n }\n } else {\n focusLastFocusable(menuListRef.current)\n }\n }\n }}\n />\n {dropdownSelectedOption.map((option) => (\n <input\n key={option.value}\n type='hidden'\n name={name}\n value={option.value}\n form={form}\n disabled={rootProps.disabled || option.disabled}\n />\n ))}\n </>\n }\n addonLeft={\n addonLeft ??\n (icon\n ? (addonLeftProps) => (\n <Icon\n {...addonLeftProps.iconProps}\n {...iconProps}\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n />\n )\n : undefined)\n }\n addonRight={(addonRightProps) => (\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.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 onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n disabled={rootProps.disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(null)\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n }}\n />\n ) : null}\n <Styled.IconAnimated {...addonRightProps.iconProps} {...iconProps} icon={<ChevronDown />} up={menuOpen} />\n </>\n )}\n dropdown={(dropdownProps) => (\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...dropdownProps.iconProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...dropdownProps.iconProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n renderOption={renderOption}\n onChange={(update) => {\n if (selectedOption === undefined) {\n setDropdownSelectedOption(update)\n }\n\n if (onSelectOption) onSelectOption(update)\n }}\n />\n ) : (\n <DropdownMenuSingle\n {...sizeProps}\n ref={menuListRef}\n label={label}\n readOnly={readOnly}\n multiple={multiple}\n disabled={rootProps.disabled}\n status={status}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n selectedOptionRef={selectedOptionRef}\n renderOption={renderOption}\n onChange={(option) => {\n const update = { ...option }\n\n if (selectedOption === undefined) {\n updateInputText(getDropdownInputText(update))\n setDropdownSelectedOption(getDropdownSelectedOption(update))\n }\n\n if (onSelectOption) onSelectOption(update)\n\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }}\n />\n )}\n </DropdownMenu>\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","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","disabled","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","color","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","addonLeftProps","Icon","addonRight","addonRightProps","Chip","black","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","ChevronDown","up","dropdown","dropdownProps","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","sizes","SIZES","displayName"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- 'use strict';var sizes=require('../FormInputLabel/sizes.js');var constants=require('../InputCheckbox/constants.js');const SIZES_CHECKBOX={l:constants.SIZES.m,m:constants.SIZES.s,s:constants.SIZES.xs,xs:constants.SIZES.xs};exports.SIZES={l:sizes.SIZES.l,m:sizes.SIZES.m,s:sizes.SIZES.s,xs:sizes.SIZES.xs},exports.SIZES_CHECKBOX=SIZES_CHECKBOX,exports.SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:18}},exports.SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}},exports.SIZES_TEXT={l:{fontSize:18},m:{fontSize:16},s:{fontSize:14},xs:{fontSize:14}};
1
+ 'use strict';var sizes=require('../FormInputLabel/sizes.js');var constants=require('../InputCheckbox/constants.js');const SIZES_CHECKBOX={l:constants.SIZES.m,m:constants.SIZES.s,s:constants.SIZES.xs,xs:constants.SIZES.xs};exports.SIZES={l:sizes.SIZES.l,m:sizes.SIZES.m,s:sizes.SIZES.s,xs:sizes.SIZES.xs},exports.SIZES_CHECKBOX=SIZES_CHECKBOX,exports.SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}},exports.SIZES_TEXT={l:{fontSize:18},m:{fontSize:16},s:{fontSize:14},xs:{fontSize:14}};
2
2
  //# sourceMappingURL=sizes.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sizes.js","sources":["../../../../src/components/Dropdown/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n xs: SIZES_FORM_INPUT_LABEL.xs,\n}\n\nexport const SIZES_CHECKBOX: Record<Size, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n xs: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n\nexport const SIZES_TEXT: Record<Size, CSSProperties> = {\n l: { fontSize: 18 },\n m: { fontSize: 16 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n\nexport const SIZES_ICON: Record<Size, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n xs: { fontSize: 18 },\n}\n"],"names":["SIZES_CHECKBOX","l","SIZES_INPUT_CHECKBOX","m","s","xs","SIZES_FORM_INPUT_LABEL","fontSize","width","minWidth","maxWidth","fluid"],"mappings":"oHAaO,MAAMA,eAA8C,CACzDC,EAAGC,UAAAA,MAAqBC,EACxBA,EAAGD,UAAAA,MAAqBE,EACxBA,EAAGF,UAAAA,MAAqBG,GACxBA,GAAIH,UAAAA,MAAqBG,kBAXuB,CAChDJ,EAAGK,MAAAA,MAAuBL,EAC1BE,EAAGG,MAAAA,MAAuBH,EAC1BC,EAAGE,MAAAA,MAAuBF,EAC1BC,GAAIC,MAAAA,MAAuBD,6DAwC0B,CACrDJ,EAAG,CAAEM,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,GAAI,CAAEE,SAAU,wBAlCkD,CAClEN,EAAG,CACDO,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZP,EAAG,CACDK,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZN,EAAG,CACDI,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU,4BAIyC,CACrDT,EAAG,CAAEM,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,GAAI,CAAEE,SAAU"}
1
+ {"version":3,"file":"sizes.js","sources":["../../../../src/components/Dropdown/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n xs: SIZES_FORM_INPUT_LABEL.xs,\n}\n\nexport const SIZES_CHECKBOX: Record<Size, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n xs: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n\nexport const SIZES_TEXT: Record<Size, CSSProperties> = {\n l: { fontSize: 18 },\n m: { fontSize: 16 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n"],"names":["SIZES_CHECKBOX","l","SIZES_INPUT_CHECKBOX","m","s","xs","SIZES_FORM_INPUT_LABEL","width","minWidth","maxWidth","fluid","fontSize"],"mappings":"oHAaO,MAAMA,eAA8C,CACzDC,EAAGC,UAAAA,MAAqBC,EACxBA,EAAGD,UAAAA,MAAqBE,EACxBA,EAAGF,UAAAA,MAAqBG,GACxBA,GAAIH,UAAAA,MAAqBG,kBAXuB,CAChDJ,EAAGK,MAAAA,MAAuBL,EAC1BE,EAAGG,MAAAA,MAAuBH,EAC1BC,EAAGE,MAAAA,MAAuBF,EAC1BC,GAAIC,MAAAA,MAAuBD,6DAUuC,CAClEJ,EAAG,CACDM,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZN,EAAG,CACDI,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZL,EAAG,CACDG,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU,4BAIyC,CACrDR,EAAG,CAAEU,SAAU,IACfR,EAAG,CAAEQ,SAAU,IACfP,EAAG,CAAEO,SAAU,IACfN,GAAI,CAAEM,SAAU"}
@@ -1,2 +1,2 @@
1
- import{SIZES as SIZES$1}from'../FormInputLabel/sizes.mjs';import{SIZES as SIZES$2}from'../InputCheckbox/constants.mjs';const SIZES={l:SIZES$1.l,m:SIZES$1.m,s:SIZES$1.s,xs:SIZES$1.xs};const SIZES_CHECKBOX={l:SIZES$2.m,m:SIZES$2.s,s:SIZES$2.xs,xs:SIZES$2.xs};const SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}};const SIZES_TEXT={l:{fontSize:18},m:{fontSize:16},s:{fontSize:14},xs:{fontSize:14}};const SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:18}};export{SIZES,SIZES_CHECKBOX,SIZES_ICON,SIZES_MENU,SIZES_TEXT};
1
+ import{SIZES as SIZES$1}from'../FormInputLabel/sizes.mjs';import{SIZES as SIZES$2}from'../InputCheckbox/constants.mjs';const SIZES={l:SIZES$1.l,m:SIZES$1.m,s:SIZES$1.s,xs:SIZES$1.xs};const SIZES_CHECKBOX={l:SIZES$2.m,m:SIZES$2.s,s:SIZES$2.xs,xs:SIZES$2.xs};const SIZES_MENU={l:{width:560,minWidth:'auto',maxWidth:'none'},m:{width:480,minWidth:'auto',maxWidth:'none'},s:{width:280,minWidth:'auto',maxWidth:'none'},fluid:{width:'100%',minWidth:'auto',maxWidth:'none'}};const SIZES_TEXT={l:{fontSize:18},m:{fontSize:16},s:{fontSize:14},xs:{fontSize:14}};export{SIZES,SIZES_CHECKBOX,SIZES_MENU,SIZES_TEXT};
2
2
  //# sourceMappingURL=sizes.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Dropdown/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n xs: SIZES_FORM_INPUT_LABEL.xs,\n}\n\nexport const SIZES_CHECKBOX: Record<Size, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n xs: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n\nexport const SIZES_TEXT: Record<Size, CSSProperties> = {\n l: { fontSize: 18 },\n m: { fontSize: 16 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n\nexport const SIZES_ICON: Record<Size, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n xs: { fontSize: 18 },\n}\n"],"names":["SIZES","l","SIZES_FORM_INPUT_LABEL","m","s","xs","SIZES_CHECKBOX","SIZES_INPUT_CHECKBOX","SIZES_MENU","width","minWidth","maxWidth","fluid","SIZES_TEXT","fontSize","SIZES_ICON"],"mappings":"uHAMO,MAAMA,MAAqC,CAChDC,EAAGC,QAAuBD,EAC1BE,EAAGD,QAAuBC,EAC1BC,EAAGF,QAAuBE,EAC1BC,GAAIH,QAAuBG,IAGtB,MAAMC,eAA8C,CACzDL,EAAGM,QAAqBJ,EACxBA,EAAGI,QAAqBH,EACxBA,EAAGG,QAAqBF,GACxBA,GAAIE,QAAqBF,IAGpB,MAAMG,WAAuD,CAClEP,EAAG,CACDQ,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZR,EAAG,CACDM,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZP,EAAG,CACDK,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU,SAIP,MAAME,WAA0C,CACrDZ,EAAG,CAAEa,SAAU,IACfX,EAAG,CAAEW,SAAU,IACfV,EAAG,CAAEU,SAAU,IACfT,GAAI,CAAES,SAAU,KAGX,MAAMC,WAA0C,CACrDd,EAAG,CAAEa,SAAU,IACfX,EAAG,CAAEW,SAAU,IACfV,EAAG,CAAEU,SAAU,IACfT,GAAI,CAAES,SAAU"}
1
+ {"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Dropdown/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport { SIZES as SIZES_INPUT_CHECKBOX } from 'components/InputCheckbox'\nimport type { MenuComponentSize } from 'components/MenuComponent'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n l: SIZES_FORM_INPUT_LABEL.l,\n m: SIZES_FORM_INPUT_LABEL.m,\n s: SIZES_FORM_INPUT_LABEL.s,\n xs: SIZES_FORM_INPUT_LABEL.xs,\n}\n\nexport const SIZES_CHECKBOX: Record<Size, CSSProperties> = {\n l: SIZES_INPUT_CHECKBOX.m,\n m: SIZES_INPUT_CHECKBOX.s,\n s: SIZES_INPUT_CHECKBOX.xs,\n xs: SIZES_INPUT_CHECKBOX.xs,\n}\n\nexport const SIZES_MENU: Record<MenuComponentSize, CSSProperties> = {\n l: {\n width: 560,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n m: {\n width: 480,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n s: {\n width: 280,\n minWidth: 'auto',\n maxWidth: 'none',\n },\n fluid: {\n width: '100%',\n minWidth: 'auto',\n maxWidth: 'none',\n },\n}\n\nexport const SIZES_TEXT: Record<Size, CSSProperties> = {\n l: { fontSize: 18 },\n m: { fontSize: 16 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n"],"names":["SIZES","l","SIZES_FORM_INPUT_LABEL","m","s","xs","SIZES_CHECKBOX","SIZES_INPUT_CHECKBOX","SIZES_MENU","width","minWidth","maxWidth","fluid","SIZES_TEXT","fontSize"],"mappings":"uHAMO,MAAMA,MAAqC,CAChDC,EAAGC,QAAuBD,EAC1BE,EAAGD,QAAuBC,EAC1BC,EAAGF,QAAuBE,EAC1BC,GAAIH,QAAuBG,IAGtB,MAAMC,eAA8C,CACzDL,EAAGM,QAAqBJ,EACxBA,EAAGI,QAAqBH,EACxBA,EAAGG,QAAqBF,GACxBA,GAAIE,QAAqBF,IAGpB,MAAMG,WAAuD,CAClEP,EAAG,CACDQ,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZR,EAAG,CACDM,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZP,EAAG,CACDK,MAAO,IACPC,SAAU,OACVC,SAAU,QAEZC,MAAO,CACLH,MAAO,OACPC,SAAU,OACVC,SAAU,SAIP,MAAME,WAA0C,CACrDZ,EAAG,CAAEa,SAAU,IACfX,EAAG,CAAEW,SAAU,IACfV,EAAG,CAAEU,SAAU,IACfT,GAAI,CAAES,SAAU"}
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const FormInputLabel=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:i="m",sizeXXS:r,sizeXS:t,sizeS:n,sizeM:o,sizeL:l,sizeXL:u,input:a,text:d,controls:x,addonLeft:z,addonRight:h,dropdown:j,...c}=e;const m={size:i,sizeXXS:r,sizeXS:t,sizeS:n,sizeM:o,sizeL:l,sizeXL:u};return jsxRuntime.jsxs(style.Root,{...c,...m,ref:s,children:[z?jsxRuntime.jsx(style.AddonLeft,{children:z}):null,jsxRuntime.jsx(style.Container,{...m,sizes:sizes.SIZES_CONTAINER,grow:1,children:a}),d?jsxRuntime.jsx(style.Container,{...m,sizes:sizes.SIZES_CONTAINER,marginRight:h||x?void 0:8,children:jsxRuntime.jsx(Text.Text,{size:"inherit",color:"inherit",lineHeight:"inherit",whiteSpace:"nowrap",children:d})}):null,h?jsxRuntime.jsx(style.AddonRight,{marginRight:x?0:4,children:h}):null,x,j?jsxRuntime.jsx(style.Dropdown,{children:j}):null]})}),{sizes:sizes.SIZES,displayName:"FormInputLabel"});exports.COMPONENT_NAME="FormInputLabel",exports.FormInputLabel=FormInputLabel;
1
+ 'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var isNil=require('../../shared/utils/isNil.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var Text=require('../Text/Text.js');const FormInputLabel=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:i="m",sizeXXS:r,sizeXS:t,sizeS:n,sizeM:o,sizeL:l,sizeXL:a,input:u,text:p,addonLeft:d,addonRight:c,floats:x,dropdown:j,...S}=e;const z={size:i,sizeXXS:r,sizeXS:t,sizeS:n,sizeM:o,sizeL:l,sizeXL:a};const m={...z,sizes:sizes.SIZES_ICON,color:S.disabled?'content-disabled':'content-onmain-tertiary',preset:'brand'};const h={...z,sizes:sizes.SIZES_ICON_BUTTON,square:!0,disabled:S.disabled};return jsxRuntime.jsxs(style.Root,{...S,...z,ref:s,children:[jsxRuntime.jsxs(style.Container,{children:[jsxRuntime.jsx(Slot.Slot,{render:d,props:{iconProps:{...m,marginLeft:'var(--form-input-label-margin)'},iconButtonProps:h}}),jsxRuntime.jsx(style.Content,{...z,sizes:sizes.SIZES_CONTENT,grow:1,children:u}),isNil.isNil(p)?null:jsxRuntime.jsx(style.Content,{...z,sizes:sizes.SIZES_CONTENT,children:jsxRuntime.jsx(Text.Text,{size:"inherit",color:"inherit",lineHeight:"inherit",whiteSpace:"nowrap",children:p})}),jsxRuntime.jsx(Slot.Slot,{render:c,props:{iconProps:{...m,marginRight:'var(--form-input-label-margin)'},iconButtonProps:h}})]}),jsxRuntime.jsx(Slot.Slot,{render:x,props:{iconProps:m,iconButtonProps:h}}),j?jsxRuntime.jsx(style.Dropdown,{children:jsxRuntime.jsx(Slot.Slot,{render:j,props:{iconProps:m,iconButtonProps:h}})}):null]})}),{sizes:sizes.SIZES,displayName:"FormInputLabel"});exports.COMPONENT_NAME="FormInputLabel",exports.FormInputLabel=FormInputLabel;
2
2
  //# sourceMappingURL=FormInputLabel.js.map