@foxford/ui 2.59.0-beta-92b12b1-20250115 → 2.61.0-beta-5e98b7f-20250131

package/components/DialogComponent/DialogComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport { Spacer } from 'components/Spacer'\nimport { concatClassNames } from 'shared/utils/dom'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      fancy,\n      floats,\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      imgPortraitPositionBottom,\n      className,\n      backgroundClassName,\n      scrollFadingDisabled,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      const observerTarget = scrollable.current\n\n      if (!scrollFadingDisabled && observerTarget) {\n        observerTarget[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(observerTarget)\n      }\n\n      return () => {\n        if (observerTarget) {\n          resizeObserver.unobserve(observerTarget)\n        }\n      }\n    }, [handleScrollThresholds, scrollFadingDisabled])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} className={rootClassName} fancy={fancy} ref={ref}>\n        {floats && floats(sizeProps)}\n        {fancy && <Styled.FancyBackground className={backgroundClassName} />}\n        {fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton\n            secondary\n            size='xxl'\n            icon='close'\n            inset={{ top: 0, right: 0 }}\n            {...iconButtonProps}\n          />\n        )}\n        {(draggable || (imgSrc.portrait && !imgPortraitPositionBottom) || fancy) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {fancy && <Spacer top={96} />}\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && !imgPortraitPositionBottom && (\n              <Styled.MediaPortraitContainer top={!fancy}>\n                <Styled.MediaPortrait>\n                  <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                  {loading ? (\n                    <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                  ) : (\n                    <Styled.Media src={imgSrc.portrait} />\n                  )}\n                </Styled.MediaPortrait>\n              </Styled.MediaPortraitContainer>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {!fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton size='l' icon='close' inset={{ top: 8, right: 8 }} {...iconButtonProps} />\n        )}\n        <DialogContainer {...dialogSizeProps} fancy={fancy}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollTop === false} />}\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!scrollFadingDisabled) {\n                handleScrollThresholds(evt.currentTarget)\n              }\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {typeof children === 'function' ? children(sizeProps) : children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollBottom === false} after />}\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape right>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {imgSrc.portrait && imgPortraitPositionBottom && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            <Styled.MediaPortraitContainer bottom>\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            </Styled.MediaPortraitContainer>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES, SIZES_FANCY }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","fancy","floats","children","caption","title","subtitle","controls","imgLandscapePositionRight","imgPortraitPositionBottom","className","backgroundClassName","scrollFadingDisabled","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","rootClassName","concatClassNames","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","observerTarget","current","observe","unobserve","_jsxs","Styled","_jsx","onClick","secondary","icon","inset","top","right","portrait","Visibility","sizes","VISIBILITY_PORTRAIT","Spacer","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","bottom","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport { Spacer } from 'components/Spacer'\nimport { concatClassNames } from 'shared/utils/dom'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      fancy,\n      floats,\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      imgPortraitPositionBottom,\n      className,\n      backgroundClassName,\n      scrollFadingDisabled,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      const observerTarget = scrollable.current\n\n      if (!scrollFadingDisabled && observerTarget) {\n        observerTarget[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(observerTarget)\n      }\n\n      return () => {\n        if (observerTarget) {\n          resizeObserver.unobserve(observerTarget)\n        }\n      }\n    }, [handleScrollThresholds, scrollFadingDisabled])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} className={rootClassName} fancy={fancy} ref={ref}>\n        {floats && floats(sizeProps)}\n        {fancy && <Styled.FancyBackground className={backgroundClassName} />}\n        {fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton\n            secondary\n            size='xxl'\n            icon='close'\n            inset={{ top: 0, right: 0 }}\n            {...iconButtonProps}\n          />\n        )}\n        {(draggable || (imgSrc.portrait && !imgPortraitPositionBottom) || fancy) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {fancy && <Spacer top={96} />}\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && !imgPortraitPositionBottom && (\n              <Styled.MediaPortraitContainer top={!fancy}>\n                <Styled.MediaPortrait>\n                  <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                  {loading ? (\n                    <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                  ) : (\n                    <Styled.Media src={imgSrc.portrait} />\n                  )}\n                </Styled.MediaPortrait>\n              </Styled.MediaPortraitContainer>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {!fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton size='l' icon='close' inset={{ top: 8, right: 8 }} {...iconButtonProps} />\n        )}\n        <DialogContainer {...dialogSizeProps} fancy={fancy}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollTop === false} />}\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!scrollFadingDisabled) {\n                handleScrollThresholds(evt.currentTarget)\n              }\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {typeof children === 'function' ? children(sizeProps) : children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollBottom === false} after />}\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape right>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {imgSrc.portrait && imgPortraitPositionBottom && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            <Styled.MediaPortraitContainer bottom>\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            </Styled.MediaPortraitContainer>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES, SIZES_FANCY }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","fancy","floats","children","caption","title","subtitle","controls","imgLandscapePositionRight","imgPortraitPositionBottom","className","backgroundClassName","scrollFadingDisabled","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","rootClassName","concatClassNames","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","observerTarget","current","observe","unobserve","_jsxs","Styled","_jsx","onClick","secondary","icon","inset","top","right","portrait","Visibility","sizes","VISIBILITY_PORTRAIT","Spacer","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","bottom","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}

package/components/DialogComponent/DialogContainer.js

@@ -1,2 +1,2 @@
-'use strict';var withMergedProps=require('../../hocs/withMergedProps.js');var style=require('./style.js');var constants=require('./constants.js');var require$$0=require('react/jsx-runtime');const DialogContainer=withMergedProps.withMergedProps((({size:e="s",...r})=>require$$0.jsx(style.Container,{...r,size:e})),{sizes:e=>e.fancy?constants.SIZES_CONTAINER_FANCY:constants.SIZES_CONTAINER,displayName:'DialogContainer'});exports.DialogContainer=DialogContainer;
+'use strict';var withMergedProps=require('../../hocs/withMergedProps.js');var style=require('./style.js');var constants=require('./constants.js');var jsxRuntime=require('react/jsx-runtime');const DialogContainer=withMergedProps.withMergedProps((({size:e="s",...s})=>jsxRuntime.jsx(style.Container,{...s,size:e})),{sizes:e=>e.fancy?constants.SIZES_CONTAINER_FANCY:constants.SIZES_CONTAINER,displayName:'DialogContainer'});exports.DialogContainer=DialogContainer;
 //# sourceMappingURL=DialogContainer.js.map

package/components/Dropdown/Dropdown.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var fuse=require('../../external/.pnpm/fuse.js@7.0.0/node_modules/fuse.js/dist/fuse.js');var index_browser=require('../../external/.pnpm/nanoid@5.0.9/node_modules/nanoid/index.browser.js');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollMonitor=require('../../hooks/useScrollMonitor.js');var dom=require('../../shared/utils/dom.js');var constants$1=require('../../shared/constants.js');var DropdownMenu=require('./DropdownMenu.js');var constants=require('./constants.js');var utils=require('./utils.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var FormInput=require('../FormInput/FormInput.js');var Chip=require('../Chip/Chip.js');var IconButton=require('../IconButton/IconButton.js');var MenuList=require('../MenuList/MenuList.js');var ListItem=require('../ListItem/ListItem.js');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:o="m",name:r="fox-dropdown",labelPosition:n="dynamic",searchable:s=!0,primary:a=!0,optionsMultiToggle:i=!0,loading:c=!1,iconProps:l={},menuProps:u={},loadingIconProps:d={},optionsEmptyIconProps:p={},autoFocus:b,disableAutoScrollToSelectedOption:g,closeMenuOnScroll:m,scrollMonitorTarget:v,contrast:f,selectedOption:x,defaultSelectedOption:k,icon:h,inputMode:C,loadingMessage:I,loadingIcon:y,maxLength:$,multiple:w,clearable:q,onCloseMenu:D,onOpenMenu:M,onSelectOption:S,options:R,groupSelectedOptions:j,optionsMultiToggleCaption:L,optionsEmptyMessage:P,optionsEmptyIcon:E,palette:T,placeholder:F,readOnly:B,required:z,status:O,sizeXXS:K,sizeXS:X,sizeS:_,sizeM:H,sizeL:N,sizeXL:Z,form:A,...U}=e;const G={size:o,sizeXXS:K,sizeXS:X,sizeS:_,sizeM:H,sizeL:N,sizeXL:Z};const J={sizes:constants.SIZES_ICON,color:U.disabled?'content-disabled':'content-onmain-tertiary'};const Q=React.useMemo((()=>U.id??`${r}-${index_browser.nanoid()}`),[r,U.id]);const V=React.useMemo((()=>index_browser.nanoid()),[]);const W=React.useMemo((()=>index_browser.nanoid()),[]);const Y=React.useMemo((()=>{const e=new fuse.default(R,{threshold:.4,ignoreLocation:!0,keys:[constants.FuseSearchKeys.text,constants.FuseSearchKeys.label,constants.FuseSearchKeys.tags]});return t=>t.length===0?R:e.search(t).map((e=>e.item))}),[R]);const[ee,te]=React.useState((()=>utils.getDropdownSelectedOption(x!==void 0?x:k,w)));const[oe,re]=React.useState((()=>utils.getDropdownInputText(ee,w)));const[ne,se]=React.useState(!1);const[ae,ie]=React.useState((()=>Y(oe)));const[ce,le]=React.useState(!1);const ue=w?utils.groupDropdownOptions(R,ee):[[],[]];const de=ce&&!U.disabled;const pe=oe===utils.getDropdownInputText(ee);const be=z&&ee.length===0;const ge=Boolean(de||oe||ne);const me=ue[0].length>0&&ue[1].length===0;const ve=ue[0].length>0&&ue[1].length>0;const fe=React.useRef(null);const[xe,ke]=React.useState(null);const he=React.useRef(null);const Ce=React.useRef(null);const Ie=React.useRef(null);const ye=React.useRef(oe);const $e=React.useRef(de);return useScrollMonitor.useScrollMonitor({target:v,onScrollStart:()=>{m&&de&&(fe.current?.focus(),le(!1))}}),React.useEffect((()=>(oe===ye.current?ie(Y(oe)):(ye.current=oe,Ie.current=setTimeout((()=>{ie(Y(oe))}),150)),()=>{Ie.current&&clearTimeout(Ie.current)})),[Y,oe]),React.useLayoutEffect((()=>{x!==void 0&&(w||re(utils.getDropdownInputText(x)),te(utils.getDropdownSelectedOption(x,w)))}),[w,x]),React.useEffect((()=>{de!==$e.current&&(de&&M&&M(),!de&&D&&D(),$e.current=de)}),[de,D,M]),React.useEffect((()=>{if(!w&&!g&&de&&xe&&Ce.current){const e=xe.getBoundingClientRect();const t=Ce.current.getBoundingClientRect();(t.top<e.top||t.bottom>e.bottom)&&setTimeout((()=>{xe&&Ce.current&&xe.scrollTo(0,Ce.current.offsetTop)}),0)}}),[w,g,de,xe]),require$$0.jsx(FormInputLabel.FormInputLabel,{...U,...G,ref:t,id:Q,labelId:V,labelPosition:n,active:ge,onColored:f,primary:a,error:O==='error',success:O==='success',focus:ne,icon:[h,require$$0.jsx(style.ChevronIcon,{up:de},'chevron')],iconProps:{...G,...J,...l},palette:{color:U.disabled?T.labelColorDisabled:T.labelColor,backgroundColor:U.disabled?T.backgroundColorDisabled:T.backgroundColor,backgroundColorHover:U.disabled?T.backgroundColorDisabled:T.backgroundColorHover,borderColor:U.disabled?T.borderColorDisabled:T.borderColor},onClick:e=>{U.onClick&&U.onClick(e),U.disabled||(fe.current?.focus(),de?xe&&e.target instanceof Node&&!xe.contains(e.target)&&le(!1):(le(!0),s&&!w&&pe&&(re(''),ie(Y('')))))},onPointerDown:e=>{U.onPointerDown&&U.onPointerDown(e),e.target!==fe.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||u.renderInPortal&&de&&xe&&xe.contains(e.target))&&e.preventDefault()},onFocus:e=>{U.onFocus&&U.onFocus(e),se(!0),fe.current&&e.target===fe.current&&s&&!w&&pe&&!de&&(re(''),ie(Y('')))},onBlur:e=>{U.onBlur&&U.onBlur(e),e.currentTarget.contains(e.relatedTarget)||u.renderInPortal&&de&&xe&&xe.contains(e.relatedTarget)||(se(!1),re(utils.getDropdownInputText(ee,w)),le(!1))},input:require$$0.jsxs(require$$0.Fragment,{children:[be&&!s&&!B&&require$$0.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:A,tabIndex:-1,onFocus:()=>{fe.current?.focus()}}),require$$0.jsx(FormInput.FormInput,{ref:fe,role:"combobox","aria-controls":W,"aria-expanded":de,"aria-labelledby":U.label?V:void 0,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",form:A,autoFocus:b,inputMode:s?C:'none',maxLength:$,placeholder:F,readOnly:B||!s,required:be,disabled:U.disabled,value:oe,palette:{color:T.color,colorDisabled:T.colorDisabled,placeholderColor:T.placeholderColor,placeholderColorDisabled:T.placeholderColorDisabled},onClick:e=>{de&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{re(e.currentTarget.value),le(!0)},onKeyDown:e=>{if(constants$1.keyboardKeys.Enter.validate(e.key)&&(re(utils.getDropdownInputText(ee,w)),le(!1)),!constants$1.keyboardKeys.Space.validate(e.key)||de&&e.currentTarget.selectionStart!==0||(e.preventDefault(),s&&!w&&pe&&!de&&(re(''),ie(Y(''))),le((e=>!e))),constants$1.keyboardKeys.Esc.validate(e.key)&&le(!1),constants$1.keyboardKeys.Tab.validate(e.key)&&de&&(e.preventDefault(),le(!1)),constants$1.keyboardKeys.ArrowDown.validate(e.key)&&de&&he.current)if(e.preventDefault(),!w&&Ce.current){const e=[...he.current.children];const t=e.findIndex((e=>e.contains(Ce.current)));const o=e[t+1]??e[0];o instanceof HTMLElement&&dom.focusFirstFocusable(o)}else dom.focusFirstFocusable(he.current);if(constants$1.keyboardKeys.ArrowUp.validate(e.key)&&de&&he.current)if(e.preventDefault(),!w&&Ce.current){const e=[...he.current.children];const t=e.findIndex((e=>e.contains(Ce.current)));const o=e[t-1]??e[e.length-1];o instanceof HTMLElement&&dom.focusFirstFocusable(o)}else dom.focusLastFocusable(he.current)}}),ee.map((e=>require$$0.jsx("input",{type:"hidden",name:r,value:e.value,form:A,disabled:U.disabled},e.value)))]}),addon:require$$0.jsxs(require$$0.Fragment,{children:[w&&ee.length>0&&require$$0.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,marginLeft:12,disabled:U.disabled,cursor:U.disabled?'not-allowed':void 0,text:ee.length,textProps:{appearance:'caption',size:'xs'},palette:U.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},discardButtonProps:{square:!0,contrast:!U.disabled,onClick:e=>{e.stopPropagation(),B||(x===void 0&&te([]),S&&S(w?[]:null),fe.current?.focus(),le(!0))}}}),!w&&q&&ee.length>0&&require$$0.jsx(IconButton.IconButton,{icon:"close",size:"l",square:!0,marginLeft:12,disabled:U.disabled,onClick:e=>{e.stopPropagation(),B||(pe&&(re(''),ie(Y(''))),x===void 0&&te([]),S&&S(w?[]:null),fe.current?.focus(),le(!0))}})]}),dropdown:require$$0.jsx(DropdownMenu.DropdownMenu,{...u,setRef:ke,open:de,popperReferenceId:Q,secondary:!f,elevated:f,disableAutoFocus:!0,palette:{backgroundColor:T.menuBackgroundColor,borderColor:T.menuBorderColor},empty:ae.length===0,loading:c,loadingMessage:I,loadingIcon:y,loadingIconProps:{...G,...J,...d},emptyMessage:P,emptyIcon:E,emptyIconProps:{...G,...J,...p},onKeyDown:e=>{constants$1.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),fe.current?.focus(),le(!1)),constants$1.keyboardKeys.Enter.validate(e.key)&&(fe.current?.focus(),re(utils.getDropdownInputText(ee,w)),le(!1)),constants$1.keyboardKeys.Esc.validate(e.key)&&(fe.current?.focus(),le(!1)),constants$1.keyboardKeys.Backspace.validate(e.key)&&!B&&(w||!w&&q)&&(x===void 0&&te([]),S&&S(w?[]:null))},children:require$$0.jsx(MenuList.MenuList,w?{ref:he,id:W,role:"listbox","aria-labelledby":U.label?V:void 0,"aria-multiselectable":!0,children:oe.length===0?require$$0.jsxs(require$$0.Fragment,{children:[i&&require$$0.jsx(ListItem.ListItem,{...G,text:L,disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:r,checked:me,indeterminate:ve,error:(me||ve)&&O==='error',success:(me||ve)&&O==='success',onChange:()=>{if(!B){const e=me||ve?[]:[...R];x===void 0&&te(e),S&&S(e)}}})}),i&&require$$0.jsx(MenuDivider.MenuDivider,{}),j&&ue[0].map((e=>{const t=e.status??O;const o=t==='error';const n=t==='success';return React.createElement(ListItem.ListItem,{...G,key:e.value,active:!0,text:e.text,danger:o,success:n,disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),fe.current?.focus()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!0,name:r,value:e.value,checked:!0,error:o,success:n,onChange:e=>{if(!B){const t=ee.filter((t=>t.value!==e.currentTarget.value));x===void 0&&te(t),S&&S(t)}}})})})),j&&ue[0].length>0&&ue[1].length>0&&require$$0.jsx(MenuDivider.MenuDivider,{}),j&&ue[1].map((e=>React.createElement(ListItem.ListItem,{...G,key:e.value,text:e.text,disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),fe.current?.focus()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!1,name:r,value:e.value,checked:!1,onChange:()=>{if(!B){const t=[...ee,e];x===void 0&&te(t),S&&S(t)}}})}))),!j&&R.map((e=>{const t=ee.findIndex((t=>t.value===e.value))!==-1;const o=e.status??O;const n=t&&o==='error';const s=t&&o==='success';return React.createElement(ListItem.ListItem,{...G,key:e.value,text:e.text,danger:n,success:s,disabled:U.disabled,active:t,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":t,name:r,value:e.value,checked:t,error:n,success:s,onChange:o=>{if(!B){const r=t?ee.filter((e=>e.value!==o.currentTarget.value)):[...ee,e];x===void 0&&te(r),S&&S(r)}}})})}))]}):require$$0.jsx(require$$0.Fragment,{children:ae.map((e=>{const t=ee.findIndex((t=>t.value===e.value))!==-1;const o=e.status??O;const n=t&&o==='error';const s=t&&o==='success';return React.createElement(ListItem.ListItem,{...G,key:e.value,text:e.text,danger:n,success:s,disabled:U.disabled,active:t,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:require$$0.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":t,name:r,value:e.value,checked:t,error:n,success:s,onChange:o=>{if(!B){const r=t?ee.filter((e=>e.value!==o.currentTarget.value)):[...ee,e];x===void 0&&te(r),S&&S(r)}}})})}))})}:{ref:he,id:W,role:"listbox","aria-labelledby":U.label?V:void 0,children:(s?ae:R).map((e=>{const t=ee.findIndex((t=>t.value===e.value))!==-1;return React.createElement(ListItem.ListItem,{...G,role:"option","aria-selected":t,ref:t?Ce:void 0,key:e.value,text:e.text,active:t,danger:t&&O==='error',success:t&&O==='success',disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:t=>{if(t.stopPropagation(),!B){const t={...e};x===void 0&&(re(utils.getDropdownInputText(t)),te(utils.getDropdownSelectedOption(t))),S&&S(t),fe.current?.focus(),le(!1)}}})}))})})})})),{sizes:constants.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
+'use strict';var React=require('react');var Fuse=require('fuse.js');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollMonitor=require('../../hooks/useScrollMonitor.js');var dom=require('../../shared/utils/dom.js');var constants$1=require('../../shared/constants.js');var DropdownMenu=require('./DropdownMenu.js');var constants=require('./constants.js');var utils=require('./utils.js');var style=require('./style.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 MenuList=require('../MenuList/MenuList.js');var ListItem=require('../ListItem/ListItem.js');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var Fuse__default=_interopDefault(Fuse);const Dropdown=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:o="m",name:n="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:a=!0,optionsMultiToggle:i=!0,loading:c=!1,iconProps:l={},menuProps:u={},loadingIconProps:d={},optionsEmptyIconProps:p={},autoFocus:b,disableAutoScrollToSelectedOption:m,closeMenuOnScroll:g,scrollMonitorTarget:x,contrast:v,selectedOption:f,defaultSelectedOption:k,icon:h,inputMode:C,loadingMessage:I,loadingIcon:R,maxLength:y,multiple:j,clearable:D,onCloseMenu:w,onOpenMenu:M,onSelectOption:S,options:L,groupSelectedOptions:P,optionsMultiToggleCaption:F,optionsEmptyMessage:E,optionsEmptyIcon:T,palette:B,placeholder:q,readOnly:z,required:O,status:K,sizeXXS:_,sizeXS:X,sizeS:$,sizeM:H,sizeL:N,sizeXL:Z,form:A,...U}=e;const G={size:o,sizeXXS:_,sizeXS:X,sizeS:$,sizeM:H,sizeL:N,sizeXL:Z};const J={sizes:constants.SIZES_ICON,color:U.disabled?'content-disabled':'content-onmain-tertiary'};const Q=React.useMemo((()=>U.id??`${n}-${nanoid.nanoid()}`),[n,U.id]);const V=React.useMemo((()=>nanoid.nanoid()),[]);const W=React.useMemo((()=>nanoid.nanoid()),[]);const Y=React.useMemo((()=>{const e=new Fuse__default.default(L,{threshold:.4,ignoreLocation:!0,keys:[constants.FuseSearchKeys.text,constants.FuseSearchKeys.label,constants.FuseSearchKeys.tags]});return t=>t.length===0?L:e.search(t).map((e=>e.item))}),[L]);const[ee,te]=React.useState((()=>utils.getDropdownSelectedOption(f!==void 0?f:k,j)));const[oe,ne]=React.useState((()=>utils.getDropdownInputText(ee,j)));const[re,se]=React.useState(!1);const[ae,ie]=React.useState((()=>Y(oe)));const[ce,le]=React.useState(!1);const ue=j?utils.groupDropdownOptions(L,ee):[[],[]];const de=ce&&!U.disabled;const pe=oe===utils.getDropdownInputText(ee);const be=O&&ee.length===0;const me=Boolean(de||oe||re);const ge=ue[0].length>0&&ue[1].length===0;const xe=ue[0].length>0&&ue[1].length>0;const ve=React.useRef(null);const[fe,ke]=React.useState(null);const he=React.useRef(null);const Ce=React.useRef(null);const Ie=React.useRef(null);const Re=React.useRef(oe);const ye=React.useRef(de);return useScrollMonitor.useScrollMonitor({target:x,onScrollStart:()=>{g&&de&&(ve.current?.focus(),le(!1))}}),React.useEffect((()=>(oe===Re.current?ie(Y(oe)):(Re.current=oe,Ie.current=setTimeout((()=>{ie(Y(oe))}),150)),()=>{Ie.current&&clearTimeout(Ie.current)})),[Y,oe]),React.useLayoutEffect((()=>{f!==void 0&&(j||ne(utils.getDropdownInputText(f)),te(utils.getDropdownSelectedOption(f,j)))}),[j,f]),React.useEffect((()=>{de!==ye.current&&(de&&M&&M(),!de&&w&&w(),ye.current=de)}),[de,w,M]),React.useEffect((()=>{if(!j&&!m&&de&&fe&&Ce.current){const e=fe.getBoundingClientRect();const t=Ce.current.getBoundingClientRect();(t.top<e.top||t.bottom>e.bottom)&&setTimeout((()=>{fe&&Ce.current&&fe.scrollTo(0,Ce.current.offsetTop)}),0)}}),[j,m,de,fe]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...U,...G,ref:t,id:Q,labelId:V,labelPosition:r,active:me,onColored:v,primary:a,error:K==='error',success:K==='success',focus:re,icon:[h,jsxRuntime.jsx(style.ChevronIcon,{up:de},'chevron')],iconProps:{...G,...J,...l},palette:{color:U.disabled?B.labelColorDisabled:B.labelColor,backgroundColor:U.disabled?B.backgroundColorDisabled:B.backgroundColor,backgroundColorHover:U.disabled?B.backgroundColorDisabled:B.backgroundColorHover,borderColor:U.disabled?B.borderColorDisabled:B.borderColor},onClick:e=>{U.onClick&&U.onClick(e),U.disabled||(ve.current?.focus(),de?fe&&e.target instanceof Node&&!fe.contains(e.target)&&le(!1):(le(!0),s&&!j&&pe&&(ne(''),ie(Y('')))))},onPointerDown:e=>{U.onPointerDown&&U.onPointerDown(e),e.target!==ve.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||u.renderInPortal&&de&&fe&&fe.contains(e.target))&&e.preventDefault()},onFocus:e=>{U.onFocus&&U.onFocus(e),se(!0),ve.current&&e.target===ve.current&&s&&!j&&pe&&!de&&(ne(''),ie(Y('')))},onBlur:e=>{U.onBlur&&U.onBlur(e),e.currentTarget.contains(e.relatedTarget)||u.renderInPortal&&de&&fe&&fe.contains(e.relatedTarget)||(se(!1),ne(utils.getDropdownInputText(ee,j)),le(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[be&&!s&&!z&&jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:A,tabIndex:-1,onFocus:()=>{ve.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{ref:ve,role:"combobox","aria-controls":W,"aria-expanded":de,"aria-labelledby":U.label?V:void 0,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",form:A,autoFocus:b,inputMode:s?C:'none',maxLength:y,placeholder:q,readOnly:z||!s,required:be,disabled:U.disabled,value:oe,palette:{color:B.color,colorDisabled:B.colorDisabled,placeholderColor:B.placeholderColor,placeholderColorDisabled:B.placeholderColorDisabled},onClick:e=>{de&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{ne(e.currentTarget.value),le(!0)},onKeyDown:e=>{if(constants$1.keyboardKeys.Enter.validate(e.key)&&(ne(utils.getDropdownInputText(ee,j)),le(!1)),!constants$1.keyboardKeys.Space.validate(e.key)||de&&e.currentTarget.selectionStart!==0||(e.preventDefault(),s&&!j&&pe&&!de&&(ne(''),ie(Y(''))),le((e=>!e))),constants$1.keyboardKeys.Esc.validate(e.key)&&le(!1),constants$1.keyboardKeys.Tab.validate(e.key)&&de&&(e.preventDefault(),le(!1)),constants$1.keyboardKeys.ArrowDown.validate(e.key)&&de&&he.current)if(e.preventDefault(),!j&&Ce.current){const e=[...he.current.children];const t=e.findIndex((e=>e.contains(Ce.current)));const o=e[t+1]??e[0];o instanceof HTMLElement&&dom.focusFirstFocusable(o)}else dom.focusFirstFocusable(he.current);if(constants$1.keyboardKeys.ArrowUp.validate(e.key)&&de&&he.current)if(e.preventDefault(),!j&&Ce.current){const e=[...he.current.children];const t=e.findIndex((e=>e.contains(Ce.current)));const o=e[t-1]??e[e.length-1];o instanceof HTMLElement&&dom.focusFirstFocusable(o)}else dom.focusLastFocusable(he.current)}}),ee.map((e=>jsxRuntime.jsx("input",{type:"hidden",name:n,value:e.value,form:A,disabled:U.disabled},e.value)))]}),addon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[j&&ee.length>0&&jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,marginLeft:12,disabled:U.disabled,cursor:U.disabled?'not-allowed':void 0,text:ee.length,textProps:{appearance:'caption',size:'xs'},palette:U.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},discardButtonProps:{square:!0,contrast:!U.disabled,onClick:e=>{e.stopPropagation(),z||(f===void 0&&te([]),S&&S(j?[]:null),ve.current?.focus(),le(!0))}}}),!j&&D&&ee.length>0&&jsxRuntime.jsx(IconButton.IconButton,{icon:"close",size:"l",square:!0,marginLeft:12,disabled:U.disabled,onClick:e=>{e.stopPropagation(),z||(pe&&(ne(''),ie(Y(''))),f===void 0&&te([]),S&&S(j?[]:null),ve.current?.focus(),le(!0))}})]}),dropdown:jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...u,setRef:ke,open:de,popperReferenceId:Q,secondary:!v,elevated:v,disableAutoFocus:!0,palette:{backgroundColor:B.menuBackgroundColor,borderColor:B.menuBorderColor},empty:ae.length===0,loading:c,loadingMessage:I,loadingIcon:R,loadingIconProps:{...G,...J,...d},emptyMessage:E,emptyIcon:T,emptyIconProps:{...G,...J,...p},onKeyDown:e=>{constants$1.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),ve.current?.focus(),le(!1)),constants$1.keyboardKeys.Enter.validate(e.key)&&(ve.current?.focus(),ne(utils.getDropdownInputText(ee,j)),le(!1)),constants$1.keyboardKeys.Esc.validate(e.key)&&(ve.current?.focus(),le(!1)),constants$1.keyboardKeys.Backspace.validate(e.key)&&!z&&(j||!j&&D)&&(f===void 0&&te([]),S&&S(j?[]:null))},children:jsxRuntime.jsx(MenuList.MenuList,j?{ref:he,id:W,role:"listbox","aria-labelledby":U.label?V:void 0,"aria-multiselectable":!0,children:oe.length===0?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[i&&jsxRuntime.jsx(ListItem.ListItem,{...G,text:F,disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:n,checked:ge,indeterminate:xe,error:(ge||xe)&&K==='error',success:(ge||xe)&&K==='success',onChange:()=>{if(!z){const e=ge||xe?[]:[...L];f===void 0&&te(e),S&&S(e)}}})}),i&&jsxRuntime.jsx(MenuDivider.MenuDivider,{}),P&&ue[0].map((e=>{const t=e.status??K;const o=t==='error';const r=t==='success';return React.createElement(ListItem.ListItem,{...G,key:e.value,active:!0,text:e.text,danger:o,success:r,disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),ve.current?.focus()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!0,name:n,value:e.value,checked:!0,error:o,success:r,onChange:e=>{if(!z){const t=ee.filter((t=>t.value!==e.currentTarget.value));f===void 0&&te(t),S&&S(t)}}})})})),P&&ue[0].length>0&&ue[1].length>0&&jsxRuntime.jsx(MenuDivider.MenuDivider,{}),P&&ue[1].map((e=>React.createElement(ListItem.ListItem,{...G,key:e.value,text:e.text,disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),ve.current?.focus()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!1,name:n,value:e.value,checked:!1,onChange:()=>{if(!z){const t=[...ee,e];f===void 0&&te(t),S&&S(t)}}})}))),!P&&L.map((e=>{const t=ee.findIndex((t=>t.value===e.value))!==-1;const o=e.status??K;const r=t&&o==='error';const s=t&&o==='success';return React.createElement(ListItem.ListItem,{...G,key:e.value,text:e.text,danger:r,success:s,disabled:U.disabled,active:t,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":t,name:n,value:e.value,checked:t,error:r,success:s,onChange:o=>{if(!z){const n=t?ee.filter((e=>e.value!==o.currentTarget.value)):[...ee,e];f===void 0&&te(n),S&&S(n)}}})})}))]}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:ae.map((e=>{const t=ee.findIndex((t=>t.value===e.value))!==-1;const o=e.status??K;const r=t&&o==='error';const s=t&&o==='success';return React.createElement(ListItem.ListItem,{...G,key:e.value,text:e.text,danger:r,success:s,disabled:U.disabled,active:t,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":t,name:n,value:e.value,checked:t,error:r,success:s,onChange:o=>{if(!z){const n=t?ee.filter((e=>e.value!==o.currentTarget.value)):[...ee,e];f===void 0&&te(n),S&&S(n)}}})})}))})}:{ref:he,id:W,role:"listbox","aria-labelledby":U.label?V:void 0,children:(s?ae:L).map((e=>{const t=ee.findIndex((t=>t.value===e.value))!==-1;return React.createElement(ListItem.ListItem,{...G,role:"option","aria-selected":t,ref:t?Ce:void 0,key:e.value,text:e.text,active:t,danger:t&&K==='error',success:t&&K==='success',disabled:U.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:t=>{if(t.stopPropagation(),!z){const t={...e};f===void 0&&(ne(utils.getDropdownInputText(t)),te(utils.getDropdownSelectedOption(t))),S&&S(t),ve.current?.focus(),le(!1)}}})}))})})})})),{sizes:constants.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
 //# sourceMappingURL=Dropdown.js.map

package/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react'\nimport Fuse from 'fuse.js'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { MenuList } from 'components/MenuList'\nimport { MenuDivider } from 'components/MenuDivider'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { SIZES, SIZES_CHECKBOX, SIZES_ICON, FuseSearchKeys } from './constants'\nimport { getDropdownInputText, getDropdownSelectedOption, groupDropdownOptions } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption } from './types'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dropdown/types.ts).\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n  forwardRef((props, ref) => {\n    const {\n      size = 'm',\n      name = 'fox-dropdown',\n      labelPosition = 'dynamic',\n      searchable = true,\n      primary = true,\n      optionsMultiToggle = true,\n      loading = false,\n      iconProps = {},\n      menuProps = {},\n      loadingIconProps = {},\n      optionsEmptyIconProps = {},\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      onCloseMenu,\n      onOpenMenu,\n      onSelectOption,\n      options,\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      ...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 getRelevantOptions = useMemo(() => {\n      const fuse = new Fuse<DropdownOption>(options, {\n        threshold: 0.4,\n        ignoreLocation: true,\n        keys: [FuseSearchKeys.text, FuseSearchKeys.label, FuseSearchKeys.tags],\n      })\n\n      return (pattern: string): DropdownOption[] =>\n        pattern.length === 0 ? options : fuse.search(pattern).map((result) => result.item)\n    }, [options])\n\n    const [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 [menuRelevantOptions, setMenuRelevantOptions] = useState<DropdownOption[]>(() =>\n      getRelevantOptions(inputText)\n    )\n\n    const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n    const menuOptionsGroups: ReturnType<typeof groupDropdownOptions> = multiple\n      ? groupDropdownOptions(options, dropdownSelectedOption)\n      : [[], []]\n\n    const menuOpen = menuOpenRequest && !rootProps.disabled\n\n    const inputSynced = inputText === getDropdownInputText(dropdownSelectedOption)\n    const inputRequired = required && dropdownSelectedOption.length === 0\n    const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n    const multiToggleChecked = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length === 0\n    const multiToggleIndeterminate = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n    const menuListRef = useRef<HTMLUListElement>(null)\n    const selectedOptionRef = useRef<HTMLElement>(null)\n\n    const timeoutIdRef = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n    const inputTextPrevRef = useRef<string>(inputText)\n    const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n    useScrollMonitor({\n      target: scrollMonitorTarget,\n      onScrollStart: () => {\n        if (closeMenuOnScroll && menuOpen) {\n          inputRef.current?.focus()\n          setMenuOpenRequest(false)\n        }\n      },\n    })\n\n    useEffect(() => {\n      if (inputText === inputTextPrevRef.current) {\n        setMenuRelevantOptions(getRelevantOptions(inputText))\n      } else {\n        inputTextPrevRef.current = inputText\n        timeoutIdRef.current = setTimeout(() => {\n          setMenuRelevantOptions(getRelevantOptions(inputText))\n        }, 150)\n      }\n\n      return () => {\n        if (timeoutIdRef.current) {\n          clearTimeout(timeoutIdRef.current)\n        }\n      }\n    }, [getRelevantOptions, inputText])\n\n    useLayoutEffect(() => {\n      if (selectedOption === undefined) return\n\n      if (!multiple) setInputText(getDropdownInputText(selectedOption))\n      setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n    }, [multiple, selectedOption])\n\n    useEffect(() => {\n      if (menuOpen === menuOpenPrevRef.current) return\n\n      if (menuOpen && onOpenMenu) onOpenMenu()\n      if (!menuOpen && onCloseMenu) onCloseMenu()\n\n      menuOpenPrevRef.current = menuOpen\n    }, [menuOpen, onCloseMenu, onOpenMenu])\n\n    useEffect(() => {\n      if (!multiple && !disableAutoScrollToSelectedOption && menuOpen && menuRef && selectedOptionRef.current) {\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, menuRef])\n\n    return (\n      <FormInputLabel\n        {...rootProps}\n        {...sizeProps}\n        ref={ref}\n        id={formInputLabelId}\n        labelId={inputLabelId}\n        labelPosition={labelPosition}\n        active={inputActive}\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            if (searchable && !multiple && inputSynced) {\n              setInputText('')\n              setMenuRelevantOptions(getRelevantOptions(''))\n            }\n          } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n            setMenuOpenRequest(false)\n          }\n        }}\n        onPointerDown={(evt) => {\n          if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\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        onFocus={(evt) => {\n          if (rootProps.onFocus) rootProps.onFocus(evt)\n\n          setFocusWithin(true)\n\n          if (\n            inputRef.current &&\n            evt.target === inputRef.current &&\n            searchable &&\n            !multiple &&\n            inputSynced &&\n            !menuOpen\n          ) {\n            setInputText('')\n            setMenuRelevantOptions(getRelevantOptions(''))\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          setInputText(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            )}\n            <FormInput\n              ref={inputRef}\n              role='combobox'\n              aria-controls={menuListId}\n              aria-expanded={menuOpen}\n              aria-labelledby={rootProps.label ? inputLabelId : undefined}\n              type='text'\n              autoComplete='off'\n              autoCapitalize='off'\n              autoCorrect='off'\n              spellCheck='false'\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                setInputText(evt.currentTarget.value)\n                setMenuOpenRequest(true)\n              }}\n              onKeyDown={(evt) => {\n                if (keyboardKeys.Enter.validate(evt.key)) {\n                  setInputText(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 (searchable && !multiple && inputSynced && !menuOpen) {\n                    setInputText('')\n                    setMenuRelevantOptions(getRelevantOptions(''))\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((item) => (\n              <input\n                key={item.value}\n                type='hidden'\n                name={name}\n                value={item.value}\n                form={form}\n                disabled={rootProps.disabled}\n              />\n            ))}\n          </>\n        }\n        addon={\n          <>\n            {multiple && dropdownSelectedOption.length > 0 && (\n              <Chip\n                size='xs'\n                active\n                black\n                marginLeft={12}\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                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(multiple ? [] : null)\n\n                      inputRef.current?.focus()\n                      setMenuOpenRequest(true)\n                    }\n                  },\n                }}\n              />\n            )}\n            {!multiple && clearable && dropdownSelectedOption.length > 0 && (\n              <IconButton\n                icon='close'\n                size='l'\n                square\n                marginLeft={12}\n                disabled={rootProps.disabled}\n                onClick={(evt) => {\n                  evt.stopPropagation()\n\n                  if (!readOnly) {\n                    if (inputSynced) {\n                      setInputText('')\n                      setMenuRelevantOptions(getRelevantOptions(''))\n                    }\n\n                    if (selectedOption === undefined) {\n                      setDropdownSelectedOption([])\n                    }\n\n                    if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n                    inputRef.current?.focus()\n                    setMenuOpenRequest(true)\n                  }\n                }}\n              />\n            )}\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={menuRelevantOptions.length === 0}\n            loading={loading}\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                setInputText(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            }}\n          >\n            {multiple ? (\n              <MenuList\n                ref={menuListRef}\n                id={menuListId}\n                role='listbox'\n                aria-labelledby={rootProps.label ? inputLabelId : undefined}\n                aria-multiselectable\n              >\n                {inputText.length === 0 ? (\n                  <>\n                    {optionsMultiToggle && (\n                      <ListItem\n                        {...sizeProps}\n                        text={optionsMultiToggleCaption}\n                        disabled={rootProps.disabled}\n                        borderRadius={8}\n                        ellipsis={false}\n                        textProps={{ wordBreak: 'break-word' }}\n                        onClick={(evt) => {\n                          evt.stopPropagation()\n                        }}\n                        control={\n                          <InputCheckbox\n                            sizes={SIZES_CHECKBOX}\n                            form='none'\n                            name={name}\n                            checked={multiToggleChecked}\n                            indeterminate={multiToggleIndeterminate}\n                            error={(multiToggleChecked || multiToggleIndeterminate) && status === 'error'}\n                            success={(multiToggleChecked || multiToggleIndeterminate) && status === 'success'}\n                            onChange={() => {\n                              if (!readOnly) {\n                                const update = multiToggleChecked || multiToggleIndeterminate ? [] : [...options]\n\n                                if (selectedOption === undefined) {\n                                  setDropdownSelectedOption(update)\n                                }\n\n                                if (onSelectOption) onSelectOption(update)\n                              }\n                            }}\n                          />\n                        }\n                      />\n                    )}\n                    {optionsMultiToggle && <MenuDivider />}\n                    {groupSelectedOptions &&\n                      menuOptionsGroups[0].map((option) => {\n                        const optionStatus = option.status ?? status\n                        const optionErrorStatus = optionStatus === 'error'\n                        const optionSuccessStatus = optionStatus === 'success'\n\n                        return (\n                          <ListItem\n                            {...sizeProps}\n                            key={option.value}\n                            active\n                            text={option.text}\n                            danger={optionErrorStatus}\n                            success={optionSuccessStatus}\n                            disabled={rootProps.disabled}\n                            borderRadius={8}\n                            ellipsis={false}\n                            textProps={{ wordBreak: 'break-word' }}\n                            onClick={(evt) => {\n                              evt.stopPropagation()\n                              inputRef.current?.focus()\n                            }}\n                            control={\n                              <InputCheckbox\n                                sizes={SIZES_CHECKBOX}\n                                form='none'\n                                role='option'\n                                aria-selected\n                                name={name}\n                                value={option.value}\n                                checked\n                                error={optionErrorStatus}\n                                success={optionSuccessStatus}\n                                onChange={(evt) => {\n                                  if (!readOnly) {\n                                    const update = dropdownSelectedOption.filter(\n                                      (item) => item.value !== evt.currentTarget.value\n                                    )\n\n                                    if (selectedOption === undefined) {\n                                      setDropdownSelectedOption(update)\n                                    }\n\n                                    if (onSelectOption) onSelectOption(update)\n                                  }\n                                }}\n                              />\n                            }\n                          />\n                        )\n                      })}\n                    {groupSelectedOptions && menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0 && (\n                      <MenuDivider />\n                    )}\n                    {groupSelectedOptions &&\n                      menuOptionsGroups[1].map((option) => (\n                        <ListItem\n                          {...sizeProps}\n                          key={option.value}\n                          text={option.text}\n                          disabled={rootProps.disabled}\n                          borderRadius={8}\n                          ellipsis={false}\n                          textProps={{ wordBreak: 'break-word' }}\n                          onClick={(evt) => {\n                            evt.stopPropagation()\n                            inputRef.current?.focus()\n                          }}\n                          control={\n                            <InputCheckbox\n                              sizes={SIZES_CHECKBOX}\n                              form='none'\n                              role='option'\n                              aria-selected={false}\n                              name={name}\n                              value={option.value}\n                              checked={false}\n                              onChange={() => {\n                                if (!readOnly) {\n                                  const update = [...dropdownSelectedOption, option]\n\n                                  if (selectedOption === undefined) {\n                                    setDropdownSelectedOption(update)\n                                  }\n\n                                  if (onSelectOption) onSelectOption(update)\n                                }\n                              }}\n                            />\n                          }\n                        />\n                      ))}\n                    {!groupSelectedOptions &&\n                      options.map((option) => {\n                        const selected = dropdownSelectedOption.findIndex((item) => item.value === option.value) !== -1\n\n                        const optionStatus = option.status ?? status\n                        const optionErrorStatus = selected && optionStatus === 'error'\n                        const optionSuccessStatus = selected && optionStatus === 'success'\n\n                        return (\n                          <ListItem\n                            {...sizeProps}\n                            key={option.value}\n                            text={option.text}\n                            danger={optionErrorStatus}\n                            success={optionSuccessStatus}\n                            disabled={rootProps.disabled}\n                            active={selected}\n                            borderRadius={8}\n                            ellipsis={false}\n                            textProps={{ wordBreak: 'break-word' }}\n                            onClick={(evt) => {\n                              evt.stopPropagation()\n                            }}\n                            control={\n                              <InputCheckbox\n                                sizes={SIZES_CHECKBOX}\n                                form='none'\n                                role='option'\n                                aria-selected={selected}\n                                name={name}\n                                value={option.value}\n                                checked={selected}\n                                error={optionErrorStatus}\n                                success={optionSuccessStatus}\n                                onChange={(evt) => {\n                                  if (!readOnly) {\n                                    const update = selected\n                                      ? dropdownSelectedOption.filter((item) => item.value !== evt.currentTarget.value)\n                                      : [...dropdownSelectedOption, option]\n\n                                    if (selectedOption === undefined) {\n                                      setDropdownSelectedOption(update)\n                                    }\n\n                                    if (onSelectOption) onSelectOption(update)\n                                  }\n                                }}\n                              />\n                            }\n                          />\n                        )\n                      })}\n                  </>\n                ) : (\n                  <>\n                    {menuRelevantOptions.map((option) => {\n                      const selected = dropdownSelectedOption.findIndex((item) => item.value === option.value) !== -1\n\n                      const optionStatus = option.status ?? status\n                      const optionErrorStatus = selected && optionStatus === 'error'\n                      const optionSuccessStatus = selected && optionStatus === 'success'\n\n                      return (\n                        <ListItem\n                          {...sizeProps}\n                          key={option.value}\n                          text={option.text}\n                          danger={optionErrorStatus}\n                          success={optionSuccessStatus}\n                          disabled={rootProps.disabled}\n                          active={selected}\n                          borderRadius={8}\n                          ellipsis={false}\n                          textProps={{ wordBreak: 'break-word' }}\n                          onClick={(evt) => {\n                            evt.stopPropagation()\n                          }}\n                          control={\n                            <InputCheckbox\n                              sizes={SIZES_CHECKBOX}\n                              form='none'\n                              role='option'\n                              aria-selected={selected}\n                              name={name}\n                              value={option.value}\n                              checked={selected}\n                              error={optionErrorStatus}\n                              success={optionSuccessStatus}\n                              onChange={(evt) => {\n                                if (!readOnly) {\n                                  const update = selected\n                                    ? dropdownSelectedOption.filter((item) => item.value !== evt.currentTarget.value)\n                                    : [...dropdownSelectedOption, option]\n\n                                  if (selectedOption === undefined) {\n                                    setDropdownSelectedOption(update)\n                                  }\n\n                                  if (onSelectOption) onSelectOption(update)\n                                }\n                              }}\n                            />\n                          }\n                        />\n                      )\n                    })}\n                  </>\n                )}\n              </MenuList>\n            ) : (\n              <MenuList\n                ref={menuListRef}\n                id={menuListId}\n                role='listbox'\n                aria-labelledby={rootProps.label ? inputLabelId : undefined}\n              >\n                {(searchable ? menuRelevantOptions : options).map((option) => {\n                  const selected = dropdownSelectedOption.findIndex((item) => item.value === option.value) !== -1\n\n                  return (\n                    <ListItem\n                      {...sizeProps}\n                      role='option'\n                      aria-selected={selected}\n                      ref={selected ? selectedOptionRef : undefined}\n                      key={option.value}\n                      text={option.text}\n                      active={selected}\n                      danger={selected && status === 'error'}\n                      success={selected && status === 'success'}\n                      disabled={rootProps.disabled}\n                      borderRadius={8}\n                      ellipsis={false}\n                      textProps={{ wordBreak: 'break-word' }}\n                      onClick={(evt) => {\n                        evt.stopPropagation()\n\n                        if (!readOnly) {\n                          const update = { ...option }\n\n                          if (selectedOption === undefined) {\n                            setInputText(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                  )\n                })}\n              </MenuList>\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","loading","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onCloseMenu","onOpenMenu","onSelectOption","options","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","getRelevantOptions","fuse","Fuse","default","threshold","ignoreLocation","keys","FuseSearchKeys","text","label","tags","pattern","length","search","map","result","item","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuRelevantOptions","setMenuRelevantOptions","menuOpenRequest","setMenuOpenRequest","menuOptionsGroups","groupDropdownOptions","menuOpen","inputSynced","inputRequired","inputActive","Boolean","multiToggleChecked","multiToggleIndeterminate","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","timeoutIdRef","inputTextPrevRef","menuOpenPrevRef","useScrollMonitor","target","onScrollStart","current","focus","useEffect","setTimeout","clearTimeout","useLayoutEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","scrollTo","offsetTop","_jsx","FormInputLabel","labelId","active","onColored","error","success","jsx","Styled","up","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","evt","Node","contains","onPointerDown","currentTarget","renderInPortal","preventDefault","onFocus","onBlur","relatedTarget","input","_jsxs","jsxs","_Fragment","children","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","addon","Chip","black","marginLeft","cursor","textProps","appearance","colorHover","discardButtonProps","square","IconButton","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","MenuList","ListItem","borderRadius","ellipsis","wordBreak","control","InputCheckbox","SIZES_CHECKBOX","checked","indeterminate","update","MenuDivider","option","optionStatus","optionErrorStatus","optionSuccessStatus","_createElement","danger","filter","createElement","selected","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react'\nimport Fuse from 'fuse.js'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useScrollMonitor } from 'hooks/useScrollMonitor'\nimport { focusFirstFocusable, focusLastFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { Nullable } from 'shared/types'\nimport { FormInput } from 'components/FormInput'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { MenuList } from 'components/MenuList'\nimport { MenuDivider } from 'components/MenuDivider'\nimport { ListItem } from 'components/ListItem'\nimport { InputCheckbox } from 'components/InputCheckbox'\nimport { Chip } from 'components/Chip'\nimport { IconButton } from 'components/IconButton'\nimport type { IconProps } from 'components/Icon'\nimport { DropdownMenu } from './DropdownMenu'\nimport { SIZES, SIZES_CHECKBOX, SIZES_ICON, FuseSearchKeys } from './constants'\nimport { getDropdownInputText, getDropdownSelectedOption, groupDropdownOptions } from './utils'\nimport * as Styled from './style'\nimport type { DropdownProps, DropdownOption } from './types'\n\nconst COMPONENT_NAME = 'Dropdown'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dropdown/types.ts).\n */\nconst Dropdown: React.ForwardRefExoticComponent<DropdownProps> = withMergedProps<DropdownProps, HTMLDivElement>(\n  forwardRef((props, ref) => {\n    const {\n      size = 'm',\n      name = 'fox-dropdown',\n      labelPosition = 'dynamic',\n      searchable = true,\n      primary = true,\n      optionsMultiToggle = true,\n      loading = false,\n      iconProps = {},\n      menuProps = {},\n      loadingIconProps = {},\n      optionsEmptyIconProps = {},\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      onCloseMenu,\n      onOpenMenu,\n      onSelectOption,\n      options,\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      ...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 getRelevantOptions = useMemo(() => {\n      const fuse = new Fuse<DropdownOption>(options, {\n        threshold: 0.4,\n        ignoreLocation: true,\n        keys: [FuseSearchKeys.text, FuseSearchKeys.label, FuseSearchKeys.tags],\n      })\n\n      return (pattern: string): DropdownOption[] =>\n        pattern.length === 0 ? options : fuse.search(pattern).map((result) => result.item)\n    }, [options])\n\n    const [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 [menuRelevantOptions, setMenuRelevantOptions] = useState<DropdownOption[]>(() =>\n      getRelevantOptions(inputText)\n    )\n\n    const [menuOpenRequest, setMenuOpenRequest] = useState<boolean>(false)\n\n    const menuOptionsGroups: ReturnType<typeof groupDropdownOptions> = multiple\n      ? groupDropdownOptions(options, dropdownSelectedOption)\n      : [[], []]\n\n    const menuOpen = menuOpenRequest && !rootProps.disabled\n\n    const inputSynced = inputText === getDropdownInputText(dropdownSelectedOption)\n    const inputRequired = required && dropdownSelectedOption.length === 0\n    const inputActive = Boolean(menuOpen || inputText || focusWithin)\n\n    const multiToggleChecked = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length === 0\n    const multiToggleIndeterminate = menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [menuRef, setMenuRef] = useState<Nullable<HTMLElement>>(null)\n    const menuListRef = useRef<HTMLUListElement>(null)\n    const selectedOptionRef = useRef<HTMLElement>(null)\n\n    const timeoutIdRef = useRef<Nullable<ReturnType<typeof setTimeout>>>(null)\n\n    const inputTextPrevRef = useRef<string>(inputText)\n    const menuOpenPrevRef = useRef<boolean>(menuOpen)\n\n    useScrollMonitor({\n      target: scrollMonitorTarget,\n      onScrollStart: () => {\n        if (closeMenuOnScroll && menuOpen) {\n          inputRef.current?.focus()\n          setMenuOpenRequest(false)\n        }\n      },\n    })\n\n    useEffect(() => {\n      if (inputText === inputTextPrevRef.current) {\n        setMenuRelevantOptions(getRelevantOptions(inputText))\n      } else {\n        inputTextPrevRef.current = inputText\n        timeoutIdRef.current = setTimeout(() => {\n          setMenuRelevantOptions(getRelevantOptions(inputText))\n        }, 150)\n      }\n\n      return () => {\n        if (timeoutIdRef.current) {\n          clearTimeout(timeoutIdRef.current)\n        }\n      }\n    }, [getRelevantOptions, inputText])\n\n    useLayoutEffect(() => {\n      if (selectedOption === undefined) return\n\n      if (!multiple) setInputText(getDropdownInputText(selectedOption))\n      setDropdownSelectedOption(getDropdownSelectedOption(selectedOption, multiple))\n    }, [multiple, selectedOption])\n\n    useEffect(() => {\n      if (menuOpen === menuOpenPrevRef.current) return\n\n      if (menuOpen && onOpenMenu) onOpenMenu()\n      if (!menuOpen && onCloseMenu) onCloseMenu()\n\n      menuOpenPrevRef.current = menuOpen\n    }, [menuOpen, onCloseMenu, onOpenMenu])\n\n    useEffect(() => {\n      if (!multiple && !disableAutoScrollToSelectedOption && menuOpen && menuRef && selectedOptionRef.current) {\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, menuRef])\n\n    return (\n      <FormInputLabel\n        {...rootProps}\n        {...sizeProps}\n        ref={ref}\n        id={formInputLabelId}\n        labelId={inputLabelId}\n        labelPosition={labelPosition}\n        active={inputActive}\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            if (searchable && !multiple && inputSynced) {\n              setInputText('')\n              setMenuRelevantOptions(getRelevantOptions(''))\n            }\n          } else if (menuRef && evt.target instanceof Node && !menuRef.contains(evt.target)) {\n            setMenuOpenRequest(false)\n          }\n        }}\n        onPointerDown={(evt) => {\n          if (rootProps.onPointerDown) rootProps.onPointerDown(evt)\n\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        onFocus={(evt) => {\n          if (rootProps.onFocus) rootProps.onFocus(evt)\n\n          setFocusWithin(true)\n\n          if (\n            inputRef.current &&\n            evt.target === inputRef.current &&\n            searchable &&\n            !multiple &&\n            inputSynced &&\n            !menuOpen\n          ) {\n            setInputText('')\n            setMenuRelevantOptions(getRelevantOptions(''))\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          setInputText(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            )}\n            <FormInput\n              ref={inputRef}\n              role='combobox'\n              aria-controls={menuListId}\n              aria-expanded={menuOpen}\n              aria-labelledby={rootProps.label ? inputLabelId : undefined}\n              type='text'\n              autoComplete='off'\n              autoCapitalize='off'\n              autoCorrect='off'\n              spellCheck='false'\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                setInputText(evt.currentTarget.value)\n                setMenuOpenRequest(true)\n              }}\n              onKeyDown={(evt) => {\n                if (keyboardKeys.Enter.validate(evt.key)) {\n                  setInputText(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 (searchable && !multiple && inputSynced && !menuOpen) {\n                    setInputText('')\n                    setMenuRelevantOptions(getRelevantOptions(''))\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((item) => (\n              <input\n                key={item.value}\n                type='hidden'\n                name={name}\n                value={item.value}\n                form={form}\n                disabled={rootProps.disabled}\n              />\n            ))}\n          </>\n        }\n        addon={\n          <>\n            {multiple && dropdownSelectedOption.length > 0 && (\n              <Chip\n                size='xs'\n                active\n                black\n                marginLeft={12}\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                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(multiple ? [] : null)\n\n                      inputRef.current?.focus()\n                      setMenuOpenRequest(true)\n                    }\n                  },\n                }}\n              />\n            )}\n            {!multiple && clearable && dropdownSelectedOption.length > 0 && (\n              <IconButton\n                icon='close'\n                size='l'\n                square\n                marginLeft={12}\n                disabled={rootProps.disabled}\n                onClick={(evt) => {\n                  evt.stopPropagation()\n\n                  if (!readOnly) {\n                    if (inputSynced) {\n                      setInputText('')\n                      setMenuRelevantOptions(getRelevantOptions(''))\n                    }\n\n                    if (selectedOption === undefined) {\n                      setDropdownSelectedOption([])\n                    }\n\n                    if (onSelectOption) onSelectOption(multiple ? [] : null)\n\n                    inputRef.current?.focus()\n                    setMenuOpenRequest(true)\n                  }\n                }}\n              />\n            )}\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={menuRelevantOptions.length === 0}\n            loading={loading}\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                setInputText(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            }}\n          >\n            {multiple ? (\n              <MenuList\n                ref={menuListRef}\n                id={menuListId}\n                role='listbox'\n                aria-labelledby={rootProps.label ? inputLabelId : undefined}\n                aria-multiselectable\n              >\n                {inputText.length === 0 ? (\n                  <>\n                    {optionsMultiToggle && (\n                      <ListItem\n                        {...sizeProps}\n                        text={optionsMultiToggleCaption}\n                        disabled={rootProps.disabled}\n                        borderRadius={8}\n                        ellipsis={false}\n                        textProps={{ wordBreak: 'break-word' }}\n                        onClick={(evt) => {\n                          evt.stopPropagation()\n                        }}\n                        control={\n                          <InputCheckbox\n                            sizes={SIZES_CHECKBOX}\n                            form='none'\n                            name={name}\n                            checked={multiToggleChecked}\n                            indeterminate={multiToggleIndeterminate}\n                            error={(multiToggleChecked || multiToggleIndeterminate) && status === 'error'}\n                            success={(multiToggleChecked || multiToggleIndeterminate) && status === 'success'}\n                            onChange={() => {\n                              if (!readOnly) {\n                                const update = multiToggleChecked || multiToggleIndeterminate ? [] : [...options]\n\n                                if (selectedOption === undefined) {\n                                  setDropdownSelectedOption(update)\n                                }\n\n                                if (onSelectOption) onSelectOption(update)\n                              }\n                            }}\n                          />\n                        }\n                      />\n                    )}\n                    {optionsMultiToggle && <MenuDivider />}\n                    {groupSelectedOptions &&\n                      menuOptionsGroups[0].map((option) => {\n                        const optionStatus = option.status ?? status\n                        const optionErrorStatus = optionStatus === 'error'\n                        const optionSuccessStatus = optionStatus === 'success'\n\n                        return (\n                          <ListItem\n                            {...sizeProps}\n                            key={option.value}\n                            active\n                            text={option.text}\n                            danger={optionErrorStatus}\n                            success={optionSuccessStatus}\n                            disabled={rootProps.disabled}\n                            borderRadius={8}\n                            ellipsis={false}\n                            textProps={{ wordBreak: 'break-word' }}\n                            onClick={(evt) => {\n                              evt.stopPropagation()\n                              inputRef.current?.focus()\n                            }}\n                            control={\n                              <InputCheckbox\n                                sizes={SIZES_CHECKBOX}\n                                form='none'\n                                role='option'\n                                aria-selected\n                                name={name}\n                                value={option.value}\n                                checked\n                                error={optionErrorStatus}\n                                success={optionSuccessStatus}\n                                onChange={(evt) => {\n                                  if (!readOnly) {\n                                    const update = dropdownSelectedOption.filter(\n                                      (item) => item.value !== evt.currentTarget.value\n                                    )\n\n                                    if (selectedOption === undefined) {\n                                      setDropdownSelectedOption(update)\n                                    }\n\n                                    if (onSelectOption) onSelectOption(update)\n                                  }\n                                }}\n                              />\n                            }\n                          />\n                        )\n                      })}\n                    {groupSelectedOptions && menuOptionsGroups[0].length > 0 && menuOptionsGroups[1].length > 0 && (\n                      <MenuDivider />\n                    )}\n                    {groupSelectedOptions &&\n                      menuOptionsGroups[1].map((option) => (\n                        <ListItem\n                          {...sizeProps}\n                          key={option.value}\n                          text={option.text}\n                          disabled={rootProps.disabled}\n                          borderRadius={8}\n                          ellipsis={false}\n                          textProps={{ wordBreak: 'break-word' }}\n                          onClick={(evt) => {\n                            evt.stopPropagation()\n                            inputRef.current?.focus()\n                          }}\n                          control={\n                            <InputCheckbox\n                              sizes={SIZES_CHECKBOX}\n                              form='none'\n                              role='option'\n                              aria-selected={false}\n                              name={name}\n                              value={option.value}\n                              checked={false}\n                              onChange={() => {\n                                if (!readOnly) {\n                                  const update = [...dropdownSelectedOption, option]\n\n                                  if (selectedOption === undefined) {\n                                    setDropdownSelectedOption(update)\n                                  }\n\n                                  if (onSelectOption) onSelectOption(update)\n                                }\n                              }}\n                            />\n                          }\n                        />\n                      ))}\n                    {!groupSelectedOptions &&\n                      options.map((option) => {\n                        const selected = dropdownSelectedOption.findIndex((item) => item.value === option.value) !== -1\n\n                        const optionStatus = option.status ?? status\n                        const optionErrorStatus = selected && optionStatus === 'error'\n                        const optionSuccessStatus = selected && optionStatus === 'success'\n\n                        return (\n                          <ListItem\n                            {...sizeProps}\n                            key={option.value}\n                            text={option.text}\n                            danger={optionErrorStatus}\n                            success={optionSuccessStatus}\n                            disabled={rootProps.disabled}\n                            active={selected}\n                            borderRadius={8}\n                            ellipsis={false}\n                            textProps={{ wordBreak: 'break-word' }}\n                            onClick={(evt) => {\n                              evt.stopPropagation()\n                            }}\n                            control={\n                              <InputCheckbox\n                                sizes={SIZES_CHECKBOX}\n                                form='none'\n                                role='option'\n                                aria-selected={selected}\n                                name={name}\n                                value={option.value}\n                                checked={selected}\n                                error={optionErrorStatus}\n                                success={optionSuccessStatus}\n                                onChange={(evt) => {\n                                  if (!readOnly) {\n                                    const update = selected\n                                      ? dropdownSelectedOption.filter((item) => item.value !== evt.currentTarget.value)\n                                      : [...dropdownSelectedOption, option]\n\n                                    if (selectedOption === undefined) {\n                                      setDropdownSelectedOption(update)\n                                    }\n\n                                    if (onSelectOption) onSelectOption(update)\n                                  }\n                                }}\n                              />\n                            }\n                          />\n                        )\n                      })}\n                  </>\n                ) : (\n                  <>\n                    {menuRelevantOptions.map((option) => {\n                      const selected = dropdownSelectedOption.findIndex((item) => item.value === option.value) !== -1\n\n                      const optionStatus = option.status ?? status\n                      const optionErrorStatus = selected && optionStatus === 'error'\n                      const optionSuccessStatus = selected && optionStatus === 'success'\n\n                      return (\n                        <ListItem\n                          {...sizeProps}\n                          key={option.value}\n                          text={option.text}\n                          danger={optionErrorStatus}\n                          success={optionSuccessStatus}\n                          disabled={rootProps.disabled}\n                          active={selected}\n                          borderRadius={8}\n                          ellipsis={false}\n                          textProps={{ wordBreak: 'break-word' }}\n                          onClick={(evt) => {\n                            evt.stopPropagation()\n                          }}\n                          control={\n                            <InputCheckbox\n                              sizes={SIZES_CHECKBOX}\n                              form='none'\n                              role='option'\n                              aria-selected={selected}\n                              name={name}\n                              value={option.value}\n                              checked={selected}\n                              error={optionErrorStatus}\n                              success={optionSuccessStatus}\n                              onChange={(evt) => {\n                                if (!readOnly) {\n                                  const update = selected\n                                    ? dropdownSelectedOption.filter((item) => item.value !== evt.currentTarget.value)\n                                    : [...dropdownSelectedOption, option]\n\n                                  if (selectedOption === undefined) {\n                                    setDropdownSelectedOption(update)\n                                  }\n\n                                  if (onSelectOption) onSelectOption(update)\n                                }\n                              }}\n                            />\n                          }\n                        />\n                      )\n                    })}\n                  </>\n                )}\n              </MenuList>\n            ) : (\n              <MenuList\n                ref={menuListRef}\n                id={menuListId}\n                role='listbox'\n                aria-labelledby={rootProps.label ? inputLabelId : undefined}\n              >\n                {(searchable ? menuRelevantOptions : options).map((option) => {\n                  const selected = dropdownSelectedOption.findIndex((item) => item.value === option.value) !== -1\n\n                  return (\n                    <ListItem\n                      {...sizeProps}\n                      role='option'\n                      aria-selected={selected}\n                      ref={selected ? selectedOptionRef : undefined}\n                      key={option.value}\n                      text={option.text}\n                      active={selected}\n                      danger={selected && status === 'error'}\n                      success={selected && status === 'success'}\n                      disabled={rootProps.disabled}\n                      borderRadius={8}\n                      ellipsis={false}\n                      textProps={{ wordBreak: 'break-word' }}\n                      onClick={(evt) => {\n                        evt.stopPropagation()\n\n                        if (!readOnly) {\n                          const update = { ...option }\n\n                          if (selectedOption === undefined) {\n                            setInputText(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                  )\n                })}\n              </MenuList>\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","loading","iconProps","menuProps","loadingIconProps","optionsEmptyIconProps","autoFocus","disableAutoScrollToSelectedOption","closeMenuOnScroll","scrollMonitorTarget","contrast","selectedOption","defaultSelectedOption","icon","inputMode","loadingMessage","loadingIcon","maxLength","multiple","clearable","onCloseMenu","onOpenMenu","onSelectOption","options","groupSelectedOptions","optionsMultiToggleCaption","optionsEmptyMessage","optionsEmptyIcon","palette","placeholder","readOnly","required","status","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","form","rootProps","sizeProps","iconBaseProps","sizes","SIZES_ICON","color","disabled","formInputLabelId","useMemo","id","nanoid","inputLabelId","menuListId","getRelevantOptions","fuse","Fuse","default","threshold","ignoreLocation","keys","FuseSearchKeys","text","label","tags","pattern","length","search","map","result","item","dropdownSelectedOption","setDropdownSelectedOption","useState","getDropdownSelectedOption","undefined","inputText","setInputText","getDropdownInputText","focusWithin","setFocusWithin","menuRelevantOptions","setMenuRelevantOptions","menuOpenRequest","setMenuOpenRequest","menuOptionsGroups","groupDropdownOptions","menuOpen","inputSynced","inputRequired","inputActive","Boolean","multiToggleChecked","multiToggleIndeterminate","inputRef","useRef","menuRef","setMenuRef","menuListRef","selectedOptionRef","timeoutIdRef","inputTextPrevRef","menuOpenPrevRef","useScrollMonitor","target","onScrollStart","current","focus","useEffect","setTimeout","clearTimeout","useLayoutEffect","menuRect","getBoundingClientRect","selectedOptionRect","top","bottom","scrollTo","offsetTop","_jsx","FormInputLabel","labelId","active","onColored","error","success","jsx","Styled","up","labelColorDisabled","labelColor","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","evt","Node","contains","onPointerDown","currentTarget","renderInPortal","preventDefault","onFocus","onBlur","relatedTarget","input","_jsxs","jsxs","_Fragment","children","type","tabIndex","FormInput","role","autoComplete","autoCapitalize","autoCorrect","spellCheck","value","colorDisabled","placeholderColor","placeholderColorDisabled","selectionStart","selectionEnd","stopPropagation","onChange","onKeyDown","keyboardKeys","Enter","validate","key","Space","prev","Esc","Tab","ArrowDown","menuItems","idx","findIndex","focusTarget","HTMLElement","focusFirstFocusable","ArrowUp","focusLastFocusable","addon","Chip","black","marginLeft","cursor","textProps","appearance","colorHover","discardButtonProps","square","IconButton","dropdown","DropdownMenu","setRef","open","popperReferenceId","secondary","elevated","disableAutoFocus","menuBackgroundColor","menuBorderColor","empty","emptyMessage","emptyIcon","emptyIconProps","Backspace","MenuList","ListItem","borderRadius","ellipsis","wordBreak","control","InputCheckbox","SIZES_CHECKBOX","checked","indeterminate","update","MenuDivider","option","optionStatus","optionErrorStatus","optionSuccessStatus","_createElement","danger","filter","createElement","selected","SIZES","displayName"],"mappings":"khCAmCMA,MAAAA,SAA2DC,gBAAAA,gBAC/DC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,KACVA,EAAO,eAAcC,cACrBA,EAAgB,UAASC,WACzBA,GAAa,EAAIC,QACjBA,GAAU,EAAIC,mBACdA,GAAqB,EAAIC,QACzBA,GAAU,EAAKC,UACfA,EAAY,CAAE,EAAAC,UACdA,EAAY,CAAE,EAAAC,iBACdA,EAAmB,CAAE,EAAAC,sBACrBA,EAAwB,CAAE,EAAAC,UAC1BA,EAASC,kCACTA,EAAiCC,kBACjCA,EAAiBC,oBACjBA,EAAmBC,SACnBA,EAAQC,eACRA,EAAcC,sBACdA,EAAqBC,KACrBA,EAAIC,UACJA,EAASC,eACTA,EAAcC,YACdA,EAAWC,UACXA,EAASC,SACTA,EAAQC,UACRA,EAASC,YACTA,EAAWC,WACXA,EAAUC,eACVA,EAAcC,QACdA,EAAOC,qBACPA,EAAoBC,0BACpBA,EAAyBC,oBACzBA,EAAmBC,iBACnBA,EAAgBC,QAChBA,EAAOC,YACPA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,OACRA,EAAMC,QACNA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,KACNA,KACGC,GACD/C,EAEJ,MAAMgD,EAAY,CAChB9C,OACAsC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMI,EAA2B,CAC/BC,MAAOC,UAAUA,WACjBC,MAAOL,EAAUM,SAAW,mBAAqB,2BAGnD,MAAMC,EAAmBC,MAAAA,SAAQ,IAAMR,EAAUS,IAAM,GAAGrD,KAAQsD,OAAMA,YAAM,CAACtD,EAAM4C,EAAUS,KAC/F,MAAME,EAAeH,MAAOA,SAAC,IAAME,OAAAA,UAAU,IAC7C,MAAME,EAAaJ,MAAOA,SAAC,IAAME,OAAAA,UAAU,IAE3C,MAAMG,EAAqBL,MAAAA,SAAQ,KACjC,MAAMM,EAAO,IAAIC,cAAIC,QAAiBjC,EAAS,CAC7CkC,UAAW,GACXC,gBAAgB,EAChBC,KAAM,CAACC,UAAAA,eAAeC,KAAMD,UAAcA,eAACE,MAAOF,UAAcA,eAACG,QAGnE,OAAQC,GACNA,EAAQC,SAAW,EAAI1C,EAAU+B,EAAKY,OAAOF,GAASG,KAAKC,GAAWA,EAAOC,MAAK,GACnF,CAAC9C,IAEJ,MAAO+C,GAAwBC,IAA6BC,MAAQA,UAAmB,IACrFC,MAAAA,0BAA0B9D,SAAmB+D,EAAY/D,EAAiBC,EAAuBM,KAGnG,MAAOyD,GAAWC,IAAgBJ,MAAAA,UAAiB,IAAMK,2BAAqBP,GAAwBpD,KAEtG,MAAO4D,GAAaC,IAAkBP,MAAQA,UAAU,GAExD,MAAOQ,GAAqBC,IAA0BT,MAAQA,UAAmB,IAC/EnB,EAAmBsB,MAGrB,MAAOO,GAAiBC,IAAsBX,MAAQA,UAAU,GAEhE,MAAMY,GAA6DlE,EAC/DmE,2BAAqB9D,EAAS+C,IAC9B,CAAC,GAAI,IAET,MAAMgB,GAAWJ,KAAoB1C,EAAUM,SAE/C,MAAMyC,GAAcZ,KAAcE,MAAoBA,qBAACP,IACvD,MAAMkB,GAAgBzD,GAAYuC,GAAuBL,SAAW,EACpE,MAAMwB,GAAcC,QAAQJ,IAAYX,IAAaG,IAErD,MAAMa,GAAqBP,GAAkB,GAAGnB,OAAS,GAAKmB,GAAkB,GAAGnB,SAAW,EAC9F,MAAM2B,GAA2BR,GAAkB,GAAGnB,OAAS,GAAKmB,GAAkB,GAAGnB,OAAS,EAElG,MAAM4B,GAAWC,aAAyB,MAC1C,MAAOC,GAASC,IAAcxB,MAAQA,SAAwB,MAC9D,MAAMyB,GAAcH,aAAyB,MAC7C,MAAMI,GAAoBJ,aAAoB,MAE9C,MAAMK,GAAeL,aAAgD,MAErE,MAAMM,GAAmBN,aAAenB,IACxC,MAAM0B,GAAkBP,aAAgBR,IA4DxC,OA1DAgB,kCAAiB,CACfC,OAAQ9F,EACR+F,cAAeA,KACThG,GAAqB8E,KACvBO,GAASY,SAASC,QAClBvB,IAAmB,GACrB,IAIJwB,MAAAA,WAAU,KACJhC,KAAcyB,GAAiBK,QACjCxB,GAAuB5B,EAAmBsB,MAE1CyB,GAAiBK,QAAU9B,GAC3BwB,GAAaM,QAAUG,YAAW,KAChC3B,GAAuB5B,EAAmBsB,IAAW,GACpD,MAGE,KACDwB,GAAaM,SACfI,aAAaV,GAAaM,QAC5B,IAED,CAACpD,EAAoBsB,KAExBmC,MAAAA,iBAAgB,KACVnG,SAAmB+D,IAElBxD,GAAU0D,GAAaC,MAAAA,qBAAqBlE,IACjD4D,GAA0BE,MAAyBA,0BAAC9D,EAAgBO,IAAU,GAC7E,CAACA,EAAUP,IAEdgG,MAAAA,WAAU,KACJrB,KAAae,GAAgBI,UAE7BnB,IAAYjE,GAAYA,KACvBiE,IAAYlE,GAAaA,IAE9BiF,GAAgBI,QAAUnB,GAAQ,GACjC,CAACA,GAAUlE,EAAaC,IAE3BsF,MAAAA,WAAU,KACR,IAAKzF,IAAaX,GAAqC+E,IAAYS,IAAWG,GAAkBO,QAAS,CACvG,MAAMM,EAAWhB,GAAQiB,wBACzB,MAAMC,EAAqBf,GAAkBO,QAAQO,yBAEjDC,EAAmBC,IAAMH,EAASG,KAAOD,EAAmBE,OAASJ,EAASI,SAChFP,YAAW,KACLb,IAAWG,GAAkBO,SAC/BV,GAAQqB,SAAS,EAAGlB,GAAkBO,QAAQY,UAChD,GACC,EAEP,IACC,CAACnG,EAAUX,EAAmC+E,GAAUS,KAGzDuB,WAAAA,IAACC,eAAAA,eAAc,IACT/E,KACAC,EACJ/C,IAAKA,EACLuD,GAAIF,EACJyE,QAASrE,EACTtD,cAAeA,EACf4H,OAAQhC,GACRiC,UAAWhH,EACXX,QAASA,EACT4H,MAAO3F,IAAW,QAClB4F,QAAS5F,IAAW,UACpB0E,MAAO5B,GACPjE,KAAM,CAACA,EAAMyG,WAAAO,IAACC,kBAAkB,CAAeC,GAAIzC,IAAd,YACrCpF,UAAW,IACNuC,KACAC,KACAxC,GAEL0B,QAAS,CACPiB,MAAOL,EAAUM,SAAWlB,EAAQoG,mBAAqBpG,EAAQqG,WACjEC,gBAAiB1F,EAAUM,SAAWlB,EAAQuG,wBAA0BvG,EAAQsG,gBAChFE,qBAAsB5F,EAAUM,SAAWlB,EAAQuG,wBAA0BvG,EAAQwG,qBACrFC,YAAa7F,EAAUM,SAAWlB,EAAQ0G,oBAAsB1G,EAAQyG,aAE1EE,QAAUC,IACJhG,EAAU+F,SAAS/F,EAAU+F,QAAQC,GAErChG,EAAUM,WAEd+C,GAASY,SAASC,QAEbpB,GAOMS,IAAWyC,EAAIjC,kBAAkBkC,OAAS1C,GAAQ2C,SAASF,EAAIjC,SACxEpB,IAAmB,IAPnBA,IAAmB,GAEfrF,IAAeoB,GAAYqE,KAC7BX,GAAa,IACbK,GAAuB5B,EAAmB,OAI9C,EAEFsF,cAAgBH,IACVhG,EAAUmG,eAAenG,EAAUmG,cAAcH,GAGnDA,EAAIjC,SAAWV,GAASY,SACxB+B,EAAIjC,kBAAkBkC,OACrBD,EAAII,cAAcF,SAASF,EAAIjC,SAC7BpG,EAAU0I,gBAAkBvD,IAAYS,IAAWA,GAAQ2C,SAASF,EAAIjC,UAE3EiC,EAAIM,gBACN,EAEFC,QAAUP,IACJhG,EAAUuG,SAASvG,EAAUuG,QAAQP,GAEzCzD,IAAe,GAGbc,GAASY,SACT+B,EAAIjC,SAAWV,GAASY,SACxB3G,IACCoB,GACDqE,KACCD,KAEDV,GAAa,IACbK,GAAuB5B,EAAmB,KAC5C,EAEF2F,OAASR,IACHhG,EAAUwG,QAAQxG,EAAUwG,OAAOR,GAGrCA,EAAII,cAAcF,SAASF,EAAIS,gBAC9B9I,EAAU0I,gBAAkBvD,IAAYS,IAAWA,GAAQ2C,SAASF,EAAIS,iBAK3ElE,IAAe,GACfH,GAAaC,MAAoBA,qBAACP,GAAwBpD,IAC1DiE,IAAmB,GAAM,EAE3B+D,MACEC,WAAAC,KAAAC,oBAAA,CAAAC,SACG9D,CAAAA,KAAkB1F,IAAegC,GAChCwF,WAAAO,IAACC,iBAAiB,CAChB/F,UAAQ,EACRwH,KAAK,OACLzI,UAAU,OACVyB,KAAMA,EACNiH,UAAW,EACXT,QAASA,KACPlD,GAASY,SAASC,OAAO,IAI/BY,WAAAO,IAAC4B,oBAAS,CACR/J,IAAKmG,GACL6D,KAAK,WACL,gBAAetG,EACf,gBAAekC,GACf,kBAAiB9C,EAAUsB,MAAQX,OAAeuB,EAClD6E,KAAK,OACLI,aAAa,MACbC,eAAe,MACfC,YAAY,MACZC,WAAW,QACXvH,KAAMA,EACNjC,UAAWA,EACXQ,UAAWhB,EAAagB,EAAY,OACpCG,UAAWA,EACXY,YAAaA,EACbC,SAAUA,IAAahC,EACvBiC,SAAUyD,GACV1C,SAAUN,EAAUM,SACpBiH,MAAOpF,GACP/C,QAAS,CACPiB,MAAOjB,EAAQiB,MACfmH,cAAepI,EAAQoI,cACvBC,iBAAkBrI,EAAQqI,iBAC1BC,yBAA0BtI,EAAQsI,0BAEpC3B,QAAUC,IACJlD,IAAYkD,EAAII,cAAcuB,iBAAmB3B,EAAII,cAAcwB,cACrE5B,EAAI6B,iBACN,EAEFC,SAAW9B,IACT5D,GAAa4D,EAAII,cAAcmB,OAC/B5E,IAAmB,EAAK,EAE1BoF,UAAY/B,IA0BV,GAzBIgC,YAAYA,aAACC,MAAMC,SAASlC,EAAImC,OAClC/F,GAAaC,MAAoBA,qBAACP,GAAwBpD,IAC1DiE,IAAmB,KAGjBqF,yBAAaI,MAAMF,SAASlC,EAAImC,MAAUrF,IAAYkD,EAAII,cAAcuB,iBAAmB,IAC7F3B,EAAIM,iBAEAhJ,IAAeoB,GAAYqE,KAAgBD,KAC7CV,GAAa,IACbK,GAAuB5B,EAAmB,MAG5C8B,IAAoB0F,IAAUA,KAG5BL,YAAYA,aAACM,IAAIJ,SAASlC,EAAImC,MAChCxF,IAAmB,GAGjBqF,YAAAA,aAAaO,IAAIL,SAASlC,EAAImC,MAAQrF,KACxCkD,EAAIM,iBACJ3D,IAAmB,IAGjBqF,YAAYA,aAACQ,UAAUN,SAASlC,EAAImC,MAAQrF,IAAYW,GAAYQ,QAGtE,GAFA+B,EAAIM,kBAEC5H,GAAYgF,GAAkBO,QAAS,CAC1C,MAAMwE,EAAY,IAAIhF,GAAYQ,QAAQ6C,UAE1C,MAAM4B,EAAMD,EAAUE,WAAW9G,GAASA,EAAKqE,SAASxC,GAAkBO,WAE1E,MAAM2E,EAAcH,EAAUC,EAAM,IAAMD,EAAU,GAEhDG,aAAuBC,aACzBC,IAAmBA,oBAACF,EAExB,MACEE,wBAAoBrF,GAAYQ,SAIpC,GAAI+D,YAAYA,aAACe,QAAQb,SAASlC,EAAImC,MAAQrF,IAAYW,GAAYQ,QAGpE,GAFA+B,EAAIM,kBAEC5H,GAAYgF,GAAkBO,QAAS,CAC1C,MAAMwE,EAAY,IAAIhF,GAAYQ,QAAQ6C,UAE1C,MAAM4B,EAAMD,EAAUE,WAAW9G,GAASA,EAAKqE,SAASxC,GAAkBO,WAE1E,MAAM2E,EAAcH,EAAUC,EAAM,IAAMD,EAAUA,EAAUhH,OAAS,GAEnEmH,aAAuBC,aACzBC,IAAmBA,oBAACF,EAExB,MACEI,uBAAmBvF,GAAYQ,QAEnC,IAGHnC,GAAuBH,KAAKE,GAC3BiD,WAAAA,IAAA,QAAA,CAEEiC,KAAK,SACL3J,KAAMA,EACNmK,MAAO1F,EAAK0F,MACZxH,KAAMA,EACNO,SAAUN,EAAUM,UALfuB,EAAK0F,YAUlB0B,MACEtC,WAAAC,KAAAC,oBAAA,CAAAC,SAAA,CACGpI,GAAYoD,GAAuBL,OAAS,GAC3CqD,WAAAO,IAAC6D,UAAI,CACH/L,KAAK,KACL8H,QAAM,EACNkE,OAAK,EACLC,WAAY,GACZ9I,SAAUN,EAAUM,SACpB+I,OAAQrJ,EAAUM,SAAW,mBAAgB4B,EAC7Cb,KAAMS,GAAuBL,OAC7B6H,UAAW,CACTC,WAAY,UACZpM,KAAM,MAERiC,QACEY,EAAUM,SACN,CACED,MAAO,mBACPmJ,WAAY,mBACZ9D,gBAAiB,oBACjBE,qBAAsB,0BAExB1D,EAENiE,cAAgBH,IACdA,EAAIM,gBAAgB,EAEtBmD,mBAAoB,CAClBC,QAAQ,EACRxL,UAAW8B,EAAUM,SACrByF,QAAUC,IACRA,EAAI6B,kBAECvI,IACCnB,SAAmB+D,GACrBH,GAA0B,IAGxBjD,GAAgBA,EAAeJ,EAAW,GAAK,MAEnD2E,GAASY,SAASC,QAClBvB,IAAmB,GACrB,MAKNjE,GAAYC,GAAamD,GAAuBL,OAAS,GACzDqD,WAAAO,IAACsE,sBAAU,CACTtL,KAAK,QACLlB,KAAK,IACLuM,QAAM,EACNN,WAAY,GACZ9I,SAAUN,EAAUM,SACpByF,QAAUC,IACRA,EAAI6B,kBAECvI,IACCyD,KACFX,GAAa,IACbK,GAAuB5B,EAAmB,MAGxC1C,SAAmB+D,GACrBH,GAA0B,IAGxBjD,GAAgBA,EAAeJ,EAAW,GAAK,MAEnD2E,GAASY,SAASC,QAClBvB,IAAmB,GACrB,OAMViH,SACE9E,WAAAO,IAACwE,0BAAY,IACPlM,EACJmM,OAAQtG,GACRuG,KAAMjH,GACNkH,kBAAmBzJ,EACnB0J,WAAY/L,EACZgM,SAAUhM,EACViM,kBAAgB,EAChB/K,QAAS,CACPsG,gBAAiBtG,EAAQgL,oBACzBvE,YAAazG,EAAQiL,iBAEvBC,MAAO9H,GAAoBf,SAAW,EACtChE,QAASA,EACTc,eAAgBA,EAChBC,YAAaA,EACbZ,iBAAkB,IACbqC,KACAC,KACAtC,GAEL2M,aAAcrL,EACdsL,UAAWrL,EACXsL,eAAgB,IACXxK,KACAC,KACArC,GAELkK,UAAY/B,IACNgC,YAAYA,aAACO,IAAIL,SAASlC,EAAImC,OAChCnC,EAAIM,iBACJjD,GAASY,SAASC,QAClBvB,IAAmB,IAGjBqF,YAAYA,aAACC,MAAMC,SAASlC,EAAImC,OAClC9E,GAASY,SAASC,QAClB9B,GAAaC,MAAoBA,qBAACP,GAAwBpD,IAC1DiE,IAAmB,IAGjBqF,YAAYA,aAACM,IAAIJ,SAASlC,EAAImC,OAChC9E,GAASY,SAASC,QAClBvB,IAAmB,IAGjBqF,yBAAa0C,UAAUxC,SAASlC,EAAImC,OAAS7I,IAAaZ,IAAcA,GAAYC,KAClFR,SAAmB+D,GACrBH,GAA0B,IAGxBjD,GAAgBA,EAAeJ,EAAW,GAAK,MACrD,EACAoI,SAGAhC,WAAAO,IAACsF,kBADFjM,EACU,CACPxB,IAAKuG,GACLhD,GAAIG,EACJsG,KAAK,UACL,kBAAiBlH,EAAUsB,MAAQX,OAAeuB,EAClD,wBAAoB,EAAA4E,SAEnB3E,GAAUV,SAAW,EACpBkF,WAAAA,KAAAE,WAAAA,SAAA,CAAAC,SACGtJ,CAAAA,GACCsH,WAAAO,IAACuF,kBAAQ,IACH3K,EACJoB,KAAMpC,EACNqB,SAAUN,EAAUM,SACpBuK,aAAc,EACdC,UAAU,EACVxB,UAAW,CAAEyB,UAAW,cACxBhF,QAAUC,IACRA,EAAI6B,iBAAiB,EAEvBmD,QACElG,WAAAO,IAAC4F,4BAAa,CACZ9K,MAAO+K,UAAeA,eACtBnL,KAAK,OACL3C,KAAMA,EACN+N,QAAShI,GACTiI,cAAehI,GACf+B,OAAQhC,IAAsBC,KAA6B5D,IAAW,QACtE4F,SAAUjC,IAAsBC,KAA6B5D,IAAW,UACxEsI,SAAUA,KACR,IAAKxI,EAAU,CACb,MAAM+L,EAASlI,IAAsBC,GAA2B,GAAK,IAAIrE,GAErEZ,SAAmB+D,GACrBH,GAA0BsJ,GAGxBvM,GAAgBA,EAAeuM,EACrC,OAMT7N,GAAsBsH,eAACwG,YAAAA,aAAa,GACpCtM,GACC4D,GAAkB,GAAGjB,KAAK4J,IACxB,MAAMC,EAAeD,EAAO/L,QAAUA,EACtC,MAAMiM,EAAoBD,IAAiB,QAC3C,MAAME,EAAsBF,IAAiB,UAE7C,OACEG,MAAAA,cAACf,SAAAA,SAAQ,IACH3K,EACJkI,IAAKoD,EAAOhE,MACZtC,QAAM,EACN5D,KAAMkK,EAAOlK,KACbuK,OAAQH,EACRrG,QAASsG,EACTpL,SAAUN,EAAUM,SACpBuK,aAAc,EACdC,UAAU,EACVxB,UAAW,CAAEyB,UAAW,cACxBhF,QAAUC,IACRA,EAAI6B,kBACJxE,GAASY,SAASC,OAAO,EAE3B8G,QACElG,WAAAO,IAAC4F,4BAAa,CACZ9K,MAAO+K,UAAeA,eACtBnL,KAAK,OACLmH,KAAK,SACL,iBAAa,EACb9J,KAAMA,EACNmK,MAAOgE,EAAOhE,MACd4D,SAAO,EACPhG,MAAOsG,EACPrG,QAASsG,EACT5D,SAAW9B,IACT,IAAK1G,EAAU,CACb,MAAM+L,EAASvJ,GAAuB+J,QACnChK,GAASA,EAAK0F,QAAUvB,EAAII,cAAcmB,QAGzCpJ,SAAmB+D,GACrBH,GAA0BsJ,GAGxBvM,GAAgBA,EAAeuM,EACrC,MAIN,IAGPrM,GAAwB4D,GAAkB,GAAGnB,OAAS,GAAKmB,GAAkB,GAAGnB,OAAS,GACxFqD,WAAAO,IAACiG,4BAEFtM,GACC4D,GAAkB,GAAGjB,KAAK4J,GACxBI,MAAAG,cAAClB,kBAAQ,IACH3K,EACJkI,IAAKoD,EAAOhE,MACZlG,KAAMkK,EAAOlK,KACbf,SAAUN,EAAUM,SACpBuK,aAAc,EACdC,UAAU,EACVxB,UAAW,CAAEyB,UAAW,cACxBhF,QAAUC,IACRA,EAAI6B,kBACJxE,GAASY,SAASC,OAAO,EAE3B8G,QACElG,WAAAO,IAAC4F,4BAAa,CACZ9K,MAAO+K,UAAeA,eACtBnL,KAAK,OACLmH,KAAK,SACL,iBAAe,EACf9J,KAAMA,EACNmK,MAAOgE,EAAOhE,MACd4D,SAAS,EACTrD,SAAUA,KACR,IAAKxI,EAAU,CACb,MAAM+L,EAAS,IAAIvJ,GAAwByJ,GAEvCpN,SAAmB+D,GACrBH,GAA0BsJ,GAGxBvM,GAAgBA,EAAeuM,EACrC,UAMVrM,GACAD,EAAQ4C,KAAK4J,IACX,MAAMQ,EAAWjK,GAAuB6G,WAAW9G,GAASA,EAAK0F,QAAUgE,EAAOhE,WAAY,EAE9F,MAAMiE,EAAeD,EAAO/L,QAAUA,EACtC,MAAMiM,EAAoBM,GAAYP,IAAiB,QACvD,MAAME,EAAsBK,GAAYP,IAAiB,UAEzD,OACEG,MAAAA,cAACf,SAAAA,SAAQ,IACH3K,EACJkI,IAAKoD,EAAOhE,MACZlG,KAAMkK,EAAOlK,KACbuK,OAAQH,EACRrG,QAASsG,EACTpL,SAAUN,EAAUM,SACpB2E,OAAQ8G,EACRlB,aAAc,EACdC,UAAU,EACVxB,UAAW,CAAEyB,UAAW,cACxBhF,QAAUC,IACRA,EAAI6B,iBAAiB,EAEvBmD,QACElG,WAAAO,IAAC4F,4BAAa,CACZ9K,MAAO+K,UAAeA,eACtBnL,KAAK,OACLmH,KAAK,SACL,gBAAe6E,EACf3O,KAAMA,EACNmK,MAAOgE,EAAOhE,MACd4D,QAASY,EACT5G,MAAOsG,EACPrG,QAASsG,EACT5D,SAAW9B,IACT,IAAK1G,EAAU,CACb,MAAM+L,EAASU,EACXjK,GAAuB+J,QAAQhK,GAASA,EAAK0F,QAAUvB,EAAII,cAAcmB,QACzE,IAAIzF,GAAwByJ,GAE5BpN,SAAmB+D,GACrBH,GAA0BsJ,GAGxBvM,GAAgBA,EAAeuM,EACrC,MAIN,OAKVvG,WAAAO,IAAAwB,oBAAA,CAAAC,SACGtE,GAAoBb,KAAK4J,IACxB,MAAMQ,EAAWjK,GAAuB6G,WAAW9G,GAASA,EAAK0F,QAAUgE,EAAOhE,WAAY,EAE9F,MAAMiE,EAAeD,EAAO/L,QAAUA,EACtC,MAAMiM,EAAoBM,GAAYP,IAAiB,QACvD,MAAME,EAAsBK,GAAYP,IAAiB,UAEzD,OACEG,MAAAA,cAACf,SAAAA,SAAQ,IACH3K,EACJkI,IAAKoD,EAAOhE,MACZlG,KAAMkK,EAAOlK,KACbuK,OAAQH,EACRrG,QAASsG,EACTpL,SAAUN,EAAUM,SACpB2E,OAAQ8G,EACRlB,aAAc,EACdC,UAAU,EACVxB,UAAW,CAAEyB,UAAW,cACxBhF,QAAUC,IACRA,EAAI6B,iBAAiB,EAEvBmD,QACElG,WAAAO,IAAC4F,4BAAa,CACZ9K,MAAO+K,UAAeA,eACtBnL,KAAK,OACLmH,KAAK,SACL,gBAAe6E,EACf3O,KAAMA,EACNmK,MAAOgE,EAAOhE,MACd4D,QAASY,EACT5G,MAAOsG,EACPrG,QAASsG,EACT5D,SAAW9B,IACT,IAAK1G,EAAU,CACb,MAAM+L,EAASU,EACXjK,GAAuB+J,QAAQhK,GAASA,EAAK0F,QAAUvB,EAAII,cAAcmB,QACzE,IAAIzF,GAAwByJ,GAE5BpN,SAAmB+D,GACrBH,GAA0BsJ,GAGxBvM,GAAgBA,EAAeuM,EACrC,MAIN,OAOH,CACPnO,IAAKuG,GACLhD,GAAIG,EACJsG,KAAK,UACL,kBAAiBlH,EAAUsB,MAAQX,OAAeuB,EAAU4E,UAE1DxJ,EAAakF,GAAsBzD,GAAS4C,KAAK4J,IACjD,MAAMQ,EAAWjK,GAAuB6G,WAAW9G,GAASA,EAAK0F,QAAUgE,EAAOhE,WAAY,EAE9F,OACEoE,MAAAA,cAACf,SAAAA,SAAQ,IACH3K,EACJiH,KAAK,SACL,gBAAe6E,EACf7O,IAAK6O,EAAWrI,QAAoBxB,EACpCiG,IAAKoD,EAAOhE,MACZlG,KAAMkK,EAAOlK,KACb4D,OAAQ8G,EACRH,OAAQG,GAAYvM,IAAW,QAC/B4F,QAAS2G,GAAYvM,IAAW,UAChCc,SAAUN,EAAUM,SACpBuK,aAAc,EACdC,UAAU,EACVxB,UAAW,CAAEyB,UAAW,cACxBhF,QAAUC,IAGR,GAFAA,EAAI6B,mBAECvI,EAAU,CACb,MAAM+L,EAAS,IAAKE,GAEhBpN,SAAmB+D,IACrBE,GAAaC,MAAAA,qBAAqBgJ,IAClCtJ,GAA0BE,MAAAA,0BAA0BoJ,KAGlDvM,GAAgBA,EAAeuM,GAEnChI,GAASY,SAASC,QAClBvB,IAAmB,EACrB,IAEF,SAOd,IAGN,CACExC,MAAO6L,UAAKA,MACZC,YAl0BmB,oCAAA"}

package/components/Dropdown/Dropdown.mjs

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