@economic/taco 2.1.2 → 2.1.3

package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js

@@ -180,7 +180,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       setFocused(false);
     };
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "relative [&_[data-taco='input-container']]:z-20",
+      className: cn('relative', {
+        "[&_[data-taco='input-container']]:z-20": focused
+      }),
       onBlur: handleSettingsBlur,
       ref: settingsRef
     }, input, focused ? /*#__PURE__*/React__default.createElement("div", {

package/dist/esm/packages/taco/src/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 'classnames';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    onSearch: (value: string) => 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}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\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        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        onSearch: handleSearch,\n        settingsContent,\n        shortcut,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const settingsRef = React.useRef<HTMLDivElement>(null);\n    const [internalValue, setInternalValue] = React.useState(value ?? '');\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const isSynced = internalValue === value;\n    const hasFind = handleClickFindNext && handleClickFindPrevious && findCurrent !== undefined && 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 handleSubmit = () => {\n        handleSearch(internalValue);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        // trigger searches when leaving the field\n        handleSubmit();\n\n        if (\n            settingsRef.current &&\n            (settingsRef.current === event.relatedTarget || settingsRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleChange = event => {\n        setInternalValue(event.target.value);\n\n        if (!event.target.value) {\n            handleClear();\n        }\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.focus());\n        setInternalValue('');\n        handleSearch('');\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        attributes.onFocus?.(event);\n        setFocused(true);\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 && isSynced) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            } else {\n                handleSearch(internalValue);\n            }\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (internalValue || focused)) {\n        if (internalValue) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>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=\"text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2\">\n                        {findCurrent ?? 0}/{findTotal ?? 0}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>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                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>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 && !internalValue) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        'peer !pl-7',\n        hasFind\n            ? {\n                  '!w-48': !internalValue && !focused,\n                  '!w-72': internalValue || focused,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\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={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={\n                <IconButton\n                    aria-label={texts.searchInput.button}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                    disabled={attributes.disabled || attributes.readOnly}\n                    icon=\"search\"\n                    onMouseDown={handleSubmit}\n                    tabIndex={-1}\n                    tooltip={\n                        focused && !isSynced ? (\n                            <>\n                                {texts.searchInput.button} <Shortcut keys=\"Enter\" />\n                            </>\n                        ) : (\n                            texts.searchInput.button\n                        )\n                    }\n                />\n            }\n            postfix={postfix}\n            ref={internalRef}\n            value={internalValue}\n        />\n    );\n\n    if (settingsContent) {\n        const handleSettingsBlur = event => {\n            if (event.currentTarget.contains(event.relatedTarget)) {\n                return;\n            }\n            setFocused(false);\n        };\n\n        return (\n            <div className=\"relative [&_[data-taco='input-container']]:z-20\" onBlur={handleSettingsBlur} ref={settingsRef}>\n                {input}\n                {focused ? (\n                    <div\n                        className=\"border-grey-300 absolute left-0 right-0 top-full z-10 flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow\"\n                        onClickCapture={() => internalRef.current?.focus()}\n                        tabIndex={-1}>\n                        {settingsContent}\n                    </div>\n                ) : null}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","React","forwardRef","props","ref","findCurrent","findTotal","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","onSearch","handleSearch","settingsContent","shortcut","value","attributes","internalRef","useMergedRef","settingsRef","useRef","internalValue","setInternalValue","useState","focused","setFocused","texts","useLocalization","isActive","length","isSynced","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","preventDefault","focus","handleSubmit","handleBlur","relatedTarget","contains","onBlur","handleChange","target","handleClear","requestAnimationFrame","handleFocus","onFocus","handleKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","findPrevious","shift","findNext","onClickCapture","cn","input","Input","placeholder","onChange","prefix","button","handleSettingsBlur","currentTarget"],"mappings":";;;;;;;;;MAkCaA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,YAAY,CAACG,KAAwB,EAAEC,GAAgC;;EACzH,MAAM;IACFC,WAAW;IACXC,SAAS;IACTC,eAAe,EAAEC,mBAAmB;IACpCC,mBAAmB,EAAEC,uBAAuB;IAC5CC,QAAQ,EAAEC,YAAY;IACtBC,eAAe;IACfC,QAAQ;IACRC,KAAK;IACL,GAAGC;GACN,GAAGb,KAAK;EACT,MAAMc,WAAW,GAAGC,YAAY,CAAmBd,GAAG,CAAC;EACvD,MAAMe,WAAW,GAAGlB,cAAK,CAACmB,MAAM,CAAiB,IAAI,CAAC;EACtD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGrB,cAAK,CAACsB,QAAQ,CAACR,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC;EACrE,MAAM,CAACS,OAAO,EAAEC,UAAU,CAAC,GAAGxB,cAAK,CAACsB,QAAQ,CAAC,KAAK,CAAC;EACnD,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,QAAQ,GAAGb,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,MAAM;EAC9B,MAAMC,QAAQ,GAAGT,aAAa,KAAKN,KAAK;EACxC,MAAMgB,OAAO,GAAGvB,mBAAmB,IAAIE,uBAAuB,IAAIL,WAAW,KAAK2B,SAAS,IAAI1B,SAAS,KAAK0B,SAAS;EAEtHC,gBAAgB,CAACnB,QAAQ,EAAGoB,KAAoB;IAC5C,IAAIC,QAAQ,CAACC,aAAa,KAAKnB,WAAW,CAACoB,OAAO,EAAE;MAAA;MAChDH,KAAK,CAACI,cAAc,EAAE;MACtB,wBAAArB,WAAW,CAACoB,OAAO,yDAAnB,qBAAqBE,KAAK,EAAE;;GAEnC,CAAC;EAEF,MAAMC,YAAY,GAAG;IACjB5B,YAAY,CAACS,aAAa,CAAC;GAC9B;EAED,MAAMoB,UAAU,GAAIP,KAAyC;;;IAEzDM,YAAY,EAAE;IAEd,IACIrB,WAAW,CAACkB,OAAO,KAClBlB,WAAW,CAACkB,OAAO,KAAKH,KAAK,CAACQ,aAAa,4BAAIvB,WAAW,CAACkB,OAAO,iDAAnB,qBAAqBM,QAAQ,CAACT,KAAK,CAACQ,aAAa,CAAC,CAAC,EACrG;MACE;;IAGJjB,UAAU,CAAC,KAAK,CAAC;IACjB,sBAAAT,UAAU,CAAC4B,MAAM,uDAAjB,wBAAA5B,UAAU,EAAUkB,KAAK,CAAC;GAC7B;EAED,MAAMW,YAAY,GAAGX,KAAK;IACtBZ,gBAAgB,CAACY,KAAK,CAACY,MAAM,CAAC/B,KAAK,CAAC;IAEpC,IAAI,CAACmB,KAAK,CAACY,MAAM,CAAC/B,KAAK,EAAE;MACrBgC,WAAW,EAAE;;GAEpB;EAED,MAAMA,WAAW,GAAG;IAChBC,qBAAqB,CAAC;MAAA;MAAA,gCAAM/B,WAAW,CAACoB,OAAO,0DAAnB,sBAAqBE,KAAK,EAAE;MAAC;IACzDjB,gBAAgB,CAAC,EAAE,CAAC;IACpBV,YAAY,CAAC,EAAE,CAAC;GACnB;EAED,MAAMqC,WAAW,GAAIf,KAAyC;;IAC1D,uBAAAlB,UAAU,CAACkC,OAAO,wDAAlB,yBAAAlC,UAAU,EAAWkB,KAAK,CAAC;IAC3BT,UAAU,CAAC,IAAI,CAAC;GACnB;EAED,MAAM0B,aAAa,GAAIjB,KAA4C;;IAC/D,oBAAA/B,KAAK,CAACiD,SAAS,qDAAf,sBAAAjD,KAAK,EAAa+B,KAAK,CAAC;IAExB,IAAIA,KAAK,CAACmB,kBAAkB,EAAE,EAAE;MAC5B;;IAGJ,IAAInB,KAAK,CAACoB,GAAG,KAAK,OAAO,EAAE;MACvBpB,KAAK,CAACI,cAAc,EAAE;MAEtB,IAAIP,OAAO,IAAIH,QAAQ,IAAIE,QAAQ,EAAE;QACjC,IAAII,KAAK,CAACqB,QAAQ,EAAE;UAChB7C,uBAAuB,aAAvBA,uBAAuB,uBAAvBA,uBAAuB,EAAI;SAC9B,MAAM;UACHF,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,EAAI;;OAE9B,MAAM;QACHI,YAAY,CAACS,aAAa,CAAC;;MAE/B;;IAGJ,IAAIa,KAAK,CAACoB,GAAG,KAAK,QAAQ,EAAE;MACxBP,WAAW,EAAE;MACb;;GAEP;EAED,IAAIS,OAAO;EAEX,IAAI,CAACxC,UAAU,CAACyC,QAAQ,IAAI,CAACzC,UAAU,CAAC0C,QAAQ,KAAKrC,aAAa,IAAIG,OAAO,CAAC,EAAE;IAC5E,IAAIH,aAAa,EAAE;MACfmC,OAAO,gBACHvD,6BAAC0D,UAAU;sBACKjC,KAAK,CAACkC,WAAW,CAACC,KAAK;QACnCC,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,OAAO;QACZC,WAAW,EAAEjB,WAAW;QACxBkB,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH1C,OAAO,gBACHvB,4DACKyB,KAAK,CAACkC,WAAW,CAACC,KAAK,oBAAE5D,6BAACkE,QAAQ;UAACC,IAAI,EAAC;UAAW,CACrD,GAEH1C,KAAK,CAACkC,WAAW,CAACC;QAIjC;;IAGL,IAAI9B,OAAO,IAAIH,QAAQ,EAAE;MACrB4B,OAAO,gBACHvD,yEACIA;QAAM6D,SAAS,EAAC;SACXzD,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,CAAC,OAAGC,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,CAAC,CAC/B,EACND,WAAW,gBACRJ,yEACIA,6BAAC0D,UAAU;sBACKjC,KAAK,CAACkC,WAAW,CAACS,YAAY;QAC1CP,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,YAAY;QACjBC,WAAW,EAAEtD,uBAAuB;QACpCuD,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH1C,OAAO,gBACHvB,4DACKyB,KAAK,CAACkC,WAAW,CAACS,YAAY,oBAAEpE,6BAACkE,QAAQ;UAACC,IAAI,EAAE;YAAEE,KAAK,EAAE,IAAI;YAAEhB,GAAG,EAAE;;UAAa,CACnF,GAEH5B,KAAK,CAACkC,WAAW,CAACS;QAG5B,eACFpE,6BAAC0D,UAAU;sBACKjC,KAAK,CAACkC,WAAW,CAACW,QAAQ;QACtCT,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,cAAc;QACnBC,WAAW,EAAExD,mBAAmB;QAChCyD,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH1C,OAAO,gBACHvB,4DACKyB,KAAK,CAACkC,WAAW,CAACW,QAAQ,oBAAEtE,6BAACkE,QAAQ;UAACC,IAAI,EAAC;UAAU,CACvD,GAEH1C,KAAK,CAACkC,WAAW,CAACW;QAG5B,CACH,GACH,IAAI,EACPf,OAAO,CAEf;;GAER,MAAM,IAAI1C,QAAQ,IAAI,CAACU,OAAO,IAAI,CAACH,aAAa,EAAE;IAC/CmC,OAAO,gBAAGvD,6BAACkE,QAAQ;MAACC,IAAI,EAAEtD,QAAQ;MAAE0D,cAAc,EAAE;QAAA;QAAA,gCAAMvD,WAAW,CAACoB,OAAO,0DAAnB,sBAAqBE,KAAK,EAAE;;MAAI;;EAG9F,MAAMuB,SAAS,GAAGW,EAAE,CAChB,YAAY,EACZ1C,OAAO,GACD;IACI,OAAO,EAAE,CAACV,aAAa,IAAI,CAACG,OAAO;IACnC,OAAO,EAAEH,aAAa,IAAIG;GAC7B,GACD,OAAO,EACb;IACI,gBAAgB,EAAEI;GACrB,EACDzB,KAAK,CAAC2D,SAAS,CAClB;EAED,MAAMY,KAAK,gBACPzE,6BAAC0E,KAAK,oBACE3D,UAAU;0CACFA,UAAU,CAAC,YAAY,CAAC,uEAAIU,KAAK,CAACkC,WAAW,CAACgB,WAAW;IACrEd,SAAS,EAAEA,SAAS;iBACV,eAAe;IACzBlB,MAAM,EAAEH,UAAU;IAClBoC,QAAQ,EAAEhC,YAAY;IACtBK,OAAO,EAAED,WAAW;IACpBG,SAAS,EAAED,aAAa;IACxByB,WAAW,2BAAE5D,UAAU,CAAC4D,WAAW,yEAAIlD,KAAK,CAACkC,WAAW,CAACgB,WAAW;IACpEE,MAAM,eACF7E,6BAAC0D,UAAU;oBACKjC,KAAK,CAACkC,WAAW,CAACmB,MAAM;MACpCjB,SAAS,EAAC,mEAAmE;MAC7EL,QAAQ,EAAEzC,UAAU,CAACyC,QAAQ,IAAIzC,UAAU,CAAC0C,QAAQ;MACpDK,IAAI,EAAC,QAAQ;MACbC,WAAW,EAAExB,YAAY;MACzByB,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EACH1C,OAAO,IAAI,CAACM,QAAQ,gBAChB7B,4DACKyB,KAAK,CAACkC,WAAW,CAACmB,MAAM,oBAAE9E,6BAACkE,QAAQ;QAACC,IAAI,EAAC;QAAU,CACrD,GAEH1C,KAAK,CAACkC,WAAW,CAACmB;MAG5B;IAENvB,OAAO,EAAEA,OAAO;IAChBpD,GAAG,EAAEa,WAAW;IAChBF,KAAK,EAAEM;KAEd;EAED,IAAIR,eAAe,EAAE;IACjB,MAAMmE,kBAAkB,GAAG9C,KAAK;MAC5B,IAAIA,KAAK,CAAC+C,aAAa,CAACtC,QAAQ,CAACT,KAAK,CAACQ,aAAa,CAAC,EAAE;QACnD;;MAEJjB,UAAU,CAAC,KAAK,CAAC;KACpB;IAED,oBACIxB;MAAK6D,SAAS,EAAC,iDAAiD;MAAClB,MAAM,EAAEoC,kBAAkB;MAAE5E,GAAG,EAAEe;OAC7FuD,KAAK,EACLlD,OAAO,gBACJvB;MACI6D,SAAS,EAAC,6HAA6H;MACvIU,cAAc,EAAE;QAAA;QAAA,gCAAMvD,WAAW,CAACoB,OAAO,0DAAnB,sBAAqBE,KAAK,EAAE;;MAClD0B,QAAQ,EAAE,CAAC;OACVpD,eAAe,CACd,GACN,IAAI,CACN;;EAId,OAAO6D,KAAK;AAChB,CAAC;;;;"}
+{"version":3,"file":"SearchInput2.js","sources":["../../../../../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    onSearch: (value: string) => 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}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\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        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        onSearch: handleSearch,\n        settingsContent,\n        shortcut,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const settingsRef = React.useRef<HTMLDivElement>(null);\n    const [internalValue, setInternalValue] = React.useState(value ?? '');\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const isSynced = internalValue === value;\n    const hasFind = handleClickFindNext && handleClickFindPrevious && findCurrent !== undefined && 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 handleSubmit = () => {\n        handleSearch(internalValue);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        // trigger searches when leaving the field\n        handleSubmit();\n\n        if (\n            settingsRef.current &&\n            (settingsRef.current === event.relatedTarget || settingsRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleChange = event => {\n        setInternalValue(event.target.value);\n\n        if (!event.target.value) {\n            handleClear();\n        }\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.focus());\n        setInternalValue('');\n        handleSearch('');\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        attributes.onFocus?.(event);\n        setFocused(true);\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 && isSynced) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            } else {\n                handleSearch(internalValue);\n            }\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (internalValue || focused)) {\n        if (internalValue) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>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=\"text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2\">\n                        {findCurrent ?? 0}/{findTotal ?? 0}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>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                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>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 && !internalValue) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        'peer !pl-7',\n        hasFind\n            ? {\n                  '!w-48': !internalValue && !focused,\n                  '!w-72': internalValue || focused,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\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={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={\n                <IconButton\n                    aria-label={texts.searchInput.button}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                    disabled={attributes.disabled || attributes.readOnly}\n                    icon=\"search\"\n                    onMouseDown={handleSubmit}\n                    tabIndex={-1}\n                    tooltip={\n                        focused && !isSynced ? (\n                            <>\n                                {texts.searchInput.button} <Shortcut keys=\"Enter\" />\n                            </>\n                        ) : (\n                            texts.searchInput.button\n                        )\n                    }\n                />\n            }\n            postfix={postfix}\n            ref={internalRef}\n            value={internalValue}\n        />\n    );\n\n    if (settingsContent) {\n        const handleSettingsBlur = event => {\n            if (event.currentTarget.contains(event.relatedTarget)) {\n                return;\n            }\n            setFocused(false);\n        };\n\n        return (\n            <div\n                className={cn('relative', { \"[&_[data-taco='input-container']]:z-20\": focused })}\n                onBlur={handleSettingsBlur}\n                ref={settingsRef}>\n                {input}\n                {focused ? (\n                    <div\n                        className=\"border-grey-300 absolute left-0 right-0 top-full z-10 flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow\"\n                        onClickCapture={() => internalRef.current?.focus()}\n                        tabIndex={-1}>\n                        {settingsContent}\n                    </div>\n                ) : null}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","React","forwardRef","props","ref","findCurrent","findTotal","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","onSearch","handleSearch","settingsContent","shortcut","value","attributes","internalRef","useMergedRef","settingsRef","useRef","internalValue","setInternalValue","useState","focused","setFocused","texts","useLocalization","isActive","length","isSynced","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","preventDefault","focus","handleSubmit","handleBlur","relatedTarget","contains","onBlur","handleChange","target","handleClear","requestAnimationFrame","handleFocus","onFocus","handleKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","findPrevious","shift","findNext","onClickCapture","cn","input","Input","placeholder","onChange","prefix","button","handleSettingsBlur","currentTarget"],"mappings":"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"}

package/dist/taco.cjs.development.js

@@ -8956,7 +8956,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       setFocused(false);
     };
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "relative [&_[data-taco='input-container']]:z-20",
+      className: cn('relative', {
+        "[&_[data-taco='input-container']]:z-20": focused
+      }),
       onBlur: handleSettingsBlur,
       ref: settingsRef
     }, input, focused ? /*#__PURE__*/React__default.createElement("div", {