@economic/taco 2.7.0 → 2.7.2

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

@@ -24,7 +24,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
-  const settingsRef = React__default.useRef(null);
+  const containerRef = React__default.useRef(null);
   const [focused, setFocused] = React__default.useState(false);
   const {
     texts
@@ -39,8 +39,8 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
   });
   const handleBlur = event => {
-    var _settingsRef$current, _attributes$onBlur;
-    if (settingsRef.current && (settingsRef.current === event.relatedTarget || (_settingsRef$current = settingsRef.current) !== null && _settingsRef$current !== void 0 && _settingsRef$current.contains(event.relatedTarget))) {
+    var _containerRef$current, _attributes$onBlur;
+    if (containerRef.current && (containerRef.current === event.relatedTarget || (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
       return;
     }
     setFocused(false);
@@ -131,9 +131,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       }
     });
   }
-  const className = cn('peer !pl-7', hasFind ? {
-    '!w-48': !value && !focused,
-    '!w-72': value || focused
+  const className = cn('!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus', hasFind ? {
+    '!w-48': !value,
+    '!w-72': value
   } : '!w-48', {
     '!wcag-blue-100': isActive
   }, props.className);
@@ -161,26 +161,19 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     value: value !== null && value !== void 0 ? value : ''
   }));
   if (settingsContent) {
-    const handleSettingsBlur = event => {
-      if (event.currentTarget.contains(event.relatedTarget) || event.currentTarget.contains(event.target)) {
-        return;
-      }
-      setFocused(false);
-    };
+    const settingsClassname = cn('border-grey-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]))]');
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cn('relative', {
-        "[&_[data-taco='input-container']]:z-20": focused
-      }),
-      onBlur: handleSettingsBlur,
-      ref: settingsRef
-    }, input, focused ? /*#__PURE__*/React__default.createElement("div", {
-      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",
+      className: "group relative z-10 [&_[data-taco='input-container']]:z-10",
+      ref: containerRef
+    }, input, /*#__PURE__*/React__default.createElement("div", {
+      className: settingsClassname,
       onClickCapture: () => {
         var _internalRef$current5;
         return (_internalRef$current5 = internalRef.current) === null || _internalRef$current5 === void 0 ? void 0 : _internalRef$current5.focus();
       },
+      // tab index is important, it lets the element show as a relatedTarget on event handlers
       tabIndex: -1
-    }, settingsContent) : null);
+    }, settingsContent));
   }
   return input;
 });

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';\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    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        loading = false,\n        onChange: handleChange,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\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 [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\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 handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\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 handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.focus());\n        handleChange('');\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        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            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\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                        {loading ? <Spinner className=\"h-4 w-4\" /> : `${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 && !value) {\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': !value && !focused,\n                  '!w-72': value || focused,\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 handleSettingsBlur = event => {\n            if (event.currentTarget.contains(event.relatedTarget) || event.currentTarget.contains(event.target)) {\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","loading","onChange","handleChange","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","settingsContent","shortcut","value","attributes","internalRef","useMergedRef","settingsRef","useRef","focused","setFocused","useState","texts","useLocalization","isActive","length","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","_internalRef$current","preventDefault","focus","handleBlur","relatedTarget","_settingsRef$current","contains","_attributes$onBlur","onBlur","call","handleClear","requestAnimationFrame","_internalRef$current2","handleFocus","_attributes$onFocus","onFocus","handleKeyDown","_props$onKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","Spinner","findPrevious","shift","findNext","onClickCapture","_internalRef$current3","cn","Icon","button","name","_internalRef$current4","input","Input","_attributes$ariaLabe","placeholder","target","_attributes$placehold","prefix","handleSettingsBlur","currentTarget","_internalRef$current5"],"mappings":";;;;;;;;;;;MAqCaA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,YAAYA,CAACG,KAAwB,EAAEC,GAAgC;;EACzH,MAAM;IACFC,WAAW;IACXC,SAAS;IACTC,OAAO,GAAG,KAAK;IACfC,QAAQ,EAAEC,YAAY;IACtBC,eAAe,EAAEC,mBAAmB;IACpCC,mBAAmB,EAAEC,uBAAuB;IAC5CC,eAAe;IACfC,QAAQ;IACRC,KAAK;IACL,GAAGC;GACN,GAAGd,KAAK;EACT,MAAMe,WAAW,GAAGC,YAAY,CAAmBf,GAAG,CAAC;EACvD,MAAMgB,WAAW,GAAGnB,cAAK,CAACoB,MAAM,CAAiB,IAAI,CAAC;EACtD,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGtB,cAAK,CAACuB,QAAQ,CAAC,KAAK,CAAC;EACnD,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,QAAQ,GAAGX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,MAAM;EAC9B,MAAMC,OAAO,GAAGlB,mBAAmB,IAAIE,uBAAuB,IAAIR,WAAW,KAAKyB,SAAS,IAAIxB,SAAS,KAAKwB,SAAS;EAEtHC,gBAAgB,CAAChB,QAAQ,EAAGiB,KAAoB;IAC5C,IAAIC,QAAQ,CAACC,aAAa,KAAKhB,WAAW,CAACiB,OAAO,EAAE;MAAA,IAAAC,oBAAA;MAChDJ,KAAK,CAACK,cAAc,EAAE;MACtB,CAAAD,oBAAA,GAAAlB,WAAW,CAACiB,OAAO,cAAAC,oBAAA,uBAAnBA,oBAAA,CAAqBE,KAAK,EAAE;;GAEnC,CAAC;EAEF,MAAMC,UAAU,GAAIP,KAAyC;;IACzD,IACIZ,WAAW,CAACe,OAAO,KAClBf,WAAW,CAACe,OAAO,KAAKH,KAAK,CAACQ,aAAa,KAAAC,oBAAA,GAAIrB,WAAW,CAACe,OAAO,cAAAM,oBAAA,eAAnBA,oBAAA,CAAqBC,QAAQ,CAACV,KAAK,CAACQ,aAAa,CAAC,CAAC,EACrG;MACE;;IAGJjB,UAAU,CAAC,KAAK,CAAC;IACjB,CAAAoB,kBAAA,GAAA1B,UAAU,CAAC2B,MAAM,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAAE,IAAA,CAAA5B,UAAU,EAAUe,KAAK,CAAC;GAC7B;EAED,MAAMc,WAAW,GAAGA;IAChBC,qBAAqB,CAAC;MAAA,IAAAC,qBAAA;MAAA,QAAAA,qBAAA,GAAM9B,WAAW,CAACiB,OAAO,cAAAa,qBAAA,uBAAnBA,qBAAA,CAAqBV,KAAK,EAAE;MAAC;IACzD7B,YAAY,CAAC,EAAE,CAAC;GACnB;EAED,MAAMwC,WAAW,GAAIjB,KAAyC;;IAC1DT,UAAU,CAAC,IAAI,CAAC;IAChB,CAAA2B,mBAAA,GAAAjC,UAAU,CAACkC,OAAO,cAAAD,mBAAA,uBAAlBA,mBAAA,CAAAL,IAAA,CAAA5B,UAAU,EAAWe,KAAK,CAAC;GAC9B;EAED,MAAMoB,aAAa,GAAIpB,KAA4C;;IAC/D,CAAAqB,gBAAA,GAAAlD,KAAK,CAACmD,SAAS,cAAAD,gBAAA,uBAAfA,gBAAA,CAAAR,IAAA,CAAA1C,KAAK,EAAa6B,KAAK,CAAC;IAExB,IAAIA,KAAK,CAACuB,kBAAkB,EAAE,EAAE;MAC5B;;IAEJ,IAAIvB,KAAK,CAACwB,GAAG,KAAK,OAAO,EAAE;MACvBxB,KAAK,CAACK,cAAc,EAAE;MAEtB,IAAIR,OAAO,IAAIF,QAAQ,EAAE;QACrB,IAAIK,KAAK,CAACyB,QAAQ,EAAE;UAChB5C,uBAAuB,aAAvBA,uBAAuB,uBAAvBA,uBAAuB,EAAI;SAC9B,MAAM;UACHF,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,EAAI;;;MAI/B;;IAGJ,IAAIqB,KAAK,CAACwB,GAAG,KAAK,QAAQ,EAAE;MACxBV,WAAW,EAAE;MACb;;GAEP;EAED,IAAIY,OAAO;EAEX,IAAI,CAACzC,UAAU,CAAC0C,QAAQ,IAAI,CAAC1C,UAAU,CAAC2C,QAAQ,KAAK5C,KAAK,IAAIM,OAAO,CAAC,EAAE;IACpE,IAAIN,KAAK,EAAE;MACP0C,OAAO,gBACHzD,6BAAC4D,UAAU;sBACKpC,KAAK,CAACqC,WAAW,CAACC,KAAK;QACnCC,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,OAAO;QACZC,WAAW,EAAEpB,WAAW;QACxBqB,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH9C,OAAO,gBACHrB,4DACKwB,KAAK,CAACqC,WAAW,CAACC,KAAK,oBAAE9D,6BAACoE,QAAQ;UAACC,IAAI,EAAC;UAAW,CACrD,GAEH7C,KAAK,CAACqC,WAAW,CAACC;QAIjC;;IAGL,IAAIlC,OAAO,IAAIF,QAAQ,EAAE;MACrB+B,OAAO,gBACHzD,yEACIA;QAAM+D,SAAS,EAAC;SACXzD,OAAO,gBAAGN,6BAACsE,OAAO;QAACP,SAAS,EAAC;QAAY,MAAM3D,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,KAAKC,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,GAAG,CACjF,EACND,WAAW,gBACRJ,yEACIA,6BAAC4D,UAAU;sBACKpC,KAAK,CAACqC,WAAW,CAACU,YAAY;QAC1CR,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,YAAY;QACjBC,WAAW,EAAErD,uBAAuB;QACpCsD,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH9C,OAAO,gBACHrB,4DACKwB,KAAK,CAACqC,WAAW,CAACU,YAAY,oBAAEvE,6BAACoE,QAAQ;UAACC,IAAI,EAAE;YAAEG,KAAK,EAAE,IAAI;YAAEjB,GAAG,EAAE;;UAAa,CACnF,GAEH/B,KAAK,CAACqC,WAAW,CAACU;QAG5B,eACFvE,6BAAC4D,UAAU;sBACKpC,KAAK,CAACqC,WAAW,CAACY,QAAQ;QACtCV,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,cAAc;QACnBC,WAAW,EAAEvD,mBAAmB;QAChCwD,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH9C,OAAO,gBACHrB,4DACKwB,KAAK,CAACqC,WAAW,CAACY,QAAQ,oBAAEzE,6BAACoE,QAAQ;UAACC,IAAI,EAAC;UAAU,CACvD,GAEH7C,KAAK,CAACqC,WAAW,CAACY;QAG5B,CACH,GACH,IAAI,EACPhB,OAAO,CAEf;;GAER,MAAM,IAAI3C,QAAQ,IAAI,CAACO,OAAO,IAAI,CAACN,KAAK,EAAE;IACvC0C,OAAO,gBAAGzD,6BAACoE,QAAQ;MAACC,IAAI,EAAEvD,QAAQ;MAAE4D,cAAc,EAAEA;QAAA,IAAAC,qBAAA;QAAA,QAAAA,qBAAA,GAAM1D,WAAW,CAACiB,OAAO,cAAAyC,qBAAA,uBAAnBA,qBAAA,CAAqBtC,KAAK,EAAE;;MAAI;;EAG9F,MAAM0B,SAAS,GAAGa,EAAE,CAChB,YAAY,EACZhD,OAAO,GACD;IACI,OAAO,EAAE,CAACb,KAAK,IAAI,CAACM,OAAO;IAC3B,OAAO,EAAEN,KAAK,IAAIM;GACrB,GACD,OAAO,EACb;IACI,gBAAgB,EAAEK;GACrB,EACDxB,KAAK,CAAC6D,SAAS,CAClB;EAED,MAAMC,IAAI,gBACNhE,6BAAC6E,IAAI;kBACWrD,KAAK,CAACqC,WAAW,CAACiB,MAAM;IACpCf,SAAS,EAAC,kBAAkB;IAC5BgB,IAAI,EAAC,QAAQ;IACbL,cAAc,EAAEA;MAAA,IAAAM,qBAAA;MAAA,QAAAA,qBAAA,GAAM/D,WAAW,CAACiB,OAAO,cAAA8C,qBAAA,uBAAnBA,qBAAA,CAAqB3C,KAAK,EAAE;;IAEzD;EAED,MAAM4C,KAAK,gBACPjF,6BAACkF,KAAK,oBACElE,UAAU;0CACFA,UAAU,CAAC,YAAY,CAAC,cAAAmE,oBAAA,cAAAA,oBAAA,GAAI3D,KAAK,CAACqC,WAAW,CAACuB,WAAW;IACrErB,SAAS,EAAEA,SAAS;iBACV,eAAe;IACzBpB,MAAM,EAAEL,UAAU;IAClB/B,QAAQ,EAAEwB,KAAK,IAAIvB,YAAY,CAACuB,KAAK,CAACsD,MAAM,CAACtE,KAAK,CAAC;IACnDmC,OAAO,EAAEF,WAAW;IACpBK,SAAS,EAAEF,aAAa;IACxBiC,WAAW,GAAAE,qBAAA,GAAEtE,UAAU,CAACoE,WAAW,cAAAE,qBAAA,cAAAA,qBAAA,GAAI9D,KAAK,CAACqC,WAAW,CAACuB,WAAW;IACpEG,MAAM,EAAEvB,IAAI;IACZP,OAAO,EAAEA,OAAO;IAChBtD,GAAG,EAAEc,WAAW;IAChBF,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;KAEvB;EAED,IAAIF,eAAe,EAAE;IACjB,MAAM2E,kBAAkB,GAAGzD,KAAK;MAC5B,IAAIA,KAAK,CAAC0D,aAAa,CAAChD,QAAQ,CAACV,KAAK,CAACQ,aAAa,CAAC,IAAIR,KAAK,CAAC0D,aAAa,CAAChD,QAAQ,CAACV,KAAK,CAACsD,MAAM,CAAC,EAAE;QACjG;;MAEJ/D,UAAU,CAAC,KAAK,CAAC;KACpB;IAED,oBACItB;MACI+D,SAAS,EAAEa,EAAE,CAAC,UAAU,EAAE;QAAE,wCAAwC,EAAEvD;OAAS,CAAC;MAChFsB,MAAM,EAAE6C,kBAAkB;MAC1BrF,GAAG,EAAEgB;OACJ8D,KAAK,EACL5D,OAAO,gBACJrB;MACI+D,SAAS,EAAC,6HAA6H;MACvIW,cAAc,EAAEA;QAAA,IAAAgB,qBAAA;QAAA,QAAAA,qBAAA,GAAMzE,WAAW,CAACiB,OAAO,cAAAwD,qBAAA,uBAAnBA,qBAAA,CAAqBrD,KAAK,EAAE;;MAClD6B,QAAQ,EAAE,CAAC;OACVrD,eAAe,CACd,GACN,IAAI,CACN;;EAId,OAAOoE,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';\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    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        loading = false,\n        onChange: handleChange,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\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 = 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 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?.focus());\n        handleChange('');\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        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            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\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                        {loading ? <Spinner className=\"h-4 w-4\" /> : `${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 && !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-grey-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 className=\"group relative z-10 [&_[data-taco='input-container']]:z-10\" ref={containerRef}>\n                {input}\n                <div\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","React","forwardRef","props","ref","findCurrent","findTotal","loading","onChange","handleChange","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","settingsContent","shortcut","value","attributes","internalRef","useMergedRef","containerRef","useRef","focused","setFocused","useState","texts","useLocalization","isActive","length","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","_internalRef$current","preventDefault","focus","handleBlur","relatedTarget","_containerRef$current","contains","_attributes$onBlur","onBlur","call","handleClear","requestAnimationFrame","_internalRef$current2","handleFocus","_attributes$onFocus","onFocus","handleKeyDown","_props$onKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","Spinner","findPrevious","shift","findNext","onClickCapture","_internalRef$current3","cn","Icon","button","name","_internalRef$current4","input","Input","_attributes$ariaLabe","placeholder","target","_attributes$placehold","prefix","settingsClassname","_internalRef$current5"],"mappings":";;;;;;;;;;;MAqCaA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,YAAYA,CAACG,KAAwB,EAAEC,GAAgC;;EACzH,MAAM;IACFC,WAAW;IACXC,SAAS;IACTC,OAAO,GAAG,KAAK;IACfC,QAAQ,EAAEC,YAAY;IACtBC,eAAe,EAAEC,mBAAmB;IACpCC,mBAAmB,EAAEC,uBAAuB;IAC5CC,eAAe;IACfC,QAAQ;IACRC,KAAK;IACL,GAAGC;GACN,GAAGd,KAAK;EACT,MAAMe,WAAW,GAAGC,YAAY,CAAmBf,GAAG,CAAC;EACvD,MAAMgB,YAAY,GAAGnB,cAAK,CAACoB,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGtB,cAAK,CAACuB,QAAQ,CAAC,KAAK,CAAC;EACnD,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,QAAQ,GAAGX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,MAAM;EAC9B,MAAMC,OAAO,GAAGlB,mBAAmB,IAAIE,uBAAuB,IAAIR,WAAW,KAAKyB,SAAS,IAAIxB,SAAS,KAAKwB,SAAS;EAEtHC,gBAAgB,CAAChB,QAAQ,EAAGiB,KAAoB;IAC5C,IAAIC,QAAQ,CAACC,aAAa,KAAKhB,WAAW,CAACiB,OAAO,EAAE;MAAA,IAAAC,oBAAA;MAChDJ,KAAK,CAACK,cAAc,EAAE;MACtB,CAAAD,oBAAA,GAAAlB,WAAW,CAACiB,OAAO,cAAAC,oBAAA,uBAAnBA,oBAAA,CAAqBE,KAAK,EAAE;;GAEnC,CAAC;EAEF,MAAMC,UAAU,GAAIP,KAAyC;;IACzD,IACIZ,YAAY,CAACe,OAAO,KACnBf,YAAY,CAACe,OAAO,KAAKH,KAAK,CAACQ,aAAa,KAAAC,qBAAA,GAAIrB,YAAY,CAACe,OAAO,cAAAM,qBAAA,eAApBA,qBAAA,CAAsBC,QAAQ,CAACV,KAAK,CAACQ,aAAa,CAAC,CAAC,EACvG;MACE;;IAGJjB,UAAU,CAAC,KAAK,CAAC;IACjB,CAAAoB,kBAAA,GAAA1B,UAAU,CAAC2B,MAAM,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAAE,IAAA,CAAA5B,UAAU,EAAUe,KAAK,CAAC;GAC7B;EAED,MAAMc,WAAW,GAAGA;IAChBC,qBAAqB,CAAC;MAAA,IAAAC,qBAAA;MAAA,QAAAA,qBAAA,GAAM9B,WAAW,CAACiB,OAAO,cAAAa,qBAAA,uBAAnBA,qBAAA,CAAqBV,KAAK,EAAE;MAAC;IACzD7B,YAAY,CAAC,EAAE,CAAC;GACnB;EAED,MAAMwC,WAAW,GAAIjB,KAAyC;;IAC1DT,UAAU,CAAC,IAAI,CAAC;IAChB,CAAA2B,mBAAA,GAAAjC,UAAU,CAACkC,OAAO,cAAAD,mBAAA,uBAAlBA,mBAAA,CAAAL,IAAA,CAAA5B,UAAU,EAAWe,KAAK,CAAC;GAC9B;EAED,MAAMoB,aAAa,GAAIpB,KAA4C;;IAC/D,CAAAqB,gBAAA,GAAAlD,KAAK,CAACmD,SAAS,cAAAD,gBAAA,uBAAfA,gBAAA,CAAAR,IAAA,CAAA1C,KAAK,EAAa6B,KAAK,CAAC;IAExB,IAAIA,KAAK,CAACuB,kBAAkB,EAAE,EAAE;MAC5B;;IAEJ,IAAIvB,KAAK,CAACwB,GAAG,KAAK,OAAO,EAAE;MACvBxB,KAAK,CAACK,cAAc,EAAE;MAEtB,IAAIR,OAAO,IAAIF,QAAQ,EAAE;QACrB,IAAIK,KAAK,CAACyB,QAAQ,EAAE;UAChB5C,uBAAuB,aAAvBA,uBAAuB,uBAAvBA,uBAAuB,EAAI;SAC9B,MAAM;UACHF,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,EAAI;;;MAI/B;;IAGJ,IAAIqB,KAAK,CAACwB,GAAG,KAAK,QAAQ,EAAE;MACxBV,WAAW,EAAE;MACb;;GAEP;EAED,IAAIY,OAAO;EAEX,IAAI,CAACzC,UAAU,CAAC0C,QAAQ,IAAI,CAAC1C,UAAU,CAAC2C,QAAQ,KAAK5C,KAAK,IAAIM,OAAO,CAAC,EAAE;IACpE,IAAIN,KAAK,EAAE;MACP0C,OAAO,gBACHzD,6BAAC4D,UAAU;sBACKpC,KAAK,CAACqC,WAAW,CAACC,KAAK;QACnCC,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,OAAO;QACZC,WAAW,EAAEpB,WAAW;QACxBqB,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH9C,OAAO,gBACHrB,4DACKwB,KAAK,CAACqC,WAAW,CAACC,KAAK,oBAAE9D,6BAACoE,QAAQ;UAACC,IAAI,EAAC;UAAW,CACrD,GAEH7C,KAAK,CAACqC,WAAW,CAACC;QAIjC;;IAGL,IAAIlC,OAAO,IAAIF,QAAQ,EAAE;MACrB+B,OAAO,gBACHzD,yEACIA;QAAM+D,SAAS,EAAC;SACXzD,OAAO,gBAAGN,6BAACsE,OAAO;QAACP,SAAS,EAAC;QAAY,MAAM3D,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,KAAKC,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,GAAG,CACjF,EACND,WAAW,gBACRJ,yEACIA,6BAAC4D,UAAU;sBACKpC,KAAK,CAACqC,WAAW,CAACU,YAAY;QAC1CR,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,YAAY;QACjBC,WAAW,EAAErD,uBAAuB;QACpCsD,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH9C,OAAO,gBACHrB,4DACKwB,KAAK,CAACqC,WAAW,CAACU,YAAY,oBAAEvE,6BAACoE,QAAQ;UAACC,IAAI,EAAE;YAAEG,KAAK,EAAE,IAAI;YAAEjB,GAAG,EAAE;;UAAa,CACnF,GAEH/B,KAAK,CAACqC,WAAW,CAACU;QAG5B,eACFvE,6BAAC4D,UAAU;sBACKpC,KAAK,CAACqC,WAAW,CAACY,QAAQ;QACtCV,SAAS,EAAC,mEAAmE;QAC7EC,IAAI,EAAC,cAAc;QACnBC,WAAW,EAAEvD,mBAAmB;QAChCwD,QAAQ,EAAE,CAAC,CAAC;QACZC,OAAO,EACH9C,OAAO,gBACHrB,4DACKwB,KAAK,CAACqC,WAAW,CAACY,QAAQ,oBAAEzE,6BAACoE,QAAQ;UAACC,IAAI,EAAC;UAAU,CACvD,GAEH7C,KAAK,CAACqC,WAAW,CAACY;QAG5B,CACH,GACH,IAAI,EACPhB,OAAO,CAEf;;GAER,MAAM,IAAI3C,QAAQ,IAAI,CAACO,OAAO,IAAI,CAACN,KAAK,EAAE;IACvC0C,OAAO,gBAAGzD,6BAACoE,QAAQ;MAACC,IAAI,EAAEvD,QAAQ;MAAE4D,cAAc,EAAEA;QAAA,IAAAC,qBAAA;QAAA,QAAAA,qBAAA,GAAM1D,WAAW,CAACiB,OAAO,cAAAyC,qBAAA,uBAAnBA,qBAAA,CAAqBtC,KAAK,EAAE;;MAAI;;EAG9F,MAAM0B,SAAS,GAAGa,EAAE,CAChB,4DAA4D,EAC5DhD,OAAO,GACD;IACI,OAAO,EAAE,CAACb,KAAK;IACf,OAAO,EAAEA;GACZ,GACD,OAAO,EACb;IACI,gBAAgB,EAAEW;GACrB,EACDxB,KAAK,CAAC6D,SAAS,CAClB;EAED,MAAMC,IAAI,gBACNhE,6BAAC6E,IAAI;kBACWrD,KAAK,CAACqC,WAAW,CAACiB,MAAM;IACpCf,SAAS,EAAC,kBAAkB;IAC5BgB,IAAI,EAAC,QAAQ;IACbL,cAAc,EAAEA;MAAA,IAAAM,qBAAA;MAAA,QAAAA,qBAAA,GAAM/D,WAAW,CAACiB,OAAO,cAAA8C,qBAAA,uBAAnBA,qBAAA,CAAqB3C,KAAK,EAAE;;IAEzD;EAED,MAAM4C,KAAK,gBACPjF,6BAACkF,KAAK,oBACElE,UAAU;0CACFA,UAAU,CAAC,YAAY,CAAC,cAAAmE,oBAAA,cAAAA,oBAAA,GAAI3D,KAAK,CAACqC,WAAW,CAACuB,WAAW;IACrErB,SAAS,EAAEA,SAAS;iBACV,eAAe;IACzBpB,MAAM,EAAEL,UAAU;IAClB/B,QAAQ,EAAEwB,KAAK,IAAIvB,YAAY,CAACuB,KAAK,CAACsD,MAAM,CAACtE,KAAK,CAAC;IACnDmC,OAAO,EAAEF,WAAW;IACpBK,SAAS,EAAEF,aAAa;IACxBiC,WAAW,GAAAE,qBAAA,GAAEtE,UAAU,CAACoE,WAAW,cAAAE,qBAAA,cAAAA,qBAAA,GAAI9D,KAAK,CAACqC,WAAW,CAACuB,WAAW;IACpEG,MAAM,EAAEvB,IAAI;IACZP,OAAO,EAAEA,OAAO;IAChBtD,GAAG,EAAEc,WAAW;IAChBF,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;KAEvB;EAED,IAAIF,eAAe,EAAE;IACjB,MAAM2E,iBAAiB,GAAGZ,EAAE,CACxB,+NAA+N,CAClO;IAED,oBACI5E;MAAK+D,SAAS,EAAC,4DAA4D;MAAC5D,GAAG,EAAEgB;OAC5E8D,KAAK,eACNjF;MACI+D,SAAS,EAAEyB,iBAAiB;MAC5Bd,cAAc,EAAEA;QAAA,IAAAe,qBAAA;QAAA,QAAAA,qBAAA,GAAMxE,WAAW,CAACiB,OAAO,cAAAuD,qBAAA,uBAAnBA,qBAAA,CAAqBpD,KAAK,EAAE;;;MAElD6B,QAAQ,EAAE,CAAC;OACVrD,eAAe,CACd,CACJ;;EAId,OAAOoE,KAAK;AAChB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js

@@ -103,7 +103,7 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   return newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex && newProps.row.getIsSelected() !== oldProps.row.getIsSelected();
 });
 function createRowSelectionColumn(hasDrag, hasExpansion) {
-  const size = hasDrag && hasExpansion ? 22 : 4;
+  const size = hasDrag && hasExpansion ? 22 : 40;
   return {
     id: COLUMN_ID,
     header: Header,

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    if (context.table.options.enableMultiRowSelection) {\n        const isAllRowsSelected = context.table.getIsAllRowsSelected();\n        const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n        const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n        return (\n            <ColumnHeader {...context}>\n                <Tooltip title={title}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"hover:border-blue !mt-0\"\n                        key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n                        checked={isAllRowsSelected}\n                        indeterminate={isSomeRowsSelected}\n                        onChange={context.table.toggleAllRowsSelected}\n                        tabIndex={-1}\n                    />\n                </Tooltip>\n            </ColumnHeader>\n        );\n    } else {\n        return <ColumnHeader {...context}></ColumnHeader>;\n    }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n    function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n        const { texts } = useLocalization();\n        const { rowIndex } = React.useContext(RowContext);\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n        const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n        const isSelected = context.row.getIsSelected();\n        const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n        if (context.table.options.enableMultiRowSelection) {\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n\n                if (event.shiftKey) {\n                    const [fromIndex, toIndex] = toggleBetween(\n                        tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n                        rowIndex\n                    );\n\n                    context.table\n                        .getRowModel()\n                        .rows.slice(fromIndex, toIndex + 1)\n                        .forEach(row => row.toggleSelected(true));\n                } else {\n                    context.row.toggleSelected();\n                }\n\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <Tooltip\n                        title={\n                            <>\n                                {title}\n                                <Shortcut className=\"ml-2\" keys=\"Space\" />\n                            </>\n                        }>\n                        <Checkbox\n                            aria-label={title}\n                            className=\"!mt-0\"\n                            checked={isSelected}\n                            onClick={handleClick}\n                            // this is necessary to remove console spam from eslint\n                            onChange={() => false}\n                            tabIndex={isCurrentRow ? 0 : -1}\n                        />\n                    </Tooltip>\n                </DisplayCell>\n            );\n        } else {\n            const className = cn('!mt-0', getRadioClassnames());\n\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n                context.row.toggleSelected();\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <button\n                        className={className}\n                        aria-checked={isSelected}\n                        onClick={handleClick}\n                        role=\"radio\"\n                        tabIndex={-1}\n                        type=\"button\">\n                        {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n                    </button>\n                </DisplayCell>\n            );\n        }\n    },\n    function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n        const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n        const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n        // we memo because we don't want the row re-rendering and removing focus from the checkbox\n        // we can't default to the standard comparison because we need currentRow off the table meta\n        // and we don't really care about re-rendering in any other scenario\n        return (\n            newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n            newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n        );\n    }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n    hasDrag: boolean,\n    hasExpansion: boolean\n): DisplayColumnDef<TType, unknown> {\n    const size = hasDrag && hasExpansion ? 22 : 4;\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {\n                '!pr-0.5': hasExpansion,\n                '!pr-3': !hasExpansion,\n            }),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: cn('items-center !justify-end !p-0', { '!pr-0.5': hasExpansion, '!pr-3': !hasExpansion }),\n        },\n        // options\n        enableResizing: false,\n        size,\n        minSize: size,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","_tableMeta$rowSelecti","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","Shortcut","keys","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","hasDrag","hasExpansion","size","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}
+{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    if (context.table.options.enableMultiRowSelection) {\n        const isAllRowsSelected = context.table.getIsAllRowsSelected();\n        const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n        const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n        return (\n            <ColumnHeader {...context}>\n                <Tooltip title={title}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"hover:border-blue !mt-0\"\n                        key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n                        checked={isAllRowsSelected}\n                        indeterminate={isSomeRowsSelected}\n                        onChange={context.table.toggleAllRowsSelected}\n                        tabIndex={-1}\n                    />\n                </Tooltip>\n            </ColumnHeader>\n        );\n    } else {\n        return <ColumnHeader {...context}></ColumnHeader>;\n    }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n    function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n        const { texts } = useLocalization();\n        const { rowIndex } = React.useContext(RowContext);\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n        const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n        const isSelected = context.row.getIsSelected();\n        const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n        if (context.table.options.enableMultiRowSelection) {\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n\n                if (event.shiftKey) {\n                    const [fromIndex, toIndex] = toggleBetween(\n                        tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n                        rowIndex\n                    );\n\n                    context.table\n                        .getRowModel()\n                        .rows.slice(fromIndex, toIndex + 1)\n                        .forEach(row => row.toggleSelected(true));\n                } else {\n                    context.row.toggleSelected();\n                }\n\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <Tooltip\n                        title={\n                            <>\n                                {title}\n                                <Shortcut className=\"ml-2\" keys=\"Space\" />\n                            </>\n                        }>\n                        <Checkbox\n                            aria-label={title}\n                            className=\"!mt-0\"\n                            checked={isSelected}\n                            onClick={handleClick}\n                            // this is necessary to remove console spam from eslint\n                            onChange={() => false}\n                            tabIndex={isCurrentRow ? 0 : -1}\n                        />\n                    </Tooltip>\n                </DisplayCell>\n            );\n        } else {\n            const className = cn('!mt-0', getRadioClassnames());\n\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n                context.row.toggleSelected();\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <button\n                        className={className}\n                        aria-checked={isSelected}\n                        onClick={handleClick}\n                        role=\"radio\"\n                        tabIndex={-1}\n                        type=\"button\">\n                        {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n                    </button>\n                </DisplayCell>\n            );\n        }\n    },\n    function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n        const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n        const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n        // we memo because we don't want the row re-rendering and removing focus from the checkbox\n        // we can't default to the standard comparison because we need currentRow off the table meta\n        // and we don't really care about re-rendering in any other scenario\n        return (\n            newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n            newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n        );\n    }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n    hasDrag: boolean,\n    hasExpansion: boolean\n): DisplayColumnDef<TType, unknown> {\n    const size = hasDrag && hasExpansion ? 22 : 40;\n\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {\n                '!pr-0.5': hasExpansion,\n                '!pr-3': !hasExpansion,\n            }),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: cn('items-center !justify-end !p-0', { '!pr-0.5': hasExpansion, '!pr-3': !hasExpansion }),\n        },\n        // options\n        enableResizing: false,\n        size,\n        minSize: size,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","_tableMeta$rowSelecti","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","Shortcut","keys","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","hasDrag","hasExpansion","size","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/RowHeight.js

@@ -7,7 +7,13 @@ function RowHeight(props) {
     texts
   } = useLocalization();
   const meta = props.table.options.meta;
-  const handleChange = value => meta.rowHeight.setHeight(value);
+  const handleChange = value => {
+    const height = value;
+    meta.rowHeight.setHeight(height);
+    if (height === 'short' && meta.fontSize.size === 'large') {
+      meta.fontSize.setSize('medium');
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
     onChange: handleChange,
     value: meta.rowHeight.height

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/RowHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowHeight.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/RowHeight.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3RowHeight } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\n\ntype RowHeightButtonProps<TType = unknown> = {\n    table: RTable<TType>;\n};\n\nexport function RowHeight<TType = unknown>(props: RowHeightButtonProps<TType>) {\n    const { texts } = useLocalization();\n    const meta = props.table.options.meta as TableMeta<unknown>;\n    const handleChange = (value: RadioGroupItemValue) => meta.rowHeight.setHeight(value as Table3RowHeight);\n\n    return (\n        <Menu.SubMenu>\n            <Menu.RadioGroup onChange={handleChange} value={meta.rowHeight.height}>\n                <Menu.RadioGroup.Item value=\"short\">{texts.table3.rowHeight.sizes.short}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"medium\">{texts.table3.rowHeight.sizes.medium}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"tall\">{texts.table3.rowHeight.sizes.tall}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"extra-tall\">{texts.table3.rowHeight.sizes.extraTall}</Menu.RadioGroup.Item>\n            </Menu.RadioGroup>\n        </Menu.SubMenu>\n    );\n}\n"],"names":["RowHeight","props","texts","useLocalization","meta","table","options","handleChange","value","rowHeight","setHeight","React","Menu","SubMenu","RadioGroup","onChange","height","Item","table3","sizes","short","medium","tall","extraTall"],"mappings":";;;;SAWgBA,SAASA,CAAkBC,KAAkC;EACzE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACF,IAA0B;EAC3D,MAAMG,YAAY,GAAIC,KAA0B,IAAKJ,IAAI,CAACK,SAAS,CAACC,SAAS,CAACF,KAAwB,CAAC;EAEvG,oBACIG,6BAACC,IAAI,CAACC,OAAO,qBACTF,6BAACC,IAAI,CAACE,UAAU;IAACC,QAAQ,EAAER,YAAY;IAAEC,KAAK,EAAEJ,IAAI,CAACK,SAAS,CAACO;kBAC3DL,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAC;KAASN,KAAK,CAACgB,MAAM,CAACT,SAAS,CAACU,KAAK,CAACC,KAAK,CAAwB,eAC/FT,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAC;KAAUN,KAAK,CAACgB,MAAM,CAACT,SAAS,CAACU,KAAK,CAACE,MAAM,CAAwB,eACjGV,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAC;KAAQN,KAAK,CAACgB,MAAM,CAACT,SAAS,CAACU,KAAK,CAACG,IAAI,CAAwB,eAC7FX,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAC;KAAcN,KAAK,CAACgB,MAAM,CAACT,SAAS,CAACU,KAAK,CAACI,SAAS,CAAwB,CAC1F,CACP;AAEvB;;;;"}
+{"version":3,"file":"RowHeight.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/RowHeight.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3RowHeight } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\n\ntype RowHeightButtonProps<TType = unknown> = {\n    table: RTable<TType>;\n};\n\nexport function RowHeight<TType = unknown>(props: RowHeightButtonProps<TType>) {\n    const { texts } = useLocalization();\n    const meta = props.table.options.meta as TableMeta<unknown>;\n    const handleChange = (value: RadioGroupItemValue) => {\n        const height = value as Table3RowHeight;\n\n        meta.rowHeight.setHeight(height);\n\n        if (height === 'short' && meta.fontSize.size === 'large') {\n            meta.fontSize.setSize('medium');\n        }\n    };\n\n    return (\n        <Menu.SubMenu>\n            <Menu.RadioGroup onChange={handleChange} value={meta.rowHeight.height}>\n                <Menu.RadioGroup.Item value=\"short\">{texts.table3.rowHeight.sizes.short}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"medium\">{texts.table3.rowHeight.sizes.medium}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"tall\">{texts.table3.rowHeight.sizes.tall}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"extra-tall\">{texts.table3.rowHeight.sizes.extraTall}</Menu.RadioGroup.Item>\n            </Menu.RadioGroup>\n        </Menu.SubMenu>\n    );\n}\n"],"names":["RowHeight","props","texts","useLocalization","meta","table","options","handleChange","value","height","rowHeight","setHeight","fontSize","size","setSize","React","Menu","SubMenu","RadioGroup","onChange","Item","table3","sizes","short","medium","tall","extraTall"],"mappings":";;;;SAWgBA,SAASA,CAAkBC,KAAkC;EACzE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACF,IAA0B;EAC3D,MAAMG,YAAY,GAAIC,KAA0B;IAC5C,MAAMC,MAAM,GAAGD,KAAwB;IAEvCJ,IAAI,CAACM,SAAS,CAACC,SAAS,CAACF,MAAM,CAAC;IAEhC,IAAIA,MAAM,KAAK,OAAO,IAAIL,IAAI,CAACQ,QAAQ,CAACC,IAAI,KAAK,OAAO,EAAE;MACtDT,IAAI,CAACQ,QAAQ,CAACE,OAAO,CAAC,QAAQ,CAAC;;GAEtC;EAED,oBACIC,6BAACC,IAAI,CAACC,OAAO,qBACTF,6BAACC,IAAI,CAACE,UAAU;IAACC,QAAQ,EAAEZ,YAAY;IAAEC,KAAK,EAAEJ,IAAI,CAACM,SAAS,CAACD;kBAC3DM,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACZ,KAAK,EAAC;KAASN,KAAK,CAACmB,MAAM,CAACX,SAAS,CAACY,KAAK,CAACC,KAAK,CAAwB,eAC/FR,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACZ,KAAK,EAAC;KAAUN,KAAK,CAACmB,MAAM,CAACX,SAAS,CAACY,KAAK,CAACE,MAAM,CAAwB,eACjGT,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACZ,KAAK,EAAC;KAAQN,KAAK,CAACmB,MAAM,CAACX,SAAS,CAACY,KAAK,CAACG,IAAI,CAAwB,eAC7FV,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACZ,KAAK,EAAC;KAAcN,KAAK,CAACmB,MAAM,CAACX,SAAS,CAACY,KAAK,CAACI,SAAS,CAAwB,CAC1F,CACP;AAEvB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js

@@ -29,7 +29,7 @@ function Toolbar(props) {
   }
   const tableMeta = table.options.meta;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 flex flex-shrink flex-grow-0 gap-2",
+    className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2",
     "data-taco": "table3-toolbar"
   }, left, /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto flex-shrink-0 print:hidden"

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { RowHeight } from './RowHeight';\nimport { Search } from './Search';\nimport { Group } from '../../../Group/Group';\nimport { Filters } from './Filter/filters/Filters';\nimport { ColumnSettings } from './ColumnSettings';\nimport { EditButton } from './EditButton';\nimport { PrintButton } from './PrintButton/PrintButton';\nimport { Table3Props } from '../../types';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { IconName } from '../../../Icon/Icon';\nimport { FontSize } from './FontSize';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport type ToolbarProps<TType = unknown> = {\n    left?: JSX.Element;\n    right?: JSX.Element;\n    scrollToIndex: any;\n    table: RTable<TType>;\n    tableProps: Table3Props<TType>;\n    total: number;\n};\nexport function Toolbar<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, scrollToIndex, table, tableProps, total } = props;\n    const { texts } = useLocalization();\n\n    if (!isToolbarVisible(props)) {\n        return null;\n    }\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return (\n        <div className=\"mb-4 flex flex-shrink flex-grow-0 gap-2\" data-taco=\"table3-toolbar\">\n            {left}\n            <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n                {tableMeta.editing.isEnabled ? <EditButton table={table} /> : null}\n                {table.options.enableColumnFilters ? <Filters table={table} total={total} /> : null}\n                {table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? <ColumnSettings table={table} /> : null}\n                {tableMeta.printing.isEnabled ? <PrintButton table={table} tableProps={tableProps} /> : null}\n                {right}\n                {isMoreVisible(props) ? (\n                    <Tooltip title={texts.table3.otherOptions.tooltip}>\n                        <IconButton\n                            aria-label={texts.table3.otherOptions.tooltip}\n                            icon=\"more\"\n                            menu={menuProps => (\n                                <Menu {...menuProps}>\n                                    <Menu.Content align=\"end\">\n                                        {tableMeta.rowHeight.isEnabled ? (\n                                            <Menu.Item\n                                                icon={`height-${tableMeta.rowHeight.height}` as IconName}\n                                                subMenu={() => <RowHeight table={table} />}>\n                                                {texts.table3.rowHeight.tooltip}\n                                            </Menu.Item>\n                                        ) : null}\n                                        {tableMeta.fontSize.isEnabled ? (\n                                            <Menu.Item icon=\"font-size\" subMenu={() => <FontSize table={table} />}>\n                                                {texts.table3.fontSize.tooltip}\n                                            </Menu.Item>\n                                        ) : null}\n                                    </Menu.Content>\n                                </Menu>\n                            )}\n                        />\n                    </Tooltip>\n                ) : null}\n                {tableMeta.search.isEnabled ? <Search scrollToIndex={scrollToIndex} table={table} /> : null}\n            </Group>\n        </div>\n    );\n}\n\nfunction isMoreVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled;\n}\n\nfunction isToolbarVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const enableSettingsButton = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n    const hasInternalToolbar =\n        enableSettingsButton ||\n        tableMeta.editing.isEnabled ||\n        tableMeta.printing.isEnabled ||\n        table.options.enableColumnFilters ||\n        tableMeta.fontSize.isEnabled ||\n        tableMeta.rowHeight.isEnabled ||\n        tableMeta.search.isEnabled;\n\n    return hasInternalToolbar || !!left || !!right;\n}\n"],"names":["Toolbar","props","left","right","scrollToIndex","table","tableProps","total","texts","useLocalization","isToolbarVisible","tableMeta","options","meta","React","className","Group","editing","isEnabled","EditButton","enableColumnFilters","Filters","enableHiding","columnOrdering","ColumnSettings","printing","PrintButton","isMoreVisible","Tooltip","title","table3","otherOptions","tooltip","IconButton","icon","menu","menuProps","Menu","Content","align","rowHeight","Item","height","subMenu","RowHeight","fontSize","FontSize","search","Search","enableSettingsButton","hasInternalToolbar"],"mappings":";;;;;;;;;;;;;;SAyBgBA,OAAOA,CAAkBC,KAA0B;EAC/D,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC,aAAa;IAAEC,KAAK;IAAEC,UAAU;IAAEC;GAAO,GAAGN,KAAK;EACtE,MAAM;IAAEO;GAAO,GAAGC,eAAe,EAAE;EAEnC,IAAI,CAACC,gBAAgB,CAACT,KAAK,CAAC,EAAE;IAC1B,OAAO,IAAI;;EAGf,MAAMU,SAAS,GAAGN,KAAK,CAACO,OAAO,CAACC,IAAwB;EAExD,oBACIC;IAAKC,SAAS,EAAC,yCAAyC;iBAAW;KAC9Db,IAAI,eACLY,6BAACE,KAAK;IAACD,SAAS,EAAC;KACZJ,SAAS,CAACM,OAAO,CAACC,SAAS,gBAAGJ,6BAACK,UAAU;IAACd,KAAK,EAAEA;IAAS,GAAG,IAAI,EACjEA,KAAK,CAACO,OAAO,CAACQ,mBAAmB,gBAAGN,6BAACO,OAAO;IAAChB,KAAK,EAAEA,KAAK;IAAEE,KAAK,EAAEA;IAAS,GAAG,IAAI,EAClFF,KAAK,CAACO,OAAO,CAACU,YAAY,IAAIX,SAAS,CAACY,cAAc,CAACL,SAAS,gBAAGJ,6BAACU,cAAc;IAACnB,KAAK,EAAEA;IAAS,GAAG,IAAI,EAC1GM,SAAS,CAACc,QAAQ,CAACP,SAAS,gBAAGJ,6BAACY,WAAW;IAACrB,KAAK,EAAEA,KAAK;IAAEC,UAAU,EAAEA;IAAc,GAAG,IAAI,EAC3FH,KAAK,EACLwB,aAAa,CAAC1B,KAAK,CAAC,gBACjBa,6BAACc,OAAO;IAACC,KAAK,EAAErB,KAAK,CAACsB,MAAM,CAACC,YAAY,CAACC;kBACtClB,6BAACmB,UAAU;kBACKzB,KAAK,CAACsB,MAAM,CAACC,YAAY,CAACC,OAAO;IAC7CE,IAAI,EAAC,MAAM;IACXC,IAAI,EAAEC,SAAS,iBACXtB,6BAACuB,IAAI,oBAAKD,SAAS,gBACftB,6BAACuB,IAAI,CAACC,OAAO;MAACC,KAAK,EAAC;OACf5B,SAAS,CAAC6B,SAAS,CAACtB,SAAS,gBAC1BJ,6BAACuB,IAAI,CAACI,IAAI;MACNP,IAAI,YAAYvB,SAAS,CAAC6B,SAAS,CAACE,QAAoB;MACxDC,OAAO,EAAEA,mBAAM7B,6BAAC8B,SAAS;QAACvC,KAAK,EAAEA;;OAChCG,KAAK,CAACsB,MAAM,CAACU,SAAS,CAACR,OAAO,CACvB,GACZ,IAAI,EACPrB,SAAS,CAACkC,QAAQ,CAAC3B,SAAS,gBACzBJ,6BAACuB,IAAI,CAACI,IAAI;MAACP,IAAI,EAAC,WAAW;MAACS,OAAO,EAAEA,mBAAM7B,6BAACgC,QAAQ;QAACzC,KAAK,EAAEA;;OACvDG,KAAK,CAACsB,MAAM,CAACe,QAAQ,CAACb,OAAO,CACtB,GACZ,IAAI,CACG;IAGzB,CACI,GACV,IAAI,EACPrB,SAAS,CAACoC,MAAM,CAAC7B,SAAS,gBAAGJ,6BAACkC,MAAM;IAAC5C,aAAa,EAAEA,aAAa;IAAEC,KAAK,EAAEA;IAAS,GAAG,IAAI,CACvF,CACN;AAEd;AAEA,SAASsB,aAAaA,CAAkB1B,KAA0B;EAC9D,MAAM;IAAEI;GAAO,GAAGJ,KAAK;EACvB,MAAMU,SAAS,GAAGN,KAAK,CAACO,OAAO,CAACC,IAAwB;EAExD,OAAOF,SAAS,CAACkC,QAAQ,CAAC3B,SAAS,IAAIP,SAAS,CAAC6B,SAAS,CAACtB,SAAS;AACxE;AAEA,SAASR,gBAAgBA,CAAkBT,KAA0B;EACjE,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEE;GAAO,GAAGJ,KAAK;EACpC,MAAMU,SAAS,GAAGN,KAAK,CAACO,OAAO,CAACC,IAAwB;EAExD,MAAMoC,oBAAoB,GAAG5C,KAAK,CAACO,OAAO,CAACU,YAAY,IAAIX,SAAS,CAACY,cAAc,CAACL,SAAS;EAC7F,MAAMgC,kBAAkB,GACpBD,oBAAoB,IACpBtC,SAAS,CAACM,OAAO,CAACC,SAAS,IAC3BP,SAAS,CAACc,QAAQ,CAACP,SAAS,IAC5Bb,KAAK,CAACO,OAAO,CAACQ,mBAAmB,IACjCT,SAAS,CAACkC,QAAQ,CAAC3B,SAAS,IAC5BP,SAAS,CAAC6B,SAAS,CAACtB,SAAS,IAC7BP,SAAS,CAACoC,MAAM,CAAC7B,SAAS;EAE9B,OAAOgC,kBAAkB,IAAI,CAAC,CAAChD,IAAI,IAAI,CAAC,CAACC,KAAK;AAClD;;;;"}
+{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { RowHeight } from './RowHeight';\nimport { Search } from './Search';\nimport { Group } from '../../../Group/Group';\nimport { Filters } from './Filter/filters/Filters';\nimport { ColumnSettings } from './ColumnSettings';\nimport { EditButton } from './EditButton';\nimport { PrintButton } from './PrintButton/PrintButton';\nimport { Table3Props } from '../../types';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { IconName } from '../../../Icon/Icon';\nimport { FontSize } from './FontSize';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport type ToolbarProps<TType = unknown> = {\n    left?: JSX.Element;\n    right?: JSX.Element;\n    scrollToIndex: any;\n    table: RTable<TType>;\n    tableProps: Table3Props<TType>;\n    total: number;\n};\nexport function Toolbar<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, scrollToIndex, table, tableProps, total } = props;\n    const { texts } = useLocalization();\n\n    if (!isToolbarVisible(props)) {\n        return null;\n    }\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return (\n        <div className=\"mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2\" data-taco=\"table3-toolbar\">\n            {left}\n            <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n                {tableMeta.editing.isEnabled ? <EditButton table={table} /> : null}\n                {table.options.enableColumnFilters ? <Filters table={table} total={total} /> : null}\n                {table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? <ColumnSettings table={table} /> : null}\n                {tableMeta.printing.isEnabled ? <PrintButton table={table} tableProps={tableProps} /> : null}\n                {right}\n                {isMoreVisible(props) ? (\n                    <Tooltip title={texts.table3.otherOptions.tooltip}>\n                        <IconButton\n                            aria-label={texts.table3.otherOptions.tooltip}\n                            icon=\"more\"\n                            menu={menuProps => (\n                                <Menu {...menuProps}>\n                                    <Menu.Content align=\"end\">\n                                        {tableMeta.rowHeight.isEnabled ? (\n                                            <Menu.Item\n                                                icon={`height-${tableMeta.rowHeight.height}` as IconName}\n                                                subMenu={() => <RowHeight table={table} />}>\n                                                {texts.table3.rowHeight.tooltip}\n                                            </Menu.Item>\n                                        ) : null}\n                                        {tableMeta.fontSize.isEnabled ? (\n                                            <Menu.Item icon=\"font-size\" subMenu={() => <FontSize table={table} />}>\n                                                {texts.table3.fontSize.tooltip}\n                                            </Menu.Item>\n                                        ) : null}\n                                    </Menu.Content>\n                                </Menu>\n                            )}\n                        />\n                    </Tooltip>\n                ) : null}\n                {tableMeta.search.isEnabled ? <Search scrollToIndex={scrollToIndex} table={table} /> : null}\n            </Group>\n        </div>\n    );\n}\n\nfunction isMoreVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled;\n}\n\nfunction isToolbarVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const enableSettingsButton = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n    const hasInternalToolbar =\n        enableSettingsButton ||\n        tableMeta.editing.isEnabled ||\n        tableMeta.printing.isEnabled ||\n        table.options.enableColumnFilters ||\n        tableMeta.fontSize.isEnabled ||\n        tableMeta.rowHeight.isEnabled ||\n        tableMeta.search.isEnabled;\n\n    return hasInternalToolbar || !!left || !!right;\n}\n"],"names":["Toolbar","props","left","right","scrollToIndex","table","tableProps","total","texts","useLocalization","isToolbarVisible","tableMeta","options","meta","React","className","Group","editing","isEnabled","EditButton","enableColumnFilters","Filters","enableHiding","columnOrdering","ColumnSettings","printing","PrintButton","isMoreVisible","Tooltip","title","table3","otherOptions","tooltip","IconButton","icon","menu","menuProps","Menu","Content","align","rowHeight","Item","height","subMenu","RowHeight","fontSize","FontSize","search","Search","enableSettingsButton","hasInternalToolbar"],"mappings":"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"}

package/dist/taco.cjs.development.js

@@ -8983,7 +8983,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
-  const settingsRef = React__default.useRef(null);
+  const containerRef = React__default.useRef(null);
   const [focused, setFocused] = React__default.useState(false);
   const {
     texts
@@ -8998,8 +8998,8 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
   });
   const handleBlur = event => {
-    var _settingsRef$current, _attributes$onBlur;
-    if (settingsRef.current && (settingsRef.current === event.relatedTarget || (_settingsRef$current = settingsRef.current) !== null && _settingsRef$current !== void 0 && _settingsRef$current.contains(event.relatedTarget))) {
+    var _containerRef$current, _attributes$onBlur;
+    if (containerRef.current && (containerRef.current === event.relatedTarget || (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
       return;
     }
     setFocused(false);
@@ -9090,9 +9090,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       }
     });
   }
-  const className = cn('peer !pl-7', hasFind ? {
-    '!w-48': !value && !focused,
-    '!w-72': value || focused
+  const className = cn('!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus', hasFind ? {
+    '!w-48': !value,
+    '!w-72': value
   } : '!w-48', {
     '!wcag-blue-100': isActive
   }, props.className);
@@ -9120,26 +9120,19 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     value: value !== null && value !== void 0 ? value : ''
   }));
   if (settingsContent) {
-    const handleSettingsBlur = event => {
-      if (event.currentTarget.contains(event.relatedTarget) || event.currentTarget.contains(event.target)) {
-        return;
-      }
-      setFocused(false);
-    };
+    const settingsClassname = cn('border-grey-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]))]');
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cn('relative', {
-        "[&_[data-taco='input-container']]:z-20": focused
-      }),
-      onBlur: handleSettingsBlur,
-      ref: settingsRef
-    }, input, focused ? /*#__PURE__*/React__default.createElement("div", {
-      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",
+      className: "group relative z-10 [&_[data-taco='input-container']]:z-10",
+      ref: containerRef
+    }, input, /*#__PURE__*/React__default.createElement("div", {
+      className: settingsClassname,
       onClickCapture: () => {
         var _internalRef$current5;
         return (_internalRef$current5 = internalRef.current) === null || _internalRef$current5 === void 0 ? void 0 : _internalRef$current5.focus();
       },
+      // tab index is important, it lets the element show as a relatedTarget on event handlers
       tabIndex: -1
-    }, settingsContent) : null);
+    }, settingsContent));
   }
   return input;
 });
@@ -18081,7 +18074,7 @@ const Cell$4 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   return newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex && newProps.row.getIsSelected() !== oldProps.row.getIsSelected();
 });
 function createRowSelectionColumn$1(hasDrag, hasExpansion) {
-  const size = hasDrag && hasExpansion ? 22 : 4;
+  const size = hasDrag && hasExpansion ? 22 : 40;
   return {
     id: COLUMN_ID$2,
     header: Header$3,
@@ -19158,7 +19151,13 @@ function RowHeight(props) {
     texts
   } = useLocalization();
   const meta = props.table.options.meta;
-  const handleChange = value => meta.rowHeight.setHeight(value);
+  const handleChange = value => {
+    const height = value;
+    meta.rowHeight.setHeight(height);
+    if (height === 'short' && meta.fontSize.size === 'large') {
+      meta.fontSize.setSize('medium');
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
     onChange: handleChange,
     value: meta.rowHeight.height
@@ -20379,7 +20378,7 @@ function Toolbar(props) {
   }
   const tableMeta = table.options.meta;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 flex flex-shrink flex-grow-0 gap-2",
+    className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2",
     "data-taco": "table3-toolbar"
   }, left, /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto flex-shrink-0 print:hidden"