npm - @economic/taco - Versions diffs - 13.0.0 → 14.0.0-tanstack-virtual-update.0 - Mend

@economic/taco 13.0.0 → 14.0.0-tanstack-virtual-update.0

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

Files changed (645) hide show

package/dist/components/SearchInput/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport ~~{ useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef } from '../../utils/input';\nimport~~ type { InputProps } from '~~../Input/Input~~';\nimport { Input } from '~~../Input/Input~~';\nimport { ~~LegacyIconButton~~ } from '~~../LegacyComponents~~/~~IconButton/IconButton~~';\nimport { ~~useLocalization~~ } from '~~../Provider~~/~~Localization~~';\n\n/*\n @deprecated\n /\nexport type SearchInputTexts = {\n button: string;\n clear: string;\n findNext: string;\n findPrevious: string;\n placeholder: string;\n};\n\n/\n @deprecated\n /\nexport type SearchInputProps = Omit<InputProps, 'button' \| 'icon' \| 'prefix' \| 'postfix'> & {\n /* Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined /\n onSearch?: (value: string \| number \| readonly string[] \| undefined) => void;\n};\n\n/\n @deprecated\n */\nexport const SearchInput = React.forwardRef(function SearchInput(\n { onSearch, ...props }: SearchInputProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const { texts } = useLocalization();\n\n const handleClick = (): void => {\n onSearch?.(internalRef.current?.value ?? '');\n };\n\n const handleCancelClick = (): void => {\n setInputValueByRef(internalRef.current, '');\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n return;\n }\n\n if (event.key === 'Escape') {\n onSearch?.('');\n return;\n }\n };\n\n return (\n <Input\n aria-label={texts.searchInput.placeholder}\n placeholder={texts.searchInput.placeholder}\n {...props}\n onKeyDown={handleKeyDown}\n postfix={\n <>\n {props.disabled \|\| props.readOnly \|\| !props.value ? null : (\n <LegacyIconButton\n aria-hidden\n aria-label={texts.searchInput.clear}\n className=\"invisible mr-0.5 !h-5 !min-h-[theme(spacing.4)] !w-5 !min-w-[theme(spacing.4)] text-xs !text-gray-700 hover:visible group-hover:visible group-peer-focus:visible group-peer-hover:visible\"\n icon=\"close\"\n onClick={handleCancelClick}\n rounded\n tabIndex={-1}\n tooltip={texts.searchInput.clear}\n />\n )}\n <LegacyIconButton\n aria-label={texts.searchInput.button}\n icon=\"search\"\n className=\"-mr-2 !border-transparent !bg-transparent focus:!border-transparent group-peer-focus:!border-transparent group-peer-focus:group-peer-active:!border-transparent\"\n disabled={props.disabled \|\| props.readOnly}\n onClick={handleClick}\n tabIndex={-1}\n tooltip={texts.searchInput.button}\n />\n </>\n }\n ref={internalRef}\n type=\"search\"\n />\n );\n});\n"],"names":["SearchInput"],"mappings":";;;;;;~~AA+BO~~,MAAM,cAAc,MAAM,WAAW,SAASA,aACjD,EAAE,UAAU,GAAG,MAAA,GACf,KACF;AACE,QAAM,cAAc,aAA+B,GAAG;AACtD,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,cAAc,MAAY;AAC5B,eAAW,YAAY,SAAS,SAAS,EAAE;AAAA,EAC/C;AAEA,QAAM,oBAAoB,MAAY;AAClC,uBAAmB,YAAY,SAAS,EAAE;AAAA,EAC9C;AAEA,QAAM,gBAAgB,CAAC,UAAuD;AAC1E,UAAM,YAAY,KAAK;AAEvB,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,kBAAA;AACA;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,UAAU;AACxB,iBAAW,EAAE;AACb;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,YAAY;AAAA,MAC9B,aAAa,MAAM,YAAY;AAAA,MAC9B,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,mEAES,MAAM,YAAY,MAAM,YAAY,CAAC,MAAM,QAAQ,OAChD,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,eAAW;AAAA,UACX,cAAY,MAAM,YAAY;AAAA,UAC9B,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,SAAO;AAAA,UACP,UAAU;AAAA,UACV,SAAS,MAAM,YAAY;AAAA,QAAA;AAAA,MAAA,GAGnC,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,YAAY;AAAA,UAC9B,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,SAAS,MAAM,YAAY;AAAA,QAAA;AAAA,MAAA,CAEnC;AAAA,MAEJ,KAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,EAAA;AAGjB,CAAC;"}
1	+ {"version":3,"file":"SearchInput.js","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { InputProps } from '@/components';\nimport { Input, LegacyIconButton, useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { setInputValueByRef } from '@/utils/input';\n\n/*\n @deprecated Use `<SearchInput2>` instead.\n /\nexport type SearchInputTexts = {\n button: string;\n clear: string;\n findNext: string;\n findPrevious: string;\n placeholder: string;\n};\n\n/\n @deprecated Use `<SearchInput2>` instead.\n /\nexport type SearchInputProps = Omit<InputProps, 'button' \| 'icon' \| 'prefix' \| 'postfix'> & {\n /* Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined /\n onSearch?: (value: string \| number \| readonly string[] \| undefined) => void;\n};\n\n/\n @deprecated Use `<SearchInput2>` instead.\n */\nexport const SearchInput = React.forwardRef(function SearchInput(\n { onSearch, ...props }: SearchInputProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const { texts } = useLocalization();\n\n const handleClick = (): void => {\n onSearch?.(internalRef.current?.value ?? '');\n };\n\n const handleCancelClick = (): void => {\n setInputValueByRef(internalRef.current, '');\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n return;\n }\n\n if (event.key === 'Escape') {\n onSearch?.('');\n return;\n }\n };\n\n return (\n <Input\n aria-label={texts.searchInput.placeholder}\n placeholder={texts.searchInput.placeholder}\n {...props}\n onKeyDown={handleKeyDown}\n postfix={\n <>\n {props.disabled \|\| props.readOnly \|\| !props.value ? null : (\n <LegacyIconButton\n aria-hidden\n aria-label={texts.searchInput.clear}\n className=\"invisible mr-0.5 !h-5 !min-h-[theme(spacing.4)] !w-5 !min-w-[theme(spacing.4)] text-xs !text-gray-700 hover:visible group-hover:visible group-peer-focus:visible group-peer-hover:visible\"\n icon=\"close\"\n onClick={handleCancelClick}\n rounded\n tabIndex={-1}\n tooltip={texts.searchInput.clear}\n />\n )}\n <LegacyIconButton\n aria-label={texts.searchInput.button}\n icon=\"search\"\n className=\"-mr-2 !border-transparent !bg-transparent focus:!border-transparent group-peer-focus:!border-transparent group-peer-focus:group-peer-active:!border-transparent\"\n disabled={props.disabled \|\| props.readOnly}\n onClick={handleClick}\n tabIndex={-1}\n tooltip={texts.searchInput.button}\n />\n </>\n }\n ref={internalRef}\n type=\"search\"\n />\n );\n});\n"],"names":["SearchInput"],"mappings":";;;;;;AA6BO,MAAM,cAAc,MAAM,WAAW,SAASA,aACjD,EAAE,UAAU,GAAG,MAAA,GACf,KACF;AACE,QAAM,cAAc,aAA+B,GAAG;AACtD,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,cAAc,MAAY;AAC5B,eAAW,YAAY,SAAS,SAAS,EAAE;AAAA,EAC/C;AAEA,QAAM,oBAAoB,MAAY;AAClC,uBAAmB,YAAY,SAAS,EAAE;AAAA,EAC9C;AAEA,QAAM,gBAAgB,CAAC,UAAuD;AAC1E,UAAM,YAAY,KAAK;AAEvB,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,kBAAA;AACA;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,UAAU;AACxB,iBAAW,EAAE;AACb;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,YAAY;AAAA,MAC9B,aAAa,MAAM,YAAY;AAAA,MAC9B,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,mEAES,MAAM,YAAY,MAAM,YAAY,CAAC,MAAM,QAAQ,OAChD,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,eAAW;AAAA,UACX,cAAY,MAAM,YAAY;AAAA,UAC9B,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,SAAO;AAAA,UACP,UAAU;AAAA,UACV,SAAS,MAAM,YAAY;AAAA,QAAA;AAAA,MAAA,GAGnC,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,YAAY;AAAA,UAC9B,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,SAAS,MAAM,YAAY;AAAA,QAAA;AAAA,MAAA,CAEnC;AAAA,MAEJ,KAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,EAAA;AAGjB,CAAC;"}

package/dist/components/SearchInput2/SearchInput2.cjs CHANGED Viewed

@@ -4,12 +4,12 @@ const cn = require("clsx");
 const React = require("react");
 const useGlobalKeyDown = require("../../hooks/useGlobalKeyDown.cjs");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
-const Icon = require("../Icon/Icon.cjs");
-const Input = require("../Input/Input.cjs");
-const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const Localization = require("../Provider/Localization.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const Shortcut = require("../Shortcut/Shortcut.cjs");
 const Spinner = require("../Spinner/Spinner.cjs");
+const Icon = require("../Icon/Icon.cjs");
+const Input = require("../Input/Input.cjs");
 const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
   const {
     findCurrent,

package/dist/components/SearchInput2/SearchInput2.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Icon } from '../Icon/Icon';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CommonSearchInput2Props = {\n loading?: boolean;\n onChange: (value: string) => void;\n onClear?: () => void;\n settingsContent?: React.JSX.Element;\n shortcut?: string \| KeyDownHandlerOptions;\n value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' \| 'onChange' \| 'value'>;\n\ntype BasicSearchInput2Props = {\n findCurrent?: never;\n findTotal?: never;\n onClickFindNext?: never;\n onClickFindPrevious?: never;\n showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n findCurrent: number \| null;\n findTotal: number \| null;\n onClickFindNext: () => void;\n onClickFindPrevious: () => void;\n showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props \| ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n loading = false,\n onChange: handleChange,\n onClear,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n settingsContent,\n shortcut,\n showTotal = true,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const containerRef = React.useRef<HTMLDivElement>(null);\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const hasFind =\n handleClickFindNext !== undefined &&\n handleClickFindPrevious !== undefined &&\n findCurrent !== undefined &&\n findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (\n containerRef.current &&\n (containerRef.current === event.relatedTarget \|\| containerRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.blur());\n handleChange('');\n onClear?.();\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n attributes.onFocus?.(event);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n }\n\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n event.stopPropagation();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (value \|\| focused)) {\n if (value) {\n postfix = (\n <LegacyIconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"flex h-4 items-center text-gray-700\">\n {loading ? (\n <Spinner className=\"h-4 w-4\" />\n ) : showTotal ? (\n <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n findCurrent ?? 0\n }/${findTotal ?? 0}`}</span>\n ) : null}\n </span>\n {findCurrent ? (\n <>\n <LegacyIconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <LegacyIconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !value) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n hasFind\n ? {\n '!w-48': !value,\n '!w-72': value,\n }\n : '!w-48',\n {\n '!bg-blue-100 text-blue-900': isActive,\n },\n props.className\n );\n\n const icon = (\n <Icon\n aria-label={texts.searchInput.button}\n className=\"-ml-0.5 scale-95\"\n name=\"search\"\n onClickCapture={() => internalRef.current?.focus()}\n />\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={event => handleChange(event.target.value)}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={icon}\n postfix={postfix}\n ref={internalRef}\n value={value ?? ''}\n />\n );\n\n if (settingsContent) {\n const settingsClassname = cn(\n 'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n );\n\n return (\n <div\n className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n ref={containerRef}\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n style={{ opacity: 0.999 }}>\n {input}\n <div\n // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n onBlur={handleBlur}\n className={settingsClassname}\n onClickCapture={() => internalRef.current?.focus()}\n // tab index is important, it lets the element show as a relatedTarget on event handlers\n tabIndex={-1}>\n {settingsContent}\n </div>\n </div>\n );\n }\n\n return input;\n});\n"],"names":["SearchInput2","useMergedRef","useLocalization","useGlobalKeyDown","LegacyIconButton","Shortcut","Spinner","Icon","Input"],"mappings":"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"}
1	+ {"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Icon, Input, Spinner, Shortcut, LegacyIconButton, useLocalization } from '@/components';\nimport { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '@/utils/keyboard';\n\ntype CommonSearchInput2Props = {\n loading?: boolean;\n onChange: (value: string) => void;\n onClear?: () => void;\n settingsContent?: React.JSX.Element;\n shortcut?: string \| KeyDownHandlerOptions;\n value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' \| 'onChange' \| 'value'>;\n\ntype BasicSearchInput2Props = {\n findCurrent?: never;\n findTotal?: never;\n onClickFindNext?: never;\n onClickFindPrevious?: never;\n showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n findCurrent: number \| null;\n findTotal: number \| null;\n onClickFindNext: () => void;\n onClickFindPrevious: () => void;\n showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props \| ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n loading = false,\n onChange: handleChange,\n onClear,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n settingsContent,\n shortcut,\n showTotal = true,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const containerRef = React.useRef<HTMLDivElement>(null);\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const hasFind =\n handleClickFindNext !== undefined &&\n handleClickFindPrevious !== undefined &&\n findCurrent !== undefined &&\n findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (\n containerRef.current &&\n (containerRef.current === event.relatedTarget \|\| containerRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.blur());\n handleChange('');\n onClear?.();\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n attributes.onFocus?.(event);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n }\n\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n event.stopPropagation();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (value \|\| focused)) {\n if (value) {\n postfix = (\n <LegacyIconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"flex h-4 items-center text-gray-700\">\n {loading ? (\n <Spinner className=\"h-4 w-4\" />\n ) : showTotal ? (\n <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n findCurrent ?? 0\n }/${findTotal ?? 0}`}</span>\n ) : null}\n </span>\n {findCurrent ? (\n <>\n <LegacyIconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <LegacyIconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !value) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n hasFind\n ? {\n '!w-48': !value,\n '!w-72': value,\n }\n : '!w-48',\n {\n '!bg-blue-100 text-blue-900': isActive,\n },\n props.className\n );\n\n const icon = (\n <Icon\n aria-label={texts.searchInput.button}\n className=\"-ml-0.5 scale-95\"\n name=\"search\"\n onClickCapture={() => internalRef.current?.focus()}\n />\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={event => handleChange(event.target.value)}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={icon}\n postfix={postfix}\n ref={internalRef}\n value={value ?? ''}\n />\n );\n\n if (settingsContent) {\n const settingsClassname = cn(\n 'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n );\n\n return (\n <div\n className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n ref={containerRef}\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n style={{ opacity: 0.999 }}>\n {input}\n <div\n // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n onBlur={handleBlur}\n className={settingsClassname}\n onClickCapture={() => internalRef.current?.focus()}\n // tab index is important, it lets the element show as a relatedTarget on event handlers\n tabIndex={-1}>\n {settingsContent}\n </div>\n </div>\n );\n }\n\n return input;\n});\n"],"names":["SearchInput2","useMergedRef","useLocalization","useGlobalKeyDown","LegacyIconButton","Shortcut","Spinner","Icon","Input"],"mappings":"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"}

package/dist/components/SearchInput2/SearchInput2.js CHANGED Viewed

@@ -2,12 +2,12 @@ import cn from "clsx";
 import React__default from "react";
 import { useGlobalKeyDown } from "../../hooks/useGlobalKeyDown.js";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
-import { Icon } from "../Icon/Icon.js";
-import { Input } from "../Input/Input.js";
-import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { useLocalization } from "../Provider/Localization.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { Shortcut } from "../Shortcut/Shortcut.js";
 import { Spinner } from "../Spinner/Spinner.js";
+import { Icon } from "../Icon/Icon.js";
+import { Input } from "../Input/Input.js";
 const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref) {
   const {
     findCurrent,

package/dist/components/SearchInput2/SearchInput2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Icon } from '../Icon/Icon';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CommonSearchInput2Props = {\n loading?: boolean;\n onChange: (value: string) => void;\n onClear?: () => void;\n settingsContent?: React.JSX.Element;\n shortcut?: string \| KeyDownHandlerOptions;\n value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' \| 'onChange' \| 'value'>;\n\ntype BasicSearchInput2Props = {\n findCurrent?: never;\n findTotal?: never;\n onClickFindNext?: never;\n onClickFindPrevious?: never;\n showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n findCurrent: number \| null;\n findTotal: number \| null;\n onClickFindNext: () => void;\n onClickFindPrevious: () => void;\n showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props \| ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n loading = false,\n onChange: handleChange,\n onClear,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n settingsContent,\n shortcut,\n showTotal = true,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const containerRef = React.useRef<HTMLDivElement>(null);\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const hasFind =\n handleClickFindNext !== undefined &&\n handleClickFindPrevious !== undefined &&\n findCurrent !== undefined &&\n findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (\n containerRef.current &&\n (containerRef.current === event.relatedTarget \|\| containerRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.blur());\n handleChange('');\n onClear?.();\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n attributes.onFocus?.(event);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n }\n\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n event.stopPropagation();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (value \|\| focused)) {\n if (value) {\n postfix = (\n <LegacyIconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"flex h-4 items-center text-gray-700\">\n {loading ? (\n <Spinner className=\"h-4 w-4\" />\n ) : showTotal ? (\n <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n findCurrent ?? 0\n }/${findTotal ?? 0}`}</span>\n ) : null}\n </span>\n {findCurrent ? (\n <>\n <LegacyIconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <LegacyIconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !value) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n hasFind\n ? {\n '!w-48': !value,\n '!w-72': value,\n }\n : '!w-48',\n {\n '!bg-blue-100 text-blue-900': isActive,\n },\n props.className\n );\n\n const icon = (\n <Icon\n aria-label={texts.searchInput.button}\n className=\"-ml-0.5 scale-95\"\n name=\"search\"\n onClickCapture={() => internalRef.current?.focus()}\n />\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={event => handleChange(event.target.value)}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={icon}\n postfix={postfix}\n ref={internalRef}\n value={value ?? ''}\n />\n );\n\n if (settingsContent) {\n const settingsClassname = cn(\n 'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n );\n\n return (\n <div\n className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n ref={containerRef}\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n style={{ opacity: 0.999 }}>\n {input}\n <div\n // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n onBlur={handleBlur}\n className={settingsClassname}\n onClickCapture={() => internalRef.current?.focus()}\n // tab index is important, it lets the element show as a relatedTarget on event handlers\n tabIndex={-1}>\n {settingsContent}\n </div>\n </div>\n );\n }\n\n return input;\n});\n"],"names":["React","SearchInput2"],"mappings":"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"}
1	+ {"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Icon, Input, Spinner, Shortcut, LegacyIconButton, useLocalization } from '@/components';\nimport { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '@/utils/keyboard';\n\ntype CommonSearchInput2Props = {\n loading?: boolean;\n onChange: (value: string) => void;\n onClear?: () => void;\n settingsContent?: React.JSX.Element;\n shortcut?: string \| KeyDownHandlerOptions;\n value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' \| 'onChange' \| 'value'>;\n\ntype BasicSearchInput2Props = {\n findCurrent?: never;\n findTotal?: never;\n onClickFindNext?: never;\n onClickFindPrevious?: never;\n showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n findCurrent: number \| null;\n findTotal: number \| null;\n onClickFindNext: () => void;\n onClickFindPrevious: () => void;\n showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props \| ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n loading = false,\n onChange: handleChange,\n onClear,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n settingsContent,\n shortcut,\n showTotal = true,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const containerRef = React.useRef<HTMLDivElement>(null);\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const hasFind =\n handleClickFindNext !== undefined &&\n handleClickFindPrevious !== undefined &&\n findCurrent !== undefined &&\n findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (\n containerRef.current &&\n (containerRef.current === event.relatedTarget \|\| containerRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.blur());\n handleChange('');\n onClear?.();\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n attributes.onFocus?.(event);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n }\n\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n event.stopPropagation();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (value \|\| focused)) {\n if (value) {\n postfix = (\n <LegacyIconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"flex h-4 items-center text-gray-700\">\n {loading ? (\n <Spinner className=\"h-4 w-4\" />\n ) : showTotal ? (\n <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n findCurrent ?? 0\n }/${findTotal ?? 0}`}</span>\n ) : null}\n </span>\n {findCurrent ? (\n <>\n <LegacyIconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <LegacyIconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !value) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n hasFind\n ? {\n '!w-48': !value,\n '!w-72': value,\n }\n : '!w-48',\n {\n '!bg-blue-100 text-blue-900': isActive,\n },\n props.className\n );\n\n const icon = (\n <Icon\n aria-label={texts.searchInput.button}\n className=\"-ml-0.5 scale-95\"\n name=\"search\"\n onClickCapture={() => internalRef.current?.focus()}\n />\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={event => handleChange(event.target.value)}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={icon}\n postfix={postfix}\n ref={internalRef}\n value={value ?? ''}\n />\n );\n\n if (settingsContent) {\n const settingsClassname = cn(\n 'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n );\n\n return (\n <div\n className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n ref={containerRef}\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n style={{ opacity: 0.999 }}>\n {input}\n <div\n // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n onBlur={handleBlur}\n className={settingsClassname}\n onClickCapture={() => internalRef.current?.focus()}\n // tab index is important, it lets the element show as a relatedTarget on event handlers\n tabIndex={-1}>\n {settingsContent}\n </div>\n </div>\n );\n }\n\n return input;\n});\n"],"names":["React","SearchInput2"],"mappings":"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"}

package/dist/components/Select/Select.cjs CHANGED Viewed

@@ -3,13 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const popover = require("@base-ui/react/popover");
 const cn = require("clsx");
 const React = require("react");
-const useBoundingClientRectListener = require("../../hooks/useBoundingClientRectListener.cjs");
-const Badge = require("../Badge/Badge.cjs");
-const Combobox = require("../Combobox/Combobox.cjs");
-const Icon = require("../Icon/Icon.cjs");
 const util = require("../Input/util.cjs");
 const Listbox = require("../Listbox/Listbox.cjs");
+const useBoundingClientRectListener = require("../../hooks/useBoundingClientRectListener.cjs");
 const useSelect = require("./useSelect.cjs");
+const Combobox = require("../Combobox/Combobox.cjs");
+const Icon = require("../Icon/Icon.cjs");
+const Badge = require("../Badge/Badge.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/Select/Select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport ~~{ useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { Badge } from '../Badge/Badge';\nimport~~ type { ComboboxProps } from '~~../Combobox/Combobox~~';\nimport { ~~Combobox~~ ~~} from '../~~Combobox~~/Combobox';\nimport~~ { Icon } from '~~../Icon/Icon~~';\nimport { getInputClasses } from '~~../~~Input/util';\nimport type { ListboxProps } from '~~../~~Listbox/Listbox';\nimport { Listbox, MultiListbox } from '~~../~~Listbox/Listbox';\n\nimport { useSelect } from './useSelect';\n\n/*\n @deprecated\n /\nexport type SelectTexts = {\n /\n The text displayed when all options are selected when multiselect mode in on.\n /\n allOptionsSelected: string;\n};\n\n/\n @deprecated\n /\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n Omit<ComboboxProps, 'inline'> & {\n /\n Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n /\n multiselect?: boolean;\n };\n\n/\n @deprecated\n /\nexport type SelectProps = BaseSelectProps & {\n /\n Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n /\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted: _1, style, ...otherProps } = props;\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('relative inline-flex w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'h-8 !pr-0 text-left', {\n 'border-blue-500': popover.open,\n 'select-text': otherProps.readOnly,\n });\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span className=\"flex-grow truncate text-left\">{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps: ListboxProps = {\n ...listbox,\n className: 'w-auto',\n invalid: undefined,\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.open ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Positioner\n align=\"start\"\n sideOffset={4}\n collisionAvoidance={{\n side: 'flip',\n fallbackAxisSide: 'none',\n }}>\n <PopoverPrimitive.Popup>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\n/\n @deprecated\n */\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["React","BaseSelect","popover","useSelect","useBoundingClientRectListener","getInputClasses","Badge","PopoverPrimitive","Icon","MultiListbox","Listbox","Select","Combobox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkDA~~,MAAM,aAAaA,iBAAM,WAAW,SAASC,YAAW,OAAwB,KAAkC;AAC9G,QAAM,EAAE,WAAW,WAAW,mBAAmB,aAAa,IAAI,OAAO,GAAG,WAAA,IAAe;AAC3F,QAAM,EAAE,QAAQ,SAAA,SAASC,WAAS,OAAO,MAAM,OAAO,EAAA,IAAMC,oBAAU,YAAY,GAAG;AACrF,QAAM,cAAcH,iBAAM,OAA0B,IAAI;AACxD,QAAM,mBAAmBI,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY,GAAG,+BAA+B,EAAE,uBAAuB,MAAM,SAAA,GAAY,iBAAiB;AAChH,QAAM,iBAAiB,GAAGC,KAAAA,gBAAgB,KAAK,GAAG,uBAAuB;AAAA,IACrE,mBAAmBH,UAAQ;AAAA,IAC3B,eAAe,WAAW;AAAA,EAAA,CAC7B;AAEDF,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa,YAAY,SAAS;AAClC,kBAAY,QAAQ,MAAA;AAAA,IACxB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,uBAAuB,MAAuB;AAChD,2FAEQA,iCAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,GACpD,OAAO,KAAKA,iCAAA,cAACM,MAAAA,SAAM,WAAU,OAAA,GAAQ,IAAI,IAAI,EAAG,CACrD;AAAA,EAER;AAEA,QAAM,qBAAmC;AAAA,IACrC,GAAG;AAAA,IACH,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,IACrC,UAAUJ,UAAQ,OAAO,IAAI;AAAA,EAAA;AAGjC,SACIF,iCAAA,cAAC,UAAK,WAAsB,aAAU,UAAS,MAAA,GAC3CA,iCAAA,cAACO,QAAAA,QAAiB,MAAjB,EAAuB,GAAGL,aACvBF,iCAAA,cAACO,QAAAA,QAAiB,SAAjB,EAA0B,GAAG,QAAQ,WAAW,gBAAgB,KAAK,YAAA,GACjE,MAAM,cAAc,qBAAA,IAAyBP,iCAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,kDAClG,QAAA,EAAK,WAAU,2CAAA,GACZA,iCAAA,cAACQ,KAAAA,MAAA,EAAK,WAAU,uBAAsB,MAAMN,UAAQ,OAAO,eAAe,eAAA,CAAgB,CAC9F,CACJ,GACAF,iCAAA,cAACO,QAAAA,QAAiB,QAAjB,MACGP,iCAAA;AAAA,IAACO,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,YAAY;AAAA,MACZ,oBAAoB;AAAA,QAChB,MAAM;AAAA,QACN,kBAAkB;AAAA,MAAA;AAAA,IACtB;AAAA,IACAP,iCAAA,cAACO,QAAAA,QAAiB,OAAjB,MACI,MAAM,cAAcP,iCAAA,cAACS,QAAAA,cAAA,EAAc,GAAG,oBAAoB,IAAKT,iCAAA,cAACU,iBAAA,EAAS,GAAG,oBAAoB,CACrG;AAAA,EAAA,CAER,GACAV,iCAAA,cAAC,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD,CACJ;AAER,CAAC;AAKM,MAAM,SAASA,iBAAM,WAAW,SAASW,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAEpC,MAAI,UAAU;AACV,WAAOX,iCAAA,cAACY,SAAAA,YAAU,GAAG,YAAY,QAAQ,QAAW,QAAM,MAAC,IAAA,CAAU;AAAA,EACzE;AAEA,SAAOZ,iCAAA,cAAC,YAAA,EAAY,GAAG,YAAY,KAAU;AACjD,CAAC;;"}
1	+ {"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { ComboboxProps } from '@/components';\nimport { Badge, Combobox, Icon } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport type { ListboxProps } from '@/components/Listbox/Listbox';\nimport { Listbox, MultiListbox } from '@/components/Listbox/Listbox';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useSelect } from './useSelect';\n\n/*\n @deprecated Use `<Select2>` instead.\n /\nexport type SelectTexts = {\n /\n The text displayed when all options are selected when multiselect mode in on.\n /\n allOptionsSelected: string;\n};\n\n/\n @deprecated Use `<Select2>` instead.\n /\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n Omit<ComboboxProps, 'inline'> & {\n /\n Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n /\n multiselect?: boolean;\n };\n\n/\n @deprecated Use `<Select2>` instead.\n /\nexport type SelectProps = BaseSelectProps & {\n /\n Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n /\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted: _1, style, ...otherProps } = props;\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('relative inline-flex w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'h-8 !pr-0 text-left', {\n 'border-blue-500': popover.open,\n 'select-text': otherProps.readOnly,\n });\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span className=\"flex-grow truncate text-left\">{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps: ListboxProps = {\n ...listbox,\n className: 'w-auto',\n invalid: undefined,\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.open ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Positioner\n align=\"start\"\n sideOffset={4}\n collisionAvoidance={{\n side: 'flip',\n fallbackAxisSide: 'none',\n }}>\n <PopoverPrimitive.Popup>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\n/\n @deprecated Use `<Select2>` instead.\n */\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["React","BaseSelect","popover","useSelect","useBoundingClientRectListener","getInputClasses","Badge","PopoverPrimitive","Icon","MultiListbox","Listbox","Select","Combobox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,aAAaA,iBAAM,WAAW,SAASC,YAAW,OAAwB,KAAkC;AAC9G,QAAM,EAAE,WAAW,WAAW,mBAAmB,aAAa,IAAI,OAAO,GAAG,WAAA,IAAe;AAC3F,QAAM,EAAE,QAAQ,SAAA,SAASC,WAAS,OAAO,MAAM,OAAO,EAAA,IAAMC,oBAAU,YAAY,GAAG;AACrF,QAAM,cAAcH,iBAAM,OAA0B,IAAI;AACxD,QAAM,mBAAmBI,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY,GAAG,+BAA+B,EAAE,uBAAuB,MAAM,SAAA,GAAY,iBAAiB;AAChH,QAAM,iBAAiB,GAAGC,KAAAA,gBAAgB,KAAK,GAAG,uBAAuB;AAAA,IACrE,mBAAmBH,UAAQ;AAAA,IAC3B,eAAe,WAAW;AAAA,EAAA,CAC7B;AAEDF,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa,YAAY,SAAS;AAClC,kBAAY,QAAQ,MAAA;AAAA,IACxB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,uBAAuB,MAAuB;AAChD,2FAEQA,iCAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,GACpD,OAAO,KAAKA,iCAAA,cAACM,MAAAA,SAAM,WAAU,OAAA,GAAQ,IAAI,IAAI,EAAG,CACrD;AAAA,EAER;AAEA,QAAM,qBAAmC;AAAA,IACrC,GAAG;AAAA,IACH,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,IACrC,UAAUJ,UAAQ,OAAO,IAAI;AAAA,EAAA;AAGjC,SACIF,iCAAA,cAAC,UAAK,WAAsB,aAAU,UAAS,MAAA,GAC3CA,iCAAA,cAACO,QAAAA,QAAiB,MAAjB,EAAuB,GAAGL,aACvBF,iCAAA,cAACO,QAAAA,QAAiB,SAAjB,EAA0B,GAAG,QAAQ,WAAW,gBAAgB,KAAK,YAAA,GACjE,MAAM,cAAc,qBAAA,IAAyBP,iCAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,kDAClG,QAAA,EAAK,WAAU,2CAAA,GACZA,iCAAA,cAACQ,KAAAA,MAAA,EAAK,WAAU,uBAAsB,MAAMN,UAAQ,OAAO,eAAe,eAAA,CAAgB,CAC9F,CACJ,GACAF,iCAAA,cAACO,QAAAA,QAAiB,QAAjB,MACGP,iCAAA;AAAA,IAACO,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,YAAY;AAAA,MACZ,oBAAoB;AAAA,QAChB,MAAM;AAAA,QACN,kBAAkB;AAAA,MAAA;AAAA,IACtB;AAAA,IACAP,iCAAA,cAACO,QAAAA,QAAiB,OAAjB,MACI,MAAM,cAAcP,iCAAA,cAACS,QAAAA,cAAA,EAAc,GAAG,oBAAoB,IAAKT,iCAAA,cAACU,iBAAA,EAAS,GAAG,oBAAoB,CACrG;AAAA,EAAA,CAER,GACAV,iCAAA,cAAC,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD,CACJ;AAER,CAAC;AAKM,MAAM,SAASA,iBAAM,WAAW,SAASW,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAEpC,MAAI,UAAU;AACV,WAAOX,iCAAA,cAACY,SAAAA,YAAU,GAAG,YAAY,QAAQ,QAAW,QAAM,MAAC,IAAA,CAAU;AAAA,EACzE;AAEA,SAAOZ,iCAAA,cAAC,YAAA,EAAY,GAAG,YAAY,KAAU;AACjD,CAAC;;"}

package/dist/components/Select/Select.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { ComboboxProps } from '../Combobox/Combobox';
+import { ComboboxProps } from '..';
 import { ListboxProps } from '../Listbox/Listbox';
 import * as React from 'react';
 /**
- * @deprecated
+ * @deprecated Use `<Select2>` instead.
  */
 export type SelectTexts = {
     /**
@@ -11,7 +11,7 @@ export type SelectTexts = {
     allOptionsSelected: string;
 };
 /**
- * @deprecated
+ * @deprecated Use `<Select2>` instead.
  */
 export type BaseSelectProps = Omit<ListboxProps, 'dialog'> & Omit<ComboboxProps, 'inline'> & {
     /**
@@ -21,7 +21,7 @@ export type BaseSelectProps = Omit<ListboxProps, 'dialog'> & Omit<ComboboxProps,
     multiselect?: boolean;
 };
 /**
- * @deprecated
+ * @deprecated Use `<Select2>` instead.
  */
 export type SelectProps = BaseSelectProps & {
     /**
@@ -33,7 +33,7 @@ export type SelectProps = BaseSelectProps & {
     editable?: boolean;
 };
 /**
- * @deprecated
+ * @deprecated Use `<Select2>` instead.
  */
 export declare const Select: React.ForwardRefExoticComponent<Omit<ListboxProps, "dialog"> & Omit<ComboboxProps, "inline"> & {
     /**

package/dist/components/Select/Select.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { Popover } from "@base-ui/react/popover";
 import cn from "clsx";
 import * as React from "react";
-import { useBoundingClientRectListener } from "../../hooks/useBoundingClientRectListener.js";
-import { Badge } from "../Badge/Badge.js";
-import { Combobox } from "../Combobox/Combobox.js";
-import { Icon } from "../Icon/Icon.js";
 import { getInputClasses } from "../Input/util.js";
 import { MultiListbox, Listbox } from "../Listbox/Listbox.js";
+import { useBoundingClientRectListener } from "../../hooks/useBoundingClientRectListener.js";
 import { useSelect } from "./useSelect.js";
+import { Combobox } from "../Combobox/Combobox.js";
+import { Icon } from "../Icon/Icon.js";
+import { Badge } from "../Badge/Badge.js";
 const BaseSelect = React.forwardRef(function BaseSelect2(props, ref) {
   const { autoFocus, className: externalClassName, highlighted: _1, style, ...otherProps } = props;
   const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);

package/dist/components/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport ~~{ useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { Badge } from '../Badge/Badge';\nimport~~ type { ComboboxProps } from '~~../Combobox/Combobox~~';\nimport { ~~Combobox~~ ~~} from '../~~Combobox~~/Combobox';\nimport~~ { Icon } from '~~../Icon/Icon~~';\nimport { getInputClasses } from '~~../~~Input/util';\nimport type { ListboxProps } from '~~../~~Listbox/Listbox';\nimport { Listbox, MultiListbox } from '~~../~~Listbox/Listbox';\n\nimport { useSelect } from './useSelect';\n\n/*\n @deprecated\n /\nexport type SelectTexts = {\n /\n The text displayed when all options are selected when multiselect mode in on.\n /\n allOptionsSelected: string;\n};\n\n/\n @deprecated\n /\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n Omit<ComboboxProps, 'inline'> & {\n /\n Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n /\n multiselect?: boolean;\n };\n\n/\n @deprecated\n /\nexport type SelectProps = BaseSelectProps & {\n /\n Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n /\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted: _1, style, ...otherProps } = props;\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('relative inline-flex w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'h-8 !pr-0 text-left', {\n 'border-blue-500': popover.open,\n 'select-text': otherProps.readOnly,\n });\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span className=\"flex-grow truncate text-left\">{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps: ListboxProps = {\n ...listbox,\n className: 'w-auto',\n invalid: undefined,\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.open ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Positioner\n align=\"start\"\n sideOffset={4}\n collisionAvoidance={{\n side: 'flip',\n fallbackAxisSide: 'none',\n }}>\n <PopoverPrimitive.Popup>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\n/\n @deprecated\n */\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","PopoverPrimitive","Select"],"mappings":";;;;;;;;;;~~AAkDA~~,MAAM,aAAa,MAAM,WAAW,SAASA,YAAW,OAAwB,KAAkC;AAC9G,QAAM,EAAE,WAAW,WAAW,mBAAmB,aAAa,IAAI,OAAO,GAAG,WAAA,IAAe;AAC3F,QAAM,EAAE,QAAQ,SAAS,SAAS,OAAO,MAAM,OAAO,EAAA,IAAM,UAAU,YAAY,GAAG;AACrF,QAAM,cAAc,MAAM,OAA0B,IAAI;AACxD,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY,GAAG,+BAA+B,EAAE,uBAAuB,MAAM,SAAA,GAAY,iBAAiB;AAChH,QAAM,iBAAiB,GAAG,gBAAgB,KAAK,GAAG,uBAAuB;AAAA,IACrE,mBAAmB,QAAQ;AAAA,IAC3B,eAAe,WAAW;AAAA,EAAA,CAC7B;AAED,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa,YAAY,SAAS;AAClC,kBAAY,QAAQ,MAAA;AAAA,IACxB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,uBAAuB,MAAuB;AAChD,qEAEQ,sBAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,GACpD,OAAO,KAAK,sBAAA,cAAC,SAAM,WAAU,OAAA,GAAQ,IAAI,IAAI,EAAG,CACrD;AAAA,EAER;AAEA,QAAM,qBAAmC;AAAA,IACrC,GAAG;AAAA,IACH,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,IACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,EAAA;AAGjC,SACI,sBAAA,cAAC,UAAK,WAAsB,aAAU,UAAS,MAAA,GAC3C,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,WACvB,sBAAA,cAACA,QAAiB,SAAjB,EAA0B,GAAG,QAAQ,WAAW,gBAAgB,KAAK,YAAA,GACjE,MAAM,cAAc,qBAAA,IAAyB,sBAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,uCAClG,QAAA,EAAK,WAAU,2CAAA,GACZ,sBAAA,cAAC,MAAA,EAAK,WAAU,uBAAsB,MAAM,QAAQ,OAAO,eAAe,eAAA,CAAgB,CAC9F,CACJ,GACA,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,YAAY;AAAA,MACZ,oBAAoB;AAAA,QAChB,MAAM;AAAA,QACN,kBAAkB;AAAA,MAAA;AAAA,IACtB;AAAA,IACA,sBAAA,cAACA,QAAiB,OAAjB,MACI,MAAM,cAAc,sBAAA,cAAC,cAAA,EAAc,GAAG,oBAAoB,IAAK,sBAAA,cAAC,SAAA,EAAS,GAAG,oBAAoB,CACrG;AAAA,EAAA,CAER,GACA,sBAAA,cAAC,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD,CACJ;AAER,CAAC;AAKM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAEpC,MAAI,UAAU;AACV,WAAO,sBAAA,cAAC,YAAU,GAAG,YAAY,QAAQ,QAAW,QAAM,MAAC,IAAA,CAAU;AAAA,EACzE;AAEA,SAAO,sBAAA,cAAC,YAAA,EAAY,GAAG,YAAY,KAAU;AACjD,CAAC;"}
1	+ {"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { ComboboxProps } from '@/components';\nimport { Badge, Combobox, Icon } from '@/components';\nimport { getInputClasses } from '@/components/Input/util';\nimport type { ListboxProps } from '@/components/Listbox/Listbox';\nimport { Listbox, MultiListbox } from '@/components/Listbox/Listbox';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useSelect } from './useSelect';\n\n/*\n @deprecated Use `<Select2>` instead.\n /\nexport type SelectTexts = {\n /\n The text displayed when all options are selected when multiselect mode in on.\n /\n allOptionsSelected: string;\n};\n\n/\n @deprecated Use `<Select2>` instead.\n /\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n Omit<ComboboxProps, 'inline'> & {\n /\n Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n /\n multiselect?: boolean;\n };\n\n/\n @deprecated Use `<Select2>` instead.\n /\nexport type SelectProps = BaseSelectProps & {\n /\n Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n /\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted: _1, style, ...otherProps } = props;\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('relative inline-flex w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'h-8 !pr-0 text-left', {\n 'border-blue-500': popover.open,\n 'select-text': otherProps.readOnly,\n });\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span className=\"flex-grow truncate text-left\">{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps: ListboxProps = {\n ...listbox,\n className: 'w-auto',\n invalid: undefined,\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.open ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Positioner\n align=\"start\"\n sideOffset={4}\n collisionAvoidance={{\n side: 'flip',\n fallbackAxisSide: 'none',\n }}>\n <PopoverPrimitive.Popup>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\n/\n @deprecated Use `<Select2>` instead.\n */\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","PopoverPrimitive","Select"],"mappings":";;;;;;;;;;AAgDA,MAAM,aAAa,MAAM,WAAW,SAASA,YAAW,OAAwB,KAAkC;AAC9G,QAAM,EAAE,WAAW,WAAW,mBAAmB,aAAa,IAAI,OAAO,GAAG,WAAA,IAAe;AAC3F,QAAM,EAAE,QAAQ,SAAS,SAAS,OAAO,MAAM,OAAO,EAAA,IAAM,UAAU,YAAY,GAAG;AACrF,QAAM,cAAc,MAAM,OAA0B,IAAI;AACxD,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY,GAAG,+BAA+B,EAAE,uBAAuB,MAAM,SAAA,GAAY,iBAAiB;AAChH,QAAM,iBAAiB,GAAG,gBAAgB,KAAK,GAAG,uBAAuB;AAAA,IACrE,mBAAmB,QAAQ;AAAA,IAC3B,eAAe,WAAW;AAAA,EAAA,CAC7B;AAED,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa,YAAY,SAAS;AAClC,kBAAY,QAAQ,MAAA;AAAA,IACxB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,uBAAuB,MAAuB;AAChD,qEAEQ,sBAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,GACpD,OAAO,KAAK,sBAAA,cAAC,SAAM,WAAU,OAAA,GAAQ,IAAI,IAAI,EAAG,CACrD;AAAA,EAER;AAEA,QAAM,qBAAmC;AAAA,IACrC,GAAG;AAAA,IACH,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,IACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,EAAA;AAGjC,SACI,sBAAA,cAAC,UAAK,WAAsB,aAAU,UAAS,MAAA,GAC3C,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,WACvB,sBAAA,cAACA,QAAiB,SAAjB,EAA0B,GAAG,QAAQ,WAAW,gBAAgB,KAAK,YAAA,GACjE,MAAM,cAAc,qBAAA,IAAyB,sBAAA,cAAC,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,uCAClG,QAAA,EAAK,WAAU,2CAAA,GACZ,sBAAA,cAAC,MAAA,EAAK,WAAU,uBAAsB,MAAM,QAAQ,OAAO,eAAe,eAAA,CAAgB,CAC9F,CACJ,GACA,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,YAAY;AAAA,MACZ,oBAAoB;AAAA,QAChB,MAAM;AAAA,QACN,kBAAkB;AAAA,MAAA;AAAA,IACtB;AAAA,IACA,sBAAA,cAACA,QAAiB,OAAjB,MACI,MAAM,cAAc,sBAAA,cAAC,cAAA,EAAc,GAAG,oBAAoB,IAAK,sBAAA,cAAC,SAAA,EAAS,GAAG,oBAAoB,CACrG;AAAA,EAAA,CAER,GACA,sBAAA,cAAC,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD,CACJ;AAER,CAAC;AAKM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAEpC,MAAI,UAAU;AACV,WAAO,sBAAA,cAAC,YAAU,GAAG,YAAY,QAAQ,QAAW,QAAM,MAAC,IAAA,CAAU;AAAA,EACzE;AAEA,SAAO,sBAAA,cAAC,YAAA,EAAY,GAAG,YAAY,KAAU;AACjD,CAAC;"}

package/dist/components/Select/useSelect.cjs CHANGED Viewed

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const nanoid = require("nanoid");
 const React = require("react");
+const util = require("../Listbox/util.cjs");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
 const input = require("../../utils/input.cjs");
-const util = require("../Listbox/util.cjs");
 const Localization = require("../Provider/Localization.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/components/Select/useSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}
1	+ {"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useLocalization } from '@/components';\nimport type { ListboxProps } from '@/components/Listbox/Listbox';\nimport type { ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '@/components/Listbox/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { createCustomEvent } from '@/utils/input';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}

package/dist/components/Select/useSelect.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import cn from "clsx";
 import { nanoid } from "nanoid";
 import * as React from "react";
+import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from "../Listbox/util.js";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
 import { createCustomEvent } from "../../utils/input.js";
-import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from "../Listbox/util.js";
 import { useLocalization } from "../Provider/Localization.js";
 const useSelect = ({
   "aria-label": ariaLabel,

package/dist/components/Select/useSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["i","value"],"mappings":"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"}
1	+ {"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useLocalization } from '@/components';\nimport type { ListboxProps } from '@/components/Listbox/Listbox';\nimport type { ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '@/components/Listbox/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { createCustomEvent } from '@/utils/input';\n\nimport type { SelectProps } from './Select';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' \| 'open'>;\n text: string \| React.JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick: _1,\n onChange,\n readOnly,\n tabIndex,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId \|\| `select_${nanoid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue \| undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n } else if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0]?.value);\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n }\n }\n };\n\n let text: string \| React.JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') \|\| [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, '-mt-px mr-1'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (readOnly) {\n event.preventDefault();\n }\n };\n\n // select the value text if the select is readonly\n const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n if (readOnly) {\n const value = event.currentTarget.querySelector(':first-child');\n\n if (value) {\n window.getSelection()?.selectAllChildren?.(value);\n }\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n 'aria-readonly': readOnly ? 'true' : undefined,\n disabled: disabled,\n id: buttonId,\n onClick: handleButtonClick,\n onFocus: handleButtonFocus,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n tabIndex,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: setOpen,\n },\n text,\n more,\n };\n};\n"],"names":["i","value"],"mappings":"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"}

package/dist/components/Select2/Select2.cjs CHANGED Viewed

@@ -9,14 +9,12 @@ const useIsFormControl = require("../../hooks/useIsFormControl.cjs");
 const useIsHoverStatePaused = require("../../hooks/useIsHoverStatePaused.cjs");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
 const BubbleSelect = require("../../primitives/BubbleSelect.cjs");
+const Root = require("../../primitives/Listbox2/components/Root.cjs");
 const types = require("../../types.cjs");
 const aria = require("../../utils/aria.cjs");
 const debounce = require("../../utils/debounce.cjs");
 const dom = require("../../utils/dom.cjs");
 const input = require("../../utils/input.cjs");
-const Button = require("../LegacyComponents/Button/Button.cjs");
-const Localization = require("../Provider/Localization.cjs");
-const Spinner = require("../Spinner/Spinner.cjs");
 const Collection = require("./components/Collection.cjs");
 const Context = require("./components/Context.cjs");
 const Create = require("./components/Create.cjs");
@@ -27,7 +25,9 @@ const Title = require("./components/Title.cjs");
 const Trigger = require("./components/Trigger.cjs");
 const useChildren = require("./hooks/useChildren.cjs");
 const utilities = require("./utilities.cjs");
-const Root = require("../../primitives/Listbox2/components/Root.cjs");
+const Localization = require("../Provider/Localization.cjs");
+const Button = require("../LegacyComponents/Button/Button.cjs");
+const Spinner = require("../Spinner/Spinner.cjs");
 function _Select2Inner(props, ref) {
   const {
     children: initChildren,