npm - @foxford/ui - Versions diffs - 2.96.1 → 2.96.2 - Mend

@foxford/ui 2.96.1 → 2.96.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/components/Dropdown/Dropdown.js +1 -1
package/components/Dropdown/Dropdown.js.map +1 -1
package/components/Dropdown/Dropdown.mjs +1 -1
package/components/Dropdown/Dropdown.mjs.map +1 -1
package/package.json +2 -2

package/components/Dropdown/Dropdown.js CHANGED Viewed

@@ -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 FormInput=require('../FormInput/FormInput.js');var Chip=require('../Chip/Chip.js');var IconButton=require('../IconButton/IconButton.js');var index=require('../../icon-pack/src/icons/Close/index.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,inputMode:w,loadingMessage:C,loadingIcon:M,maxLength:k,multiple:h,clearable:j,onChangeInput:I,onCloseMenu:R,onOpenMenu:S,onSelectOption:T,options:F,loadOptions:O,groupSelectedOptions:P,optionsMultiToggleCaption:q,optionsEmptyMessage:z,optionsEmptyIcon:L,palette:E,placeholder:B,readOnly:K,required:X,status:N,sizeXXS:H,sizeXS:A,sizeS:Z,sizeM:$,sizeL:_,sizeXL:U,form:G,label:J,...Q}=e;const V={size:t,sizeXXS:H,sizeXS:A,sizeS:Z,sizeM:$,sizeL:_,sizeXL:U};const W={sizes:sizes.SIZES_ICON,color:Q.disabled?'content-disabled':'content-onmain-tertiary'};const Y=React.useMemo((()=>Q.id??`${n}-${nanoid.nanoid()}`),[n,Q.id]);const ee=React.useMemo((()=>nanoid.nanoid()),[]);const oe=React.useMemo((()=>nanoid.nanoid()),[]);const[te,ne]=hooks.useFilteredOptions({options:F});const[re,se,ae]=hooks.useLoadedOptions({loadOptions:O,options:F});const[ie,le]=React.useState((()=>utils.getDropdownSelectedOption(x!==void 0?x:y,h)));const[ce,ue]=React.useState((()=>utils.getDropdownInputText(ie,h)));const[de,pe]=React.useState(!1);const[be,ge]=React.useState(!1);const me=O?re:te;const fe=O?p??se:p;const ve=be&&!Q.disabled;const xe=X&&ie.length===0;const ye=Boolean(ve||ce||de);const De=React.useRef(null);const[we,Ce]=React.useState(null);const Me=React.useRef(null);const ke=React.useRef(null);const he=React.useRef(ve);const je=React.useCallback((e=>{ue(e),I&&I(e)}),[I]);const Ie=React.useCallback((e=>{O?ae(e):ne(e)}),[O,ae,ne]);const Re=React.useMemo((()=>misc.createDebouncedCallback(Ie,150)),[Ie]);const preventBlur=e=>{e.target!==De.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&ve&&we&&we.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:f,onScrollStart:()=>{m&&ve&&(De.current?.focus(),ge(!1))}}),React.useLayoutEffect((()=>{x!==void 0&&(h||ve||je(utils.getDropdownInputText(x)),le(utils.getDropdownSelectedOption(x,h)))}),[h,x,ve,je]),React.useEffect((()=>{ve!==he.current&&(ve&&S&&S(),!ve&&R&&R(),he.current=ve)}),[ve,R,S]),React.useEffect((()=>{if(!h&&!g&&ve&&!fe&&ce.length===0&&we&&ke.current){const e=we.getBoundingClientRect();const o=ke.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout((()=>{we&&ke.current&&we.scrollTo(0,ke.current.offsetTop)}),0)}}),[h,g,ve,fe,ce,we]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...Q,...V,ref:o,id:Y,onColored:v,primary:a,error:N==='error',success:N==='success',focus:de,icon:[D,jsxRuntime.jsx(style.ChevronIcon,{up:ve},'chevron')],iconProps:{...V,...W,...l},palette:{color:Q.disabled?E.labelColorDisabled:E.labelColor,backgroundColor:Q.disabled?E.backgroundColorDisabled:E.backgroundColor,backgroundColorHover:Q.disabled?E.backgroundColorDisabled:E.backgroundColorHover,borderColor:Q.disabled?E.borderColorDisabled:E.borderColor},onClick:e=>{Q.onClick&&Q.onClick(e),Q.disabled||(De.current?.focus(),ve?we&&e.target instanceof Node&&!we.contains(e.target)&&(ge(!1),je(utils.getDropdownInputText(ie,h))):(ge(!0),Ie(''),s&&je('')))},onPointerDown:e=>{Q.onPointerDown&&Q.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{Q.onMouseDown&&Q.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{Q.onFocus&&Q.onFocus(e),pe(!0),De.current&&e.target===De.current&&s&&!h&&!ve&&je('')},onBlur:e=>{Q.onBlur&&Q.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&ve&&we&&we.contains(e.relatedTarget)||(pe(!1),je(utils.getDropdownInputText(ie,h)),ge(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!xe||s||K?null:jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:G,tabIndex:-1,onFocus:()=>{De.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{...V,ref:De,role:"combobox","aria-controls":oe,"aria-expanded":ve,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:ye,label:J,labelId:ee,labelPosition:r,form:G,autoFocus:b,inputMode:s?w:'none',maxLength:k,placeholder:B,readOnly:K||!s,required:xe,disabled:Q.disabled,value:ce,palette:{color:E.color,colorDisabled:E.colorDisabled,placeholderColor:E.placeholderColor,placeholderColorDisabled:E.placeholderColorDisabled},onClick:e=>{ve&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;je(o),Re(o),ge(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(je(utils.getDropdownInputText(ie,h)),ge(!1)),!constants.keyboardKeys.Space.validate(e.key)||ve&&e.currentTarget.selectionStart!==0||(e.preventDefault(),ve||(Ie(''),s&&je('')),ge((e=>!e))),constants.keyboardKeys.Esc.validate(e.key)&&ge(!1),constants.keyboardKeys.Tab.validate(e.key)&&ve&&(e.preventDefault(),ge(!1)),constants.keyboardKeys.ArrowDown.validate(e.key)&&ve&&Me.current)if(e.preventDefault(),!h&&ke.current){const e=[...Me.current.children];const o=e.findIndex((e=>e.contains(ke.current)));const t=e[o+1]??e[0];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusFirstFocusable(Me.current);if(constants.keyboardKeys.ArrowUp.validate(e.key)&&ve&&Me.current)if(e.preventDefault(),!h&&ke.current){const e=[...Me.current.children];const o=e.findIndex((e=>e.contains(ke.current)));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusLastFocusable(Me.current)}}),ie.map((e=>jsxRuntime.jsx("input",{type:"hidden",name:n,value:e.value,form:G,disabled:Q.disabled||e.disabled},e.value)))]}),addon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[h&&ie.length>0?jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,cursor:Q.disabled?'not-allowed':void 0,text:ie.length,textProps:{appearance:'caption',size:'xs'},palette:Q.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!Q.disabled,onClick:e=>{e.stopPropagation(),K||(x===void 0&&le([]),T&&T([]),De.current?.focus(),je(''),Ie(''),ge(!0))}}}):null,!h&&j&&ie.length>0?jsxRuntime.jsx(IconButton.IconButton,{icon:jsxRuntime.jsx(index.Close,{}),size:"l",square:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,onClick:e=>{e.stopPropagation(),K||(x===void 0&&le([]),T&&T(null),De.current?.focus(),je(''),Ie(''),ge(!0))}}):null]}),dropdown:jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:Ce,open:ve,popperReferenceId:Y,secondary:!v,elevated:v,disableAutoFocus:!0,palette:{backgroundColor:E.menuBackgroundColor,borderColor:E.menuBorderColor},empty:me.length===0,loading:fe,loadingMessage:C,loadingIcon:M,loadingIconProps:{...V,...W,...u},emptyMessage:z,emptyIcon:L,emptyIconProps:{...V,...W,...d},onKeyDown:e=>{constants.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),De.current?.focus(),ge(!1)),constants.keyboardKeys.Enter.validate(e.key)&&(De.current?.focus(),je(utils.getDropdownInputText(ie,h)),ge(!1)),constants.keyboardKeys.Esc.validate(e.key)&&(De.current?.focus(),ge(!1)),constants.keyboardKeys.Backspace.validate(e.key)&&!K&&(h||!h&&j)&&(x===void 0&&le([]),T&&T(h?[]:null),je(''),Ie(''))},children:h?jsxRuntime.jsx(DropdownMenuMultiple.DropdownMenuMultiple,{...V,ref:Me,inputRef:De,label:J,name:n,disabled:Q.disabled,readOnly:K,menuListId:oe,inputLabelId:ee,menuOptions:me,dropdownSelectedOption:ie,inputText:ce,optionsMultiToggle:i,groupSelectedOptions:P,optionsMultiToggleCaption:q,onChange:e=>{x===void 0&&le(e),T&&T(e)}}):jsxRuntime.jsx(DropdownMenuSingle.DropdownMenuSingle,{...V,ref:Me,label:J,readOnly:K,multiple:h,disabled:Q.disabled,status:N,menuListId:oe,inputLabelId:ee,menuOptions:me,dropdownSelectedOption:ie,selectedOptionRef:ke,onChange:e=>{const o={...e};x===void 0&&(je(utils.getDropdownInputText(o)),le(utils.getDropdownSelectedOption(o))),T&&T(o),De.current?.focus(),ge(!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 FormInput=require('../FormInput/FormInput.js');var Chip=require('../Chip/Chip.js');var IconButton=require('../IconButton/IconButton.js');var index=require('../../icon-pack/src/icons/Close/index.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,inputMode:w,loadingMessage:C,loadingIcon:M,maxLength:k,multiple:R,clearable:h,onChangeInput:j,onCloseMenu:I,onOpenMenu:S,onSelectOption:T,options:F,loadOptions:O,groupSelectedOptions:P,optionsMultiToggleCaption:q,optionsEmptyMessage:z,optionsEmptyIcon:L,palette:E,placeholder:B,readOnly:K,required:X,status:N,sizeXXS:H,sizeXS:A,sizeS:Z,sizeM:$,sizeL:_,sizeXL:U,form:G,label:J,...Q}=e;const V={size:t,sizeXXS:H,sizeXS:A,sizeS:Z,sizeM:$,sizeL:_,sizeXL:U};const W={sizes:sizes.SIZES_ICON,color:Q.disabled?'content-disabled':'content-onmain-tertiary'};const Y=React.useMemo((()=>Q.id??`${n}-${nanoid.nanoid()}`),[n,Q.id]);const ee=React.useMemo((()=>nanoid.nanoid()),[]);const oe=React.useMemo((()=>nanoid.nanoid()),[]);const[te,ne]=hooks.useFilteredOptions({options:F});const[re,se,ae]=hooks.useLoadedOptions({loadOptions:O,options:F});const[ie,le]=React.useState((()=>utils.getDropdownSelectedOption(x!==void 0?x:y,R)));const[ce,ue]=React.useState((()=>utils.getDropdownInputText(ie,R)));const[de,pe]=React.useState(!1);const[be,ge]=React.useState(!1);const me=O?re:te;const fe=O?p??se:p;const ve=be&&!Q.disabled;const xe=X&&ie.length===0;const ye=Boolean(ve||ce||de);const De=React.useRef(null);const[we,Ce]=React.useState(null);const Me=React.useRef(null);const ke=React.useRef(null);const Re=React.useRef(ve);const he=React.useCallback((e=>{ue(e),j&&j(e)}),[j]);const je=React.useCallback((e=>{O?ae(e):ne(e)}),[O,ae,ne]);const Ie=React.useMemo((()=>misc.createDebouncedCallback(je,150)),[je]);const preventBlur=e=>{e.target!==De.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&ve&&we&&we.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:f,onScrollStart:()=>{m&&ve&&(De.current?.focus(),ge(!1))}}),React.useLayoutEffect((()=>{x!==void 0&&(R||ve||he(utils.getDropdownInputText(x)),le(utils.getDropdownSelectedOption(x,R)))}),[R,x,ve,he]),React.useEffect((()=>{ve!==Re.current&&(ve&&S&&S(),!ve&&I&&I(),Re.current=ve)}),[ve,I,S]),React.useEffect((()=>{if(!R&&!g&&ve&&!fe&&ce.length===0&&we&&ke.current){const e=we.getBoundingClientRect();const o=ke.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout((()=>{we&&ke.current&&we.scrollTo(0,ke.current.offsetTop)}),0)}}),[R,g,ve,fe,ce,we]),React.useEffect((()=>{Q.disabled&&pe(!1)}),[Q.disabled]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...Q,...V,ref:o,id:Y,onColored:v,primary:a,error:N==='error',success:N==='success',focus:de,icon:[D,jsxRuntime.jsx(style.ChevronIcon,{up:ve},'chevron')],iconProps:{...V,...W,...l},palette:{color:Q.disabled?E.labelColorDisabled:E.labelColor,backgroundColor:Q.disabled?E.backgroundColorDisabled:E.backgroundColor,backgroundColorHover:Q.disabled?E.backgroundColorDisabled:E.backgroundColorHover,borderColor:Q.disabled?E.borderColorDisabled:E.borderColor},onClick:e=>{Q.onClick&&Q.onClick(e),Q.disabled||(De.current?.focus(),ve?we&&e.target instanceof Node&&!we.contains(e.target)&&(ge(!1),he(utils.getDropdownInputText(ie,R))):(ge(!0),je(''),s&&he('')))},onPointerDown:e=>{Q.onPointerDown&&Q.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{Q.onMouseDown&&Q.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{Q.onFocus&&Q.onFocus(e),pe(!0),De.current&&e.target===De.current&&s&&!R&&!ve&&he('')},onBlur:e=>{Q.onBlur&&Q.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&ve&&we&&we.contains(e.relatedTarget)||(pe(!1),he(utils.getDropdownInputText(ie,R)),ge(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!xe||s||K?null:jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:G,tabIndex:-1,onFocus:()=>{De.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{...V,ref:De,role:"combobox","aria-controls":oe,"aria-expanded":ve,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:ye,label:J,labelId:ee,labelPosition:r,form:G,autoFocus:b,inputMode:s?w:'none',maxLength:k,placeholder:B,readOnly:K||!s,required:xe,disabled:Q.disabled,value:ce,palette:{color:E.color,colorDisabled:E.colorDisabled,placeholderColor:E.placeholderColor,placeholderColorDisabled:E.placeholderColorDisabled},onClick:e=>{ve&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;he(o),Ie(o),ge(!0)},onKeyDown:e=>{if(constants.keyboardKeys.Enter.validate(e.key)&&(he(utils.getDropdownInputText(ie,R)),ge(!1)),!constants.keyboardKeys.Space.validate(e.key)||ve&&e.currentTarget.selectionStart!==0||(e.preventDefault(),ve||(je(''),s&&he('')),ge((e=>!e))),constants.keyboardKeys.Esc.validate(e.key)&&ge(!1),constants.keyboardKeys.Tab.validate(e.key)&&ve&&(e.preventDefault(),ge(!1)),constants.keyboardKeys.ArrowDown.validate(e.key)&&ve&&Me.current)if(e.preventDefault(),!R&&ke.current){const e=[...Me.current.children];const o=e.findIndex((e=>e.contains(ke.current)));const t=e[o+1]??e[0];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusFirstFocusable(Me.current);if(constants.keyboardKeys.ArrowUp.validate(e.key)&&ve&&Me.current)if(e.preventDefault(),!R&&ke.current){const e=[...Me.current.children];const o=e.findIndex((e=>e.contains(ke.current)));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusLastFocusable(Me.current)}}),ie.map((e=>jsxRuntime.jsx("input",{type:"hidden",name:n,value:e.value,form:G,disabled:Q.disabled||e.disabled},e.value)))]}),addon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[R&&ie.length>0?jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,cursor:Q.disabled?'not-allowed':void 0,text:ie.length,textProps:{appearance:'caption',size:'xs'},palette:Q.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!Q.disabled,onClick:e=>{e.stopPropagation(),K||(x===void 0&&le([]),T&&T([]),De.current?.focus(),he(''),je(''),ge(!0))}}}):null,!R&&h&&ie.length>0?jsxRuntime.jsx(IconButton.IconButton,{icon:jsxRuntime.jsx(index.Close,{}),size:"l",square:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,onClick:e=>{e.stopPropagation(),K||(x===void 0&&le([]),T&&T(null),De.current?.focus(),he(''),je(''),ge(!0))}}):null]}),dropdown:jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:Ce,open:ve,popperReferenceId:Y,secondary:!v,elevated:v,disableAutoFocus:!0,palette:{backgroundColor:E.menuBackgroundColor,borderColor:E.menuBorderColor},empty:me.length===0,loading:fe,loadingMessage:C,loadingIcon:M,loadingIconProps:{...V,...W,...u},emptyMessage:z,emptyIcon:L,emptyIconProps:{...V,...W,...d},onKeyDown:e=>{constants.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),De.current?.focus(),ge(!1)),constants.keyboardKeys.Enter.validate(e.key)&&(De.current?.focus(),he(utils.getDropdownInputText(ie,R)),ge(!1)),constants.keyboardKeys.Esc.validate(e.key)&&(De.current?.focus(),ge(!1)),constants.keyboardKeys.Backspace.validate(e.key)&&!K&&(R||!R&&h)&&(x===void 0&&le([]),T&&T(R?[]:null),he(''),je(''))},children:R?jsxRuntime.jsx(DropdownMenuMultiple.DropdownMenuMultiple,{...V,ref:Me,inputRef:De,label:J,name:n,disabled:Q.disabled,readOnly:K,menuListId:oe,inputLabelId:ee,menuOptions:me,dropdownSelectedOption:ie,inputText:ce,optionsMultiToggle:i,groupSelectedOptions:P,optionsMultiToggleCaption:q,onChange:e=>{x===void 0&&le(e),T&&T(e)}}):jsxRuntime.jsx(DropdownMenuSingle.DropdownMenuSingle,{...V,ref:Me,label:J,readOnly:K,multiple:R,disabled:Q.disabled,status:N,menuListId:oe,inputLabelId:ee,menuOptions:me,dropdownSelectedOption:ie,selectedOptionRef:ke,onChange:e=>{const o={...e};x===void 0&&(he(utils.getDropdownInputText(o)),le(utils.getDropdownSelectedOption(o))),T&&T(o),De.current?.focus(),ge(!1)}})})})})),{sizes:sizes.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
 //# sourceMappingURL=Dropdown.js.map

package/components/Dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { 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 type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES, SIZES_ICON } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/*\n \n * Компонент для выбора одной или нескольких опций из числа доступных.\n \n Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n form,\n label,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconBaseProps: IconProps = {\n sizes: SIZES_ICON,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption \| DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen \|\| inputText \|\| focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> \| React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) \|\|\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top \|\| selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n 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 icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...iconProps,\n }}\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 addon={\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n marginLeft='var(--gap, 12px)'\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n marginLeft='var(--gap, 12px)'\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 </>\n }\n dropdown={\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple \|\| (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n 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 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","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","jsx","Styled","up","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","jsxs","_Fragment","children","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","addon","Chip","black","marginLeft","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","SIZES","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { 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 type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES, SIZES_ICON } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/*\n \n * Компонент для выбора одной или нескольких опций из числа доступных.\n \n Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n form,\n label,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconBaseProps: IconProps = {\n sizes: SIZES_ICON,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption \| DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen \|\| inputText \|\| focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> \| React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) \|\|\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top \|\| selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n useEffect(() => {\n if (rootProps.disabled) {\n setFocusWithin(false)\n }\n }, [rootProps.disabled])\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n id={formInputLabelId}\n onColored={contrast}\n primary={primary}\n error={status === 'error'}\n success={status === 'success'}\n focus={focusWithin}\n icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...iconProps,\n }}\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 addon={\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n marginLeft='var(--gap, 12px)'\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n marginLeft='var(--gap, 12px)'\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 </>\n }\n dropdown={\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple \|\| (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n 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 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","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","jsx","Styled","up","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","jsxs","_Fragment","children","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","addon","Chip","black","marginLeft","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","SIZES","displayName"],"mappings":"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"}

package/components/Dropdown/Dropdown.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{forwardRef,useMemo,useState,useRef,useCallback,useLayoutEffect,useEffect}from'react';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollMonitor}from'../../hooks/useScrollMonitor.mjs';import{focusFirstFocusable,focusLastFocusable}from'../../shared/utils/dom.mjs';import{createDebouncedCallback}from'../../shared/utils/misc.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DropdownMenu}from'./DropdownMenu.mjs';import{useFilteredOptions,useLoadedOptions}from'./hooks.mjs';import{SIZES,SIZES_ICON}from'./sizes.mjs';import{getDropdownSelectedOption,getDropdownInputText}from'./utils.mjs';import{ChevronIcon,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{FormInput}from'../FormInput/FormInput.mjs';import{Chip}from'../Chip/Chip.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const COMPONENT_NAME='Dropdown';const Dropdown=withMergedProps(forwardRef(((e,o)=>{const{size:t="m",name:n="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:l=!0,optionsMultiToggle:a=!0,iconProps:i={},menuProps:c={},loadingIconProps:d={},optionsEmptyIconProps:u={},loading:p,autoFocus:m,disableAutoScrollToSelectedOption:b,closeMenuOnScroll:f,scrollMonitorTarget:g,contrast:C,selectedOption:y,defaultSelectedOption:D,icon:w,inputMode:M,loadingMessage:I,loadingIcon:k,maxLength:v,multiple:S,clearable:h,onChangeInput:x,onCloseMenu:j,onOpenMenu:O,onSelectOption:T,options:F,loadOptions:P,groupSelectedOptions:E,optionsMultiToggleCaption:L,optionsEmptyMessage:z,optionsEmptyIcon:B,palette:K,placeholder:R,readOnly:N,required:X,status:A,sizeXXS:H,sizeXS:q,sizeS:Z,sizeM:_,sizeL:$,sizeXL:U,form:G,label:J,...Q}=e;const V={size:t,sizeXXS:H,sizeXS:q,sizeS:Z,sizeM:_,sizeL:$,sizeXL:U};const W={sizes:SIZES_ICON,color:Q.disabled?'content-disabled':'content-onmain-tertiary'};const Y=useMemo((()=>Q.id??`${n}-${nanoid()}`),[n,Q.id]);const ee=useMemo((()=>nanoid()),[]);const oe=useMemo((()=>nanoid()),[]);const[te,ne]=useFilteredOptions({options:F});const[re,se,le]=useLoadedOptions({loadOptions:P,options:F});const[ae,ie]=useState((()=>getDropdownSelectedOption(y!==void 0?y:D,S)));const[ce,de]=useState((()=>getDropdownInputText(ae,S)));const[ue,pe]=useState(!1);const[me,be]=useState(!1);const fe=P?re:te;const ge=P?p??se:p;const Ce=me&&!Q.disabled;const ye=X&&ae.length===0;const De=Boolean(Ce||ce||ue);const we=useRef(null);const[Me,Ie]=useState(null);const ke=useRef(null);const ve=useRef(null);const Se=useRef(Ce);const he=useCallback((e=>{de(e),x&&x(e)}),[x]);const xe=useCallback((e=>{P?le(e):ne(e)}),[P,le,ne]);const je=useMemo((()=>createDebouncedCallback(xe,150)),[xe]);const preventBlur=e=>{e.target!==we.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&Ce&&Me&&Me.contains(e.target))&&e.preventDefault()};return useScrollMonitor({target:g,onScrollStart:()=>{f&&Ce&&(we.current?.focus(),be(!1))}}),useLayoutEffect((()=>{y!==void 0&&(S||Ce||he(getDropdownInputText(y)),ie(getDropdownSelectedOption(y,S)))}),[S,y,Ce,he]),useEffect((()=>{Ce!==Se.current&&(Ce&&O&&O(),!Ce&&j&&j(),Se.current=Ce)}),[Ce,j,O]),useEffect((()=>{if(!S&&!b&&Ce&&!ge&&ce.length===0&&Me&&ve.current){const e=Me.getBoundingClientRect();const o=ve.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout((()=>{Me&&ve.current&&Me.scrollTo(0,ve.current.offsetTop)}),0)}}),[S,b,Ce,ge,ce,Me]),jsx(FormInputLabel,{...Q,...V,ref:o,id:Y,onColored:C,primary:l,error:A==='error',success:A==='success',focus:ue,icon:[w,jsx(ChevronIcon,{up:Ce},'chevron')],iconProps:{...V,...W,...i},palette:{color:Q.disabled?K.labelColorDisabled:K.labelColor,backgroundColor:Q.disabled?K.backgroundColorDisabled:K.backgroundColor,backgroundColorHover:Q.disabled?K.backgroundColorDisabled:K.backgroundColorHover,borderColor:Q.disabled?K.borderColorDisabled:K.borderColor},onClick:e=>{Q.onClick&&Q.onClick(e),Q.disabled||(we.current?.focus(),Ce?Me&&e.target instanceof Node&&!Me.contains(e.target)&&(be(!1),he(getDropdownInputText(ae,S))):(be(!0),xe(''),s&&he('')))},onPointerDown:e=>{Q.onPointerDown&&Q.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{Q.onMouseDown&&Q.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{Q.onFocus&&Q.onFocus(e),pe(!0),we.current&&e.target===we.current&&s&&!S&&!Ce&&he('')},onBlur:e=>{Q.onBlur&&Q.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&Ce&&Me&&Me.contains(e.relatedTarget)||(pe(!1),he(getDropdownInputText(ae,S)),be(!1))},input:jsxs(Fragment,{children:[!ye||s||N?null:jsx(InputMimic,{required:!0,type:"text",inputMode:"none",form:G,tabIndex:-1,onFocus:()=>{we.current?.focus()}}),jsx(FormInput,{...V,ref:we,role:"combobox","aria-controls":oe,"aria-expanded":Ce,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:De,label:J,labelId:ee,labelPosition:r,form:G,autoFocus:m,inputMode:s?M:'none',maxLength:v,placeholder:R,readOnly:N||!s,required:ye,disabled:Q.disabled,value:ce,palette:{color:K.color,colorDisabled:K.colorDisabled,placeholderColor:K.placeholderColor,placeholderColorDisabled:K.placeholderColorDisabled},onClick:e=>{Ce&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;he(o),je(o),be(!0)},onKeyDown:e=>{if(keyboardKeys.Enter.validate(e.key)&&(he(getDropdownInputText(ae,S)),be(!1)),!keyboardKeys.Space.validate(e.key)||Ce&&e.currentTarget.selectionStart!==0||(e.preventDefault(),Ce||(xe(''),s&&he('')),be((e=>!e))),keyboardKeys.Esc.validate(e.key)&&be(!1),keyboardKeys.Tab.validate(e.key)&&Ce&&(e.preventDefault(),be(!1)),keyboardKeys.ArrowDown.validate(e.key)&&Ce&&ke.current)if(e.preventDefault(),!S&&ve.current){const e=[...ke.current.children];const o=e.findIndex((e=>e.contains(ve.current)));const t=e[o+1]??e[0];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusFirstFocusable(ke.current);if(keyboardKeys.ArrowUp.validate(e.key)&&Ce&&ke.current)if(e.preventDefault(),!S&&ve.current){const e=[...ke.current.children];const o=e.findIndex((e=>e.contains(ve.current)));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusLastFocusable(ke.current)}}),ae.map((e=>jsx("input",{type:"hidden",name:n,value:e.value,form:G,disabled:Q.disabled||e.disabled},e.value)))]}),addon:jsxs(Fragment,{children:[S&&ae.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,cursor:Q.disabled?'not-allowed':void 0,text:ae.length,textProps:{appearance:'caption',size:'xs'},palette:Q.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!Q.disabled,onClick:e=>{e.stopPropagation(),N||(y===void 0&&ie([]),T&&T([]),we.current?.focus(),he(''),xe(''),be(!0))}}}):null,!S&&h&&ae.length>0?jsx(IconButton,{icon:jsx(Close,{}),size:"l",square:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,onClick:e=>{e.stopPropagation(),N||(y===void 0&&ie([]),T&&T(null),we.current?.focus(),he(''),xe(''),be(!0))}}):null]}),dropdown:jsx(DropdownMenu,{...c,setRef:Ie,open:Ce,popperReferenceId:Y,secondary:!C,elevated:C,disableAutoFocus:!0,palette:{backgroundColor:K.menuBackgroundColor,borderColor:K.menuBorderColor},empty:fe.length===0,loading:ge,loadingMessage:I,loadingIcon:k,loadingIconProps:{...V,...W,...d},emptyMessage:z,emptyIcon:B,emptyIconProps:{...V,...W,...u},onKeyDown:e=>{keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),we.current?.focus(),be(!1)),keyboardKeys.Enter.validate(e.key)&&(we.current?.focus(),he(getDropdownInputText(ae,S)),be(!1)),keyboardKeys.Esc.validate(e.key)&&(we.current?.focus(),be(!1)),keyboardKeys.Backspace.validate(e.key)&&!N&&(S||!S&&h)&&(y===void 0&&ie([]),T&&T(S?[]:null),he(''),xe(''))},children:S?jsx(DropdownMenuMultiple,{...V,ref:ke,inputRef:we,label:J,name:n,disabled:Q.disabled,readOnly:N,menuListId:oe,inputLabelId:ee,menuOptions:fe,dropdownSelectedOption:ae,inputText:ce,optionsMultiToggle:a,groupSelectedOptions:E,optionsMultiToggleCaption:L,onChange:e=>{y===void 0&&ie(e),T&&T(e)}}):jsx(DropdownMenuSingle,{...V,ref:ke,label:J,readOnly:N,multiple:S,disabled:Q.disabled,status:A,menuListId:oe,inputLabelId:ee,menuOptions:fe,dropdownSelectedOption:ae,selectedOptionRef:ve,onChange:e=>{const o={...e};y===void 0&&(he(getDropdownInputText(o)),ie(getDropdownSelectedOption(o))),T&&T(o),we.current?.focus(),be(!1)}})})})})),{sizes:SIZES,displayName:"Dropdown"});export{COMPONENT_NAME,Dropdown};
+import{forwardRef,useMemo,useState,useRef,useCallback,useLayoutEffect,useEffect}from'react';import{nanoid}from'nanoid';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollMonitor}from'../../hooks/useScrollMonitor.mjs';import{focusFirstFocusable,focusLastFocusable}from'../../shared/utils/dom.mjs';import{createDebouncedCallback}from'../../shared/utils/misc.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DropdownMenu}from'./DropdownMenu.mjs';import{useFilteredOptions,useLoadedOptions}from'./hooks.mjs';import{SIZES,SIZES_ICON}from'./sizes.mjs';import{getDropdownSelectedOption,getDropdownInputText}from'./utils.mjs';import{ChevronIcon,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{FormInput}from'../FormInput/FormInput.mjs';import{Chip}from'../Chip/Chip.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const COMPONENT_NAME='Dropdown';const Dropdown=withMergedProps(forwardRef(((e,o)=>{const{size:t="m",name:n="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:l=!0,optionsMultiToggle:a=!0,iconProps:i={},menuProps:d={},loadingIconProps:c={},optionsEmptyIconProps:u={},loading:p,autoFocus:m,disableAutoScrollToSelectedOption:b,closeMenuOnScroll:f,scrollMonitorTarget:g,contrast:C,selectedOption:y,defaultSelectedOption:D,icon:w,inputMode:M,loadingMessage:I,loadingIcon:k,maxLength:v,multiple:S,clearable:h,onChangeInput:x,onCloseMenu:j,onOpenMenu:O,onSelectOption:T,options:F,loadOptions:P,groupSelectedOptions:E,optionsMultiToggleCaption:L,optionsEmptyMessage:z,optionsEmptyIcon:B,palette:K,placeholder:R,readOnly:N,required:X,status:A,sizeXXS:H,sizeXS:q,sizeS:Z,sizeM:_,sizeL:$,sizeXL:U,form:G,label:J,...Q}=e;const V={size:t,sizeXXS:H,sizeXS:q,sizeS:Z,sizeM:_,sizeL:$,sizeXL:U};const W={sizes:SIZES_ICON,color:Q.disabled?'content-disabled':'content-onmain-tertiary'};const Y=useMemo((()=>Q.id??`${n}-${nanoid()}`),[n,Q.id]);const ee=useMemo((()=>nanoid()),[]);const oe=useMemo((()=>nanoid()),[]);const[te,ne]=useFilteredOptions({options:F});const[re,se,le]=useLoadedOptions({loadOptions:P,options:F});const[ae,ie]=useState((()=>getDropdownSelectedOption(y!==void 0?y:D,S)));const[de,ce]=useState((()=>getDropdownInputText(ae,S)));const[ue,pe]=useState(!1);const[me,be]=useState(!1);const fe=P?re:te;const ge=P?p??se:p;const Ce=me&&!Q.disabled;const ye=X&&ae.length===0;const De=Boolean(Ce||de||ue);const we=useRef(null);const[Me,Ie]=useState(null);const ke=useRef(null);const ve=useRef(null);const Se=useRef(Ce);const he=useCallback((e=>{ce(e),x&&x(e)}),[x]);const xe=useCallback((e=>{P?le(e):ne(e)}),[P,le,ne]);const je=useMemo((()=>createDebouncedCallback(xe,150)),[xe]);const preventBlur=e=>{e.target!==we.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||d.renderInPortal&&Ce&&Me&&Me.contains(e.target))&&e.preventDefault()};return useScrollMonitor({target:g,onScrollStart:()=>{f&&Ce&&(we.current?.focus(),be(!1))}}),useLayoutEffect((()=>{y!==void 0&&(S||Ce||he(getDropdownInputText(y)),ie(getDropdownSelectedOption(y,S)))}),[S,y,Ce,he]),useEffect((()=>{Ce!==Se.current&&(Ce&&O&&O(),!Ce&&j&&j(),Se.current=Ce)}),[Ce,j,O]),useEffect((()=>{if(!S&&!b&&Ce&&!ge&&de.length===0&&Me&&ve.current){const e=Me.getBoundingClientRect();const o=ve.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout((()=>{Me&&ve.current&&Me.scrollTo(0,ve.current.offsetTop)}),0)}}),[S,b,Ce,ge,de,Me]),useEffect((()=>{Q.disabled&&pe(!1)}),[Q.disabled]),jsx(FormInputLabel,{...Q,...V,ref:o,id:Y,onColored:C,primary:l,error:A==='error',success:A==='success',focus:ue,icon:[w,jsx(ChevronIcon,{up:Ce},'chevron')],iconProps:{...V,...W,...i},palette:{color:Q.disabled?K.labelColorDisabled:K.labelColor,backgroundColor:Q.disabled?K.backgroundColorDisabled:K.backgroundColor,backgroundColorHover:Q.disabled?K.backgroundColorDisabled:K.backgroundColorHover,borderColor:Q.disabled?K.borderColorDisabled:K.borderColor},onClick:e=>{Q.onClick&&Q.onClick(e),Q.disabled||(we.current?.focus(),Ce?Me&&e.target instanceof Node&&!Me.contains(e.target)&&(be(!1),he(getDropdownInputText(ae,S))):(be(!0),xe(''),s&&he('')))},onPointerDown:e=>{Q.onPointerDown&&Q.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{Q.onMouseDown&&Q.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{Q.onFocus&&Q.onFocus(e),pe(!0),we.current&&e.target===we.current&&s&&!S&&!Ce&&he('')},onBlur:e=>{Q.onBlur&&Q.onBlur(e),e.currentTarget.contains(e.relatedTarget)||d.renderInPortal&&Ce&&Me&&Me.contains(e.relatedTarget)||(pe(!1),he(getDropdownInputText(ae,S)),be(!1))},input:jsxs(Fragment,{children:[!ye||s||N?null:jsx(InputMimic,{required:!0,type:"text",inputMode:"none",form:G,tabIndex:-1,onFocus:()=>{we.current?.focus()}}),jsx(FormInput,{...V,ref:we,role:"combobox","aria-controls":oe,"aria-expanded":Ce,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",active:De,label:J,labelId:ee,labelPosition:r,form:G,autoFocus:m,inputMode:s?M:'none',maxLength:v,placeholder:R,readOnly:N||!s,required:ye,disabled:Q.disabled,value:de,palette:{color:K.color,colorDisabled:K.colorDisabled,placeholderColor:K.placeholderColor,placeholderColorDisabled:K.placeholderColorDisabled},onClick:e=>{Ce&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;he(o),je(o),be(!0)},onKeyDown:e=>{if(keyboardKeys.Enter.validate(e.key)&&(he(getDropdownInputText(ae,S)),be(!1)),!keyboardKeys.Space.validate(e.key)||Ce&&e.currentTarget.selectionStart!==0||(e.preventDefault(),Ce||(xe(''),s&&he('')),be((e=>!e))),keyboardKeys.Esc.validate(e.key)&&be(!1),keyboardKeys.Tab.validate(e.key)&&Ce&&(e.preventDefault(),be(!1)),keyboardKeys.ArrowDown.validate(e.key)&&Ce&&ke.current)if(e.preventDefault(),!S&&ve.current){const e=[...ke.current.children];const o=e.findIndex((e=>e.contains(ve.current)));const t=e[o+1]??e[0];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusFirstFocusable(ke.current);if(keyboardKeys.ArrowUp.validate(e.key)&&Ce&&ke.current)if(e.preventDefault(),!S&&ve.current){const e=[...ke.current.children];const o=e.findIndex((e=>e.contains(ve.current)));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&focusFirstFocusable(t)}else focusLastFocusable(ke.current)}}),ae.map((e=>jsx("input",{type:"hidden",name:n,value:e.value,form:G,disabled:Q.disabled||e.disabled},e.value)))]}),addon:jsxs(Fragment,{children:[S&&ae.length>0?jsx(Chip,{size:"xs",active:!0,black:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,cursor:Q.disabled?'not-allowed':void 0,text:ae.length,textProps:{appearance:'caption',size:'xs'},palette:Q.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!Q.disabled,onClick:e=>{e.stopPropagation(),N||(y===void 0&&ie([]),T&&T([]),we.current?.focus(),he(''),xe(''),be(!0))}}}):null,!S&&h&&ae.length>0?jsx(IconButton,{icon:jsx(Close,{}),size:"l",square:!0,marginLeft:"var(--gap, 12px)",disabled:Q.disabled,onClick:e=>{e.stopPropagation(),N||(y===void 0&&ie([]),T&&T(null),we.current?.focus(),he(''),xe(''),be(!0))}}):null]}),dropdown:jsx(DropdownMenu,{...d,setRef:Ie,open:Ce,popperReferenceId:Y,secondary:!C,elevated:C,disableAutoFocus:!0,palette:{backgroundColor:K.menuBackgroundColor,borderColor:K.menuBorderColor},empty:fe.length===0,loading:ge,loadingMessage:I,loadingIcon:k,loadingIconProps:{...V,...W,...c},emptyMessage:z,emptyIcon:B,emptyIconProps:{...V,...W,...u},onKeyDown:e=>{keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),we.current?.focus(),be(!1)),keyboardKeys.Enter.validate(e.key)&&(we.current?.focus(),he(getDropdownInputText(ae,S)),be(!1)),keyboardKeys.Esc.validate(e.key)&&(we.current?.focus(),be(!1)),keyboardKeys.Backspace.validate(e.key)&&!N&&(S||!S&&h)&&(y===void 0&&ie([]),T&&T(S?[]:null),he(''),xe(''))},children:S?jsx(DropdownMenuMultiple,{...V,ref:ke,inputRef:we,label:J,name:n,disabled:Q.disabled,readOnly:N,menuListId:oe,inputLabelId:ee,menuOptions:fe,dropdownSelectedOption:ae,inputText:de,optionsMultiToggle:a,groupSelectedOptions:E,optionsMultiToggleCaption:L,onChange:e=>{y===void 0&&ie(e),T&&T(e)}}):jsx(DropdownMenuSingle,{...V,ref:ke,label:J,readOnly:N,multiple:S,disabled:Q.disabled,status:A,menuListId:oe,inputLabelId:ee,menuOptions:fe,dropdownSelectedOption:ae,selectedOptionRef:ve,onChange:e=>{const o={...e};y===void 0&&(he(getDropdownInputText(o)),ie(getDropdownSelectedOption(o))),T&&T(o),we.current?.focus(),be(!1)}})})})})),{sizes:SIZES,displayName:"Dropdown"});export{COMPONENT_NAME,Dropdown};
 //# sourceMappingURL=Dropdown.mjs.map

package/components/Dropdown/Dropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.mjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { 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 type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES, SIZES_ICON } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/*\n \n * Компонент для выбора одной или нескольких опций из числа доступных.\n \n Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n form,\n label,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconBaseProps: IconProps = {\n sizes: SIZES_ICON,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption \| DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen \|\| inputText \|\| focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> \| React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) \|\|\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top \|\| selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n 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 icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...iconProps,\n }}\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 addon={\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n marginLeft='var(--gap, 12px)'\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n marginLeft='var(--gap, 12px)'\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 </>\n }\n dropdown={\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple \|\| (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n 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 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","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","Styled","up","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","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","addon","Chip","black","marginLeft","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","SIZES","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Dropdown.mjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react'\nimport { nanoid } from 'nanoid'\nimport { 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 type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { useFilteredOptions, useLoadedOptions } from './hooks'\nimport { SIZES, SIZES_ICON } from './sizes'\nimport { getDropdownInputText, getDropdownSelectedOption } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption, DropdownOptionGroup } from './types'\nimport { DropdownMenuMultiple } from './DropdownMenuMultiple'\nimport { DropdownMenuSingle } from './DropdownMenuSingle'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/*\n \n * Компонент для выбора одной или нескольких опций из числа доступных.\n \n Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<DropdownProps>>((props, ref) => {\n const {\n size = 'm',\n name = 'fox-dropdown',\n labelPosition = 'dynamic',\n searchable = true,\n primary = true,\n optionsMultiToggle = true,\n iconProps = {},\n menuProps = {},\n loadingIconProps = {},\n optionsEmptyIconProps = {},\n loading,\n autoFocus,\n disableAutoScrollToSelectedOption,\n closeMenuOnScroll,\n scrollMonitorTarget,\n contrast,\n selectedOption,\n defaultSelectedOption,\n icon,\n inputMode,\n loadingMessage,\n loadingIcon,\n maxLength,\n multiple,\n clearable,\n onChangeInput,\n onCloseMenu,\n onOpenMenu,\n onSelectOption,\n options,\n loadOptions,\n groupSelectedOptions,\n optionsMultiToggleCaption,\n optionsEmptyMessage,\n optionsEmptyIcon,\n palette,\n placeholder,\n readOnly,\n required,\n status,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n form,\n label,\n ...rootProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconBaseProps: IconProps = {\n sizes: SIZES_ICON,\n color: rootProps.disabled ? 'content-disabled' : 'content-onmain-tertiary',\n }\n\n const formInputLabelId = useMemo(() => rootProps.id ?? `${name}-${nanoid()}`, [name, rootProps.id])\n const inputLabelId = useMemo(() => nanoid(), [])\n const menuListId = useMemo(() => nanoid(), [])\n\n const [filteredOptions, getFilteredOptions] = useFilteredOptions({\n options,\n })\n\n const [loadedOptions, optionsLoading, getLoadedOptions] = useLoadedOptions({\n loadOptions,\n options,\n })\n\n const [dropdownSelectedOption, setDropdownSelectedOption] = useState<DropdownOption[]>(() =>\n getDropdownSelectedOption(selectedOption !== undefined ? selectedOption : defaultSelectedOption, multiple)\n )\n\n const [inputText, setInputText] = useState<string>(() => getDropdownInputText(dropdownSelectedOption, multiple))\n\n const [focusWithin, setFocusWithin] = useState<boolean>(false)\n\n const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n const menuOptions: (DropdownOption \| DropdownOptionGroup)[] = loadOptions ? loadedOptions : filteredOptions\n const menuOptionsLoading = loadOptions ? (loading ?? optionsLoading) : loading\n\n const menuOpen = menuOpenRequest && !rootProps.disabled\n\n const inputRequired = required && dropdownSelectedOption.length === 0\n const inputActive = Boolean(menuOpen \|\| inputText \|\| focusWithin)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n const menuListRef = useRef<HTMLUListElement>(null)\n const selectedOptionRef = useRef<HTMLElement>(null)\n const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n const updateInputText = useCallback(\n (inputTextValue: string) => {\n setInputText(inputTextValue)\n\n if (onChangeInput) {\n onChangeInput(inputTextValue)\n }\n },\n [onChangeInput]\n )\n\n const updateOptions = useCallback(\n (inputTextValue: string) => {\n if (loadOptions) {\n getLoadedOptions(inputTextValue)\n } else {\n getFilteredOptions(inputTextValue)\n }\n },\n [loadOptions, getLoadedOptions, getFilteredOptions]\n )\n\n const updateOptionsDebounced = useMemo(() => {\n return createDebouncedCallback(updateOptions, 150)\n }, [updateOptions])\n\n const preventBlur = (evt: React.PointerEvent<HTMLDivElement> \| React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (\n evt.target !== inputRef.current &&\n evt.target instanceof Node &&\n (evt.currentTarget.contains(evt.target) \|\|\n (menuProps.renderInPortal && menuOpen && menuRef && menuRef.contains(evt.target)))\n ) {\n evt.preventDefault()\n }\n }\n\n useScrollMonitor({\n target: scrollMonitorTarget,\n onScrollStart: () => {\n if (closeMenuOnScroll && menuOpen) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n },\n })\n\n useLayoutEffect(() => {\n if (selectedOption === undefined) return\n\n if (!multiple && !menuOpen) {\n updateInputText(getDropdownInputText(selectedOption))\n }\n setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n }, [multiple, selectedOption, menuOpen, updateInputText])\n\n useEffect(() => {\n if (menuOpen === menuOpenPrevRef.current) return\n\n if (menuOpen && onOpenMenu) onOpenMenu()\n if (!menuOpen && onCloseMenu) onCloseMenu()\n\n menuOpenPrevRef.current = menuOpen\n }, [menuOpen, onCloseMenu, onOpenMenu])\n\n useEffect(() => {\n if (\n !multiple &&\n !disableAutoScrollToSelectedOption &&\n menuOpen &&\n !menuOptionsLoading &&\n inputText.length === 0 &&\n menuRef &&\n selectedOptionRef.current\n ) {\n const menuRect = menuRef.getBoundingClientRect()\n const selectedOptionRect = selectedOptionRef.current.getBoundingClientRect()\n\n if (selectedOptionRect.top < menuRect.top \|\| selectedOptionRect.bottom > menuRect.bottom) {\n setTimeout(() => {\n if (menuRef && selectedOptionRef.current) {\n menuRef.scrollTo(0, selectedOptionRef.current.offsetTop)\n }\n }, 0)\n }\n }\n }, [multiple, disableAutoScrollToSelectedOption, menuOpen, menuOptionsLoading, inputText, menuRef])\n\n useEffect(() => {\n if (rootProps.disabled) {\n setFocusWithin(false)\n }\n }, [rootProps.disabled])\n\n return (\n <FormInputLabel\n {...rootProps}\n {...sizeProps}\n ref={ref}\n id={formInputLabelId}\n onColored={contrast}\n primary={primary}\n error={status === 'error'}\n success={status === 'success'}\n focus={focusWithin}\n icon={[icon, <Styled.ChevronIcon key='chevron' up={menuOpen} />]}\n iconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...iconProps,\n }}\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 addon={\n <>\n {multiple && dropdownSelectedOption.length > 0 ? (\n <Chip\n size='xs'\n active\n black\n marginLeft='var(--gap, 12px)'\n disabled={rootProps.disabled}\n cursor={rootProps.disabled ? 'not-allowed' : undefined}\n text={dropdownSelectedOption.length}\n textProps={{\n appearance: 'caption',\n size: 'xs',\n }}\n palette={\n rootProps.disabled\n ? {\n color: 'content-disabled',\n colorHover: 'content-disabled',\n backgroundColor: 'bg-disabled-small',\n backgroundColorHover: 'bg-disabled-small',\n }\n : undefined\n }\n onPointerDown={(evt) => {\n evt.preventDefault()\n }}\n onMouseDown={(evt) => {\n if (!window.PointerEvent) evt.preventDefault()\n }}\n discardButtonProps={{\n square: true,\n contrast: !rootProps.disabled,\n onClick: (evt) => {\n evt.stopPropagation()\n\n if (!readOnly) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption([])\n\n inputRef.current?.focus()\n updateInputText('')\n updateOptions('')\n setMenuOpenRequest(true)\n }\n },\n }}\n />\n ) : null}\n {!multiple && clearable && dropdownSelectedOption.length > 0 ? (\n <IconButton\n icon={<Close />}\n size='l'\n square\n marginLeft='var(--gap, 12px)'\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 </>\n }\n dropdown={\n <DropdownMenu\n {...menuProps}\n setRef={setMenuRef}\n open={menuOpen}\n popperReferenceId={formInputLabelId}\n secondary={!contrast}\n elevated={contrast}\n disableAutoFocus\n palette={{\n backgroundColor: palette.menuBackgroundColor,\n borderColor: palette.menuBorderColor,\n }}\n empty={menuOptions.length === 0}\n loading={menuOptionsLoading}\n loadingMessage={loadingMessage}\n loadingIcon={loadingIcon}\n loadingIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...loadingIconProps,\n }}\n emptyMessage={optionsEmptyMessage}\n emptyIcon={optionsEmptyIcon}\n emptyIconProps={{\n ...sizeProps,\n ...iconBaseProps,\n ...optionsEmptyIconProps,\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.Tab.validate(evt.key)) {\n evt.preventDefault()\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Enter.validate(evt.key)) {\n inputRef.current?.focus()\n updateInputText(getDropdownInputText(dropdownSelectedOption, multiple))\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Esc.validate(evt.key)) {\n inputRef.current?.focus()\n setMenuOpenRequest(false)\n }\n\n if (keyboardKeys.Backspace.validate(evt.key) && !readOnly && (multiple \|\| (!multiple && clearable))) {\n if (selectedOption === undefined) {\n setDropdownSelectedOption([])\n }\n\n if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n updateInputText('')\n updateOptions('')\n }\n }}\n >\n {multiple ? (\n <DropdownMenuMultiple\n {...sizeProps}\n ref={menuListRef}\n inputRef={inputRef}\n label={label}\n name={name}\n disabled={rootProps.disabled}\n readOnly={readOnly}\n menuListId={menuListId}\n inputLabelId={inputLabelId}\n menuOptions={menuOptions}\n dropdownSelectedOption={dropdownSelectedOption}\n inputText={inputText}\n optionsMultiToggle={optionsMultiToggle}\n groupSelectedOptions={groupSelectedOptions}\n optionsMultiToggleCaption={optionsMultiToggleCaption}\n 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 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","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onChangeInput","onCloseMenu","onOpenMenu","onSelectOption","options","loadOptions","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","label","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","filteredOptions","getFilteredOptions","useFilteredOptions","loadedOptions","optionsLoading","getLoadedOptions","useLoadedOptions","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuOpenRequest","setMenuOpenRequest","menuOptions","menuOptionsLoading","menuOpen","inputRequired","length","inputActive","Boolean","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","menuOpenPrevRef","updateInputText","useCallback","inputTextValue","updateOptions","updateOptionsDebounced","createDebouncedCallback","preventBlur","evt","target","current","Node","currentTarget","contains","renderInPortal","preventDefault","useScrollMonitor","onScrollStart","focus","useLayoutEffect","useEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","setTimeout","scrollTo","offsetTop","_jsx","FormInputLabel","onColored","error","success","Styled","up","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","onPointerDown","onMouseDown","window","PointerEvent","onFocus","onBlur","relatedTarget","input","_jsxs","_Fragment","children","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","addon","Chip","black","marginLeft","cursor","text","textProps","appearance","colorHover","discardButtonProps","square","IconButton","Close","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","DropdownMenuMultiple","update","DropdownMenuSingle","SIZES","displayName"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@foxford/ui",
-  "version": "2.96.1",
+  "version": "2.96.2",
   "description": "UI components and utilities",
   "bugs": {
     "url": "https://github.com/foxford/ui/issues"
@@ -63,6 +63,6 @@
     "shared",
     "theme"
   ],
-  "sha": "0ef6dcd",
+  "sha": "b96ca4d",
   "scripts": {}
 }