@foxford/ui 2.102.0 → 2.103.0-beta-bdca95a-20260331

package/components/Dropdown/Dropdown.js

@@ -1,2 +1,2 @@
-'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:h,onChangeInput:k,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 he=React.useRef(ye);const ke=React.useCallback((e=>{pe(e),k&&k(e)}),[k]);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||ke(utils.getDropdownInputText(x)),ue(utils.getDropdownSelectedOption(x,R)))}),[R,x,ye,ke]),React.useEffect((()=>{ye!==he.current&&(ye&&O&&O(),!ye&&S&&S(),he.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),ke(utils.getDropdownInputText(ce,R))):(fe(!0),Se(''),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),ge(!0),we.current&&e.target===we.current&&s&&!R&&!ye&&ke('')},onBlur:e=>{W.onBlur&&W.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&ye&&Ce&&Ce.contains(e.relatedTarget)||(ge(!1),ke(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;ke(o),Oe(o),fe(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(ke(utils.getDropdownInputText(ce,R)),fe(!1)),!constants.keyboardKeys.Space.validate(e.key)||ye&&e.currentTarget.selectionStart!==0||(e.preventDefault(),ye||(Se(''),s&&ke('')),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,{props:{iconProps:ee},children:j}):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(),ke(''),Se(''),fe(!0))}}}):null,!R&&h&&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(),ke(''),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(),ke(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&&h)&&(x===void 0&&ue([]),T&&T(R?[]:null),ke(''),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&&(ke(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;
+'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:j,addonLeft:D,inputMode:w,loadingMessage:C,loadingIcon:I,maxLength:M,multiple:R,clearable:h,onChangeInput:k,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 je=A&&ce.length===0;const De=Boolean(ye||de||be);const we=React.useRef(null);const[Ce,Ie]=React.useState(null);const Me=React.useRef(null);const Re=React.useRef(null);const he=React.useRef(ye);const ke=React.useCallback(e=>{pe(e),k&&k(e)},[k]);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||ke(utils.getDropdownInputText(x)),ue(utils.getDropdownSelectedOption(x,R)))},[R,x,ye,ke]),React.useEffect(()=>{ye!==he.current&&(ye&&O&&O(),!ye&&S&&S(),he.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),ke(utils.getDropdownInputText(ce,R))):(fe(!0),Se(''),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),ge(!0),we.current&&e.target===we.current&&s&&!R&&!ye&&ke('')},onBlur:e=>{W.onBlur&&W.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&ye&&Ce&&Ce.contains(e.relatedTarget)||(ge(!1),ke(utils.getDropdownInputText(ce,R)),fe(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!je||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:De,label:V,labelId:ne,labelPosition:r,form:Q,autoFocus:b,inputMode:s?w:'none',maxLength:M,placeholder:X,readOnly:N||!s,required:je,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;ke(o),Oe(o),fe(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(ke(utils.getDropdownInputText(ce,R)),fe(!1)),!constants.keyboardKeys.Space.validate(e.key)||ye&&e.currentTarget.selectionStart!==0||(e.preventDefault(),ye||(Se(''),s&&ke('')),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&&Me.current)if(e.preventDefault(),!R&&Re.current){const e=[...Me.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(Me.current);if(constants.keyboardKeys.ArrowUp.validate(e.key)&&ye&&Me.current)if(e.preventDefault(),!R&&Re.current){const e=[...Me.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(Me.current)}}),ce.map(e=>jsxRuntime.jsx("input",{type:"hidden",name:t,value:e.value,form:Q,disabled:W.disabled||e.disabled},e.value))]}),addonLeft:j?jsxRuntime.jsx(Icon.Icon,{name:typeof j=='string'?j:void 0,icon:typeof j!='string'?j:void 0,...ee}):D?jsxRuntime.jsx(Slot.Slot,{render:D,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,addonRight:({iconButtonProps:e})=>jsxRuntime.jsx(IconButton.IconButton,{...e,contrast:!W.disabled,onClick:e=>{e.stopPropagation(),N||(x===void 0&&ue([]),T&&T([]),we.current?.focus(),ke(''),Se(''),fe(!0))}}),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()}}):null,!R&&h&&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(),ke(''),Se(''),fe(!0))}}):null,jsxRuntime.jsx(style.IconAnimated,{icon:jsxRuntime.jsx(index$1.ChevronDown,{}),up:ye,...ee})]}),dropdown:jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:Ie,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:I,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(),ke(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&&h)&&(x===void 0&&ue([]),T&&T(R?[]:null),ke(''),Se(''))},children:R?jsxRuntime.jsx(DropdownMenuMultiple.DropdownMenuMultiple,{...Y,ref:Me,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:Me,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&&(ke(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;
 //# sourceMappingURL=Dropdown.js.map

package/components/Dropdown/Dropdown.js.map

@@ -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 props={{ iconProps: iconBaseProps }}>{addonLeft}</Slot>\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","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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"}
+{"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                addonRight={({ iconButtonProps }) => (\n                  <IconButton\n                    {...iconButtonProps}\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                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              />\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","iconButtonProps","IconButton","colorHover","Close","square","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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"}

package/components/Dropdown/Dropdown.mjs

@@ -1,2 +1,2 @@
-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:h,clearable:x,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,h)));const[ue,pe]=useState((()=>getDropdownInputText(de,h)));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 he=useRef(null);const xe=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&&(h||De||je(getDropdownInputText(y)),ce(getDropdownSelectedOption(y,h)))}),[h,y,De,je]),useEffect((()=>{De!==xe.current&&(De&&T&&T(),!De&&O&&O(),xe.current=De)}),[De,O,T]),useEffect((()=>{if(!h&&!f&&De&&!ye&&ue.length===0&&ke&&he.current){const e=ke.getBoundingClientRect();const o=he.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout((()=>{ke&&he.current&&ke.scrollTo(0,he.current.offsetTop)}),0)}}),[h,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,h))):(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&&!h&&!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,h)),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,h)),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(),!h&&he.current){const e=[...ve.current.children];const o=e.findIndex((e=>e.contains(he.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(),!h&&he.current){const e=[...ve.current.children];const o=e.findIndex((e=>e.contains(he.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,{props:{iconProps:ee},children:I}):null,addonRight:jsxs(Fragment,{children:[h&&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,!h&&x&&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,h)),ge(!1)),keyboardKeys.Esc.validate(e.key)&&(Me.current?.focus(),ge(!1)),keyboardKeys.Backspace.validate(e.key)&&!X&&(h||!h&&x)&&(y===void 0&&ce([]),F&&F(h?[]:null),je(''),Oe(''))},children:h?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:h,disabled:W.disabled,status:q,menuListId:ne,inputLabelId:te,menuOptions:Ce,dropdownSelectedOption:de,selectedOptionRef:he,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};
+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((o,e)=>{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:h,clearable:x,onChangeInput:j,onCloseMenu:O,onOpenMenu:T,onSelectOption:F,options:E,loadOptions:P,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:t,sizeXXS:Z,sizeXS:_,sizeS:$,sizeM:U,sizeL:G,sizeXL:J};const oo={...Y,...i,sizes:SIZES_ICON,color:W.disabled?'content-disabled':'content-onmain-tertiary'};const eo=useMemo(()=>W.id??`${n}-${nanoid()}`,[n,W.id]);const to=useMemo(()=>nanoid(),[]);const no=useMemo(()=>nanoid(),[]);const[ro,so]=useFilteredOptions({options:E});const[lo,ao,io]=useLoadedOptions({loadOptions:P,options:E});const[co,uo]=useState(()=>getDropdownSelectedOption(y!==void 0?y:D,h));const[po,mo]=useState(()=>getDropdownInputText(co,h));const[fo,bo]=useState(!1);const[go,Co]=useState(!1);const yo=P?lo:ro;const Do=P?p??ao:p;const wo=go&&!W.disabled;const Io=H&&co.length===0;const Mo=Boolean(wo||po||fo);const ko=useRef(null);const[So,vo]=useState(null);const ho=useRef(null);const xo=useRef(null);const jo=useRef(wo);const Oo=useCallback(o=>{mo(o),j&&j(o)},[j]);const To=useCallback(o=>{P?io(o):so(o)},[P,io,so]);const Fo=useMemo(()=>createDebouncedCallback(To,150),[To]);const preventBlur=o=>{o.target!==ko.current&&o.target instanceof Node&&(o.currentTarget.contains(o.target)||d.renderInPortal&&wo&&So&&So.contains(o.target))&&o.preventDefault()};return useScrollMonitor({target:g,onScrollStart:()=>{b&&wo&&(ko.current?.focus(),Co(!1))}}),useLayoutEffect(()=>{y!==void 0&&(h||wo||Oo(getDropdownInputText(y)),uo(getDropdownSelectedOption(y,h)))},[h,y,wo,Oo]),useEffect(()=>{wo!==jo.current&&(wo&&T&&T(),!wo&&O&&O(),jo.current=wo)},[wo,O,T]),useEffect(()=>{if(!h&&!f&&wo&&!Do&&po.length===0&&So&&xo.current){const o=So.getBoundingClientRect();const e=xo.current.getBoundingClientRect();(e.top<o.top||e.bottom>o.bottom)&&setTimeout(()=>{So&&xo.current&&So.scrollTo(0,xo.current.offsetTop)},0)}},[h,f,wo,Do,po,So]),useEffect(()=>{W.disabled&&bo(!1)},[W.disabled]),jsx(FormInputLabel,{...W,...Y,ref:e,id:eo,onColored:C,primary:l,error:q==='error',success:q==='success',focus:fo,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||(ko.current?.focus(),wo?So&&o.target instanceof Node&&!So.contains(o.target)&&(Co(!1),Oo(getDropdownInputText(co,h))):(Co(!0),To(''),s&&Oo('')))},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),bo(!0),ko.current&&o.target===ko.current&&s&&!h&&!wo&&Oo('')},onBlur:o=>{W.onBlur&&W.onBlur(o),o.currentTarget.contains(o.relatedTarget)||d.renderInPortal&&wo&&So&&So.contains(o.relatedTarget)||(bo(!1),Oo(getDropdownInputText(co,h)),Co(!1))},input:jsxs(Fragment,{children:[!Io||s||X?null:jsx(InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{ko.current?.focus()}}),jsx(FormInput,{...Y,ref:ko,role:"combobox","aria-controls":no,"aria-expanded":wo,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:Mo,label:V,labelId:to,labelPosition:r,form:Q,autoFocus:m,inputMode:s?M:'none',maxLength:v,placeholder:A,readOnly:X||!s,required:Io,disabled:W.disabled,value:po,palette:{color:N.color,colorDisabled:N.colorDisabled,placeholderColor:N.placeholderColor,placeholderColorDisabled:N.placeholderColorDisabled},onClick:o=>{wo&&o.currentTarget.selectionStart!==o.currentTarget.selectionEnd&&o.stopPropagation()},onChange:o=>{const e=o.currentTarget.value;Oo(e),Fo(e),Co(!0)},onKeyDown:o=>{if(keyboardKeys.Enter.validate(o.key)&&(Oo(getDropdownInputText(co,h)),Co(!1)),!keyboardKeys.Space.validate(o.key)||wo&&o.currentTarget.selectionStart!==0||(o.preventDefault(),wo||(To(''),s&&Oo('')),Co(o=>!o)),keyboardKeys.Esc.validate(o.key)&&Co(!1),keyboardKeys.Tab.validate(o.key)&&wo&&(o.preventDefault(),Co(!1)),keyboardKeys.ArrowDown.validate(o.key)&&wo&&ho.current)if(o.preventDefault(),!h&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const t=o[e+1]??o[0];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusFirstFocusable(ho.current);if(keyboardKeys.ArrowUp.validate(o.key)&&wo&&ho.current)if(o.preventDefault(),!h&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const t=o[e-1]??o[o.length-1];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusLastFocusable(ho.current)}}),co.map(o=>jsx("input",{type:"hidden",name:n,value:o.value,form:Q,disabled:W.disabled||o.disabled},o.value))]}),addonLeft:w?jsx(Icon,{name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0,...oo}):I?jsx(Slot,{render:I,props:{iconProps:oo}}):null,addonRight:jsxs(Fragment,{children:[h&&co.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,text:co.length,addonRight:({iconButtonProps:o})=>jsx(IconButton,{...o,contrast:!W.disabled,onClick:o=>{o.stopPropagation(),X||(y===void 0&&uo([]),F&&F([]),ko.current?.focus(),Oo(''),To(''),Co(!0))}}),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()}}):null,!h&&x&&co.length>0?jsx(IconButton,{icon:jsx(Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:o=>{o.stopPropagation(),X||(y===void 0&&uo([]),F&&F(null),ko.current?.focus(),Oo(''),To(''),Co(!0))}}):null,jsx(IconAnimated,{icon:jsx(ChevronDown,{}),up:wo,...oo})]}),dropdown:jsx(DropdownMenu,{...d,setRef:vo,open:wo,popperReferenceId:eo,secondary:!C,elevated:C,disableAutoFocus:!0,palette:{backgroundColor:N.menuBackgroundColor,borderColor:N.menuBorderColor},empty:yo.length===0,loading:Do,loadingMessage:k,loadingIcon:S,loadingIconProps:{...oo,...c},emptyMessage:R,emptyIcon:K,emptyIconProps:{...oo,...u},onKeyDown:o=>{keyboardKeys.Tab.validate(o.key)&&(o.preventDefault(),ko.current?.focus(),Co(!1)),keyboardKeys.Enter.validate(o.key)&&(ko.current?.focus(),Oo(getDropdownInputText(co,h)),Co(!1)),keyboardKeys.Esc.validate(o.key)&&(ko.current?.focus(),Co(!1)),keyboardKeys.Backspace.validate(o.key)&&!X&&(h||!h&&x)&&(y===void 0&&uo([]),F&&F(h?[]:null),Oo(''),To(''))},children:h?jsx(DropdownMenuMultiple,{...Y,ref:ho,inputRef:ko,label:V,name:n,disabled:W.disabled,readOnly:X,menuListId:no,inputLabelId:to,menuOptions:yo,dropdownSelectedOption:co,inputText:po,optionsMultiToggle:a,groupSelectedOptions:z,optionsMultiToggleCaption:B,renderOption:L,onChange:o=>{y===void 0&&uo(o),F&&F(o)}}):jsx(DropdownMenuSingle,{...Y,ref:ho,label:V,readOnly:X,multiple:h,disabled:W.disabled,status:q,menuListId:no,inputLabelId:to,menuOptions:yo,dropdownSelectedOption:co,selectedOptionRef:xo,renderOption:L,onChange:o=>{const e={...o};y===void 0&&(Oo(getDropdownInputText(e)),uo(getDropdownSelectedOption(e))),F&&F(e),ko.current?.focus(),Co(!1)}})})})}),{sizes:SIZES,displayName:"Dropdown"});export{COMPONENT_NAME,Dropdown};
 //# sourceMappingURL=Dropdown.mjs.map

package/components/Dropdown/Dropdown.mjs.map

@@ -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 props={{ iconProps: iconBaseProps }}>{addonLeft}</Slot>\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","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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"}
+{"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                addonRight={({ iconButtonProps }) => (\n                  <IconButton\n                    {...iconButtonProps}\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                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              />\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","iconButtonProps","IconButton","colorHover","Close","square","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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"}

package/components/Dropdown/DropdownListItem.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var sizes=require('./sizes.js');var jsxRuntime=require('react/jsx-runtime');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var ListItem=require('../ListItem/ListItem.js');exports.DropdownListItem=React.forwardRef((({name:e,disabled:s,status:t,readOnly:r,multiple:i,option:o,selected:a,statusVisibility:n="selected",onClick:c,onChange:u,renderOption:d,...l},p)=>{const x=i?o.status??t:t;const m=n==='always'||n==='selected'&&a;const v=m&&x==='error';const I=m&&x==='success';const b={...l,ref:a?p:void 0,role:i?void 0:'option','aria-selected':i?void 0:a,active:a,text:o.text,danger:v,success:I,disabled:s||o.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),r||c?.(e,o)},control:i?jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:sizes.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":a,name:e,value:o.value,checked:a,error:v,success:I,onChange:e=>{r||u?.(e,o,a)}}):void 0};return d?d(o,b):jsxRuntime.jsx(ListItem.ListItem,{...b})}));
+'use strict';var React=require('react');var sizes=require('./sizes.js');var jsxRuntime=require('react/jsx-runtime');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var ListItem=require('../ListItem/ListItem.js');var Text=require('../Text/Text.js');exports.DropdownListItem=React.forwardRef(({name:e,disabled:s,status:t,readOnly:i,multiple:r,option:o,selected:n,statusVisibility:a="selected",onClick:c,onChange:d,renderOption:u,size:l,sizeXXS:x,sizeXS:z,sizeS:m,sizeM:p,sizeL:b,sizeXL:v},j)=>{const I={size:l,sizeXXS:x,sizeXS:z,sizeS:m,sizeM:p,sizeL:b,sizeXL:v};const C=r?o.status??t:t;const L=a==='always'||a==='selected'&&n;const k=L&&C==='error';const h=L&&C==='success';const X=s||o.disabled;const R={...I,ref:n?j:void 0,role:r?void 0:'option','aria-selected':r?void 0:n,active:n,text:e=>jsxRuntime.jsx(Text.Text,{...e,ellipsis:!1,wordBreak:"break-word",children:o.text}),danger:k,success:h,disabled:X,borderRadius:8,onClick:e=>{e.stopPropagation(),i||c?.(e,o)},component:r?'label':'button',addonLeft:r?jsxRuntime.jsx(InputCheckbox.InputCheckbox,{...I,sizes:sizes.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":n,name:e,value:o.value,checked:n,error:k,success:h,disabled:X,onChange:e=>{i||d?.(e,o,n)}}):void 0};return u?u(o,R):jsxRuntime.jsx(ListItem.ListItem,{...R})});
 //# sourceMappingURL=DropdownListItem.js.map

package/components/Dropdown/DropdownListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownListItem.js","sources":["../../../../src/components/Dropdown/DropdownListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ListItemProps } from 'components/ListItem'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { SIZES_CHECKBOX } from './sizes'\nimport type { DropdownListItemProps } from './types'\n\nexport const DropdownListItem = forwardRef<HTMLElement, DropdownListItemProps>(\n  (\n    {\n      name,\n      disabled,\n      status,\n      readOnly,\n      multiple,\n      option,\n      selected,\n      statusVisibility = 'selected',\n      onClick,\n      onChange,\n      renderOption,\n      ...restProps\n    },\n    ref\n  ) => {\n    const optionStatus = multiple ? (option.status ?? status) : status\n    const showStatus = statusVisibility === 'always' || (statusVisibility === 'selected' && selected)\n    const optionErrorStatus = showStatus && optionStatus === 'error'\n    const optionSuccessStatus = showStatus && optionStatus === 'success'\n\n    const listItemProps: ListItemProps = {\n      ...restProps,\n      ref: selected ? ref : undefined,\n      role: !multiple ? 'option' : undefined,\n      'aria-selected': !multiple ? selected : undefined,\n      active: selected,\n      text: option.text,\n      danger: optionErrorStatus,\n      success: optionSuccessStatus,\n      disabled: disabled || option.disabled,\n      borderRadius: 8,\n      ellipsis: false,\n      textProps: { wordBreak: 'break-word' },\n      onClick: (evt: React.MouseEvent<HTMLElement>) => {\n        evt.stopPropagation()\n        if (!readOnly) {\n          onClick?.(evt, option)\n        }\n      },\n      control: multiple ? (\n        <InputCheckbox\n          sizes={SIZES_CHECKBOX}\n          form='none'\n          role='option'\n          aria-selected={selected}\n          name={name}\n          value={option.value}\n          checked={selected}\n          error={optionErrorStatus}\n          success={optionSuccessStatus}\n          onChange={(evt) => {\n            if (!readOnly) {\n              onChange?.(evt, option, selected)\n            }\n          }}\n        />\n      ) : undefined,\n    }\n\n    if (renderOption) {\n      return renderOption(option, listItemProps)\n    }\n\n    return <ListItem {...listItemProps} />\n  }\n)\n"],"names":["forwardRef","name","disabled","status","readOnly","multiple","option","selected","statusVisibility","onClick","onChange","renderOption","restProps","ref","optionStatus","showStatus","optionErrorStatus","optionSuccessStatus","listItemProps","undefined","role","active","text","danger","success","borderRadius","ellipsis","textProps","wordBreak","evt","stopPropagation","control","_jsx","InputCheckbox","sizes","SIZES_CHECKBOX","form","value","checked","error","ListItem"],"mappings":"4PAOgCA,MAAAA,YAC9B,EAEIC,OACAC,WACAC,SACAC,WACAC,WACAC,SACAC,WACAC,mBAAmB,WACnBC,UACAC,WACAC,kBACGC,GAELC,KAEA,MAAMC,EAAeT,EAAYC,EAAOH,QAAUA,EAAUA,EAC5D,MAAMY,EAAaP,IAAqB,UAAaA,IAAqB,YAAcD,EACxF,MAAMS,EAAoBD,GAAcD,IAAiB,QACzD,MAAMG,EAAsBF,GAAcD,IAAiB,UAE3D,MAAMI,EAA+B,IAChCN,EACHC,IAAKN,EAAWM,OAAMM,EACtBC,KAAOf,OAAsBc,EAAX,SAClB,gBAAkBd,OAAsBc,EAAXZ,EAC7Bc,OAAQd,EACRe,KAAMhB,EAAOgB,KACbC,OAAQP,EACRQ,QAASP,EACTf,SAAUA,GAAYI,EAAOJ,SAC7BuB,aAAc,EACdC,UAAU,EACVC,UAAW,CAAEC,UAAW,cACxBnB,QAAUoB,IACRA,EAAIC,kBACC1B,GACHK,IAAUoB,EAAKvB,EACjB,EAEFyB,QAAS1B,EACP2B,WAAAA,IAACC,4BAAa,CACZC,MAAOC,MAAAA,eACPC,KAAK,OACLhB,KAAK,SACL,gBAAeb,EACfN,KAAMA,EACNoC,MAAO/B,EAAO+B,MACdC,QAAS/B,EACTgC,MAAOvB,EACPQ,QAASP,EACTP,SAAWmB,IACJzB,GACHM,IAAWmB,EAAKvB,EAAQC,EAC1B,SAGFY,GAGN,OAAIR,EACKA,EAAaL,EAAQY,GAGvBc,WAAAA,IAACQ,SAAAA,SAAQ,IAAKtB,GAAiB"}
+{"version":3,"file":"DropdownListItem.js","sources":["../../../../src/components/Dropdown/DropdownListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { ListItem } from 'components/ListItem'\nimport { Text } from 'components/Text'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { SIZES_CHECKBOX } from './sizes'\nimport type { DropdownListItemProps, RenderOptionListItemProps } from './types'\n\nexport const DropdownListItem = forwardRef<HTMLElement, DropdownListItemProps>(\n  (\n    {\n      name,\n      disabled,\n      status,\n      readOnly,\n      multiple,\n      option,\n      selected,\n      statusVisibility = 'selected',\n      onClick,\n      onChange,\n      renderOption,\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    },\n    ref\n  ) => {\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const optionStatus = multiple ? (option.status ?? status) : status\n    const showStatus = statusVisibility === 'always' || (statusVisibility === 'selected' && selected)\n    const optionErrorStatus = showStatus && optionStatus === 'error'\n    const optionSuccessStatus = showStatus && optionStatus === 'success'\n    const optionDisabled = disabled || option.disabled\n\n    const listItemProps: RenderOptionListItemProps = {\n      ...sizeProps,\n      ref: selected ? ref : undefined,\n      role: !multiple ? 'option' : undefined,\n      'aria-selected': !multiple ? selected : undefined,\n      active: selected,\n      text: (textProps) => (\n        <Text {...textProps} ellipsis={false} wordBreak='break-word'>\n          {option.text}\n        </Text>\n      ),\n      danger: optionErrorStatus,\n      success: optionSuccessStatus,\n      disabled: optionDisabled,\n      borderRadius: 8,\n      onClick: (evt: React.MouseEvent<HTMLElement>) => {\n        evt.stopPropagation()\n        if (!readOnly) {\n          onClick?.(evt, option)\n        }\n      },\n      component: multiple ? 'label' : 'button',\n      addonLeft: multiple ? (\n        <InputCheckbox\n          {...sizeProps}\n          sizes={SIZES_CHECKBOX}\n          form='none'\n          role='option'\n          aria-selected={selected}\n          name={name}\n          value={option.value}\n          checked={selected}\n          error={optionErrorStatus}\n          success={optionSuccessStatus}\n          disabled={optionDisabled}\n          onChange={(evt) => {\n            if (!readOnly) {\n              onChange?.(evt, option, selected)\n            }\n          }}\n        />\n      ) : undefined,\n    }\n\n    if (renderOption) {\n      return renderOption(option, listItemProps)\n    }\n\n    return <ListItem {...listItemProps} />\n  }\n)\n"],"names":["forwardRef","name","disabled","status","readOnly","multiple","option","selected","statusVisibility","onClick","onChange","renderOption","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","ref","sizeProps","optionStatus","showStatus","optionErrorStatus","optionSuccessStatus","optionDisabled","listItemProps","undefined","role","active","text","textProps","_jsx","Text","ellipsis","wordBreak","children","danger","success","borderRadius","evt","stopPropagation","component","addonLeft","InputCheckbox","sizes","SIZES_CHECKBOX","form","value","checked","error","ListItem"],"mappings":"gSAOgCA,MAAAA,WAC9B,EAEIC,OACAC,WACAC,SACAC,WACAC,WACAC,SACAC,WACAC,mBAAmB,WACnBC,UACAC,WACAC,eACAC,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAEFC,KAEA,MAAMC,EAAY,CAChBR,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAehB,EAAYC,EAAOH,QAAUA,EAAUA,EAC5D,MAAMmB,EAAad,IAAqB,UAAaA,IAAqB,YAAcD,EACxF,MAAMgB,EAAoBD,GAAcD,IAAiB,QACzD,MAAMG,EAAsBF,GAAcD,IAAiB,UAC3D,MAAMI,EAAiBvB,GAAYI,EAAOJ,SAE1C,MAAMwB,EAA2C,IAC5CN,EACHD,IAAKZ,EAAWY,OAAMQ,EACtBC,KAAOvB,OAAsBsB,EAAX,SAClB,gBAAkBtB,OAAsBsB,EAAXpB,EAC7BsB,OAAQtB,EACRuB,KAAOC,GACLC,WAAAA,IAACC,UAAI,IAAKF,EAAWG,UAAU,EAAOC,UAAU,aAAYC,SACzD9B,EAAOwB,OAGZO,OAAQd,EACRe,QAASd,EACTtB,SAAUuB,EACVc,aAAc,EACd9B,QAAU+B,IACRA,EAAIC,kBACCrC,GACHK,IAAU+B,EAAKlC,IAGnBoC,UAAWrC,EAAW,QAAU,SAChCsC,UAAWtC,EACT2B,WAAAA,IAACY,4BAAa,IACRxB,EACJyB,MAAOC,MAAAA,eACPC,KAAK,OACLnB,KAAK,SACL,gBAAerB,EACfN,KAAMA,EACN+C,MAAO1C,EAAO0C,MACdC,QAAS1C,EACT2C,MAAO3B,EACPe,QAASd,EACTtB,SAAUuB,EACVf,SAAW8B,IACJpC,GACHM,IAAW8B,EAAKlC,EAAQC,WAI5BoB,GAGN,OAAIhB,EACKA,EAAaL,EAAQoB,GAGvBM,WAAAA,IAACmB,SAAAA,SAAQ,IAAKzB"}

package/components/Dropdown/DropdownListItem.mjs

@@ -1,2 +1,2 @@
-import{forwardRef}from'react';import{SIZES_CHECKBOX}from'./sizes.mjs';import{jsx}from'react/jsx-runtime';import{InputCheckbox}from'../InputCheckbox/InputCheckbox.mjs';import{ListItem}from'../ListItem/ListItem.mjs';const DropdownListItem=forwardRef((({name:e,disabled:t,status:o,readOnly:s,multiple:r,option:i,selected:n,statusVisibility:a="selected",onClick:c,onChange:d,renderOption:m,...l},p)=>{const u=r?i.status??o:o;const x=a==='always'||a==='selected'&&n;const C=x&&u==='error';const I=x&&u==='success';const f={...l,ref:n?p:void 0,role:r?void 0:'option','aria-selected':r?void 0:n,active:n,text:i.text,danger:C,success:I,disabled:t||i.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),s||c?.(e,i)},control:r?jsx(InputCheckbox,{sizes:SIZES_CHECKBOX,form:"none",role:"option","aria-selected":n,name:e,value:i.value,checked:n,error:C,success:I,onChange:e=>{s||d?.(e,i,n)}}):void 0};return m?m(i,f):jsx(ListItem,{...f})}));export{DropdownListItem};
+import{forwardRef}from'react';import{SIZES_CHECKBOX}from'./sizes.mjs';import{jsx}from'react/jsx-runtime';import{InputCheckbox}from'../InputCheckbox/InputCheckbox.mjs';import{ListItem}from'../ListItem/ListItem.mjs';import{Text}from'../Text/Text.mjs';const DropdownListItem=forwardRef(({name:e,disabled:s,status:t,readOnly:o,multiple:i,option:r,selected:n,statusVisibility:a="selected",onClick:c,onChange:d,renderOption:m,size:l,sizeXXS:p,sizeXS:u,sizeS:x,sizeM:z,sizeL:b,sizeXL:f},C)=>{const I={size:l,sizeXXS:p,sizeXS:u,sizeS:x,sizeM:z,sizeL:b,sizeXL:f};const L=i?r.status??t:t;const S=a==='always'||a==='selected'&&n;const X=S&&L==='error';const j=S&&L==='success';const k=s||r.disabled;const h={...I,ref:n?C:void 0,role:i?void 0:'option','aria-selected':i?void 0:n,active:n,text:e=>jsx(Text,{...e,ellipsis:!1,wordBreak:"break-word",children:r.text}),danger:X,success:j,disabled:k,borderRadius:8,onClick:e=>{e.stopPropagation(),o||c?.(e,r)},component:i?'label':'button',addonLeft:i?jsx(InputCheckbox,{...I,sizes:SIZES_CHECKBOX,form:"none",role:"option","aria-selected":n,name:e,value:r.value,checked:n,error:X,success:j,disabled:k,onChange:e=>{o||d?.(e,r,n)}}):void 0};return m?m(r,h):jsx(ListItem,{...h})});export{DropdownListItem};
 //# sourceMappingURL=DropdownListItem.mjs.map

package/components/Dropdown/DropdownListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownListItem.mjs","sources":["../../../../src/components/Dropdown/DropdownListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ListItemProps } from 'components/ListItem'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { SIZES_CHECKBOX } from './sizes'\nimport type { DropdownListItemProps } from './types'\n\nexport const DropdownListItem = forwardRef<HTMLElement, DropdownListItemProps>(\n  (\n    {\n      name,\n      disabled,\n      status,\n      readOnly,\n      multiple,\n      option,\n      selected,\n      statusVisibility = 'selected',\n      onClick,\n      onChange,\n      renderOption,\n      ...restProps\n    },\n    ref\n  ) => {\n    const optionStatus = multiple ? (option.status ?? status) : status\n    const showStatus = statusVisibility === 'always' || (statusVisibility === 'selected' && selected)\n    const optionErrorStatus = showStatus && optionStatus === 'error'\n    const optionSuccessStatus = showStatus && optionStatus === 'success'\n\n    const listItemProps: ListItemProps = {\n      ...restProps,\n      ref: selected ? ref : undefined,\n      role: !multiple ? 'option' : undefined,\n      'aria-selected': !multiple ? selected : undefined,\n      active: selected,\n      text: option.text,\n      danger: optionErrorStatus,\n      success: optionSuccessStatus,\n      disabled: disabled || option.disabled,\n      borderRadius: 8,\n      ellipsis: false,\n      textProps: { wordBreak: 'break-word' },\n      onClick: (evt: React.MouseEvent<HTMLElement>) => {\n        evt.stopPropagation()\n        if (!readOnly) {\n          onClick?.(evt, option)\n        }\n      },\n      control: multiple ? (\n        <InputCheckbox\n          sizes={SIZES_CHECKBOX}\n          form='none'\n          role='option'\n          aria-selected={selected}\n          name={name}\n          value={option.value}\n          checked={selected}\n          error={optionErrorStatus}\n          success={optionSuccessStatus}\n          onChange={(evt) => {\n            if (!readOnly) {\n              onChange?.(evt, option, selected)\n            }\n          }}\n        />\n      ) : undefined,\n    }\n\n    if (renderOption) {\n      return renderOption(option, listItemProps)\n    }\n\n    return <ListItem {...listItemProps} />\n  }\n)\n"],"names":["DropdownListItem","forwardRef","name","disabled","status","readOnly","multiple","option","selected","statusVisibility","onClick","onChange","renderOption","restProps","ref","optionStatus","showStatus","optionErrorStatus","optionSuccessStatus","listItemProps","undefined","role","active","text","danger","success","borderRadius","ellipsis","textProps","wordBreak","evt","stopPropagation","control","_jsx","InputCheckbox","sizes","SIZES_CHECKBOX","form","value","checked","error","ListItem"],"mappings":"sNAOO,MAAMA,iBAAmBC,YAC9B,EAEIC,OACAC,WACAC,SACAC,WACAC,WACAC,SACAC,WACAC,mBAAmB,WACnBC,UACAC,WACAC,kBACGC,GAELC,KAEA,MAAMC,EAAeT,EAAYC,EAAOH,QAAUA,EAAUA,EAC5D,MAAMY,EAAaP,IAAqB,UAAaA,IAAqB,YAAcD,EACxF,MAAMS,EAAoBD,GAAcD,IAAiB,QACzD,MAAMG,EAAsBF,GAAcD,IAAiB,UAE3D,MAAMI,EAA+B,IAChCN,EACHC,IAAKN,EAAWM,OAAMM,EACtBC,KAAOf,OAAsBc,EAAX,SAClB,gBAAkBd,OAAsBc,EAAXZ,EAC7Bc,OAAQd,EACRe,KAAMhB,EAAOgB,KACbC,OAAQP,EACRQ,QAASP,EACTf,SAAUA,GAAYI,EAAOJ,SAC7BuB,aAAc,EACdC,UAAU,EACVC,UAAW,CAAEC,UAAW,cACxBnB,QAAUoB,IACRA,EAAIC,kBACC1B,GACHK,IAAUoB,EAAKvB,EACjB,EAEFyB,QAAS1B,EACP2B,IAACC,cAAa,CACZC,MAAOC,eACPC,KAAK,OACLhB,KAAK,SACL,gBAAeb,EACfN,KAAMA,EACNoC,MAAO/B,EAAO+B,MACdC,QAAS/B,EACTgC,MAAOvB,EACPQ,QAASP,EACTP,SAAWmB,IACJzB,GACHM,IAAWmB,EAAKvB,EAAQC,EAC1B,SAGFY,GAGN,OAAIR,EACKA,EAAaL,EAAQY,GAGvBc,IAACQ,SAAQ,IAAKtB,GAAiB"}
+{"version":3,"file":"DropdownListItem.mjs","sources":["../../../../src/components/Dropdown/DropdownListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { ListItem } from 'components/ListItem'\nimport { Text } from 'components/Text'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { SIZES_CHECKBOX } from './sizes'\nimport type { DropdownListItemProps, RenderOptionListItemProps } from './types'\n\nexport const DropdownListItem = forwardRef<HTMLElement, DropdownListItemProps>(\n  (\n    {\n      name,\n      disabled,\n      status,\n      readOnly,\n      multiple,\n      option,\n      selected,\n      statusVisibility = 'selected',\n      onClick,\n      onChange,\n      renderOption,\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    },\n    ref\n  ) => {\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const optionStatus = multiple ? (option.status ?? status) : status\n    const showStatus = statusVisibility === 'always' || (statusVisibility === 'selected' && selected)\n    const optionErrorStatus = showStatus && optionStatus === 'error'\n    const optionSuccessStatus = showStatus && optionStatus === 'success'\n    const optionDisabled = disabled || option.disabled\n\n    const listItemProps: RenderOptionListItemProps = {\n      ...sizeProps,\n      ref: selected ? ref : undefined,\n      role: !multiple ? 'option' : undefined,\n      'aria-selected': !multiple ? selected : undefined,\n      active: selected,\n      text: (textProps) => (\n        <Text {...textProps} ellipsis={false} wordBreak='break-word'>\n          {option.text}\n        </Text>\n      ),\n      danger: optionErrorStatus,\n      success: optionSuccessStatus,\n      disabled: optionDisabled,\n      borderRadius: 8,\n      onClick: (evt: React.MouseEvent<HTMLElement>) => {\n        evt.stopPropagation()\n        if (!readOnly) {\n          onClick?.(evt, option)\n        }\n      },\n      component: multiple ? 'label' : 'button',\n      addonLeft: multiple ? (\n        <InputCheckbox\n          {...sizeProps}\n          sizes={SIZES_CHECKBOX}\n          form='none'\n          role='option'\n          aria-selected={selected}\n          name={name}\n          value={option.value}\n          checked={selected}\n          error={optionErrorStatus}\n          success={optionSuccessStatus}\n          disabled={optionDisabled}\n          onChange={(evt) => {\n            if (!readOnly) {\n              onChange?.(evt, option, selected)\n            }\n          }}\n        />\n      ) : undefined,\n    }\n\n    if (renderOption) {\n      return renderOption(option, listItemProps)\n    }\n\n    return <ListItem {...listItemProps} />\n  }\n)\n"],"names":["DropdownListItem","forwardRef","name","disabled","status","readOnly","multiple","option","selected","statusVisibility","onClick","onChange","renderOption","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","ref","sizeProps","optionStatus","showStatus","optionErrorStatus","optionSuccessStatus","optionDisabled","listItemProps","undefined","role","active","text","textProps","_jsx","Text","ellipsis","wordBreak","children","danger","success","borderRadius","evt","stopPropagation","component","addonLeft","InputCheckbox","sizes","SIZES_CHECKBOX","form","value","checked","error","ListItem"],"mappings":"yPAOO,MAAMA,iBAAmBC,WAC9B,EAEIC,OACAC,WACAC,SACAC,WACAC,WACAC,SACAC,WACAC,mBAAmB,WACnBC,UACAC,WACAC,eACAC,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAEFC,KAEA,MAAMC,EAAY,CAChBR,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMG,EAAehB,EAAYC,EAAOH,QAAUA,EAAUA,EAC5D,MAAMmB,EAAad,IAAqB,UAAaA,IAAqB,YAAcD,EACxF,MAAMgB,EAAoBD,GAAcD,IAAiB,QACzD,MAAMG,EAAsBF,GAAcD,IAAiB,UAC3D,MAAMI,EAAiBvB,GAAYI,EAAOJ,SAE1C,MAAMwB,EAA2C,IAC5CN,EACHD,IAAKZ,EAAWY,OAAMQ,EACtBC,KAAOvB,OAAsBsB,EAAX,SAClB,gBAAkBtB,OAAsBsB,EAAXpB,EAC7BsB,OAAQtB,EACRuB,KAAOC,GACLC,IAACC,KAAI,IAAKF,EAAWG,UAAU,EAAOC,UAAU,aAAYC,SACzD9B,EAAOwB,OAGZO,OAAQd,EACRe,QAASd,EACTtB,SAAUuB,EACVc,aAAc,EACd9B,QAAU+B,IACRA,EAAIC,kBACCrC,GACHK,IAAU+B,EAAKlC,IAGnBoC,UAAWrC,EAAW,QAAU,SAChCsC,UAAWtC,EACT2B,IAACY,cAAa,IACRxB,EACJyB,MAAOC,eACPC,KAAK,OACLnB,KAAK,SACL,gBAAerB,EACfN,KAAMA,EACN+C,MAAO1C,EAAO0C,MACdC,QAAS1C,EACT2C,MAAO3B,EACPe,QAASd,EACTtB,SAAUuB,EACVf,SAAW8B,IACJpC,GACHM,IAAW8B,EAAKlC,EAAQC,WAI5BoB,GAGN,OAAIhB,EACKA,EAAaL,EAAQoB,GAGvBM,IAACmB,SAAQ,IAAKzB"}