@foxford/ui 2.133.0 → 2.134.0

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 Icon=require('../Icon/Icon.js');var FormInput=require('../FormInput/FormInput.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef((e,o)=>{const{size:n="m",name:t="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:a=!0,optionsMultiToggle:i=!0,iconProps:l={},menuProps:c={},loadingIconProps:u={},optionsEmptyIconProps:d={},loading:p,autoFocus:b,disableAutoScrollToSelectedOption:g,closeMenuOnScroll:m,scrollMonitorTarget:f,contrast:v,selectedOption:x,defaultSelectedOption:y,icon:D,addonLeft:w,inputMode:j,loadingMessage:M,loadingIcon:C,maxLength:R,multiple:I,clearable:h,onChangeInput:k,onCloseMenu:S,onOpenMenu:T,onSelectOption:O,options:P,loadOptions:F,renderOption:q,groupSelectedOptions:L,optionsMultiToggleCaption:z,optionsEmptyMessage:E,optionsEmptyIcon:B,palette:K,placeholder:X,readOnly:A,required:H,status:N,sizeXXS:$,sizeXS:U,sizeS:Z,sizeM:_,sizeL:G,sizeXL:J,form:Q,label:V,...W}=e;const Y={size:n,sizeXXS:$,sizeXS:U,sizeS:Z,sizeM:_,sizeL:G,sizeXL:J};const ee=React.useMemo(()=>W.id??`${t}-${nanoid.nanoid()}`,[t,W.id]);const oe=React.useMemo(()=>nanoid.nanoid(),[]);const ne=React.useMemo(()=>nanoid.nanoid(),[]);const[te,re]=hooks.useFilteredOptions({options:P});const[se,ae,ie]=hooks.useLoadedOptions({loadOptions:F,options:P});const[le,ce]=React.useState(()=>utils.getDropdownSelectedOption(x!==void 0?x:y,I));const[ue,de]=React.useState(()=>utils.getDropdownInputText(le,I));const[pe,be]=React.useState(!1);const[ge,me]=React.useState(!1);const fe=F?se:te;const ve=F?p??ae:p;const xe=ge&&!W.disabled;const ye=H&&le.length===0;const De=Boolean(xe||ue||pe);const we=React.useRef(null);const[je,Me]=React.useState(null);const Ce=React.useRef(null);const Re=React.useRef(null);const Ie=React.useRef(xe);const he=React.useCallback(e=>{de(e),k&&k(e)},[k]);const ke=React.useCallback(e=>{F?ie(e):re(e)},[F,ie,re]);const Se=React.useMemo(()=>misc.createDebouncedCallback(ke,150),[ke]);const preventBlur=e=>{e.target!==we.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&xe&&je&&je.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:f,onScrollStart:()=>{m&&xe&&(we.current?.focus(),me(!1))}}),React.useLayoutEffect(()=>{x!==void 0&&(I||xe||he(utils.getDropdownInputText(x)),ce(utils.getDropdownSelectedOption(x,I)))},[I,x,xe,he]),React.useEffect(()=>{xe!==Ie.current&&(xe&&T&&T(),!xe&&S&&S(),Ie.current=xe)},[xe,S,T]),React.useEffect(()=>{if(!I&&!g&&xe&&!ve&&ue.length===0&&je&&Re.current){const e=je.getBoundingClientRect();const o=Re.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout(()=>{je&&Re.current&&je.scrollTo(0,Re.current.offsetTop)},0)}},[I,g,xe,ve,ue,je]),React.useEffect(()=>{W.disabled&&be(!1)},[W.disabled]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...W,...Y,ref:o,id:ee,onColored:v,primary:a,error:N==='error',success:N==='success',focus:pe,palette:{color:W.disabled?K.labelColorDisabled:K.labelColor,backgroundColor:W.disabled?K.backgroundColorDisabled:K.backgroundColor,backgroundColorHover:W.disabled?K.backgroundColorDisabled:K.backgroundColorHover,borderColor:W.disabled?K.borderColorDisabled:K.borderColor},onClick:e=>{W.onClick&&W.onClick(e),W.disabled||(we.current?.focus(),xe?je&&e.target instanceof Node&&!je.contains(e.target)&&(me(!1),he(utils.getDropdownInputText(le,I))):(me(!0),ke(''),s&&he('')))},onPointerDown:e=>{W.onPointerDown&&W.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{W.onMouseDown&&W.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{W.onFocus&&W.onFocus(e),be(!0),we.current&&e.target===we.current&&s&&!I&&!xe&&he('')},onBlur:e=>{W.onBlur&&W.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&xe&&je&&je.contains(e.relatedTarget)||(be(!1),he(utils.getDropdownInputText(le,I)),me(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!ye||s||A?null:jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{we.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{...Y,ref:we,role:"combobox","aria-controls":ne,"aria-expanded":xe,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:De,label:V,labelId:oe,labelPosition:r,form:Q,autoFocus:b,inputMode:s?j:'none',maxLength:R,placeholder:X,readOnly:A||!s,required:ye,disabled:W.disabled,value:ue,palette:{color:K.color,colorDisabled:K.colorDisabled,placeholderColor:K.placeholderColor,placeholderColorDisabled:K.placeholderColorDisabled},onClick:e=>{xe&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;he(o),Se(o),me(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(he(utils.getDropdownInputText(le,I)),me(!1)),!constants.keyboardKeys.Space.validate(e.key)||xe&&e.currentTarget.selectionStart!==0||(e.preventDefault(),xe||(ke(''),s&&he('')),me(e=>!e)),constants.keyboardKeys.Esc.validate(e.key)&&me(!1),constants.keyboardKeys.Tab.validate(e.key)&&xe&&(e.preventDefault(),me(!1)),constants.keyboardKeys.ArrowDown.validate(e.key)&&xe&&Ce.current)if(e.preventDefault(),!I&&Re.current){const e=[...Ce.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(Ce.current);if(constants.keyboardKeys.ArrowUp.validate(e.key)&&xe&&Ce.current)if(e.preventDefault(),!I&&Re.current){const e=[...Ce.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(Ce.current)}}),le.map(e=>jsxRuntime.jsx("input",{type:"hidden",name:t,value:e.value,form:Q,disabled:W.disabled||e.disabled},e.value))]}),addonLeft:w??(D?e=>jsxRuntime.jsx(Icon.Icon,{...e.iconProps,...l,name:typeof D=='string'?D:void 0,icon:typeof D!='string'?D:void 0}):void 0),addonRight:e=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[I&&le.length>0?jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,title:le.length,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()},addonRight:e=>jsxRuntime.jsx(IconButton.IconButton,{...e.iconButtonProps,contrast:!W.disabled,onClick:e=>{e.stopPropagation(),A||(x===void 0&&ce([]),O&&O([]),we.current?.focus(),he(''),ke(''),me(!0))}})}):null,!I&&h&&le.length>0?jsxRuntime.jsx(IconButton.IconButton,{icon:jsxRuntime.jsx(index.Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:e=>{e.stopPropagation(),A||(x===void 0&&ce([]),O&&O(null),we.current?.focus(),he(''),ke(''),me(!0))}}):null,jsxRuntime.jsx(style.IconAnimated,{...e.iconProps,...l,icon:jsxRuntime.jsx(style.ChevronDown,{}),rotate:xe?'180deg':'0deg'})]}),dropdown:e=>jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:Me,open:xe,popperReferenceId:ee,secondary:!v,elevated:v,disableAutoFocus:!0,palette:{backgroundColor:K.menuBackgroundColor,borderColor:K.menuBorderColor},empty:fe.length===0,loading:ve,loadingMessage:M,loadingIcon:C,loadingIconProps:{...e.iconProps,...u},emptyMessage:E,emptyIcon:B,emptyIconProps:{...e.iconProps,...d},onKeyDown:e=>{constants.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),we.current?.focus(),me(!1)),constants.keyboardKeys.Enter.validate(e.key)&&(we.current?.focus(),he(utils.getDropdownInputText(le,I)),me(!1)),constants.keyboardKeys.Esc.validate(e.key)&&(we.current?.focus(),me(!1)),constants.keyboardKeys.Backspace.validate(e.key)&&!A&&(I||!I&&h)&&(x===void 0&&ce([]),O&&O(I?[]:null),he(''),ke(''))},children:I?jsxRuntime.jsx(DropdownMenuMultiple.DropdownMenuMultiple,{...Y,ref:Ce,inputRef:we,label:V,name:t,disabled:W.disabled,readOnly:A,menuListId:ne,inputLabelId:oe,menuOptions:fe,dropdownSelectedOption:le,inputText:ue,optionsMultiToggle:i,groupSelectedOptions:L,optionsMultiToggleCaption:z,renderOption:q,onChange:e=>{x===void 0&&ce(e),O&&O(e)}}):jsxRuntime.jsx(DropdownMenuSingle.DropdownMenuSingle,{...Y,ref:Ce,label:V,readOnly:A,multiple:I,disabled:W.disabled,status:N,menuListId:ne,inputLabelId:oe,menuOptions:fe,dropdownSelectedOption:le,selectedOptionRef:Re,renderOption:q,onChange:e=>{const o={...e};x===void 0&&(he(utils.getDropdownInputText(o)),ce(utils.getDropdownSelectedOption(o))),O&&O(o),we.current?.focus(),me(!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 Icon=require('../Icon/Icon.js');var FormInput=require('../FormInput/FormInput.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef((e,o)=>{const{size:t="m",name:n="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:M,loadingMessage:w,loadingIcon:C,maxLength:R,multiple:I,clearable:h,onChangeInput:k,onCloseMenu:S,onOpenMenu:T,onSelectOption:O,options:P,loadOptions:F,renderOption:q,groupSelectedOptions:L,optionsMultiToggleCaption:z,optionsEmptyMessage:E,optionsEmptyIcon:B,palette:K,placeholder:X,readOnly:A,required:H,status:N,sizeXXS:$,sizeXS:U,sizeS:Z,sizeM:_,sizeL:G,sizeXL:J,form:Q,label:V,...W}=e;const Y={size:t,sizeXXS:$,sizeXS:U,sizeS:Z,sizeM:_,sizeL:G,sizeXL:J};const ee=React.useMemo(()=>W.id??`${n}-${nanoid.nanoid()}`,[n,W.id]);const oe=React.useMemo(()=>nanoid.nanoid(),[]);const te=React.useMemo(()=>nanoid.nanoid(),[]);const[ne,re]=hooks.useFilteredOptions({options:P});const[se,ae,ie]=hooks.useLoadedOptions({loadOptions:F,options:P});const[le,ce]=React.useState(()=>utils.getDropdownSelectedOption(x!==void 0?x:y,I));const[ue,de]=React.useState(()=>utils.getDropdownInputText(le,I));const[pe,be]=React.useState(!1);const[ge,me]=React.useState(!1);const fe=F?se:ne;const ve=F?p??ae:p;const xe=ge&&!W.disabled;const ye=H&&le.length===0;const De=Boolean(xe||ue||pe);const je=React.useRef(null);const[Me,we]=React.useState(null);const Ce=React.useRef(null);const Re=React.useRef(null);const Ie=React.useRef(xe);const he=React.useCallback(e=>{de(e),k&&k(e)},[k]);const ke=React.useCallback(e=>{F?ie(e):re(e)},[F,ie,re]);const Se=React.useMemo(()=>misc.createDebouncedCallback(ke,150),[ke]);const preventBlur=e=>{e.target!==je.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&xe&&Me&&Me.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:f,onScrollStart:()=>{m&&xe&&(je.current?.focus(),me(!1))}}),React.useLayoutEffect(()=>{x!==void 0&&(I||xe||he(utils.getDropdownInputText(x)),ce(utils.getDropdownSelectedOption(x,I)))},[I,x,xe,he]),React.useEffect(()=>{xe!==Ie.current&&(xe&&T&&T(),!xe&&S&&S(),Ie.current=xe)},[xe,S,T]),React.useEffect(()=>{if(!I&&!g&&xe&&!ve&&ue.length===0&&Me&&Re.current){const e=Me.getBoundingClientRect();const o=Re.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout(()=>{Me&&Re.current&&Me.scrollTo(0,Re.current.offsetTop)},0)}},[I,g,xe,ve,ue,Me]),React.useEffect(()=>{W.disabled&&be(!1)},[W.disabled]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...W,...Y,ref:o,id:ee,onColored:v,primary:a,error:N==='error',success:N==='success',focus:pe,palette:{color:W.disabled?K.labelColorDisabled:K.labelColor,backgroundColor:W.disabled?K.backgroundColorDisabled:K.backgroundColor,backgroundColorHover:W.disabled?K.backgroundColorDisabled:K.backgroundColorHover,borderColor:W.disabled?K.borderColorDisabled:K.borderColor},onClick:e=>{W.onClick&&W.onClick(e),W.disabled||(je.current?.focus(),xe?Me&&e.target instanceof Node&&!Me.contains(e.target)&&(me(!1),he(utils.getDropdownInputText(le,I))):(me(!0),ke(''),s&&he('')))},onPointerDown:e=>{W.onPointerDown&&W.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{W.onMouseDown&&W.onMouseDown(e),preventBlur(e)},onFocus:e=>{W.onFocus&&W.onFocus(e),be(!0),je.current&&e.target===je.current&&s&&!I&&!xe&&he('')},onBlur:e=>{W.onBlur&&W.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&xe&&Me&&Me.contains(e.relatedTarget)||(be(!1),he(utils.getDropdownInputText(le,I)),me(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!ye||s||A?null:jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{je.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{...Y,ref:je,role:"combobox","aria-controls":te,"aria-expanded":xe,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:De,label:V,labelId:oe,labelPosition:r,form:Q,autoFocus:b,inputMode:s?M:'none',maxLength:R,placeholder:X,readOnly:A||!s,required:ye,disabled:W.disabled,value:ue,palette:{color:K.color,colorDisabled:K.colorDisabled,placeholderColor:K.placeholderColor,placeholderColorDisabled:K.placeholderColorDisabled},onClick:e=>{xe&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;he(o),Se(o),me(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(he(utils.getDropdownInputText(le,I)),me(!1)),!constants.keyboardKeys.Space.validate(e.key)||xe&&e.currentTarget.selectionStart!==0||(e.preventDefault(),xe||(ke(''),s&&he('')),me(e=>!e)),constants.keyboardKeys.Esc.validate(e.key)&&me(!1),constants.keyboardKeys.Tab.validate(e.key)&&xe&&(e.preventDefault(),me(!1)),constants.keyboardKeys.ArrowDown.validate(e.key)&&xe&&Ce.current)if(e.preventDefault(),!I&&Re.current){const e=[...Ce.current.children];const o=e.findIndex(e=>e.contains(Re.current));const t=e[o+1]??e[0];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusFirstFocusable(Ce.current);if(constants.keyboardKeys.ArrowUp.validate(e.key)&&xe&&Ce.current)if(e.preventDefault(),!I&&Re.current){const e=[...Ce.current.children];const o=e.findIndex(e=>e.contains(Re.current));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusLastFocusable(Ce.current)}}),le.map(e=>jsxRuntime.jsx("input",{type:"hidden",name:n,value:e.value,form:Q,disabled:W.disabled||e.disabled},e.value))]}),addonLeft:j??(D?e=>jsxRuntime.jsx(Icon.Icon,{...e.iconProps,...l,name:typeof D=='string'?D:void 0,icon:typeof D!='string'?D:void 0}):void 0),addonRight:e=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[I&&le.length>0?jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,title:le.length,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()},addonRight:e=>jsxRuntime.jsx(IconButton.IconButton,{...e.iconButtonProps,contrast:!W.disabled,onClick:e=>{e.stopPropagation(),A||(x===void 0&&ce([]),O&&O([]),je.current?.focus(),he(''),ke(''),me(!0))}})}):null,!I&&h&&le.length>0?jsxRuntime.jsx(IconButton.IconButton,{icon:jsxRuntime.jsx(index.Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:e=>{e.stopPropagation(),A||(x===void 0&&ce([]),O&&O(null),je.current?.focus(),he(''),ke(''),me(!0))}}):null,jsxRuntime.jsx(style.IconAnimated,{...e.iconProps,...l,icon:jsxRuntime.jsx(style.ChevronDown,{}),rotate:xe?'180deg':'0deg'})]}),dropdown:e=>jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:we,open:xe,popperReferenceId:ee,secondary:!v,elevated:v,disableAutoFocus:!0,palette:{backgroundColor:K.menuBackgroundColor,borderColor:K.menuBorderColor},empty:fe.length===0,loading:ve,loadingMessage:w,loadingIcon:C,loadingIconProps:{...e.iconProps,...u},emptyMessage:E,emptyIcon:B,emptyIconProps:{...e.iconProps,...d},onKeyDown:e=>{constants.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),je.current?.focus(),me(!1)),constants.keyboardKeys.Enter.validate(e.key)&&(je.current?.focus(),he(utils.getDropdownInputText(le,I)),me(!1)),constants.keyboardKeys.Esc.validate(e.key)&&(je.current?.focus(),me(!1)),constants.keyboardKeys.Backspace.validate(e.key)&&!A&&(I||!I&&h)&&(x===void 0&&ce([]),O&&O(I?[]:null),he(''),ke(''))},children:I?jsxRuntime.jsx(DropdownMenuMultiple.DropdownMenuMultiple,{...Y,ref:Ce,inputRef:je,label:V,name:n,disabled:W.disabled,readOnly:A,menuListId:te,inputLabelId:oe,menuOptions:fe,dropdownSelectedOption:le,inputText:ue,optionsMultiToggle:i,groupSelectedOptions:L,optionsMultiToggleCaption:z,renderOption:q,onChange:e=>{x===void 0&&ce(e),O&&O(e)}}):jsxRuntime.jsx(DropdownMenuSingle.DropdownMenuSingle,{...Y,ref:Ce,label:V,readOnly:A,multiple:I,disabled:W.disabled,status:N,menuListId:te,inputLabelId:oe,menuOptions:fe,dropdownSelectedOption:le,selectedOptionRef:Re,renderOption:q,onChange:e=>{const o={...e};x===void 0&&(he(utils.getDropdownInputText(o)),ce(utils.getDropdownSelectedOption(o))),O&&O(o),je.current?.focus(),me(!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 { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n  forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n    const {\n      size = 'm',\n      name = 'fox-dropdown',\n      labelPosition = 'dynamic',\n      searchable = true,\n      primary = true,\n      optionsMultiToggle = true,\n      iconProps = {},\n      menuProps = {},\n      loadingIconProps = {},\n      optionsEmptyIconProps = {},\n      loading,\n      autoFocus,\n      disableAutoScrollToSelectedOption,\n      closeMenuOnScroll,\n      scrollMonitorTarget,\n      contrast,\n      selectedOption,\n      defaultSelectedOption,\n      icon,\n      addonLeft,\n      inputMode,\n      loadingMessage,\n      loadingIcon,\n      maxLength,\n      multiple,\n      clearable,\n      onChangeInput,\n      onCloseMenu,\n      onOpenMenu,\n      onSelectOption,\n      options,\n      loadOptions,\n      renderOption,\n      groupSelectedOptions,\n      optionsMultiToggleCaption,\n      optionsEmptyMessage,\n      optionsEmptyIcon,\n      palette,\n      placeholder,\n      readOnly,\n      required,\n      status,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      form,\n      label,\n      ...rootProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n    const inputLabelId = useMemo(() => nanoid(), [])\n    const menuListId = useMemo(() => nanoid(), [])\n\n    const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n      options,\n    })\n\n    const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n      loadOptions,\n      options,\n    })\n\n    const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n      getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n    )\n\n    const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n    const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n    const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n    const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n    const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n    const menuOpen = menuOpenRequest && !rootProps.disabled\n\n    const inputRequired = required && dropdownSelectedOption.length === 0\n    const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n    const menuListRef = useRef<HTMLUListElement>(null)\n    const selectedOptionRef = useRef<HTMLElement>(null)\n    const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n    const updateInputText = useCallback(\n      (inputTextValue: string) => {\n        setInputText(inputTextValue)\n\n        if (onChangeInput) {\n          onChangeInput(inputTextValue)\n        }\n      },\n      [onChangeInput]\n    )\n\n    const updateOptions = useCallback(\n      (inputTextValue: string) => {\n        if (loadOptions) {\n          getLoadedOptions(inputTextValue)\n        } else {\n          getFilteredOptions(inputTextValue)\n        }\n      },\n      [loadOptions, getLoadedOptions, getFilteredOptions]\n    )\n\n    const updateOptionsDebounced = useMemo(() => {\n      return createDebouncedCallback(updateOptions, 150)\n    }, [updateOptions])\n\n    const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (\n        evt.target !== inputRef.current &&\n        evt.target instanceof Node &&\n        (evt.currentTarget.contains(evt.target) ||\n          (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n      ) {\n        evt.preventDefault()\n      }\n    }\n\n    useScrollMonitor({\n      target: scrollMonitorTarget,\n      onScrollStart: () => {\n        if (closeMenuOnScroll && menuOpen) {\n          inputRef.current?.focus()\n          setMenuOpenRequest(false)\n        }\n      },\n    })\n\n    useLayoutEffect(() => {\n      if (selectedOption === undefined) return\n\n      if (!multiple && !menuOpen) {\n        updateInputText(getDropdownInputText(selectedOption))\n      }\n      setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n    }, [multiple, selectedOption, menuOpen, updateInputText])\n\n    useEffect(() => {\n      if (menuOpen === menuOpenPrevRef.current) return\n\n      if (menuOpen && onOpenMenu) onOpenMenu()\n      if (!menuOpen && onCloseMenu) onCloseMenu()\n\n      menuOpenPrevRef.current = menuOpen\n    }, [menuOpen, onCloseMenu, onOpenMenu])\n\n    useEffect(() => {\n      if (\n        !multiple &&\n        !disableAutoScrollToSelectedOption &&\n        menuOpen &&\n        !menuOptionsLoading &&\n        inputText.length === 0 &&\n        menuRef &&\n        selectedOptionRef.current\n      ) {\n        const menuRect = menuRef.getBoundingClientRect()\n        const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n        if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n          setTimeout(() => {\n            if (menuRef && selectedOptionRef.current) {\n              menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n            }\n          }, 0)\n        }\n      }\n    }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n    useEffect(() => {\n      if (rootProps.disabled) {\n        setFocusWithin(false)\n      }\n    }, [rootProps.disabled])\n\n    return (\n      <FormInputLabel\n        {...rootProps}\n        {...sizeProps}\n        ref={ref}\n        id={formInputLabelId}\n        onColored={contrast}\n        primary={primary}\n        error={status === 'error'}\n        success={status === 'success'}\n        focus={focusWithin}\n        palette={{\n          color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n          backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={(evt) => {\n          if (rootProps.onClick) rootProps.onClick(evt)\n\n          if (rootProps.disabled) return\n\n          inputRef.current?.focus()\n\n          if (!menuOpen) {\n            setMenuOpenRequest(true)\n\n            updateOptions('')\n            if (searchable) {\n              updateInputText('')\n            }\n          } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n            setMenuOpenRequest(false)\n            updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          }\n        }}\n        onPointerDown={(evt) => {\n          if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n          preventBlur(evt)\n        }}\n        onMouseDown={(evt) => {\n          if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n          if (!window.PointerEvent) preventBlur(evt)\n        }}\n        onFocus={(evt) => {\n          if (rootProps.onFocus) rootProps.onFocus(evt)\n\n          setFocusWithin(true)\n\n          if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n            updateInputText('')\n          }\n        }}\n        onBlur={(evt) => {\n          if (rootProps.onBlur) rootProps.onBlur(evt)\n\n          if (\n            evt.currentTarget.contains(evt.relatedTarget) ||\n            (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n          ) {\n            return\n          }\n\n          setFocusWithin(false)\n          updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          setMenuOpenRequest(false)\n        }}\n        input={\n          <>\n            {inputRequired && !searchable && !readOnly ? (\n              <Styled.InputMimic\n                required\n                type='text'\n                inputMode='none'\n                form={form}\n                tabIndex={-1}\n                onFocus={() => {\n                  inputRef.current?.focus()\n                }}\n              />\n            ) : null}\n            <FormInput\n              {...sizeProps}\n              ref={inputRef}\n              role='combobox'\n              aria-controls={menuListId}\n              aria-expanded={menuOpen}\n              type='text'\n              autoComplete='off'\n              autoCapitalize='off'\n              autoCorrect='off'\n              spellCheck='false'\n              active={inputActive}\n              label={label}\n              labelId={inputLabelId}\n              labelPosition={labelPosition}\n              form={form}\n              autoFocus={autoFocus}\n              inputMode={searchable ? inputMode : 'none'}\n              maxLength={maxLength}\n              placeholder={placeholder}\n              readOnly={readOnly || !searchable}\n              required={inputRequired}\n              disabled={rootProps.disabled}\n              value={inputText}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n              onClick={(evt) => {\n                if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n                  evt.stopPropagation()\n                }\n              }}\n              onChange={(evt) => {\n                const inputValue = evt.currentTarget.value\n\n                updateInputText(inputValue)\n                updateOptionsDebounced(inputValue)\n                setMenuOpenRequest(true)\n              }}\n              onKeyDown={(evt) => {\n                if (keyboardKeys.Enter.validate(evt.key)) {\n                  updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n                  evt.preventDefault()\n\n                  if (!menuOpen) {\n                    updateOptions('')\n                    if (searchable) {\n                      updateInputText('')\n                    }\n                  }\n\n                  setMenuOpenRequest((prev) => !prev)\n                }\n\n                if (keyboardKeys.Esc.validate(evt.key)) {\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n                  evt.preventDefault()\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusFirstFocusable(menuListRef.current)\n                  }\n                }\n\n                if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusLastFocusable(menuListRef.current)\n                  }\n                }\n              }}\n            />\n            {dropdownSelectedOption.map((option) => (\n              <input\n                key={option.value}\n                type='hidden'\n                name={name}\n                value={option.value}\n                form={form}\n                disabled={rootProps.disabled || option.disabled}\n              />\n            ))}\n          </>\n        }\n        addonLeft={\n          addonLeft ??\n          (icon\n            ? (addonLeftProps) => (\n                <Icon\n                  {...addonLeftProps.iconProps}\n                  {...iconProps}\n                  name={typeof icon === 'string' ? icon : undefined}\n                  icon={typeof icon !== 'string' ? icon : undefined}\n                />\n              )\n            : undefined)\n        }\n        addonRight={(addonRightProps) => (\n          <>\n            {multiple && dropdownSelectedOption.length > 0 ? (\n              <Chip\n                size='xs'\n                active\n                black\n                disabled={rootProps.disabled}\n                cursor={rootProps.disabled ? 'not-allowed' : undefined}\n                title={dropdownSelectedOption.length}\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                addonRight={(chipAddonRightProps) => (\n                  <IconButton\n                    {...chipAddonRightProps.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              />\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\n              {...addonRightProps.iconProps}\n              {...iconProps}\n              icon={<Styled.ChevronDown />}\n              rotate={menuOpen ? '180deg' : '0deg'}\n            />\n          </>\n        )}\n        dropdown={(dropdownProps) => (\n          <DropdownMenu\n            {...menuProps}\n            setRef={setMenuRef}\n            open={menuOpen}\n            popperReferenceId={formInputLabelId}\n            secondary={!contrast}\n            elevated={contrast}\n            disableAutoFocus\n            palette={{\n              backgroundColor: palette.menuBackgroundColor,\n              borderColor: palette.menuBorderColor,\n            }}\n            empty={menuOptions.length === 0}\n            loading={menuOptionsLoading}\n            loadingMessage={loadingMessage}\n            loadingIcon={loadingIcon}\n            loadingIconProps={{\n              ...dropdownProps.iconProps,\n              ...loadingIconProps,\n            }}\n            emptyMessage={optionsEmptyMessage}\n            emptyIcon={optionsEmptyIcon}\n            emptyIconProps={{\n              ...dropdownProps.iconProps,\n              ...optionsEmptyIconProps,\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.Tab.validate(evt.key)) {\n                evt.preventDefault()\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Enter.validate(evt.key)) {\n                inputRef.current?.focus()\n                updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Esc.validate(evt.key)) {\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n                if (selectedOption === undefined) {\n                  setDropdownSelectedOption([])\n                }\n\n                if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n                updateInputText('')\n                updateOptions('')\n              }\n            }}\n          >\n            {multiple ? (\n              <DropdownMenuMultiple\n                {...sizeProps}\n                ref={menuListRef}\n                inputRef={inputRef}\n                label={label}\n                name={name}\n                disabled={rootProps.disabled}\n                readOnly={readOnly}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                inputText={inputText}\n                optionsMultiToggle={optionsMultiToggle}\n                groupSelectedOptions={groupSelectedOptions}\n                optionsMultiToggleCaption={optionsMultiToggleCaption}\n                renderOption={renderOption}\n                onChange={(update) => {\n                  if (selectedOption === undefined) {\n                    setDropdownSelectedOption(update)\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n                }}\n              />\n            ) : (\n              <DropdownMenuSingle\n                {...sizeProps}\n                ref={menuListRef}\n                label={label}\n                readOnly={readOnly}\n                multiple={multiple}\n                disabled={rootProps.disabled}\n                status={status}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                selectedOptionRef={selectedOptionRef}\n                renderOption={renderOption}\n                onChange={(option) => {\n                  const update = { ...option }\n\n                  if (selectedOption === undefined) {\n                    updateInputText(getDropdownInputText(update))\n                    setDropdownSelectedOption(getDropdownSelectedOption(update))\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n\n                  inputRef.current?.focus()\n                  setMenuOpenRequest(false)\n                }}\n              />\n            )}\n          </DropdownMenu>\n        )}\n      />\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","disabled","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","color","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","addonLeftProps","Icon","addonRight","addonRightProps","Chip","black","cursor","title","colorHover","chipAddonRightProps","IconButton","iconButtonProps","Close","square","rotate","dropdown","dropdownProps","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","sizes","SIZES","displayName"],"mappings":"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"}
+{"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 { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n  forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n    const {\n      size = 'm',\n      name = 'fox-dropdown',\n      labelPosition = 'dynamic',\n      searchable = true,\n      primary = true,\n      optionsMultiToggle = true,\n      iconProps = {},\n      menuProps = {},\n      loadingIconProps = {},\n      optionsEmptyIconProps = {},\n      loading,\n      autoFocus,\n      disableAutoScrollToSelectedOption,\n      closeMenuOnScroll,\n      scrollMonitorTarget,\n      contrast,\n      selectedOption,\n      defaultSelectedOption,\n      icon,\n      addonLeft,\n      inputMode,\n      loadingMessage,\n      loadingIcon,\n      maxLength,\n      multiple,\n      clearable,\n      onChangeInput,\n      onCloseMenu,\n      onOpenMenu,\n      onSelectOption,\n      options,\n      loadOptions,\n      renderOption,\n      groupSelectedOptions,\n      optionsMultiToggleCaption,\n      optionsEmptyMessage,\n      optionsEmptyIcon,\n      palette,\n      placeholder,\n      readOnly,\n      required,\n      status,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      form,\n      label,\n      ...rootProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n    const inputLabelId = useMemo(() => nanoid(), [])\n    const menuListId = useMemo(() => nanoid(), [])\n\n    const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n      options,\n    })\n\n    const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n      loadOptions,\n      options,\n    })\n\n    const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n      getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n    )\n\n    const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n    const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n    const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n    const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n    const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n    const menuOpen = menuOpenRequest && !rootProps.disabled\n\n    const inputRequired = required && dropdownSelectedOption.length === 0\n    const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n    const menuListRef = useRef<HTMLUListElement>(null)\n    const selectedOptionRef = useRef<HTMLElement>(null)\n    const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n    const updateInputText = useCallback(\n      (inputTextValue: string) => {\n        setInputText(inputTextValue)\n\n        if (onChangeInput) {\n          onChangeInput(inputTextValue)\n        }\n      },\n      [onChangeInput]\n    )\n\n    const updateOptions = useCallback(\n      (inputTextValue: string) => {\n        if (loadOptions) {\n          getLoadedOptions(inputTextValue)\n        } else {\n          getFilteredOptions(inputTextValue)\n        }\n      },\n      [loadOptions, getLoadedOptions, getFilteredOptions]\n    )\n\n    const updateOptionsDebounced = useMemo(() => {\n      return createDebouncedCallback(updateOptions, 150)\n    }, [updateOptions])\n\n    const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (\n        evt.target !== inputRef.current &&\n        evt.target instanceof Node &&\n        (evt.currentTarget.contains(evt.target) ||\n          (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n      ) {\n        evt.preventDefault()\n      }\n    }\n\n    useScrollMonitor({\n      target: scrollMonitorTarget,\n      onScrollStart: () => {\n        if (closeMenuOnScroll && menuOpen) {\n          inputRef.current?.focus()\n          setMenuOpenRequest(false)\n        }\n      },\n    })\n\n    useLayoutEffect(() => {\n      if (selectedOption === undefined) return\n\n      if (!multiple && !menuOpen) {\n        updateInputText(getDropdownInputText(selectedOption))\n      }\n      setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n    }, [multiple, selectedOption, menuOpen, updateInputText])\n\n    useEffect(() => {\n      if (menuOpen === menuOpenPrevRef.current) return\n\n      if (menuOpen && onOpenMenu) onOpenMenu()\n      if (!menuOpen && onCloseMenu) onCloseMenu()\n\n      menuOpenPrevRef.current = menuOpen\n    }, [menuOpen, onCloseMenu, onOpenMenu])\n\n    useEffect(() => {\n      if (\n        !multiple &&\n        !disableAutoScrollToSelectedOption &&\n        menuOpen &&\n        !menuOptionsLoading &&\n        inputText.length === 0 &&\n        menuRef &&\n        selectedOptionRef.current\n      ) {\n        const menuRect = menuRef.getBoundingClientRect()\n        const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n        if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n          setTimeout(() => {\n            if (menuRef && selectedOptionRef.current) {\n              menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n            }\n          }, 0)\n        }\n      }\n    }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n    useEffect(() => {\n      if (rootProps.disabled) {\n        setFocusWithin(false)\n      }\n    }, [rootProps.disabled])\n\n    return (\n      <FormInputLabel\n        {...rootProps}\n        {...sizeProps}\n        ref={ref}\n        id={formInputLabelId}\n        onColored={contrast}\n        primary={primary}\n        error={status === 'error'}\n        success={status === 'success'}\n        focus={focusWithin}\n        palette={{\n          color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n          backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={(evt) => {\n          if (rootProps.onClick) rootProps.onClick(evt)\n\n          if (rootProps.disabled) return\n\n          inputRef.current?.focus()\n\n          if (!menuOpen) {\n            setMenuOpenRequest(true)\n\n            updateOptions('')\n            if (searchable) {\n              updateInputText('')\n            }\n          } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n            setMenuOpenRequest(false)\n            updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          }\n        }}\n        onPointerDown={(evt) => {\n          if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n          preventBlur(evt)\n        }}\n        onMouseDown={(evt) => {\n          if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n          preventBlur(evt)\n        }}\n        onFocus={(evt) => {\n          if (rootProps.onFocus) rootProps.onFocus(evt)\n\n          setFocusWithin(true)\n\n          if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n            updateInputText('')\n          }\n        }}\n        onBlur={(evt) => {\n          if (rootProps.onBlur) rootProps.onBlur(evt)\n\n          if (\n            evt.currentTarget.contains(evt.relatedTarget) ||\n            (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n          ) {\n            return\n          }\n\n          setFocusWithin(false)\n          updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          setMenuOpenRequest(false)\n        }}\n        input={\n          <>\n            {inputRequired && !searchable && !readOnly ? (\n              <Styled.InputMimic\n                required\n                type='text'\n                inputMode='none'\n                form={form}\n                tabIndex={-1}\n                onFocus={() => {\n                  inputRef.current?.focus()\n                }}\n              />\n            ) : null}\n            <FormInput\n              {...sizeProps}\n              ref={inputRef}\n              role='combobox'\n              aria-controls={menuListId}\n              aria-expanded={menuOpen}\n              type='text'\n              autoComplete='off'\n              autoCapitalize='off'\n              autoCorrect='off'\n              spellCheck='false'\n              active={inputActive}\n              label={label}\n              labelId={inputLabelId}\n              labelPosition={labelPosition}\n              form={form}\n              autoFocus={autoFocus}\n              inputMode={searchable ? inputMode : 'none'}\n              maxLength={maxLength}\n              placeholder={placeholder}\n              readOnly={readOnly || !searchable}\n              required={inputRequired}\n              disabled={rootProps.disabled}\n              value={inputText}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n              onClick={(evt) => {\n                if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n                  evt.stopPropagation()\n                }\n              }}\n              onChange={(evt) => {\n                const inputValue = evt.currentTarget.value\n\n                updateInputText(inputValue)\n                updateOptionsDebounced(inputValue)\n                setMenuOpenRequest(true)\n              }}\n              onKeyDown={(evt) => {\n                if (keyboardKeys.Enter.validate(evt.key)) {\n                  updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n                  evt.preventDefault()\n\n                  if (!menuOpen) {\n                    updateOptions('')\n                    if (searchable) {\n                      updateInputText('')\n                    }\n                  }\n\n                  setMenuOpenRequest((prev) => !prev)\n                }\n\n                if (keyboardKeys.Esc.validate(evt.key)) {\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n                  evt.preventDefault()\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusFirstFocusable(menuListRef.current)\n                  }\n                }\n\n                if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusLastFocusable(menuListRef.current)\n                  }\n                }\n              }}\n            />\n            {dropdownSelectedOption.map((option) => (\n              <input\n                key={option.value}\n                type='hidden'\n                name={name}\n                value={option.value}\n                form={form}\n                disabled={rootProps.disabled || option.disabled}\n              />\n            ))}\n          </>\n        }\n        addonLeft={\n          addonLeft ??\n          (icon\n            ? (addonLeftProps) => (\n                <Icon\n                  {...addonLeftProps.iconProps}\n                  {...iconProps}\n                  name={typeof icon === 'string' ? icon : undefined}\n                  icon={typeof icon !== 'string' ? icon : undefined}\n                />\n              )\n            : undefined)\n        }\n        addonRight={(addonRightProps) => (\n          <>\n            {multiple && dropdownSelectedOption.length > 0 ? (\n              <Chip\n                size='xs'\n                active\n                black\n                disabled={rootProps.disabled}\n                cursor={rootProps.disabled ? 'not-allowed' : undefined}\n                title={dropdownSelectedOption.length}\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                addonRight={(chipAddonRightProps) => (\n                  <IconButton\n                    {...chipAddonRightProps.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              />\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\n              {...addonRightProps.iconProps}\n              {...iconProps}\n              icon={<Styled.ChevronDown />}\n              rotate={menuOpen ? '180deg' : '0deg'}\n            />\n          </>\n        )}\n        dropdown={(dropdownProps) => (\n          <DropdownMenu\n            {...menuProps}\n            setRef={setMenuRef}\n            open={menuOpen}\n            popperReferenceId={formInputLabelId}\n            secondary={!contrast}\n            elevated={contrast}\n            disableAutoFocus\n            palette={{\n              backgroundColor: palette.menuBackgroundColor,\n              borderColor: palette.menuBorderColor,\n            }}\n            empty={menuOptions.length === 0}\n            loading={menuOptionsLoading}\n            loadingMessage={loadingMessage}\n            loadingIcon={loadingIcon}\n            loadingIconProps={{\n              ...dropdownProps.iconProps,\n              ...loadingIconProps,\n            }}\n            emptyMessage={optionsEmptyMessage}\n            emptyIcon={optionsEmptyIcon}\n            emptyIconProps={{\n              ...dropdownProps.iconProps,\n              ...optionsEmptyIconProps,\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.Tab.validate(evt.key)) {\n                evt.preventDefault()\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Enter.validate(evt.key)) {\n                inputRef.current?.focus()\n                updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Esc.validate(evt.key)) {\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n                if (selectedOption === undefined) {\n                  setDropdownSelectedOption([])\n                }\n\n                if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n                updateInputText('')\n                updateOptions('')\n              }\n            }}\n          >\n            {multiple ? (\n              <DropdownMenuMultiple\n                {...sizeProps}\n                ref={menuListRef}\n                inputRef={inputRef}\n                label={label}\n                name={name}\n                disabled={rootProps.disabled}\n                readOnly={readOnly}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                inputText={inputText}\n                optionsMultiToggle={optionsMultiToggle}\n                groupSelectedOptions={groupSelectedOptions}\n                optionsMultiToggleCaption={optionsMultiToggleCaption}\n                renderOption={renderOption}\n                onChange={(update) => {\n                  if (selectedOption === undefined) {\n                    setDropdownSelectedOption(update)\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n                }}\n              />\n            ) : (\n              <DropdownMenuSingle\n                {...sizeProps}\n                ref={menuListRef}\n                label={label}\n                readOnly={readOnly}\n                multiple={multiple}\n                disabled={rootProps.disabled}\n                status={status}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                selectedOptionRef={selectedOptionRef}\n                renderOption={renderOption}\n                onChange={(option) => {\n                  const update = { ...option }\n\n                  if (selectedOption === undefined) {\n                    updateInputText(getDropdownInputText(update))\n                    setDropdownSelectedOption(getDropdownSelectedOption(update))\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n\n                  inputRef.current?.focus()\n                  setMenuOpenRequest(false)\n                }}\n              />\n            )}\n          </DropdownMenu>\n        )}\n      />\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","disabled","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","color","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","addonLeftProps","Icon","addonRight","addonRightProps","Chip","black","cursor","title","colorHover","window","PointerEvent","chipAddonRightProps","IconButton","iconButtonProps","Close","square","rotate","dropdown","dropdownProps","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","sizes","SIZES","displayName"],"mappings":"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"}

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}from'./sizes.mjs';import{getDropdownSelectedOption,getDropdownInputText}from'./utils.mjs';import{IconAnimated,ChevronDown,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{Icon}from'../Icon/Icon.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:y,selectedOption:C,defaultSelectedOption:D,icon:w,addonLeft:M,inputMode:I,loadingMessage:k,loadingIcon:v,maxLength:h,multiple:x,clearable:S,onChangeInput:j,onCloseMenu:O,onOpenMenu:T,onSelectOption:F,options:P,loadOptions:E,renderOption:L,groupSelectedOptions:z,optionsMultiToggleCaption:B,optionsEmptyMessage:R,optionsEmptyIcon:K,palette:N,placeholder:A,readOnly:X,required:H,status:q,sizeXXS:Z,sizeXS:$,sizeS:_,sizeM:U,sizeL:G,sizeXL:J,form:Q,label:V,...W}=o;const Y={size:t,sizeXXS:Z,sizeXS:$,sizeS:_,sizeM:U,sizeL:G,sizeXL:J};const oo=useMemo(()=>W.id??`${n}-${nanoid()}`,[n,W.id]);const eo=useMemo(()=>nanoid(),[]);const to=useMemo(()=>nanoid(),[]);const[no,ro]=useFilteredOptions({options:P});const[so,lo,ao]=useLoadedOptions({loadOptions:E,options:P});const[io,co]=useState(()=>getDropdownSelectedOption(C!==void 0?C:D,x));const[uo,po]=useState(()=>getDropdownInputText(io,x));const[mo,fo]=useState(!1);const[bo,go]=useState(!1);const yo=E?so:no;const Co=E?p??lo:p;const Do=bo&&!W.disabled;const wo=H&&io.length===0;const Mo=Boolean(Do||uo||mo);const Io=useRef(null);const[ko,vo]=useState(null);const ho=useRef(null);const xo=useRef(null);const So=useRef(Do);const jo=useCallback(o=>{po(o),j&&j(o)},[j]);const Oo=useCallback(o=>{E?ao(o):ro(o)},[E,ao,ro]);const To=useMemo(()=>createDebouncedCallback(Oo,150),[Oo]);const preventBlur=o=>{o.target!==Io.current&&o.target instanceof Node&&(o.currentTarget.contains(o.target)||d.renderInPortal&&Do&&ko&&ko.contains(o.target))&&o.preventDefault()};return useScrollMonitor({target:g,onScrollStart:()=>{b&&Do&&(Io.current?.focus(),go(!1))}}),useLayoutEffect(()=>{C!==void 0&&(x||Do||jo(getDropdownInputText(C)),co(getDropdownSelectedOption(C,x)))},[x,C,Do,jo]),useEffect(()=>{Do!==So.current&&(Do&&T&&T(),!Do&&O&&O(),So.current=Do)},[Do,O,T]),useEffect(()=>{if(!x&&!f&&Do&&!Co&&uo.length===0&&ko&&xo.current){const o=ko.getBoundingClientRect();const e=xo.current.getBoundingClientRect();(e.top<o.top||e.bottom>o.bottom)&&setTimeout(()=>{ko&&xo.current&&ko.scrollTo(0,xo.current.offsetTop)},0)}},[x,f,Do,Co,uo,ko]),useEffect(()=>{W.disabled&&fo(!1)},[W.disabled]),jsx(FormInputLabel,{...W,...Y,ref:e,id:oo,onColored:y,primary:l,error:q==='error',success:q==='success',focus:mo,palette:{color:W.disabled?N.labelColorDisabled:N.labelColor,backgroundColor:W.disabled?N.backgroundColorDisabled:N.backgroundColor,backgroundColorHover:W.disabled?N.backgroundColorDisabled:N.backgroundColorHover,borderColor:W.disabled?N.borderColorDisabled:N.borderColor},onClick:o=>{W.onClick&&W.onClick(o),W.disabled||(Io.current?.focus(),Do?ko&&o.target instanceof Node&&!ko.contains(o.target)&&(go(!1),jo(getDropdownInputText(io,x))):(go(!0),Oo(''),s&&jo('')))},onPointerDown:o=>{W.onPointerDown&&W.onPointerDown(o),preventBlur(o)},onMouseDown:o=>{W.onMouseDown&&W.onMouseDown(o),window.PointerEvent||preventBlur(o)},onFocus:o=>{W.onFocus&&W.onFocus(o),fo(!0),Io.current&&o.target===Io.current&&s&&!x&&!Do&&jo('')},onBlur:o=>{W.onBlur&&W.onBlur(o),o.currentTarget.contains(o.relatedTarget)||d.renderInPortal&&Do&&ko&&ko.contains(o.relatedTarget)||(fo(!1),jo(getDropdownInputText(io,x)),go(!1))},input:jsxs(Fragment,{children:[!wo||s||X?null:jsx(InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{Io.current?.focus()}}),jsx(FormInput,{...Y,ref:Io,role:"combobox","aria-controls":to,"aria-expanded":Do,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:Mo,label:V,labelId:eo,labelPosition:r,form:Q,autoFocus:m,inputMode:s?I:'none',maxLength:h,placeholder:A,readOnly:X||!s,required:wo,disabled:W.disabled,value:uo,palette:{color:N.color,colorDisabled:N.colorDisabled,placeholderColor:N.placeholderColor,placeholderColorDisabled:N.placeholderColorDisabled},onClick:o=>{Do&&o.currentTarget.selectionStart!==o.currentTarget.selectionEnd&&o.stopPropagation()},onChange:o=>{const e=o.currentTarget.value;jo(e),To(e),go(!0)},onKeyDown:o=>{if(keyboardKeys.Enter.validate(o.key)&&(jo(getDropdownInputText(io,x)),go(!1)),!keyboardKeys.Space.validate(o.key)||Do&&o.currentTarget.selectionStart!==0||(o.preventDefault(),Do||(Oo(''),s&&jo('')),go(o=>!o)),keyboardKeys.Esc.validate(o.key)&&go(!1),keyboardKeys.Tab.validate(o.key)&&Do&&(o.preventDefault(),go(!1)),keyboardKeys.ArrowDown.validate(o.key)&&Do&&ho.current)if(o.preventDefault(),!x&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const t=o[e+1]??o[0];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusFirstFocusable(ho.current);if(keyboardKeys.ArrowUp.validate(o.key)&&Do&&ho.current)if(o.preventDefault(),!x&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const t=o[e-1]??o[o.length-1];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusLastFocusable(ho.current)}}),io.map(o=>jsx("input",{type:"hidden",name:n,value:o.value,form:Q,disabled:W.disabled||o.disabled},o.value))]}),addonLeft:M??(w?o=>jsx(Icon,{...o.iconProps,...i,name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0}):void 0),addonRight:o=>jsxs(Fragment,{children:[x&&io.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,title:io.length,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()},addonRight:o=>jsx(IconButton,{...o.iconButtonProps,contrast:!W.disabled,onClick:o=>{o.stopPropagation(),X||(C===void 0&&co([]),F&&F([]),Io.current?.focus(),jo(''),Oo(''),go(!0))}})}):null,!x&&S&&io.length>0?jsx(IconButton,{icon:jsx(Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:o=>{o.stopPropagation(),X||(C===void 0&&co([]),F&&F(null),Io.current?.focus(),jo(''),Oo(''),go(!0))}}):null,jsx(IconAnimated,{...o.iconProps,...i,icon:jsx(ChevronDown,{}),rotate:Do?'180deg':'0deg'})]}),dropdown:o=>jsx(DropdownMenu,{...d,setRef:vo,open:Do,popperReferenceId:oo,secondary:!y,elevated:y,disableAutoFocus:!0,palette:{backgroundColor:N.menuBackgroundColor,borderColor:N.menuBorderColor},empty:yo.length===0,loading:Co,loadingMessage:k,loadingIcon:v,loadingIconProps:{...o.iconProps,...c},emptyMessage:R,emptyIcon:K,emptyIconProps:{...o.iconProps,...u},onKeyDown:o=>{keyboardKeys.Tab.validate(o.key)&&(o.preventDefault(),Io.current?.focus(),go(!1)),keyboardKeys.Enter.validate(o.key)&&(Io.current?.focus(),jo(getDropdownInputText(io,x)),go(!1)),keyboardKeys.Esc.validate(o.key)&&(Io.current?.focus(),go(!1)),keyboardKeys.Backspace.validate(o.key)&&!X&&(x||!x&&S)&&(C===void 0&&co([]),F&&F(x?[]:null),jo(''),Oo(''))},children:x?jsx(DropdownMenuMultiple,{...Y,ref:ho,inputRef:Io,label:V,name:n,disabled:W.disabled,readOnly:X,menuListId:to,inputLabelId:eo,menuOptions:yo,dropdownSelectedOption:io,inputText:uo,optionsMultiToggle:a,groupSelectedOptions:z,optionsMultiToggleCaption:B,renderOption:L,onChange:o=>{C===void 0&&co(o),F&&F(o)}}):jsx(DropdownMenuSingle,{...Y,ref:ho,label:V,readOnly:X,multiple:x,disabled:W.disabled,status:q,menuListId:to,inputLabelId:eo,menuOptions:yo,dropdownSelectedOption:io,selectedOptionRef:xo,renderOption:L,onChange:o=>{const e={...o};C===void 0&&(jo(getDropdownInputText(e)),co(getDropdownSelectedOption(e))),F&&F(e),Io.current?.focus(),go(!1)}})})})}),{sizes:SIZES,displayName:"Dropdown"});export{COMPONENT_NAME,Dropdown};
+import{forwardRef,useMemo,useState,useRef,useCallback,useLayoutEffect,useEffect}from'react';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollMonitor}from'../../hooks/useScrollMonitor.mjs';import{focusFirstFocusable,focusLastFocusable}from'../../shared/utils/dom.mjs';import{createDebouncedCallback}from'../../shared/utils/misc.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DropdownMenu}from'./DropdownMenu.mjs';import{useFilteredOptions,useLoadedOptions}from'./hooks.mjs';import{SIZES}from'./sizes.mjs';import{getDropdownSelectedOption,getDropdownInputText}from'./utils.mjs';import{IconAnimated,ChevronDown,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{Icon}from'../Icon/Icon.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:y,selectedOption:C,defaultSelectedOption:D,icon:w,addonLeft:M,inputMode:I,loadingMessage:k,loadingIcon:v,maxLength:h,multiple:x,clearable:S,onChangeInput:j,onCloseMenu:O,onOpenMenu:T,onSelectOption:F,options:P,loadOptions:L,renderOption:E,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=useMemo(()=>W.id??`${n}-${nanoid()}`,[n,W.id]);const eo=useMemo(()=>nanoid(),[]);const to=useMemo(()=>nanoid(),[]);const[no,ro]=useFilteredOptions({options:P});const[so,lo,ao]=useLoadedOptions({loadOptions:L,options:P});const[io,co]=useState(()=>getDropdownSelectedOption(C!==void 0?C:D,x));const[uo,po]=useState(()=>getDropdownInputText(io,x));const[mo,fo]=useState(!1);const[bo,go]=useState(!1);const yo=L?so:no;const Co=L?p??lo:p;const Do=bo&&!W.disabled;const wo=H&&io.length===0;const Mo=Boolean(Do||uo||mo);const Io=useRef(null);const[ko,vo]=useState(null);const ho=useRef(null);const xo=useRef(null);const So=useRef(Do);const jo=useCallback(o=>{po(o),j&&j(o)},[j]);const Oo=useCallback(o=>{L?ao(o):ro(o)},[L,ao,ro]);const To=useMemo(()=>createDebouncedCallback(Oo,150),[Oo]);const preventBlur=o=>{o.target!==Io.current&&o.target instanceof Node&&(o.currentTarget.contains(o.target)||d.renderInPortal&&Do&&ko&&ko.contains(o.target))&&o.preventDefault()};return useScrollMonitor({target:g,onScrollStart:()=>{b&&Do&&(Io.current?.focus(),go(!1))}}),useLayoutEffect(()=>{C!==void 0&&(x||Do||jo(getDropdownInputText(C)),co(getDropdownSelectedOption(C,x)))},[x,C,Do,jo]),useEffect(()=>{Do!==So.current&&(Do&&T&&T(),!Do&&O&&O(),So.current=Do)},[Do,O,T]),useEffect(()=>{if(!x&&!f&&Do&&!Co&&uo.length===0&&ko&&xo.current){const o=ko.getBoundingClientRect();const e=xo.current.getBoundingClientRect();(e.top<o.top||e.bottom>o.bottom)&&setTimeout(()=>{ko&&xo.current&&ko.scrollTo(0,xo.current.offsetTop)},0)}},[x,f,Do,Co,uo,ko]),useEffect(()=>{W.disabled&&fo(!1)},[W.disabled]),jsx(FormInputLabel,{...W,...Y,ref:e,id:oo,onColored:y,primary:l,error:q==='error',success:q==='success',focus:mo,palette:{color:W.disabled?N.labelColorDisabled:N.labelColor,backgroundColor:W.disabled?N.backgroundColorDisabled:N.backgroundColor,backgroundColorHover:W.disabled?N.backgroundColorDisabled:N.backgroundColorHover,borderColor:W.disabled?N.borderColorDisabled:N.borderColor},onClick:o=>{W.onClick&&W.onClick(o),W.disabled||(Io.current?.focus(),Do?ko&&o.target instanceof Node&&!ko.contains(o.target)&&(go(!1),jo(getDropdownInputText(io,x))):(go(!0),Oo(''),s&&jo('')))},onPointerDown:o=>{W.onPointerDown&&W.onPointerDown(o),preventBlur(o)},onMouseDown:o=>{W.onMouseDown&&W.onMouseDown(o),preventBlur(o)},onFocus:o=>{W.onFocus&&W.onFocus(o),fo(!0),Io.current&&o.target===Io.current&&s&&!x&&!Do&&jo('')},onBlur:o=>{W.onBlur&&W.onBlur(o),o.currentTarget.contains(o.relatedTarget)||d.renderInPortal&&Do&&ko&&ko.contains(o.relatedTarget)||(fo(!1),jo(getDropdownInputText(io,x)),go(!1))},input:jsxs(Fragment,{children:[!wo||s||X?null:jsx(InputMimic,{required:!0,type:"text",inputMode:"none",form:Q,tabIndex:-1,onFocus:()=>{Io.current?.focus()}}),jsx(FormInput,{...Y,ref:Io,role:"combobox","aria-controls":to,"aria-expanded":Do,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:Mo,label:V,labelId:eo,labelPosition:r,form:Q,autoFocus:m,inputMode:s?I:'none',maxLength:h,placeholder:A,readOnly:X||!s,required:wo,disabled:W.disabled,value:uo,palette:{color:N.color,colorDisabled:N.colorDisabled,placeholderColor:N.placeholderColor,placeholderColorDisabled:N.placeholderColorDisabled},onClick:o=>{Do&&o.currentTarget.selectionStart!==o.currentTarget.selectionEnd&&o.stopPropagation()},onChange:o=>{const e=o.currentTarget.value;jo(e),To(e),go(!0)},onKeyDown:o=>{if(keyboardKeys.Enter.validate(o.key)&&(jo(getDropdownInputText(io,x)),go(!1)),!keyboardKeys.Space.validate(o.key)||Do&&o.currentTarget.selectionStart!==0||(o.preventDefault(),Do||(Oo(''),s&&jo('')),go(o=>!o)),keyboardKeys.Esc.validate(o.key)&&go(!1),keyboardKeys.Tab.validate(o.key)&&Do&&(o.preventDefault(),go(!1)),keyboardKeys.ArrowDown.validate(o.key)&&Do&&ho.current)if(o.preventDefault(),!x&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const t=o[e+1]??o[0];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusFirstFocusable(ho.current);if(keyboardKeys.ArrowUp.validate(o.key)&&Do&&ho.current)if(o.preventDefault(),!x&&xo.current){const o=[...ho.current.children];const e=o.findIndex(o=>o.contains(xo.current));const t=o[e-1]??o[o.length-1];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusLastFocusable(ho.current)}}),io.map(o=>jsx("input",{type:"hidden",name:n,value:o.value,form:Q,disabled:W.disabled||o.disabled},o.value))]}),addonLeft:M??(w?o=>jsx(Icon,{...o.iconProps,...i,name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0}):void 0),addonRight:o=>jsxs(Fragment,{children:[x&&io.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,disabled:W.disabled,cursor:W.disabled?'not-allowed':void 0,title:io.length,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()},addonRight:o=>jsx(IconButton,{...o.iconButtonProps,contrast:!W.disabled,onClick:o=>{o.stopPropagation(),X||(C===void 0&&co([]),F&&F([]),Io.current?.focus(),jo(''),Oo(''),go(!0))}})}):null,!x&&S&&io.length>0?jsx(IconButton,{icon:jsx(Close,{}),size:"l",square:!0,disabled:W.disabled,onClick:o=>{o.stopPropagation(),X||(C===void 0&&co([]),F&&F(null),Io.current?.focus(),jo(''),Oo(''),go(!0))}}):null,jsx(IconAnimated,{...o.iconProps,...i,icon:jsx(ChevronDown,{}),rotate:Do?'180deg':'0deg'})]}),dropdown:o=>jsx(DropdownMenu,{...d,setRef:vo,open:Do,popperReferenceId:oo,secondary:!y,elevated:y,disableAutoFocus:!0,palette:{backgroundColor:N.menuBackgroundColor,borderColor:N.menuBorderColor},empty:yo.length===0,loading:Co,loadingMessage:k,loadingIcon:v,loadingIconProps:{...o.iconProps,...c},emptyMessage:R,emptyIcon:K,emptyIconProps:{...o.iconProps,...u},onKeyDown:o=>{keyboardKeys.Tab.validate(o.key)&&(o.preventDefault(),Io.current?.focus(),go(!1)),keyboardKeys.Enter.validate(o.key)&&(Io.current?.focus(),jo(getDropdownInputText(io,x)),go(!1)),keyboardKeys.Esc.validate(o.key)&&(Io.current?.focus(),go(!1)),keyboardKeys.Backspace.validate(o.key)&&!X&&(x||!x&&S)&&(C===void 0&&co([]),F&&F(x?[]:null),jo(''),Oo(''))},children:x?jsx(DropdownMenuMultiple,{...Y,ref:ho,inputRef:Io,label:V,name:n,disabled:W.disabled,readOnly:X,menuListId:to,inputLabelId:eo,menuOptions:yo,dropdownSelectedOption:io,inputText:uo,optionsMultiToggle:a,groupSelectedOptions:z,optionsMultiToggleCaption:B,renderOption:E,onChange:o=>{C===void 0&&co(o),F&&F(o)}}):jsx(DropdownMenuSingle,{...Y,ref:ho,label:V,readOnly:X,multiple:x,disabled:W.disabled,status:q,menuListId:to,inputLabelId:eo,menuOptions:yo,dropdownSelectedOption:io,selectedOptionRef:xo,renderOption:E,onChange:o=>{const e={...o};C===void 0&&(jo(getDropdownInputText(e)),co(getDropdownSelectedOption(e))),F&&F(e),Io.current?.focus(),go(!1)}})})})}),{sizes:SIZES,displayName:"Dropdown"});export{COMPONENT_NAME,Dropdown};
 //# 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 { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n  forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n    const {\n      size = 'm',\n      name = 'fox-dropdown',\n      labelPosition = 'dynamic',\n      searchable = true,\n      primary = true,\n      optionsMultiToggle = true,\n      iconProps = {},\n      menuProps = {},\n      loadingIconProps = {},\n      optionsEmptyIconProps = {},\n      loading,\n      autoFocus,\n      disableAutoScrollToSelectedOption,\n      closeMenuOnScroll,\n      scrollMonitorTarget,\n      contrast,\n      selectedOption,\n      defaultSelectedOption,\n      icon,\n      addonLeft,\n      inputMode,\n      loadingMessage,\n      loadingIcon,\n      maxLength,\n      multiple,\n      clearable,\n      onChangeInput,\n      onCloseMenu,\n      onOpenMenu,\n      onSelectOption,\n      options,\n      loadOptions,\n      renderOption,\n      groupSelectedOptions,\n      optionsMultiToggleCaption,\n      optionsEmptyMessage,\n      optionsEmptyIcon,\n      palette,\n      placeholder,\n      readOnly,\n      required,\n      status,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      form,\n      label,\n      ...rootProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n    const inputLabelId = useMemo(() => nanoid(), [])\n    const menuListId = useMemo(() => nanoid(), [])\n\n    const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n      options,\n    })\n\n    const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n      loadOptions,\n      options,\n    })\n\n    const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n      getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n    )\n\n    const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n    const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n    const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n    const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n    const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n    const menuOpen = menuOpenRequest && !rootProps.disabled\n\n    const inputRequired = required && dropdownSelectedOption.length === 0\n    const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n    const menuListRef = useRef<HTMLUListElement>(null)\n    const selectedOptionRef = useRef<HTMLElement>(null)\n    const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n    const updateInputText = useCallback(\n      (inputTextValue: string) => {\n        setInputText(inputTextValue)\n\n        if (onChangeInput) {\n          onChangeInput(inputTextValue)\n        }\n      },\n      [onChangeInput]\n    )\n\n    const updateOptions = useCallback(\n      (inputTextValue: string) => {\n        if (loadOptions) {\n          getLoadedOptions(inputTextValue)\n        } else {\n          getFilteredOptions(inputTextValue)\n        }\n      },\n      [loadOptions, getLoadedOptions, getFilteredOptions]\n    )\n\n    const updateOptionsDebounced = useMemo(() => {\n      return createDebouncedCallback(updateOptions, 150)\n    }, [updateOptions])\n\n    const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (\n        evt.target !== inputRef.current &&\n        evt.target instanceof Node &&\n        (evt.currentTarget.contains(evt.target) ||\n          (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n      ) {\n        evt.preventDefault()\n      }\n    }\n\n    useScrollMonitor({\n      target: scrollMonitorTarget,\n      onScrollStart: () => {\n        if (closeMenuOnScroll && menuOpen) {\n          inputRef.current?.focus()\n          setMenuOpenRequest(false)\n        }\n      },\n    })\n\n    useLayoutEffect(() => {\n      if (selectedOption === undefined) return\n\n      if (!multiple && !menuOpen) {\n        updateInputText(getDropdownInputText(selectedOption))\n      }\n      setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n    }, [multiple, selectedOption, menuOpen, updateInputText])\n\n    useEffect(() => {\n      if (menuOpen === menuOpenPrevRef.current) return\n\n      if (menuOpen && onOpenMenu) onOpenMenu()\n      if (!menuOpen && onCloseMenu) onCloseMenu()\n\n      menuOpenPrevRef.current = menuOpen\n    }, [menuOpen, onCloseMenu, onOpenMenu])\n\n    useEffect(() => {\n      if (\n        !multiple &&\n        !disableAutoScrollToSelectedOption &&\n        menuOpen &&\n        !menuOptionsLoading &&\n        inputText.length === 0 &&\n        menuRef &&\n        selectedOptionRef.current\n      ) {\n        const menuRect = menuRef.getBoundingClientRect()\n        const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n        if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n          setTimeout(() => {\n            if (menuRef && selectedOptionRef.current) {\n              menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n            }\n          }, 0)\n        }\n      }\n    }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n    useEffect(() => {\n      if (rootProps.disabled) {\n        setFocusWithin(false)\n      }\n    }, [rootProps.disabled])\n\n    return (\n      <FormInputLabel\n        {...rootProps}\n        {...sizeProps}\n        ref={ref}\n        id={formInputLabelId}\n        onColored={contrast}\n        primary={primary}\n        error={status === 'error'}\n        success={status === 'success'}\n        focus={focusWithin}\n        palette={{\n          color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n          backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={(evt) => {\n          if (rootProps.onClick) rootProps.onClick(evt)\n\n          if (rootProps.disabled) return\n\n          inputRef.current?.focus()\n\n          if (!menuOpen) {\n            setMenuOpenRequest(true)\n\n            updateOptions('')\n            if (searchable) {\n              updateInputText('')\n            }\n          } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n            setMenuOpenRequest(false)\n            updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          }\n        }}\n        onPointerDown={(evt) => {\n          if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n          preventBlur(evt)\n        }}\n        onMouseDown={(evt) => {\n          if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n          if (!window.PointerEvent) preventBlur(evt)\n        }}\n        onFocus={(evt) => {\n          if (rootProps.onFocus) rootProps.onFocus(evt)\n\n          setFocusWithin(true)\n\n          if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n            updateInputText('')\n          }\n        }}\n        onBlur={(evt) => {\n          if (rootProps.onBlur) rootProps.onBlur(evt)\n\n          if (\n            evt.currentTarget.contains(evt.relatedTarget) ||\n            (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n          ) {\n            return\n          }\n\n          setFocusWithin(false)\n          updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          setMenuOpenRequest(false)\n        }}\n        input={\n          <>\n            {inputRequired && !searchable && !readOnly ? (\n              <Styled.InputMimic\n                required\n                type='text'\n                inputMode='none'\n                form={form}\n                tabIndex={-1}\n                onFocus={() => {\n                  inputRef.current?.focus()\n                }}\n              />\n            ) : null}\n            <FormInput\n              {...sizeProps}\n              ref={inputRef}\n              role='combobox'\n              aria-controls={menuListId}\n              aria-expanded={menuOpen}\n              type='text'\n              autoComplete='off'\n              autoCapitalize='off'\n              autoCorrect='off'\n              spellCheck='false'\n              active={inputActive}\n              label={label}\n              labelId={inputLabelId}\n              labelPosition={labelPosition}\n              form={form}\n              autoFocus={autoFocus}\n              inputMode={searchable ? inputMode : 'none'}\n              maxLength={maxLength}\n              placeholder={placeholder}\n              readOnly={readOnly || !searchable}\n              required={inputRequired}\n              disabled={rootProps.disabled}\n              value={inputText}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n              onClick={(evt) => {\n                if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n                  evt.stopPropagation()\n                }\n              }}\n              onChange={(evt) => {\n                const inputValue = evt.currentTarget.value\n\n                updateInputText(inputValue)\n                updateOptionsDebounced(inputValue)\n                setMenuOpenRequest(true)\n              }}\n              onKeyDown={(evt) => {\n                if (keyboardKeys.Enter.validate(evt.key)) {\n                  updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n                  evt.preventDefault()\n\n                  if (!menuOpen) {\n                    updateOptions('')\n                    if (searchable) {\n                      updateInputText('')\n                    }\n                  }\n\n                  setMenuOpenRequest((prev) => !prev)\n                }\n\n                if (keyboardKeys.Esc.validate(evt.key)) {\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n                  evt.preventDefault()\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusFirstFocusable(menuListRef.current)\n                  }\n                }\n\n                if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusLastFocusable(menuListRef.current)\n                  }\n                }\n              }}\n            />\n            {dropdownSelectedOption.map((option) => (\n              <input\n                key={option.value}\n                type='hidden'\n                name={name}\n                value={option.value}\n                form={form}\n                disabled={rootProps.disabled || option.disabled}\n              />\n            ))}\n          </>\n        }\n        addonLeft={\n          addonLeft ??\n          (icon\n            ? (addonLeftProps) => (\n                <Icon\n                  {...addonLeftProps.iconProps}\n                  {...iconProps}\n                  name={typeof icon === 'string' ? icon : undefined}\n                  icon={typeof icon !== 'string' ? icon : undefined}\n                />\n              )\n            : undefined)\n        }\n        addonRight={(addonRightProps) => (\n          <>\n            {multiple && dropdownSelectedOption.length > 0 ? (\n              <Chip\n                size='xs'\n                active\n                black\n                disabled={rootProps.disabled}\n                cursor={rootProps.disabled ? 'not-allowed' : undefined}\n                title={dropdownSelectedOption.length}\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                addonRight={(chipAddonRightProps) => (\n                  <IconButton\n                    {...chipAddonRightProps.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              />\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\n              {...addonRightProps.iconProps}\n              {...iconProps}\n              icon={<Styled.ChevronDown />}\n              rotate={menuOpen ? '180deg' : '0deg'}\n            />\n          </>\n        )}\n        dropdown={(dropdownProps) => (\n          <DropdownMenu\n            {...menuProps}\n            setRef={setMenuRef}\n            open={menuOpen}\n            popperReferenceId={formInputLabelId}\n            secondary={!contrast}\n            elevated={contrast}\n            disableAutoFocus\n            palette={{\n              backgroundColor: palette.menuBackgroundColor,\n              borderColor: palette.menuBorderColor,\n            }}\n            empty={menuOptions.length === 0}\n            loading={menuOptionsLoading}\n            loadingMessage={loadingMessage}\n            loadingIcon={loadingIcon}\n            loadingIconProps={{\n              ...dropdownProps.iconProps,\n              ...loadingIconProps,\n            }}\n            emptyMessage={optionsEmptyMessage}\n            emptyIcon={optionsEmptyIcon}\n            emptyIconProps={{\n              ...dropdownProps.iconProps,\n              ...optionsEmptyIconProps,\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.Tab.validate(evt.key)) {\n                evt.preventDefault()\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Enter.validate(evt.key)) {\n                inputRef.current?.focus()\n                updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Esc.validate(evt.key)) {\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n                if (selectedOption === undefined) {\n                  setDropdownSelectedOption([])\n                }\n\n                if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n                updateInputText('')\n                updateOptions('')\n              }\n            }}\n          >\n            {multiple ? (\n              <DropdownMenuMultiple\n                {...sizeProps}\n                ref={menuListRef}\n                inputRef={inputRef}\n                label={label}\n                name={name}\n                disabled={rootProps.disabled}\n                readOnly={readOnly}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                inputText={inputText}\n                optionsMultiToggle={optionsMultiToggle}\n                groupSelectedOptions={groupSelectedOptions}\n                optionsMultiToggleCaption={optionsMultiToggleCaption}\n                renderOption={renderOption}\n                onChange={(update) => {\n                  if (selectedOption === undefined) {\n                    setDropdownSelectedOption(update)\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n                }}\n              />\n            ) : (\n              <DropdownMenuSingle\n                {...sizeProps}\n                ref={menuListRef}\n                label={label}\n                readOnly={readOnly}\n                multiple={multiple}\n                disabled={rootProps.disabled}\n                status={status}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                selectedOptionRef={selectedOptionRef}\n                renderOption={renderOption}\n                onChange={(option) => {\n                  const update = { ...option }\n\n                  if (selectedOption === undefined) {\n                    updateInputText(getDropdownInputText(update))\n                    setDropdownSelectedOption(getDropdownSelectedOption(update))\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n\n                  inputRef.current?.focus()\n                  setMenuOpenRequest(false)\n                }}\n              />\n            )}\n          </DropdownMenu>\n        )}\n      />\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","disabled","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","color","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","addonLeftProps","Icon","addonRight","addonRightProps","Chip","black","cursor","title","colorHover","chipAddonRightProps","IconButton","iconButtonProps","Close","square","rotate","dropdown","dropdownProps","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","sizes","SIZES","displayName"],"mappings":"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"}
+{"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 { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { createDebouncedCallback } from 'shared/utils/misc'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport { Icon } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент для выбора одной или нескольких опций из числа доступных.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n  forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n    const {\n      size = 'm',\n      name = 'fox-dropdown',\n      labelPosition = 'dynamic',\n      searchable = true,\n      primary = true,\n      optionsMultiToggle = true,\n      iconProps = {},\n      menuProps = {},\n      loadingIconProps = {},\n      optionsEmptyIconProps = {},\n      loading,\n      autoFocus,\n      disableAutoScrollToSelectedOption,\n      closeMenuOnScroll,\n      scrollMonitorTarget,\n      contrast,\n      selectedOption,\n      defaultSelectedOption,\n      icon,\n      addonLeft,\n      inputMode,\n      loadingMessage,\n      loadingIcon,\n      maxLength,\n      multiple,\n      clearable,\n      onChangeInput,\n      onCloseMenu,\n      onOpenMenu,\n      onSelectOption,\n      options,\n      loadOptions,\n      renderOption,\n      groupSelectedOptions,\n      optionsMultiToggleCaption,\n      optionsEmptyMessage,\n      optionsEmptyIcon,\n      palette,\n      placeholder,\n      readOnly,\n      required,\n      status,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      form,\n      label,\n      ...rootProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n    const inputLabelId = useMemo(() => nanoid(), [])\n    const menuListId = useMemo(() => nanoid(), [])\n\n    const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n      options,\n    })\n\n    const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n      loadOptions,\n      options,\n    })\n\n    const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n      getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n    )\n\n    const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n    const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n    const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n    const menuOptions: (DropdownOption | DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n    const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n    const menuOpen = menuOpenRequest && !rootProps.disabled\n\n    const inputRequired = required && dropdownSelectedOption.length === 0\n    const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n    const menuListRef = useRef<HTMLUListElement>(null)\n    const selectedOptionRef = useRef<HTMLElement>(null)\n    const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n    const updateInputText = useCallback(\n      (inputTextValue: string) => {\n        setInputText(inputTextValue)\n\n        if (onChangeInput) {\n          onChangeInput(inputTextValue)\n        }\n      },\n      [onChangeInput]\n    )\n\n    const updateOptions = useCallback(\n      (inputTextValue: string) => {\n        if (loadOptions) {\n          getLoadedOptions(inputTextValue)\n        } else {\n          getFilteredOptions(inputTextValue)\n        }\n      },\n      [loadOptions, getLoadedOptions, getFilteredOptions]\n    )\n\n    const updateOptionsDebounced = useMemo(() => {\n      return createDebouncedCallback(updateOptions, 150)\n    }, [updateOptions])\n\n    const preventBlur = (evt: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (\n        evt.target !== inputRef.current &&\n        evt.target instanceof Node &&\n        (evt.currentTarget.contains(evt.target) ||\n          (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n      ) {\n        evt.preventDefault()\n      }\n    }\n\n    useScrollMonitor({\n      target: scrollMonitorTarget,\n      onScrollStart: () => {\n        if (closeMenuOnScroll && menuOpen) {\n          inputRef.current?.focus()\n          setMenuOpenRequest(false)\n        }\n      },\n    })\n\n    useLayoutEffect(() => {\n      if (selectedOption === undefined) return\n\n      if (!multiple && !menuOpen) {\n        updateInputText(getDropdownInputText(selectedOption))\n      }\n      setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n    }, [multiple, selectedOption, menuOpen, updateInputText])\n\n    useEffect(() => {\n      if (menuOpen === menuOpenPrevRef.current) return\n\n      if (menuOpen && onOpenMenu) onOpenMenu()\n      if (!menuOpen && onCloseMenu) onCloseMenu()\n\n      menuOpenPrevRef.current = menuOpen\n    }, [menuOpen, onCloseMenu, onOpenMenu])\n\n    useEffect(() => {\n      if (\n        !multiple &&\n        !disableAutoScrollToSelectedOption &&\n        menuOpen &&\n        !menuOptionsLoading &&\n        inputText.length === 0 &&\n        menuRef &&\n        selectedOptionRef.current\n      ) {\n        const menuRect = menuRef.getBoundingClientRect()\n        const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n        if (selectedOptionRect.top < menuRect.top || selectedOptionRect.bottom > menuRect.bottom) {\n          setTimeout(() => {\n            if (menuRef && selectedOptionRef.current) {\n              menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n            }\n          }, 0)\n        }\n      }\n    }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n    useEffect(() => {\n      if (rootProps.disabled) {\n        setFocusWithin(false)\n      }\n    }, [rootProps.disabled])\n\n    return (\n      <FormInputLabel\n        {...rootProps}\n        {...sizeProps}\n        ref={ref}\n        id={formInputLabelId}\n        onColored={contrast}\n        primary={primary}\n        error={status === 'error'}\n        success={status === 'success'}\n        focus={focusWithin}\n        palette={{\n          color: rootProps.disabled ? palette.labelColorDisabled : palette.labelColor,\n          backgroundColor: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n          backgroundColorHover: rootProps.disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n          borderColor: rootProps.disabled ? palette.borderColorDisabled : palette.borderColor,\n        }}\n        onClick={(evt) => {\n          if (rootProps.onClick) rootProps.onClick(evt)\n\n          if (rootProps.disabled) return\n\n          inputRef.current?.focus()\n\n          if (!menuOpen) {\n            setMenuOpenRequest(true)\n\n            updateOptions('')\n            if (searchable) {\n              updateInputText('')\n            }\n          } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n            setMenuOpenRequest(false)\n            updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          }\n        }}\n        onPointerDown={(evt) => {\n          if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\n          preventBlur(evt)\n        }}\n        onMouseDown={(evt) => {\n          if (rootProps.onMouseDown) rootProps.onMouseDown(evt)\n\n          preventBlur(evt)\n        }}\n        onFocus={(evt) => {\n          if (rootProps.onFocus) rootProps.onFocus(evt)\n\n          setFocusWithin(true)\n\n          if (inputRef.current && evt.target === inputRef.current && searchable && !multiple && !menuOpen) {\n            updateInputText('')\n          }\n        }}\n        onBlur={(evt) => {\n          if (rootProps.onBlur) rootProps.onBlur(evt)\n\n          if (\n            evt.currentTarget.contains(evt.relatedTarget) ||\n            (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.relatedTarget))\n          ) {\n            return\n          }\n\n          setFocusWithin(false)\n          updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n          setMenuOpenRequest(false)\n        }}\n        input={\n          <>\n            {inputRequired && !searchable && !readOnly ? (\n              <Styled.InputMimic\n                required\n                type='text'\n                inputMode='none'\n                form={form}\n                tabIndex={-1}\n                onFocus={() => {\n                  inputRef.current?.focus()\n                }}\n              />\n            ) : null}\n            <FormInput\n              {...sizeProps}\n              ref={inputRef}\n              role='combobox'\n              aria-controls={menuListId}\n              aria-expanded={menuOpen}\n              type='text'\n              autoComplete='off'\n              autoCapitalize='off'\n              autoCorrect='off'\n              spellCheck='false'\n              active={inputActive}\n              label={label}\n              labelId={inputLabelId}\n              labelPosition={labelPosition}\n              form={form}\n              autoFocus={autoFocus}\n              inputMode={searchable ? inputMode : 'none'}\n              maxLength={maxLength}\n              placeholder={placeholder}\n              readOnly={readOnly || !searchable}\n              required={inputRequired}\n              disabled={rootProps.disabled}\n              value={inputText}\n              palette={{\n                color: palette.color,\n                colorDisabled: palette.colorDisabled,\n                placeholderColor: palette.placeholderColor,\n                placeholderColorDisabled: palette.placeholderColorDisabled,\n              }}\n              onClick={(evt) => {\n                if (menuOpen && evt.currentTarget.selectionStart !== evt.currentTarget.selectionEnd) {\n                  evt.stopPropagation()\n                }\n              }}\n              onChange={(evt) => {\n                const inputValue = evt.currentTarget.value\n\n                updateInputText(inputValue)\n                updateOptionsDebounced(inputValue)\n                setMenuOpenRequest(true)\n              }}\n              onKeyDown={(evt) => {\n                if (keyboardKeys.Enter.validate(evt.key)) {\n                  updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Space.validate(evt.key) && (!menuOpen || evt.currentTarget.selectionStart === 0)) {\n                  evt.preventDefault()\n\n                  if (!menuOpen) {\n                    updateOptions('')\n                    if (searchable) {\n                      updateInputText('')\n                    }\n                  }\n\n                  setMenuOpenRequest((prev) => !prev)\n                }\n\n                if (keyboardKeys.Esc.validate(evt.key)) {\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.Tab.validate(evt.key) && menuOpen) {\n                  evt.preventDefault()\n                  setMenuOpenRequest(false)\n                }\n\n                if (keyboardKeys.ArrowDown.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx + 1] ?? menuItems[0]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusFirstFocusable(menuListRef.current)\n                  }\n                }\n\n                if (keyboardKeys.ArrowUp.validate(evt.key) && menuOpen && menuListRef.current) {\n                  evt.preventDefault()\n\n                  if (!multiple && selectedOptionRef.current) {\n                    const menuItems = [...menuListRef.current.children]\n\n                    const idx = menuItems.findIndex((item) => item.contains(selectedOptionRef.current as Node))\n\n                    const focusTarget = menuItems[idx - 1] ?? menuItems[menuItems.length - 1]\n\n                    if (focusTarget instanceof HTMLElement) {\n                      focusFirstFocusable(focusTarget)\n                    }\n                  } else {\n                    focusLastFocusable(menuListRef.current)\n                  }\n                }\n              }}\n            />\n            {dropdownSelectedOption.map((option) => (\n              <input\n                key={option.value}\n                type='hidden'\n                name={name}\n                value={option.value}\n                form={form}\n                disabled={rootProps.disabled || option.disabled}\n              />\n            ))}\n          </>\n        }\n        addonLeft={\n          addonLeft ??\n          (icon\n            ? (addonLeftProps) => (\n                <Icon\n                  {...addonLeftProps.iconProps}\n                  {...iconProps}\n                  name={typeof icon === 'string' ? icon : undefined}\n                  icon={typeof icon !== 'string' ? icon : undefined}\n                />\n              )\n            : undefined)\n        }\n        addonRight={(addonRightProps) => (\n          <>\n            {multiple && dropdownSelectedOption.length > 0 ? (\n              <Chip\n                size='xs'\n                active\n                black\n                disabled={rootProps.disabled}\n                cursor={rootProps.disabled ? 'not-allowed' : undefined}\n                title={dropdownSelectedOption.length}\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                addonRight={(chipAddonRightProps) => (\n                  <IconButton\n                    {...chipAddonRightProps.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              />\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\n              {...addonRightProps.iconProps}\n              {...iconProps}\n              icon={<Styled.ChevronDown />}\n              rotate={menuOpen ? '180deg' : '0deg'}\n            />\n          </>\n        )}\n        dropdown={(dropdownProps) => (\n          <DropdownMenu\n            {...menuProps}\n            setRef={setMenuRef}\n            open={menuOpen}\n            popperReferenceId={formInputLabelId}\n            secondary={!contrast}\n            elevated={contrast}\n            disableAutoFocus\n            palette={{\n              backgroundColor: palette.menuBackgroundColor,\n              borderColor: palette.menuBorderColor,\n            }}\n            empty={menuOptions.length === 0}\n            loading={menuOptionsLoading}\n            loadingMessage={loadingMessage}\n            loadingIcon={loadingIcon}\n            loadingIconProps={{\n              ...dropdownProps.iconProps,\n              ...loadingIconProps,\n            }}\n            emptyMessage={optionsEmptyMessage}\n            emptyIcon={optionsEmptyIcon}\n            emptyIconProps={{\n              ...dropdownProps.iconProps,\n              ...optionsEmptyIconProps,\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.Tab.validate(evt.key)) {\n                evt.preventDefault()\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Enter.validate(evt.key)) {\n                inputRef.current?.focus()\n                updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Esc.validate(evt.key)) {\n                inputRef.current?.focus()\n                setMenuOpenRequest(false)\n              }\n\n              if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple || (!multiple && clearable))) {\n                if (selectedOption === undefined) {\n                  setDropdownSelectedOption([])\n                }\n\n                if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n                updateInputText('')\n                updateOptions('')\n              }\n            }}\n          >\n            {multiple ? (\n              <DropdownMenuMultiple\n                {...sizeProps}\n                ref={menuListRef}\n                inputRef={inputRef}\n                label={label}\n                name={name}\n                disabled={rootProps.disabled}\n                readOnly={readOnly}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                inputText={inputText}\n                optionsMultiToggle={optionsMultiToggle}\n                groupSelectedOptions={groupSelectedOptions}\n                optionsMultiToggleCaption={optionsMultiToggleCaption}\n                renderOption={renderOption}\n                onChange={(update) => {\n                  if (selectedOption === undefined) {\n                    setDropdownSelectedOption(update)\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n                }}\n              />\n            ) : (\n              <DropdownMenuSingle\n                {...sizeProps}\n                ref={menuListRef}\n                label={label}\n                readOnly={readOnly}\n                multiple={multiple}\n                disabled={rootProps.disabled}\n                status={status}\n                menuListId={menuListId}\n                inputLabelId={inputLabelId}\n                menuOptions={menuOptions}\n                dropdownSelectedOption={dropdownSelectedOption}\n                selectedOptionRef={selectedOptionRef}\n                renderOption={renderOption}\n                onChange={(option) => {\n                  const update = { ...option }\n\n                  if (selectedOption === undefined) {\n                    updateInputText(getDropdownInputText(update))\n                    setDropdownSelectedOption(getDropdownSelectedOption(update))\n                  }\n\n                  if (onSelectOption) onSelectOption(update)\n\n                  inputRef.current?.focus()\n                  setMenuOpenRequest(false)\n                }}\n              />\n            )}\n          </DropdownMenu>\n        )}\n      />\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { Dropdown, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Dropdown","withMergedProps","forwardRef","props","ref","size","name","labelPosition","searchable","primary","optionsMultiToggle","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","loading","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","addonLeft","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","renderOption","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","disabled","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","color","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","Styled","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","active","labelId","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","inputValue","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","item","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","map","option","addonLeftProps","Icon","addonRight","addonRightProps","Chip","black","cursor","title","colorHover","window","PointerEvent","chipAddonRightProps","IconButton","iconButtonProps","Close","square","rotate","dropdown","dropdownProps","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","sizes","SIZES","displayName"],"mappings":"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"}

package/components/GlossyButton/GlossyButton.js

@@ -0,0 +1,2 @@
+'use strict';var React=require('react');var useMergedProps=require('../../hooks/useMergedProps.js');var useCanvasAnimation=require('../../hooks/useCanvasAnimation.js');var useReducedMotion=require('../../hooks/useReducedMotion.js');var createPolymorphicComponentWithRef=require('../../shared/utils/createPolymorphicComponentWithRef.js');var sizes=require('./sizes.js');var CometsPlayer=require('./comets/CometsPlayer.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var Icon=require('../Icon/Icon.js');var index=require('../../icon-pack/src/icons/LoaderFill/index.js');const createCometsPlayer=(e,s,t)=>new CometsPlayer.CometsPlayer(e,s,t);const GlossyButton=createPolymorphicComponentWithRef.createPolymorphicComponentWithRef((e,s)=>{const{size:t="m",inline:o=!0,variant:n="primary",component:i="button",animated:r,text:a,addonLeft:l,addonRight:u,loadingIcon:c,loading:d,showContentOnStatus:m,sizeXXS:j,sizeXS:x,sizeS:p,sizeM:S,sizeL:R,sizeXL:h,children:y,...z}=useMergedProps.useMergedProps(e,{componentName:"GlossyButton",sizes:sizes.SIZES});const[P,v]=React.useState(null);const C=useReducedMotion.useReducedMotion();const I=Boolean(r)&&!C&&!z.disabled;useCanvasAnimation.useCanvasAnimation({canvas:P,enabled:I,createPlayer:createCometsPlayer});const g={size:t,sizeXXS:j,sizeXS:x,sizeS:p,sizeM:S,sizeL:R,sizeXL:h};const q={...g,as:'span',color:'inherit',weight:800,lineHeight:1.2,sizes:sizes.SIZES_TEXT};const M={...g,color:'inherit',preset:'brand',sizes:sizes.SIZES_ICON};const f={...M,icon:jsxRuntime.jsx(index.LoaderFill,{})};const X=jsxRuntime.jsx(Slot.Slot,{render:a,props:q});return jsxRuntime.jsxs(style.Root,{...z,...g,type:z.type??(i==='button'?'button':void 0),inline:o,variant:n,loading:d,as:i,ref:s,children:[jsxRuntime.jsx(style.Glossy,{"aria-hidden":!0}),I?jsxRuntime.jsx(style.Comets,{ref:v,"aria-hidden":!0}):null,jsxRuntime.jsx(Slot.Slot,{render:y,props:{textProps:q,iconProps:M,loadingIconProps:f},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[d?jsxRuntime.jsxs(style.ContentWithStatus,{children:[jsxRuntime.jsx(Slot.Slot,{render:c,props:f,fallback:jsxRuntime.jsx(style.IconAnimation,{children:jsxRuntime.jsx(Icon.Icon,{...M,icon:jsxRuntime.jsx(index.LoaderFill,{})})})}),m?X:null]}):null,jsxRuntime.jsxs(style.Content,{"aria-hidden":d,children:[jsxRuntime.jsx(Slot.Slot,{render:l,props:{iconProps:M}}),X,jsxRuntime.jsx(Slot.Slot,{render:u,props:{iconProps:M}})]})]})})]})});exports.SIZES=sizes.SIZES,exports.COMPONENT_NAME="GlossyButton",exports.GlossyButton=GlossyButton;
+//# sourceMappingURL=GlossyButton.js.map

package/components/GlossyButton/GlossyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossyButton.js","sources":["../../../../src/components/GlossyButton/GlossyButton.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { LoaderFill } from '@foxford/icon-pack'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { useCanvasAnimation } from 'hooks/useCanvasAnimation'\nimport { useReducedMotion } from 'hooks/useReducedMotion'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport { Icon } from 'components/Icon'\nimport { Slot } from 'components/Slot'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport type { GlossyButtonProps } from './types'\nimport { CometsPlayer } from './comets/CometsPlayer'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'GlossyButton'\n\nconst createCometsPlayer = (canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, onError: () => void) =>\n  new CometsPlayer(canvas, context, onError)\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst GlossyButton = createPolymorphicComponentWithRef<'button', GlossyButtonProps>((props, ref) => {\n  const {\n    size = 'm',\n    inline = true,\n    variant = 'primary',\n    component = 'button',\n    animated,\n    text,\n    addonLeft,\n    addonRight,\n    loadingIcon,\n    loading,\n    showContentOnStatus,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    children,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, GlossyButtonProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: SIZES,\n  })\n\n  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null)\n  const reducedMotion = useReducedMotion()\n\n  const hasAnimation = Boolean(animated) && !reducedMotion && !restProps.disabled\n\n  useCanvasAnimation({\n    canvas,\n    enabled: hasAnimation,\n    createPlayer: createCometsPlayer,\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    as: 'span',\n    color: 'inherit',\n    weight: 800,\n    lineHeight: 1.2,\n    sizes: SIZES_TEXT,\n  }\n\n  const iconProps: IconProps = {\n    ...sizeProps,\n    color: 'inherit',\n    preset: 'brand',\n    sizes: SIZES_ICON,\n  }\n\n  const loadingIconProps: IconProps = {\n    ...iconProps,\n    icon: <LoaderFill />,\n  }\n\n  const content = <Slot render={text} props={textProps} />\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      inline={inline}\n      variant={variant}\n      loading={loading}\n      as={component}\n      ref={ref}\n    >\n      <Styled.Glossy aria-hidden />\n      {hasAnimation ? <Styled.Comets ref={setCanvas} aria-hidden /> : null}\n      <Slot\n        render={children}\n        props={{ textProps, iconProps, loadingIconProps }}\n        fallback={\n          <>\n            {loading ? (\n              <Styled.ContentWithStatus>\n                <Slot\n                  render={loadingIcon}\n                  props={loadingIconProps}\n                  fallback={\n                    <Styled.IconAnimation>\n                      <Icon {...iconProps} icon={<LoaderFill />} />\n                    </Styled.IconAnimation>\n                  }\n                />\n                {showContentOnStatus ? content : null}\n              </Styled.ContentWithStatus>\n            ) : null}\n            <Styled.Content aria-hidden={loading}>\n              <Slot\n                render={addonLeft}\n                props={{\n                  iconProps,\n                }}\n              />\n              {content}\n              <Slot\n                render={addonRight}\n                props={{\n                  iconProps,\n                }}\n              />\n            </Styled.Content>\n          </>\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst GlossyButtonDoc: React.FC<GlossyButtonProps> = () => null\n\nexport { GlossyButtonDoc, GlossyButton, COMPONENT_NAME, SIZES }\n\nexport type { GlossyButtonProps }\n"],"names":["createCometsPlayer","canvas","context","onError","CometsPlayer","GlossyButton","createPolymorphicComponentWithRef","props","ref","size","inline","variant","component","animated","text","addonLeft","addonRight","loadingIcon","loading","showContentOnStatus","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","restProps","useMergedProps","componentName","sizes","SIZES","setCanvas","useState","reducedMotion","useReducedMotion","hasAnimation","Boolean","disabled","useCanvasAnimation","enabled","createPlayer","sizeProps","textProps","as","color","weight","lineHeight","SIZES_TEXT","iconProps","preset","SIZES_ICON","loadingIconProps","icon","_jsx","LoaderFill","content","Slot","render","_jsxs","Styled","type","undefined","fallback","_Fragment","Icon"],"mappings":"6nBAkBA,MAAMA,mBAAqBA,CAACC,EAA2BC,EAAmCC,IACxF,IAAIC,0BAAaH,EAAQC,EAASC,GAUpC,MAAME,aAAeC,kCAAAA,kCAA+D,CAACC,EAAOC,KAC1F,MAAMC,KACJA,EAAO,IAAGC,OACVA,GAAS,EAAIC,QACbA,EAAU,UAASC,UACnBA,EAAY,SAAQC,SACpBA,EAAQC,KACRA,EAAIC,UACJA,EAASC,WACTA,EAAUC,YACVA,EAAWC,QACXA,EAAOC,oBACPA,EAAmBC,QACnBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,SACNA,KACGC,GACDC,eAAAA,eAAuErB,EAAO,CAChFsB,cAnCmB,eAoCnBC,MAAOC,MAAAA,QAGT,MAAO9B,EAAQ+B,GAAaC,MAAAA,SAAmC,MAC/D,MAAMC,EAAgBC,iBAAAA,mBAEtB,MAAMC,EAAeC,QAAQxB,KAAcqB,IAAkBP,EAAUW,SAEvEC,sCAAmB,CACjBtC,SACAuC,QAASJ,EACTK,aAAczC,qBAGhB,MAAM0C,EAAY,CAChBjC,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAuB,IACxBD,EACHE,GAAI,OACJC,MAAO,UACPC,OAAQ,IACRC,WAAY,IACZjB,MAAOkB,MAAAA,YAGT,MAAMC,EAAuB,IACxBP,EACHG,MAAO,UACPK,OAAQ,QACRpB,MAAOqB,MAAAA,YAGT,MAAMC,EAA8B,IAC/BH,EACHI,KAAMC,WAAAA,IAACC,MAAAA,WAAU,CAAA,IAGnB,MAAMC,EAAUF,WAAAA,IAACG,UAAI,CAACC,OAAQ5C,EAAMP,MAAOoC,IAE3C,OACEgB,WAAAA,KAACC,MAAAA,KAAW,IACNjC,KACAe,EACJmB,KAAMlC,EAAUkC,OAASjD,IAAc,SAAW,cAAWkD,GAC7DpD,OAAQA,EACRC,QAASA,EACTO,QAASA,EACT0B,GAAIhC,EACJJ,IAAKA,EAAIkB,SAAA,CAET4B,WAAAA,IAACM,aAAa,CAAC,eAAA,IACdxB,EAAekB,WAAAA,IAACM,aAAa,CAACpD,IAAKwB,EAAW,eAAA,IAAiB,KAChEsB,WAAAA,IAACG,UAAI,CACHC,OAAQhC,EACRnB,MAAO,CAAEoC,YAAWM,YAAWG,oBAC/BW,SACEJ,WAAAA,KAAAK,oBAAA,CAAAtC,UACGR,EACCyC,WAAAA,KAACC,wBAAwB,CAAAlC,SAAA,CACvB4B,WAAAA,IAACG,UAAI,CACHC,OAAQzC,EACRV,MAAO6C,EACPW,SACET,WAAAA,IAACM,oBAAoB,CAAAlC,SACnB4B,WAAAA,IAACW,UAAI,IAAKhB,EAAWI,KAAMC,WAAAA,IAACC,MAAAA,WAAU,CAAA,SAI3CpC,EAAsBqC,EAAU,QAEjC,KACJG,WAAAA,KAACC,cAAc,CAAC,cAAa1C,EAAQQ,SAAA,CACnC4B,WAAAA,IAACG,UAAI,CACHC,OAAQ3C,EACRR,MAAO,CACL0C,eAGHO,EACDF,WAAAA,IAACG,UAAI,CACHC,OAAQ1C,EACRT,MAAO,CACL0C,6EA9HK"}

package/components/GlossyButton/GlossyButton.mjs

@@ -0,0 +1,2 @@
+import{useState}from'react';import{useMergedProps}from'../../hooks/useMergedProps.mjs';import{useCanvasAnimation}from'../../hooks/useCanvasAnimation.mjs';import{useReducedMotion}from'../../hooks/useReducedMotion.mjs';import{createPolymorphicComponentWithRef}from'../../shared/utils/createPolymorphicComponentWithRef.mjs';import{SIZES,SIZES_ICON,SIZES_TEXT}from'./sizes.mjs';import{CometsPlayer}from'./comets/CometsPlayer.mjs';import{Root,Glossy,Comets,ContentWithStatus,IconAnimation,Content}from'./style.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';import{Icon}from'../Icon/Icon.mjs';import{LoaderFill}from'../../icon-pack/src/icons/LoaderFill/index.mjs';const COMPONENT_NAME='GlossyButton';const createCometsPlayer=(o,e,s)=>new CometsPlayer(o,e,s);const GlossyButton=createPolymorphicComponentWithRef((o,e)=>{const{size:s="m",inline:t=!0,variant:n="primary",component:r="button",animated:i,text:a,addonLeft:l,addonRight:m,loadingIcon:c,loading:d,showContentOnStatus:p,sizeXXS:S,sizeXS:u,sizeS:j,sizeM:h,sizeL:x,sizeXL:C,children:f,...y}=useMergedProps(o,{componentName:"GlossyButton",sizes:SIZES});const[P,z]=useState(null);const I=useReducedMotion();const E=Boolean(i)&&!I&&!y.disabled;useCanvasAnimation({canvas:P,enabled:E,createPlayer:createCometsPlayer});const g={size:s,sizeXXS:S,sizeXS:u,sizeS:j,sizeM:h,sizeL:x,sizeXL:C};const M={...g,as:'span',color:'inherit',weight:800,lineHeight:1.2,sizes:SIZES_TEXT};const X={...g,color:'inherit',preset:'brand',sizes:SIZES_ICON};const L={...X,icon:jsx(LoaderFill,{})};const N=jsx(Slot,{render:a,props:M});return jsxs(Root,{...y,...g,type:y.type??(r==='button'?'button':void 0),inline:t,variant:n,loading:d,as:r,ref:e,children:[jsx(Glossy,{"aria-hidden":!0}),E?jsx(Comets,{ref:z,"aria-hidden":!0}):null,jsx(Slot,{render:f,props:{textProps:M,iconProps:X,loadingIconProps:L},fallback:jsxs(Fragment,{children:[d?jsxs(ContentWithStatus,{children:[jsx(Slot,{render:c,props:L,fallback:jsx(IconAnimation,{children:jsx(Icon,{...X,icon:jsx(LoaderFill,{})})})}),p?N:null]}):null,jsxs(Content,{"aria-hidden":d,children:[jsx(Slot,{render:l,props:{iconProps:X}}),N,jsx(Slot,{render:m,props:{iconProps:X}})]})]})})]})});export{COMPONENT_NAME,GlossyButton,SIZES};
+//# sourceMappingURL=GlossyButton.mjs.map

package/components/GlossyButton/GlossyButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossyButton.mjs","sources":["../../../../src/components/GlossyButton/GlossyButton.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { LoaderFill } from '@foxford/icon-pack'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { useCanvasAnimation } from 'hooks/useCanvasAnimation'\nimport { useReducedMotion } from 'hooks/useReducedMotion'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport { Icon } from 'components/Icon'\nimport { Slot } from 'components/Slot'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport type { GlossyButtonProps } from './types'\nimport { CometsPlayer } from './comets/CometsPlayer'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'GlossyButton'\n\nconst createCometsPlayer = (canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, onError: () => void) =>\n  new CometsPlayer(canvas, context, onError)\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst GlossyButton = createPolymorphicComponentWithRef<'button', GlossyButtonProps>((props, ref) => {\n  const {\n    size = 'm',\n    inline = true,\n    variant = 'primary',\n    component = 'button',\n    animated,\n    text,\n    addonLeft,\n    addonRight,\n    loadingIcon,\n    loading,\n    showContentOnStatus,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    children,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, GlossyButtonProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: SIZES,\n  })\n\n  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null)\n  const reducedMotion = useReducedMotion()\n\n  const hasAnimation = Boolean(animated) && !reducedMotion && !restProps.disabled\n\n  useCanvasAnimation({\n    canvas,\n    enabled: hasAnimation,\n    createPlayer: createCometsPlayer,\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    as: 'span',\n    color: 'inherit',\n    weight: 800,\n    lineHeight: 1.2,\n    sizes: SIZES_TEXT,\n  }\n\n  const iconProps: IconProps = {\n    ...sizeProps,\n    color: 'inherit',\n    preset: 'brand',\n    sizes: SIZES_ICON,\n  }\n\n  const loadingIconProps: IconProps = {\n    ...iconProps,\n    icon: <LoaderFill />,\n  }\n\n  const content = <Slot render={text} props={textProps} />\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      inline={inline}\n      variant={variant}\n      loading={loading}\n      as={component}\n      ref={ref}\n    >\n      <Styled.Glossy aria-hidden />\n      {hasAnimation ? <Styled.Comets ref={setCanvas} aria-hidden /> : null}\n      <Slot\n        render={children}\n        props={{ textProps, iconProps, loadingIconProps }}\n        fallback={\n          <>\n            {loading ? (\n              <Styled.ContentWithStatus>\n                <Slot\n                  render={loadingIcon}\n                  props={loadingIconProps}\n                  fallback={\n                    <Styled.IconAnimation>\n                      <Icon {...iconProps} icon={<LoaderFill />} />\n                    </Styled.IconAnimation>\n                  }\n                />\n                {showContentOnStatus ? content : null}\n              </Styled.ContentWithStatus>\n            ) : null}\n            <Styled.Content aria-hidden={loading}>\n              <Slot\n                render={addonLeft}\n                props={{\n                  iconProps,\n                }}\n              />\n              {content}\n              <Slot\n                render={addonRight}\n                props={{\n                  iconProps,\n                }}\n              />\n            </Styled.Content>\n          </>\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst GlossyButtonDoc: React.FC<GlossyButtonProps> = () => null\n\nexport { GlossyButtonDoc, GlossyButton, COMPONENT_NAME, SIZES }\n\nexport type { GlossyButtonProps }\n"],"names":["COMPONENT_NAME","createCometsPlayer","canvas","context","onError","CometsPlayer","GlossyButton","createPolymorphicComponentWithRef","props","ref","size","inline","variant","component","animated","text","addonLeft","addonRight","loadingIcon","loading","showContentOnStatus","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","restProps","useMergedProps","componentName","sizes","SIZES","setCanvas","useState","reducedMotion","useReducedMotion","hasAnimation","Boolean","disabled","useCanvasAnimation","enabled","createPlayer","sizeProps","textProps","as","color","weight","lineHeight","SIZES_TEXT","iconProps","preset","SIZES_ICON","loadingIconProps","icon","_jsx","LoaderFill","content","Slot","render","_jsxs","Styled","type","undefined","fallback","_Fragment","Icon"],"mappings":"4rBAgBA,MAAMA,eAAiB,eAEvB,MAAMC,mBAAqBA,CAACC,EAA2BC,EAAmCC,IACxF,IAAIC,aAAaH,EAAQC,EAASC,GAUpC,MAAME,aAAeC,kCAA+D,CAACC,EAAOC,KAC1F,MAAMC,KACJA,EAAO,IAAGC,OACVA,GAAS,EAAIC,QACbA,EAAU,UAASC,UACnBA,EAAY,SAAQC,SACpBA,EAAQC,KACRA,EAAIC,UACJA,EAASC,WACTA,EAAUC,YACVA,EAAWC,QACXA,EAAOC,oBACPA,EAAmBC,QACnBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,SACNA,KACGC,GACDC,eAAuErB,EAAO,CAChFsB,cAnCmB,eAoCnBC,MAAOC,QAGT,MAAO9B,EAAQ+B,GAAaC,SAAmC,MAC/D,MAAMC,EAAgBC,mBAEtB,MAAMC,EAAeC,QAAQxB,KAAcqB,IAAkBP,EAAUW,SAEvEC,mBAAmB,CACjBtC,SACAuC,QAASJ,EACTK,aAAczC,qBAGhB,MAAM0C,EAAY,CAChBjC,OACAW,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAuB,IACxBD,EACHE,GAAI,OACJC,MAAO,UACPC,OAAQ,IACRC,WAAY,IACZjB,MAAOkB,YAGT,MAAMC,EAAuB,IACxBP,EACHG,MAAO,UACPK,OAAQ,QACRpB,MAAOqB,YAGT,MAAMC,EAA8B,IAC/BH,EACHI,KAAMC,IAACC,WAAU,CAAA,IAGnB,MAAMC,EAAUF,IAACG,KAAI,CAACC,OAAQ5C,EAAMP,MAAOoC,IAE3C,OACEgB,KAACC,KAAW,IACNjC,KACAe,EACJmB,KAAMlC,EAAUkC,OAASjD,IAAc,SAAW,cAAWkD,GAC7DpD,OAAQA,EACRC,QAASA,EACTO,QAASA,EACT0B,GAAIhC,EACJJ,IAAKA,EAAIkB,SAAA,CAET4B,IAACM,OAAa,CAAC,eAAA,IACdxB,EAAekB,IAACM,OAAa,CAACpD,IAAKwB,EAAW,eAAA,IAAiB,KAChEsB,IAACG,KAAI,CACHC,OAAQhC,EACRnB,MAAO,CAAEoC,YAAWM,YAAWG,oBAC/BW,SACEJ,KAAAK,SAAA,CAAAtC,UACGR,EACCyC,KAACC,kBAAwB,CAAAlC,SAAA,CACvB4B,IAACG,KAAI,CACHC,OAAQzC,EACRV,MAAO6C,EACPW,SACET,IAACM,cAAoB,CAAAlC,SACnB4B,IAACW,KAAI,IAAKhB,EAAWI,KAAMC,IAACC,WAAU,CAAA,SAI3CpC,EAAsBqC,EAAU,QAEjC,KACJG,KAACC,QAAc,CAAC,cAAa1C,EAAQQ,SAAA,CACnC4B,IAACG,KAAI,CACHC,OAAQ3C,EACRR,MAAO,CACL0C,eAGHO,EACDF,IAACG,KAAI,CACHC,OAAQ1C,EACRT,MAAO,CACL0C"}

package/components/GlossyButton/comets/CometsPlayer.js

@@ -0,0 +1,2 @@
+'use strict';var CometsScene=require('./CometsScene.js');class CometsPlayer{static config={maxDelta:.05,maxPixelRatio:2,sizeScaleVariables:{head:'--glossy-button-comet-head-scale',tail:'--glossy-button-comet-tail-scale'}};scene=new CometsScene.CometsScene;frame=0;lastTime=0;observer=null;constructor(t,e,s){this.canvas=t,this.ctx=e,this.onError=s}tick=t=>{try{const e=this.lastTime?Math.min((t-this.lastTime)/1e3,CometsPlayer.config.maxDelta):0;this.lastTime=t,this.scene.update(e),this.scene.draw(this.ctx),e>0&&(this.canvas.style.visibility='visible'),this.frame=requestAnimationFrame(this.tick)}catch{this.onError()}};start(){this.frame||(this.frame=requestAnimationFrame(this.tick))}stop(){this.canvas.style.visibility='hidden',cancelAnimationFrame(this.frame),this.frame=0,this.lastTime=0}getSizeScale(){const t=getComputedStyle(this.canvas);const{head:e,tail:s}=CometsPlayer.config.sizeScaleVariables;const i={head:parseFloat(t.getPropertyValue(e)),tail:parseFloat(t.getPropertyValue(s))};return Number.isNaN(i.head)||Number.isNaN(i.tail)?void 0:i}getContentWidth(t){const e=this.canvas.parentElement;if(!e)return;const s=getComputedStyle(e);return t-(parseFloat(s.paddingLeft)||0)-(parseFloat(s.paddingRight)||0)}play(t){this.destroy(),typeof IntersectionObserver!='undefined'?(this.observer=new IntersectionObserver(t=>{t[t.length-1].isIntersecting?this.start():this.stop()}),this.observer.observe(t)):this.start()}destroy(){this.stop(),this.observer?.disconnect(),this.observer=null,this.ctx.save(),this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.restore()}resize(){const t=this.canvas.clientWidth;const e=this.canvas.clientHeight;const s=Math.min(window.devicePixelRatio||1,CometsPlayer.config.maxPixelRatio);const i=Math.round(t*s);const a=Math.round(e*s);this.canvas.width!==i&&(this.canvas.width=i),this.canvas.height!==a&&(this.canvas.height=a),this.ctx.setTransform(s,0,0,s,0,0),this.scene.resize(t,e,this.getSizeScale(),this.getContentWidth(t)),this.scene.draw(this.ctx)}}exports.CometsPlayer=CometsPlayer;
+//# sourceMappingURL=CometsPlayer.js.map

package/components/GlossyButton/comets/CometsPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CometsPlayer.js","sources":["../../../../../src/components/GlossyButton/comets/CometsPlayer.ts"],"sourcesContent":["import type { CanvasAnimationPlayer } from 'shared/interfaces'\nimport { CometsScene } from './CometsScene'\nimport type { CometSizeScale } from './types'\n\nexport class CometsPlayer implements CanvasAnimationPlayer {\n  private static readonly config = {\n    maxDelta: 0.05,\n    maxPixelRatio: 2,\n    sizeScaleVariables: {\n      head: '--glossy-button-comet-head-scale',\n      tail: '--glossy-button-comet-tail-scale',\n    },\n  }\n\n  private readonly canvas: HTMLCanvasElement\n\n  private readonly ctx: CanvasRenderingContext2D\n\n  private readonly scene = new CometsScene()\n\n  private frame = 0\n\n  private lastTime = 0\n\n  private observer: IntersectionObserver | null = null\n\n  private readonly onError: () => void\n\n  constructor(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, onError: () => void) {\n    this.canvas = canvas\n    this.ctx = ctx\n    this.onError = onError\n  }\n\n  private tick = (now: number) => {\n    try {\n      const dt = this.lastTime ? Math.min((now - this.lastTime) / 1000, CometsPlayer.config.maxDelta) : 0\n      this.lastTime = now\n      this.scene.update(dt)\n      this.scene.draw(this.ctx)\n      if (dt > 0) {\n        this.canvas.style.visibility = 'visible'\n      }\n      this.frame = requestAnimationFrame(this.tick)\n    } catch {\n      this.onError()\n    }\n  }\n\n  private start() {\n    if (!this.frame) {\n      this.frame = requestAnimationFrame(this.tick)\n    }\n  }\n\n  private stop() {\n    this.canvas.style.visibility = 'hidden'\n    cancelAnimationFrame(this.frame)\n    this.frame = 0\n    this.lastTime = 0\n  }\n\n  private getSizeScale(): CometSizeScale | undefined {\n    const style = getComputedStyle(this.canvas)\n    const { head, tail } = CometsPlayer.config.sizeScaleVariables\n    const sizeScale = {\n      head: parseFloat(style.getPropertyValue(head)),\n      tail: parseFloat(style.getPropertyValue(tail)),\n    }\n\n    return Number.isNaN(sizeScale.head) || Number.isNaN(sizeScale.tail) ? undefined : sizeScale\n  }\n\n  private getContentWidth(width: number) {\n    const button = this.canvas.parentElement\n    if (!button) {\n      return\n    }\n\n    const style = getComputedStyle(button)\n\n    return width - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0)\n  }\n\n  public play(element: Element) {\n    this.destroy()\n    if (typeof IntersectionObserver === 'undefined') {\n      this.start()\n\n      return\n    }\n\n    this.observer = new IntersectionObserver((entries) => {\n      if (entries[entries.length - 1].isIntersecting) {\n        this.start()\n      } else {\n        this.stop()\n      }\n    })\n    this.observer.observe(element)\n  }\n\n  public destroy() {\n    this.stop()\n    this.observer?.disconnect()\n    this.observer = null\n    this.ctx.save()\n    this.ctx.setTransform(1, 0, 0, 1, 0, 0)\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n    this.ctx.restore()\n  }\n\n  public resize() {\n    const width = this.canvas.clientWidth\n    const height = this.canvas.clientHeight\n    const ratio = Math.min(window.devicePixelRatio || 1, CometsPlayer.config.maxPixelRatio)\n    const pixelWidth = Math.round(width * ratio)\n    const pixelHeight = Math.round(height * ratio)\n    if (this.canvas.width !== pixelWidth) {\n      this.canvas.width = pixelWidth\n    }\n    if (this.canvas.height !== pixelHeight) {\n      this.canvas.height = pixelHeight\n    }\n    this.ctx.setTransform(ratio, 0, 0, ratio, 0, 0)\n    this.scene.resize(width, height, this.getSizeScale(), this.getContentWidth(width))\n    this.scene.draw(this.ctx)\n  }\n}\n"],"names":["CometsPlayer","static","maxDelta","maxPixelRatio","sizeScaleVariables","head","tail","scene","CometsScene","frame","lastTime","observer","constructor","canvas","ctx","onError","this","tick","now","dt","Math","min","config","update","draw","style","visibility","requestAnimationFrame","start","stop","cancelAnimationFrame","getSizeScale","getComputedStyle","sizeScale","parseFloat","getPropertyValue","Number","isNaN","undefined","getContentWidth","width","button","parentElement","paddingLeft","paddingRight","play","element","destroy","IntersectionObserver","entries","length","isIntersecting","observe","disconnect","save","setTransform","clearRect","height","restore","resize","clientWidth","clientHeight","ratio","window","devicePixelRatio","pixelWidth","round","pixelHeight"],"mappings":"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"}

package/components/GlossyButton/comets/CometsPlayer.mjs

@@ -0,0 +1,2 @@
+import{CometsScene}from'./CometsScene.mjs';class CometsPlayer{static config={maxDelta:.05,maxPixelRatio:2,sizeScaleVariables:{head:'--glossy-button-comet-head-scale',tail:'--glossy-button-comet-tail-scale'}};scene=new CometsScene;frame=0;lastTime=0;observer=null;constructor(t,e,s){this.canvas=t,this.ctx=e,this.onError=s}tick=t=>{try{const e=this.lastTime?Math.min((t-this.lastTime)/1e3,CometsPlayer.config.maxDelta):0;this.lastTime=t,this.scene.update(e),this.scene.draw(this.ctx),e>0&&(this.canvas.style.visibility='visible'),this.frame=requestAnimationFrame(this.tick)}catch{this.onError()}};start(){this.frame||(this.frame=requestAnimationFrame(this.tick))}stop(){this.canvas.style.visibility='hidden',cancelAnimationFrame(this.frame),this.frame=0,this.lastTime=0}getSizeScale(){const t=getComputedStyle(this.canvas);const{head:e,tail:s}=CometsPlayer.config.sizeScaleVariables;const i={head:parseFloat(t.getPropertyValue(e)),tail:parseFloat(t.getPropertyValue(s))};return Number.isNaN(i.head)||Number.isNaN(i.tail)?void 0:i}getContentWidth(t){const e=this.canvas.parentElement;if(!e)return;const s=getComputedStyle(e);return t-(parseFloat(s.paddingLeft)||0)-(parseFloat(s.paddingRight)||0)}play(t){this.destroy(),typeof IntersectionObserver!='undefined'?(this.observer=new IntersectionObserver(t=>{t[t.length-1].isIntersecting?this.start():this.stop()}),this.observer.observe(t)):this.start()}destroy(){this.stop(),this.observer?.disconnect(),this.observer=null,this.ctx.save(),this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.restore()}resize(){const t=this.canvas.clientWidth;const e=this.canvas.clientHeight;const s=Math.min(window.devicePixelRatio||1,CometsPlayer.config.maxPixelRatio);const i=Math.round(t*s);const a=Math.round(e*s);this.canvas.width!==i&&(this.canvas.width=i),this.canvas.height!==a&&(this.canvas.height=a),this.ctx.setTransform(s,0,0,s,0,0),this.scene.resize(t,e,this.getSizeScale(),this.getContentWidth(t)),this.scene.draw(this.ctx)}}export{CometsPlayer};
+//# sourceMappingURL=CometsPlayer.mjs.map