@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/SearchInput2/SearchInput2.cjs

@@ -29,39 +29,32 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
   const containerRef = React.useRef(null);
   const [focused, setFocused] = React.useState(false);
   const { texts } = Localization.useLocalization();
-  const isActive = value == null ? void 0 : value.length;
+  const isActive = value?.length;
   const hasFind = handleClickFindNext !== void 0 && handleClickFindPrevious !== void 0 && findCurrent !== void 0 && findTotal !== void 0;
   useGlobalKeyDown.useGlobalKeyDown(shortcut, (event) => {
-    var _a;
     if (document.activeElement !== internalRef.current) {
       event.preventDefault();
-      (_a = internalRef.current) == null ? void 0 : _a.focus();
+      internalRef.current?.focus();
     }
   });
   const handleBlur = (event) => {
-    var _a, _b;
-    if (containerRef.current && (containerRef.current === event.relatedTarget || ((_a = containerRef.current) == null ? void 0 : _a.contains(event.relatedTarget)))) {
+    if (containerRef.current && (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))) {
       return;
     }
     setFocused(false);
-    (_b = attributes.onBlur) == null ? void 0 : _b.call(attributes, event);
+    attributes.onBlur?.(event);
   };
   const handleClear = () => {
-    requestAnimationFrame(() => {
-      var _a;
-      return (_a = internalRef.current) == null ? void 0 : _a.blur();
-    });
+    requestAnimationFrame(() => internalRef.current?.blur());
     handleChange("");
-    onClear == null ? void 0 : onClear();
+    onClear?.();
   };
   const handleFocus = (event) => {
-    var _a;
     setFocused(true);
-    (_a = attributes.onFocus) == null ? void 0 : _a.call(attributes, event);
+    attributes.onFocus?.(event);
   };
   const handleKeyDown = (event) => {
-    var _a;
-    (_a = props.onKeyDown) == null ? void 0 : _a.call(props, event);
+    props.onKeyDown?.(event);
     if (event.isDefaultPrevented()) {
       return;
     }
@@ -69,9 +62,9 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
       event.preventDefault();
       if (hasFind && isActive) {
         if (event.shiftKey) {
-          handleClickFindPrevious == null ? void 0 : handleClickFindPrevious();
+          handleClickFindPrevious?.();
         } else {
-          handleClickFindNext == null ? void 0 : handleClickFindNext();
+          handleClickFindNext?.();
         }
       }
       return;
@@ -89,7 +82,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
         IconButton.LegacyIconButton,
         {
           "aria-label": texts.searchInput.clear,
-          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
+          className: "scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125",
           icon: "close",
           onMouseDown: handleClear,
           tabIndex: -1,
@@ -98,11 +91,11 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
       );
     }
     if (hasFind && isActive) {
-      postfix = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React.createElement(Spinner.Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React.createElement("span", { className: "border-black-subtle border-r pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      postfix = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React.createElement(Spinner.Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React.createElement("span", { className: "border-r border-black-subtle pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
         IconButton.LegacyIconButton,
         {
           "aria-label": texts.searchInput.findPrevious,
-          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
+          className: "scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125",
           icon: "chevron-up",
           onMouseDown: handleClickFindPrevious,
           tabIndex: -1,
@@ -112,7 +105,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
         IconButton.LegacyIconButton,
         {
           "aria-label": texts.searchInput.findNext,
-          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
+          className: "scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125",
           icon: "chevron-down",
           onMouseDown: handleClickFindNext,
           tabIndex: -1,
@@ -121,10 +114,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
       )) : null, postfix);
     }
   } else if (shortcut && !focused && !value) {
-    postfix = /* @__PURE__ */ React.createElement(Shortcut.Shortcut, { keys: shortcut, onClickCapture: () => {
-      var _a;
-      return (_a = internalRef.current) == null ? void 0 : _a.focus();
-    } });
+    postfix = /* @__PURE__ */ React.createElement(Shortcut.Shortcut, { keys: shortcut, onClickCapture: () => internalRef.current?.focus() });
   }
   const className = cn(
     "!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus",
@@ -143,10 +133,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
       "aria-label": texts.searchInput.button,
       className: "-ml-0.5 scale-95",
       name: "search",
-      onClickCapture: () => {
-        var _a;
-        return (_a = internalRef.current) == null ? void 0 : _a.focus();
-      }
+      onClickCapture: () => internalRef.current?.focus()
     }
   );
   const input = /* @__PURE__ */ React.createElement(
@@ -169,7 +156,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
   );
   if (settingsContent) {
     const settingsClassname = cn(
-      "border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]"
+      "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"
     );
     return /* @__PURE__ */ React.createElement(
       "div",
@@ -184,10 +171,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
         {
           onBlur: handleBlur,
           className: settingsClassname,
-          onClickCapture: () => {
-            var _a;
-            return (_a = internalRef.current) == null ? void 0 : _a.focus();
-          },
+          onClickCapture: () => internalRef.current?.focus(),
           tabIndex: -1
         },
         settingsContent

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\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=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>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-black-subtle border-r 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=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>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=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>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            '!wcag-blue-100': 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            'border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\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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"}
+{"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'defaultValue' | 'onChange' | 'value'\n> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: React.JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\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            '!wcag-blue-100': 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.d.ts

@@ -4,7 +4,7 @@ interface CommonSearchInput2Props extends Omit<React.InputHTMLAttributes<HTMLInp
     loading?: boolean;
     onChange: (value: string) => void;
     onClear?: () => void;
-    settingsContent?: JSX.Element;
+    settingsContent?: React.JSX.Element;
     shortcut?: string | KeyDownHandlerOptions;
     value?: string;
 }

package/dist/components/SearchInput2/SearchInput2.js

@@ -27,39 +27,32 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
   const containerRef = React__default.useRef(null);
   const [focused, setFocused] = React__default.useState(false);
   const { texts } = useLocalization();
-  const isActive = value == null ? void 0 : value.length;
+  const isActive = value?.length;
   const hasFind = handleClickFindNext !== void 0 && handleClickFindPrevious !== void 0 && findCurrent !== void 0 && findTotal !== void 0;
   useGlobalKeyDown(shortcut, (event) => {
-    var _a;
     if (document.activeElement !== internalRef.current) {
       event.preventDefault();
-      (_a = internalRef.current) == null ? void 0 : _a.focus();
+      internalRef.current?.focus();
     }
   });
   const handleBlur = (event) => {
-    var _a, _b;
-    if (containerRef.current && (containerRef.current === event.relatedTarget || ((_a = containerRef.current) == null ? void 0 : _a.contains(event.relatedTarget)))) {
+    if (containerRef.current && (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))) {
       return;
     }
     setFocused(false);
-    (_b = attributes.onBlur) == null ? void 0 : _b.call(attributes, event);
+    attributes.onBlur?.(event);
   };
   const handleClear = () => {
-    requestAnimationFrame(() => {
-      var _a;
-      return (_a = internalRef.current) == null ? void 0 : _a.blur();
-    });
+    requestAnimationFrame(() => internalRef.current?.blur());
     handleChange("");
-    onClear == null ? void 0 : onClear();
+    onClear?.();
   };
   const handleFocus = (event) => {
-    var _a;
     setFocused(true);
-    (_a = attributes.onFocus) == null ? void 0 : _a.call(attributes, event);
+    attributes.onFocus?.(event);
   };
   const handleKeyDown = (event) => {
-    var _a;
-    (_a = props.onKeyDown) == null ? void 0 : _a.call(props, event);
+    props.onKeyDown?.(event);
     if (event.isDefaultPrevented()) {
       return;
     }
@@ -67,9 +60,9 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
       event.preventDefault();
       if (hasFind && isActive) {
         if (event.shiftKey) {
-          handleClickFindPrevious == null ? void 0 : handleClickFindPrevious();
+          handleClickFindPrevious?.();
         } else {
-          handleClickFindNext == null ? void 0 : handleClickFindNext();
+          handleClickFindNext?.();
         }
       }
       return;
@@ -87,7 +80,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
         LegacyIconButton,
         {
           "aria-label": texts.searchInput.clear,
-          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
+          className: "scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125",
           icon: "close",
           onMouseDown: handleClear,
           tabIndex: -1,
@@ -96,11 +89,11 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
       );
     }
     if (hasFind && isActive) {
-      postfix = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React__default.createElement("span", { className: "border-black-subtle border-r pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      postfix = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React__default.createElement("span", { className: "border-r border-black-subtle pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
         LegacyIconButton,
         {
           "aria-label": texts.searchInput.findPrevious,
-          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
+          className: "scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125",
           icon: "chevron-up",
           onMouseDown: handleClickFindPrevious,
           tabIndex: -1,
@@ -110,7 +103,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
         LegacyIconButton,
         {
           "aria-label": texts.searchInput.findNext,
-          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
+          className: "scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125",
           icon: "chevron-down",
           onMouseDown: handleClickFindNext,
           tabIndex: -1,
@@ -119,10 +112,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
       )) : null, postfix);
     }
   } else if (shortcut && !focused && !value) {
-    postfix = /* @__PURE__ */ React__default.createElement(Shortcut, { keys: shortcut, onClickCapture: () => {
-      var _a;
-      return (_a = internalRef.current) == null ? void 0 : _a.focus();
-    } });
+    postfix = /* @__PURE__ */ React__default.createElement(Shortcut, { keys: shortcut, onClickCapture: () => internalRef.current?.focus() });
   }
   const className = cn(
     "!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus",
@@ -141,10 +131,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
       "aria-label": texts.searchInput.button,
       className: "-ml-0.5 scale-95",
       name: "search",
-      onClickCapture: () => {
-        var _a;
-        return (_a = internalRef.current) == null ? void 0 : _a.focus();
-      }
+      onClickCapture: () => internalRef.current?.focus()
     }
   );
   const input = /* @__PURE__ */ React__default.createElement(
@@ -167,7 +154,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
   );
   if (settingsContent) {
     const settingsClassname = cn(
-      "border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]"
+      "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"
     );
     return /* @__PURE__ */ React__default.createElement(
       "div",
@@ -182,10 +169,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
         {
           onBlur: handleBlur,
           className: settingsClassname,
-          onClickCapture: () => {
-            var _a;
-            return (_a = internalRef.current) == null ? void 0 : _a.focus();
-          },
+          onClickCapture: () => internalRef.current?.focus(),
           tabIndex: -1
         },
         settingsContent

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\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=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>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-black-subtle border-r 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=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>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=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>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            '!wcag-blue-100': 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            'border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\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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"}
+{"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'defaultValue' | 'onChange' | 'value'\n> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: React.JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\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            '!wcag-blue-100': 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

@@ -32,8 +32,8 @@ const BaseSelect = React__namespace.forwardRef(function BaseSelect2(props, ref)
   const { button, listbox, popover: popover$1, input, text, more = 0 } = useSelect.useSelect(otherProps, ref);
   const internalRef = React__namespace.useRef(null);
   const selectDimensions = useBoundingClientRectListener.useBoundingClientRectListener(internalRef);
-  const className = cn("inline-flex relative w-full", { "yt-select--readonly": props.readOnly }, externalClassName);
-  const inputClassname = cn(util.getInputClasses(props), "h-8 text-left !pr-0", {
+  const className = cn("relative inline-flex w-full", { "yt-select--readonly": props.readOnly }, externalClassName);
+  const inputClassname = cn(util.getInputClasses(props), "h-8 !pr-0 text-left", {
     "border-blue-500": popover$1.open,
     "select-text": otherProps.readOnly
   });
@@ -49,7 +49,7 @@ const BaseSelect = React__namespace.forwardRef(function BaseSelect2(props, ref)
     ...listbox,
     className: "w-auto",
     invalid: void 0,
-    style: { minWidth: selectDimensions == null ? void 0 : selectDimensions.width },
+    style: { minWidth: selectDimensions?.width },
     tabIndex: popover$1.open ? 0 : -1
   };
   return /* @__PURE__ */ React__namespace.createElement("span", { className, "data-taco": "select", style }, /* @__PURE__ */ React__namespace.createElement(popover.Popover.Root, { ...popover$1 }, /* @__PURE__ */ React__namespace.createElement(popover.Popover.Trigger, { ...button, className: inputClassname, ref: internalRef }, props.multiselect ? renderMultiSelection() : /* @__PURE__ */ React__namespace.createElement("span", { className: "flex-grow truncate text-left" }, text), /* @__PURE__ */ React__namespace.createElement("span", { className: "flex h-8 w-8 items-center justify-center" }, /* @__PURE__ */ React__namespace.createElement(Icon.Icon, { className: "pointer-events-none", name: popover$1.open ? "chevron-up" : "chevron-down" }))), /* @__PURE__ */ React__namespace.createElement(popover.Popover.Portal, null, /* @__PURE__ */ React__namespace.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\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('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left !pr-0', {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAM,aAAaA,iBAAM,WAAW,SAASC,YAAW,OAAwB,KAAkC;AACxG,QAAA,EAAE,WAAW,WAAW,mBAAmB,aAAa,IAAI,OAAO,GAAG,WAAA,IAAe;AACrF,QAAA,EAAE,QAAQ,SAASC,SAAAA,WAAS,OAAO,MAAM,OAAO,EAAE,IAAIC,oBAAU,YAAY,GAAG;AAC/E,QAAA,cAAcH,iBAAM,OAA0B,IAAI;AAClD,QAAA,mBAAmBI,4DAA8B,WAAW;AAC5D,QAAA,YAAY,GAAG,+BAA+B,EAAE,uBAAuB,MAAM,YAAY,iBAAiB;AAChH,QAAM,iBAAiB,GAAGC,KAAgB,gBAAA,KAAK,GAAG,uBAAuB;AAAA,IACrE,mBAAmBH,UAAQ;AAAA,IAC3B,eAAe,WAAW;AAAA,EAAA,CAC7B;AAEDF,mBAAM,UAAU,MAAM;AACd,QAAA,aAAa,YAAY,SAAS;AAClC,kBAAY,QAAQ,MAAM;AAAA,IAAA;AAAA,EAElC,GAAG,EAAE;AAEL,QAAM,uBAAuB,MAAuB;AAChD,2FAESA,iCAAA,cAAA,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,qDAAkB,MAAM;AAAA,IAC3C,UAAUJ,UAAQ,OAAO,IAAI;AAAA,EACjC;AAGI,SAAAF,iCAAA,cAAC,UAAK,WAAsB,aAAU,UAAS,MAC3C,GAAAA,iCAAA,cAACO,QAAiB,QAAA,MAAjB,EAAuB,GAAGL,aACtBF,iCAAA,cAAAO,QAAAA,QAAiB,SAAjB,EAA0B,GAAG,QAAQ,WAAW,gBAAgB,KAAK,YACjE,GAAA,MAAM,cAAc,qBAAA,IAA0BP,iCAAA,cAAA,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,kDAClG,QAAK,EAAA,WAAU,2CACZ,GAAAA,iCAAA,cAACQ,KAAAA,MAAK,EAAA,WAAU,uBAAsB,MAAMN,UAAQ,OAAO,eAAe,eAAgB,CAAA,CAC9F,CACJ,GACAF,iCAAA,cAACO,QAAiB,QAAA,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,IACCP,iCAAA,cAAAO,QAAAA,QAAiB,OAAjB,MACI,MAAM,cAAcP,iCAAA,cAACS,QAAc,cAAA,EAAA,GAAG,mBAAoB,CAAA,IAAKT,iCAAA,cAACU,iBAAS,EAAA,GAAG,oBAAoB,CACrG;AAAA,EAER,CAAA,GACAV,iCAAA,cAAC,SAAO,EAAA,GAAG,OAAO,WAAU,UAAS,MAAK,OAAO,CAAA,CACrD,CACJ;AAER,CAAC;AAKM,MAAM,SAASA,iBAAM,WAAW,SAASW,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAEpC,MAAI,UAAU;AACH,WAAAX,iCAAA,cAACY,qBAAU,GAAG,YAAY,QAAQ,QAAW,QAAM,MAAC,IAAU,CAAA;AAAA,EAAA;AAGzE,SAAQZ,iCAAA,cAAA,YAAA,EAAY,GAAG,YAAY,KAAU;AACjD,CAAC;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,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.js

@@ -13,8 +13,8 @@ const BaseSelect = React.forwardRef(function BaseSelect2(props, ref) {
   const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);
   const internalRef = React.useRef(null);
   const selectDimensions = useBoundingClientRectListener(internalRef);
-  const className = cn("inline-flex relative w-full", { "yt-select--readonly": props.readOnly }, externalClassName);
-  const inputClassname = cn(getInputClasses(props), "h-8 text-left !pr-0", {
+  const className = cn("relative inline-flex w-full", { "yt-select--readonly": props.readOnly }, externalClassName);
+  const inputClassname = cn(getInputClasses(props), "h-8 !pr-0 text-left", {
     "border-blue-500": popover.open,
     "select-text": otherProps.readOnly
   });
@@ -30,7 +30,7 @@ const BaseSelect = React.forwardRef(function BaseSelect2(props, ref) {
     ...listbox,
     className: "w-auto",
     invalid: void 0,
-    style: { minWidth: selectDimensions == null ? void 0 : selectDimensions.width },
+    style: { minWidth: selectDimensions?.width },
     tabIndex: popover.open ? 0 : -1
   };
   return /* @__PURE__ */ React.createElement("span", { className, "data-taco": "select", style }, /* @__PURE__ */ React.createElement(Popover.Root, { ...popover }, /* @__PURE__ */ React.createElement(Popover.Trigger, { ...button, className: inputClassname, ref: internalRef }, props.multiselect ? renderMultiSelection() : /* @__PURE__ */ React.createElement("span", { className: "flex-grow truncate text-left" }, text), /* @__PURE__ */ React.createElement("span", { className: "flex h-8 w-8 items-center justify-center" }, /* @__PURE__ */ React.createElement(Icon, { className: "pointer-events-none", name: popover.open ? "chevron-up" : "chevron-down" }))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\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('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left !pr-0', {\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":";;;;;;;;;;AA8CA,MAAM,aAAa,MAAM,WAAW,SAASA,YAAW,OAAwB,KAAkC;AACxG,QAAA,EAAE,WAAW,WAAW,mBAAmB,aAAa,IAAI,OAAO,GAAG,WAAA,IAAe;AACrF,QAAA,EAAE,QAAQ,SAAS,SAAS,OAAO,MAAM,OAAO,EAAE,IAAI,UAAU,YAAY,GAAG;AAC/E,QAAA,cAAc,MAAM,OAA0B,IAAI;AAClD,QAAA,mBAAmB,8BAA8B,WAAW;AAC5D,QAAA,YAAY,GAAG,+BAA+B,EAAE,uBAAuB,MAAM,YAAY,iBAAiB;AAChH,QAAM,iBAAiB,GAAG,gBAAgB,KAAK,GAAG,uBAAuB;AAAA,IACrE,mBAAmB,QAAQ;AAAA,IAC3B,eAAe,WAAW;AAAA,EAAA,CAC7B;AAED,QAAM,UAAU,MAAM;AACd,QAAA,aAAa,YAAY,SAAS;AAClC,kBAAY,QAAQ,MAAM;AAAA,IAAA;AAAA,EAElC,GAAG,EAAE;AAEL,QAAM,uBAAuB,MAAuB;AAChD,qEAES,sBAAA,cAAA,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,qDAAkB,MAAM;AAAA,IAC3C,UAAU,QAAQ,OAAO,IAAI;AAAA,EACjC;AAGI,SAAA,sBAAA,cAAC,UAAK,WAAsB,aAAU,UAAS,MAC3C,GAAA,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,WACtB,sBAAA,cAAAA,QAAiB,SAAjB,EAA0B,GAAG,QAAQ,WAAW,gBAAgB,KAAK,YACjE,GAAA,MAAM,cAAc,qBAAA,IAA0B,sBAAA,cAAA,QAAA,EAAK,WAAU,+BAAA,GAAgC,IAAK,uCAClG,QAAK,EAAA,WAAU,2CACZ,GAAA,sBAAA,cAAC,MAAK,EAAA,WAAU,uBAAsB,MAAM,QAAQ,OAAO,eAAe,eAAgB,CAAA,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,IACC,sBAAA,cAAAA,QAAiB,OAAjB,MACI,MAAM,cAAc,sBAAA,cAAC,cAAc,EAAA,GAAG,mBAAoB,CAAA,IAAK,sBAAA,cAAC,SAAS,EAAA,GAAG,oBAAoB,CACrG;AAAA,EAER,CAAA,GACA,sBAAA,cAAC,SAAO,EAAA,GAAG,OAAO,WAAU,UAAS,MAAK,OAAO,CAAA,CACrD,CACJ;AAER,CAAC;AAKM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AAEpC,MAAI,UAAU;AACH,WAAA,sBAAA,cAAC,YAAU,GAAG,YAAY,QAAQ,QAAW,QAAM,MAAC,IAAU,CAAA;AAAA,EAAA;AAGzE,SAAQ,sBAAA,cAAA,YAAA,EAAY,GAAG,YAAY,KAAU;AACjD,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\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":";;;;;;;;;;AA8CA,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;"}