@economic/taco 2.7.5 → 2.8.1

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\n\nexport type EditingControlProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    column: RTColumn<TType, unknown>;\n    data: TType;\n    initialValue: any;\n    value: any;\n    onBlur: (event: React.FocusEvent) => void;\n    onFocus: (event: React.FocusEvent) => void;\n    onChange: (value: any) => void;\n    ref: React.Ref<HTMLElement>;\n    table: RTTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    cell: RTCell<TType, unknown>;\n    error?: string;\n    tabIndex?: number;\n    isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n            return;\n        }\n    };\n\n    const handleDatepickerChange = event => {\n        // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n        // so adding additional check here to prevent adding change to the edititng state.\n        const originalDate = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","target","readOnly","key","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","toggleEditing","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
+{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\n\nexport type EditingControlProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    column: RTColumn<TType, unknown>;\n    data: TType;\n    initialValue: any;\n    value: any;\n    onBlur: (event: React.FocusEvent) => void;\n    onFocus: (event: React.FocusEvent) => void;\n    onChange: (value: any) => void;\n    ref: React.Ref<HTMLElement>;\n    table: RTTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    cell: RTCell<TType, unknown>;\n    error?: string;\n    tabIndex?: number;\n    isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // For some reason keydown event handler is not propogated to the table when input or other control element is\n        // in focus so we need to check for shortcut that toggles the editing.\n        if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n            tableMeta.editing.toggleEditing(false);\n            return;\n        }\n\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // Prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        // Revert to initial value if escape was pressed\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n        }\n    };\n\n    const handleDatepickerChange = event => {\n        // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n        // so adding additional check here to prevent adding change to the edititng state.\n        const originalDate = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js

@@ -2,10 +2,13 @@ import React__default from 'react';
 import { useLocalization } from '../../../../Provider/Localization.js';
 
 function Summary(props) {
+  var _table$getState$colum;
   const {
+    currentLength,
     length,
     table
   } = props;
+  const tableMeta = table.options.meta;
   const {
     locale,
     texts
@@ -16,13 +19,20 @@ function Summary(props) {
   const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;
   if (rowsSelectedLength > 0) {
     label = texts.table3.footer.summary.selected;
-    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, length));
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+  } else if ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
+  // filtered data
+  !!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults // search with hide enabled
+  ) {
+    label = texts.table3.footer.summary.records;
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, currentLength), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
   } else {
     label = texts.table3.footer.summary.records;
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]"
+    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]",
+    "data-taco": "table2-footer-summary"
   }, label, "\u00A0", count);
 }
 

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Summary.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\n\nexport type FooterSummaryProps<TType = unknown> = {\n    length: number;\n    table: RTable<TType>;\n};\n\nexport function Summary<TType = unknown>(props: FooterSummaryProps<TType>) {\n    const { length, table } = props;\n    const { locale, texts } = useLocalization();\n\n    let label;\n    let count;\n\n    // row selection\n    const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;\n\n    if (rowsSelectedLength > 0) {\n        label = texts.table3.footer.summary.selected;\n        count = (\n            <>\n                <strong>{new Intl.NumberFormat(locale).format(rowsSelectedLength)}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{length}</strong>\n            </>\n        );\n    } else {\n        label = texts.table3.footer.summary.records;\n        count = <strong>{new Intl.NumberFormat(locale).format(length)}</strong>;\n    }\n\n    return (\n        <div className=\"sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]\">\n            {label}&nbsp;{count}\n        </div>\n    );\n}\n"],"names":["Summary","props","length","table","locale","texts","useLocalization","label","count","rowsSelectedLength","getIsAllRowsSelected","getSelectedRowModel","rows","table3","footer","summary","selected","React","Intl","NumberFormat","format","records","className"],"mappings":";;;SASgBA,OAAOA,CAAkBC,KAAgC;EACrE,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGF,KAAK;EAC/B,MAAM;IAAEG,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAE3C,IAAIC,KAAK;EACT,IAAIC,KAAK;;EAGT,MAAMC,kBAAkB,GAAGN,KAAK,CAACO,oBAAoB,EAAE,GAAGR,MAAM,GAAGC,KAAK,CAACQ,mBAAmB,EAAE,CAACC,IAAI,CAACV,MAAM;EAE1G,IAAIO,kBAAkB,GAAG,CAAC,EAAE;IACxBF,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACC,QAAQ;IAC5CR,KAAK,gBACDS,yEACIA,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACX,kBAAkB,CAAC,CAAU,YAC1EJ,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAASf,MAAM,CAAU,CAEhC;GACJ,MAAM;IACHK,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACM,OAAO;IAC3Cb,KAAK,gBAAGS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAAClB,MAAM,CAAC,CAAU;;EAG3E,oBACIe;IAAKK,SAAS,EAAC;KACVf,KAAK,YAAQC,KAAK,CACjB;AAEd;;;;"}
+{"version":3,"file":"Summary.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Summary.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\n\nexport type FooterSummaryProps<TType = unknown> = {\n    currentLength: number;\n    length: number;\n    table: RTable<TType>;\n};\n\nexport function Summary<TType = unknown>(props: FooterSummaryProps<TType>) {\n    const { currentLength, length, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { locale, texts } = useLocalization();\n\n    let label;\n    let count;\n\n    // row selection\n    const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;\n\n    if (rowsSelectedLength > 0) {\n        label = texts.table3.footer.summary.selected;\n        count = (\n            <>\n                <strong>{new Intl.NumberFormat(locale).format(rowsSelectedLength)}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else if (\n        table.getState().columnFilters?.length || // filtered data\n        (!!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults) // search with hide enabled\n    ) {\n        label = texts.table3.footer.summary.records;\n        count = (\n            <>\n                <strong>{currentLength}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else {\n        label = texts.table3.footer.summary.records;\n        count = <strong>{new Intl.NumberFormat(locale).format(length)}</strong>;\n    }\n\n    return (\n        <div\n            className=\"sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]\"\n            data-taco=\"table2-footer-summary\">\n            {label}&nbsp;{count}\n        </div>\n    );\n}\n"],"names":["Summary","props","currentLength","length","table","tableMeta","options","meta","locale","texts","useLocalization","label","count","rowsSelectedLength","getIsAllRowsSelected","getSelectedRowModel","rows","table3","footer","summary","selected","React","Intl","NumberFormat","format","_table$getState$colum","getState","columnFilters","globalFilter","search","excludeUnmatchedResults","records","className"],"mappings":";;;SAUgBA,OAAOA,CAAkBC,KAAgC;;EACrE,MAAM;IAAEC,aAAa;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EAC9C,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAwB;EACxD,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAE3C,IAAIC,KAAK;EACT,IAAIC,KAAK;;EAGT,MAAMC,kBAAkB,GAAGT,KAAK,CAACU,oBAAoB,EAAE,GAAGX,MAAM,GAAGC,KAAK,CAACW,mBAAmB,EAAE,CAACC,IAAI,CAACb,MAAM;EAE1G,IAAIU,kBAAkB,GAAG,CAAC,EAAE;IACxBF,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACC,QAAQ;IAC5CR,KAAK,gBACDS,yEACIA,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACX,kBAAkB,CAAC,CAAU,YAC1EJ,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM,IACH,CAAAsB,qBAAA,GAAArB,KAAK,CAACsB,QAAQ,EAAE,CAACC,aAAa,cAAAF,qBAAA,eAA9BA,qBAAA,CAAgCtB,MAAM;;EACrC,CAAC,CAACC,KAAK,CAACsB,QAAQ,EAAE,CAACE,YAAY,IAAIvB,SAAS,CAACwB,MAAM,CAACC,uBAAwB;IAC/E;IACEnB,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3CnB,KAAK,gBACDS,yEACIA,6CAASnB,aAAa,CAAU,YAC/BO,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM;IACHQ,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3CnB,KAAK,gBAAGS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU;;EAG3E,oBACIkB;IACIW,SAAS,EAAC,gJAAgJ;iBAChJ;KACTrB,KAAK,YAAQC,KAAK,CACjB;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js

@@ -121,7 +121,10 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   }) : null, hasMenu ? /*#__PURE__*/React__default.createElement(Menu, {
     canFreeze: canFreeze,
     canHide: canHide,
-    className: "ml-auto hidden group-hover/column:flex aria-expanded:!flex",
+    className: cn('hidden group-hover/column:flex aria-expanded:!flex', {
+      'ml-auto': align !== 'right',
+      'ml-2': align === 'right'
+    }),
     index: index,
     menu: meta.menu,
     onGoto: handleGoto,

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, scrollToIndex, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const canSort = column.getCanSort();\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const hasGoto = isGotoAvailable(table, header);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    const handleGoto = React.useMemo(() => {\n        if (hasGoto) {\n            return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n                query: string\n            ) => Promise<number>;\n        }\n\n        return undefined;\n    }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n    const memoedProps = {\n        align: columnMeta.align,\n        canFreeze: tableMeta.columnFreezing.isEnabled,\n        canHide: column.getCanHide(),\n        canResize: column.getCanResize(),\n        canSort,\n        children: children ?? columnMeta.header,\n        hasMenu: isMenuAvailable<TType>(table, header),\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header, table),\n        isResizing: column.getIsResizing(),\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort as (event: unknown) => void,\n        scrollToIndex,\n        sortDirection: column.getIsSorted(),\n        table,\n    };\n\n    return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n    align?: Table3ColumnAlignment;\n    canFreeze: boolean;\n    canHide: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    isResizing: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n    onGoto?: (query: string) => Promise<number>;\n    onHide: (event: unknown) => void;\n    onResize: (event: unknown) => void;\n    onSort: (event: unknown) => void;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: false | Table3SortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n    const {\n        align,\n        children,\n        canFreeze,\n        canHide,\n        canResize,\n        canSort,\n        hasMenu,\n        id,\n        index,\n        isFrozen,\n        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        {\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': canSort || canResize || hasMenu,\n            '!pointer-events-all !bg-grey-100': isResizing,\n            // z-indexes\n            'z-10 hover:z-20': !isFrozen && !isResizing,\n            'z-20': !isFrozen && isResizing,\n            '!z-30': isFrozen,\n            '!z-40': isFrozen && isResizing,\n        },\n        meta.headerClassName\n    );\n\n    const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (internalRef && length) {\n            // the actions column size gets set by the column itself\n            if (isInternalColumn(id)) {\n                return;\n            }\n\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [id]: internalRef.getBoundingClientRect().width,\n            }));\n        }\n    }, [internalRef, length]);\n\n    if (table.options.debugAll) {\n        console.log('header render', id);\n    }\n\n    return (\n        <div\n            {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            role=\"columnheader\"\n            ref={setInternalRef}>\n            {isInternalColumn(id) ? (\n                children\n            ) : (\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {canSort ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <Menu\n                    canFreeze={canFreeze}\n                    canHide={canHide}\n                    className=\"ml-auto hidden group-hover/column:flex aria-expanded:!flex\"\n                    index={index}\n                    menu={meta.menu}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    scrollToIndex={scrollToIndex}\n                    table={table}\n                />\n            ) : null}\n            {canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n"],"names":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","isInternalColumn","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","Tooltip","title","String","_meta$tooltip","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, scrollToIndex, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const canSort = column.getCanSort();\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const hasGoto = isGotoAvailable(table, header);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    const handleGoto = React.useMemo(() => {\n        if (hasGoto) {\n            return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n                query: string\n            ) => Promise<number>;\n        }\n\n        return undefined;\n    }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n    const memoedProps = {\n        align: columnMeta.align,\n        canFreeze: tableMeta.columnFreezing.isEnabled,\n        canHide: column.getCanHide(),\n        canResize: column.getCanResize(),\n        canSort,\n        children: children ?? columnMeta.header,\n        hasMenu: isMenuAvailable<TType>(table, header),\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header, table),\n        isResizing: column.getIsResizing(),\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort as (event: unknown) => void,\n        scrollToIndex,\n        sortDirection: column.getIsSorted(),\n        table,\n    };\n\n    return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n    align?: Table3ColumnAlignment;\n    canFreeze: boolean;\n    canHide: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    isResizing: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n    onGoto?: (query: string) => Promise<number>;\n    onHide: (event: unknown) => void;\n    onResize: (event: unknown) => void;\n    onSort: (event: unknown) => void;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: false | Table3SortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n    const {\n        align,\n        children,\n        canFreeze,\n        canHide,\n        canResize,\n        canSort,\n        hasMenu,\n        id,\n        index,\n        isFrozen,\n        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        {\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': canSort || canResize || hasMenu,\n            '!pointer-events-all !bg-grey-100': isResizing,\n            // z-indexes\n            'z-10 hover:z-20': !isFrozen && !isResizing,\n            'z-20': !isFrozen && isResizing,\n            '!z-30': isFrozen,\n            '!z-40': isFrozen && isResizing,\n        },\n        meta.headerClassName\n    );\n\n    const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (internalRef && length) {\n            // the actions column size gets set by the column itself\n            if (isInternalColumn(id)) {\n                return;\n            }\n\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [id]: internalRef.getBoundingClientRect().width,\n            }));\n        }\n    }, [internalRef, length]);\n\n    if (table.options.debugAll) {\n        console.log('header render', id);\n    }\n\n    return (\n        <div\n            {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            role=\"columnheader\"\n            ref={setInternalRef}>\n            {isInternalColumn(id) ? (\n                children\n            ) : (\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {canSort ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <Menu\n                    canFreeze={canFreeze}\n                    canHide={canHide}\n                    className={cn('hidden group-hover/column:flex aria-expanded:!flex', {\n                        'ml-auto': align !== 'right',\n                        'ml-2': align === 'right',\n                    })}\n                    index={index}\n                    menu={meta.menu}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    scrollToIndex={scrollToIndex}\n                    table={table}\n                />\n            ) : null}\n            {canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n"],"names":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","isInternalColumn","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","Tooltip","title","String","_meta$tooltip","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 import React__default from 'react';
 import cn from 'classnames';
 import { Icon } from '../../../Icon/Icon.js';
-import { useGlobalKeyDown } from '../../../../hooks/useGlobalKeyDown.js';
 import { useLocalization } from '../../../Provider/Localization.js';
 import { Button } from '../../../Button/Button.js';
 import { Shortcut } from '../../../Shortcut/Shortcut.js';
@@ -15,14 +14,6 @@ function EditButton(props) {
     '!wcag-blue-100': tableMeta.editing.isEditing
   });
   const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  useGlobalKeyDown({
-    key: 'e',
-    meta: true,
-    shift: false
-  }, event => {
-    event.preventDefault();
-    tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  });
   return /*#__PURE__*/React__default.createElement(Button, {
     "aria-pressed": tableMeta.editing.isEditing,
     className: className,

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

@@ -1 +1 @@
-{"version":3,"file":"EditButton.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/EditButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Icon } from '../../../Icon/Icon';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { useGlobalKeyDown } from '../../../../hooks/useGlobalKeyDown';\nimport { Shortcut } from '../../../Shortcut/Shortcut';\n\ntype EditButtonProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n    table: RTable<TType>;\n};\n\nexport function EditButton<TType = unknown>(props: EditButtonProps<TType>) {\n    const { texts } = useLocalization();\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    const className = cn({\n        '!wcag-blue-100': tableMeta.editing.isEditing,\n    });\n    const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);\n\n    useGlobalKeyDown({ key: 'e', meta: true, shift: false }, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);\n    });\n\n    return (\n        <Button\n            aria-pressed={tableMeta.editing.isEditing}\n            className={className}\n            onClick={handleClick}\n            tooltip={\n                <>\n                    {texts.table3.editing.buttons.edit.tooltip}\n                    <Shortcut className=\"ml-2\" keys={{ key: 'e', meta: true, shift: false }} />\n                </>\n            }>\n            <Icon aria-hidden name=\"edit\" />\n            {texts.table3.editing.buttons.edit.text}\n        </Button>\n    );\n}\n"],"names":["EditButton","props","texts","useLocalization","tableMeta","table","options","meta","className","cn","editing","isEditing","handleClick","toggleEditing","useGlobalKeyDown","key","shift","event","preventDefault","React","Button","onClick","tooltip","table3","buttons","edit","Shortcut","keys","Icon","name","text"],"mappings":";;;;;;;;SAagBA,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACC,IAAwB;EAC9D,MAAMC,SAAS,GAAGC,EAAE,CAAC;IACjB,gBAAgB,EAAEL,SAAS,CAACM,OAAO,CAACC;GACvC,CAAC;EACF,MAAMC,WAAW,GAAGA,MAAMR,SAAS,CAACM,OAAO,CAACG,aAAa,CAAC,CAACT,SAAS,CAACM,OAAO,CAACC,SAAS,CAAC;EAEvFG,gBAAgB,CAAC;IAAEC,GAAG,EAAE,GAAG;IAAER,IAAI,EAAE,IAAI;IAAES,KAAK,EAAE;GAAO,EAAGC,KAAoB;IAC1EA,KAAK,CAACC,cAAc,EAAE;IACtBd,SAAS,CAACM,OAAO,CAACG,aAAa,CAAC,CAACT,SAAS,CAACM,OAAO,CAACC,SAAS,CAAC;GAChE,CAAC;EAEF,oBACIQ,6BAACC,MAAM;oBACWhB,SAAS,CAACM,OAAO,CAACC,SAAS;IACzCH,SAAS,EAAEA,SAAS;IACpBa,OAAO,EAAET,WAAW;IACpBU,OAAO,eACHH,4DACKjB,KAAK,CAACqB,MAAM,CAACb,OAAO,CAACc,OAAO,CAACC,IAAI,CAACH,OAAO,eAC1CH,6BAACO,QAAQ;MAAClB,SAAS,EAAC,MAAM;MAACmB,IAAI,EAAE;QAAEZ,GAAG,EAAE,GAAG;QAAER,IAAI,EAAE,IAAI;QAAES,KAAK,EAAE;;MAAW;kBAGnFG,6BAACS,IAAI;;IAAaC,IAAI,EAAC;IAAS,EAC/B3B,KAAK,CAACqB,MAAM,CAACb,OAAO,CAACc,OAAO,CAACC,IAAI,CAACK,IAAI,CAClC;AAEjB;;;;"}
+{"version":3,"file":"EditButton.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/EditButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Icon } from '../../../Icon/Icon';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Shortcut } from '../../../Shortcut/Shortcut';\n\ntype EditButtonProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n    table: RTable<TType>;\n};\n\nexport function EditButton<TType = unknown>(props: EditButtonProps<TType>) {\n    const { texts } = useLocalization();\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    const className = cn({\n        '!wcag-blue-100': tableMeta.editing.isEditing,\n    });\n    const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);\n\n    return (\n        <Button\n            aria-pressed={tableMeta.editing.isEditing}\n            className={className}\n            onClick={handleClick}\n            tooltip={\n                <>\n                    {texts.table3.editing.buttons.edit.tooltip}\n                    <Shortcut className=\"ml-2\" keys={{ key: 'e', meta: true, shift: false }} />\n                </>\n            }>\n            <Icon aria-hidden name=\"edit\" />\n            {texts.table3.editing.buttons.edit.text}\n        </Button>\n    );\n}\n"],"names":["EditButton","props","texts","useLocalization","tableMeta","table","options","meta","className","cn","editing","isEditing","handleClick","toggleEditing","React","Button","onClick","tooltip","table3","buttons","edit","Shortcut","keys","key","shift","Icon","name","text"],"mappings":";;;;;;;SAYgBA,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACC,IAAwB;EAC9D,MAAMC,SAAS,GAAGC,EAAE,CAAC;IACjB,gBAAgB,EAAEL,SAAS,CAACM,OAAO,CAACC;GACvC,CAAC;EACF,MAAMC,WAAW,GAAGA,MAAMR,SAAS,CAACM,OAAO,CAACG,aAAa,CAAC,CAACT,SAAS,CAACM,OAAO,CAACC,SAAS,CAAC;EAEvF,oBACIG,6BAACC,MAAM;oBACWX,SAAS,CAACM,OAAO,CAACC,SAAS;IACzCH,SAAS,EAAEA,SAAS;IACpBQ,OAAO,EAAEJ,WAAW;IACpBK,OAAO,eACHH,4DACKZ,KAAK,CAACgB,MAAM,CAACR,OAAO,CAACS,OAAO,CAACC,IAAI,CAACH,OAAO,eAC1CH,6BAACO,QAAQ;MAACb,SAAS,EAAC,MAAM;MAACc,IAAI,EAAE;QAAEC,GAAG,EAAE,GAAG;QAAEhB,IAAI,EAAE,IAAI;QAAEiB,KAAK,EAAE;;MAAW;kBAGnFV,6BAACW,IAAI;;IAAaC,IAAI,EAAC;IAAS,EAC/BxB,KAAK,CAACgB,MAAM,CAACR,OAAO,CAACS,OAAO,CAACC,IAAI,CAACO,IAAI,CAClC;AAEjB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js

@@ -22,6 +22,7 @@ function Filters(props) {
     table
   } = props;
   const {
+    locale,
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
@@ -102,7 +103,7 @@ function Filters(props) {
       className: "mb-0 inline-flex"
     }, texts.table3.filters.button), /*#__PURE__*/React__default.createElement("p", {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
-    }, texts.table3.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(total))))), /*#__PURE__*/React__default.createElement("div", {
+    }, texts.table3.filters.total.replace('[CURRENT]', new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', new Intl.NumberFormat(locale).format(total))))), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
     }, filters.map((filter, index) => /*#__PURE__*/React__default.createElement(Filter, {
       key: `filter_${index}`,

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filters.js","sources":["../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/Filters.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTable, Column as RTColumn } from '@tanstack/react-table';\nimport { Button } from '../../../../../Button/Button';\nimport { Icon } from '../../../../../Icon/Icon';\nimport { Popover } from '../../../../../Popover/Popover';\nimport { Table3FilterValue, Table3FilterComparator, Table3Filter } from '../../../../types';\nimport { Shortcut } from '../../../../../Shortcut/Shortcut';\nimport { useGlobalKeyDown } from '../../../../../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { isInternalColumn } from '../../../../util/columns';\nimport { Placeholder } from './components/Placeholder';\nimport { Filter } from './components/Filter';\nimport { Group } from '../../../../../Group/Group';\n\nfunction sortByHeader<TType = unknown>(a: RTColumn<TType>, b: RTColumn<TType>) {\n    return (a.columnDef.meta?.header as string)?.localeCompare?.(b.columnDef.meta?.header as string);\n}\n\nexport type FiltersProps<TType = unknown> = {\n    total: number;\n    table: RTable<TType>;\n};\n\nexport function Filters<TType = unknown>(props: FiltersProps<TType>) {\n    const { total, table } = props;\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLButtonElement>(null);\n    const allColumns = table\n        .getAllLeafColumns()\n        .filter(column => !isInternalColumn(column.id))\n        .sort(sortByHeader);\n    const appliedFilters = table.getState().columnFilters;\n\n    useGlobalKeyDown({ key: 'f', meta: true, shift: true }, (event: KeyboardEvent) => {\n        event.preventDefault();\n        ref.current?.click();\n    });\n\n    // state, since we \"apply\" filters\n    const [filters, setFilters] = React.useState<Table3Filter[]>(table.getState().columnFilters as Table3Filter[]);\n    const [placeholderCount, setPlaceholderCount] = React.useState(1);\n\n    // filters\n    const handleChangeFilter = (currentId: string, filter: { id: string; value: Table3FilterValue }) => {\n        setFilters(currentFilters => {\n            const nextFilters = [...currentFilters];\n            const index = nextFilters.findIndex(f => f.id === currentId);\n            nextFilters[index] = filter;\n            return nextFilters;\n        });\n    };\n\n    const handleRemoveFilter = (columnId: string) => {\n        if (filters.length === 1 && placeholderCount === 0) {\n            setPlaceholderCount(count => count + 1);\n        }\n\n        setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));\n    };\n\n    // placeholders\n    const handleCreateFilterFromPlaceholder = (columnId: string) => {\n        setFilters(currentFilters => [\n            ...currentFilters,\n            {\n                id: columnId,\n                value: {\n                    comparator: Table3FilterComparator.Contains,\n                    value: undefined,\n                },\n            },\n        ]);\n        handleRemovePlaceholder();\n    };\n\n    const handleCreatePlaceholder = () => {\n        setPlaceholderCount(count => count + 1);\n    };\n\n    const handleRemovePlaceholder = () => {\n        setPlaceholderCount(count => count - 1);\n    };\n\n    //\n    const handleApply = () => {\n        table.setColumnFilters(\n            filters.filter(f => {\n                const controlRenderer = (allColumns.find(c => c.id === f.id) as RTColumn<TType, unknown>).columnDef.meta?.control;\n                if (\n                    f.value.comparator === Table3FilterComparator.IsEmpty ||\n                    f.value.comparator === Table3FilterComparator.IsNotEmpty ||\n                    controlRenderer === 'switch'\n                ) {\n                    return true;\n                }\n                return !!f.value.value;\n            })\n        );\n    };\n\n    const handleClear = () => {\n        table.resetColumnFilters();\n        setFilters([]);\n        setPlaceholderCount(1);\n    };\n\n    return (\n        <Button\n            aria-label={texts.table3.filters.tooltip}\n            className={cn({\n                '!wcag-blue-100': appliedFilters.length,\n            })}\n            popover={popoverProps => (\n                <Popover {...popoverProps}>\n                    <Popover.Content>\n                        <div className=\"flex w-[40rem] flex-col gap-4\">\n                            <div className=\"flex h-8\">\n                                <div className=\"flex w-full items-center gap-2\">\n                                    <h4 className=\"mb-0 inline-flex\">{texts.table3.filters.button}</h4>\n                                    <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n                                        {texts.table3.filters.total\n                                            .replace('[CURRENT]', String(table.getFilteredRowModel().rows.length))\n                                            .replace('[TOTAL]', String(total))}\n                                    </p>\n                                </div>\n                            </div>\n                            <div className=\"flex flex-col gap-2\">\n                                {filters.map((filter, index) => (\n                                    <Filter\n                                        key={`filter_${index}`}\n                                        allColumns={allColumns as RTColumn<unknown, unknown>[]}\n                                        filter={filter}\n                                        filters={filters}\n                                        position={index}\n                                        onChange={handleChangeFilter}\n                                        onRemove={handleRemoveFilter}\n                                    />\n                                ))}\n                                {[...Array(placeholderCount)].map((_, index) => (\n                                    <Placeholder\n                                        key={`placeholder_${index}`}\n                                        allColumns={allColumns as RTColumn<unknown, unknown>[]}\n                                        filters={filters}\n                                        position={filters.length + index}\n                                        onCreate={handleCreateFilterFromPlaceholder as any}\n                                        onRemove={\n                                            placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined\n                                        }\n                                    />\n                                ))}\n                                <div className=\"justify-start\">\n                                    <Button appearance=\"discrete\" onClick={handleCreatePlaceholder}>\n                                        + {texts.table3.filters.buttons.addFilter}\n                                    </Button>\n                                </div>\n                            </div>\n                            <Group className=\"ml-auto\">\n                                <Popover.Close>\n                                    <Button>Cancel</Button>\n                                </Popover.Close>\n                                <Button onClick={handleClear}>Clear</Button>\n                                <Button appearance=\"primary\" onClick={handleApply}>\n                                    Apply\n                                </Button>\n                            </Group>\n                        </div>\n                    </Popover.Content>\n                </Popover>\n            )}\n            ref={ref}\n            tooltip={\n                <>\n                    {texts.table3.filters.tooltip}\n                    <Shortcut className=\"ml-2\" keys={{ key: 'f', meta: true, shift: true }} />\n                </>\n            }>\n            <Icon name={appliedFilters.length ? 'filter-solid' : 'filter'} />\n            {texts.table3.filters.button} {appliedFilters.length ? `(${appliedFilters.length})` : ''}\n        </Button>\n    );\n}\n"],"names":["sortByHeader","a","b","_a$columnDef$meta","columnDef","meta","_a$columnDef$meta$hea","header","_a$columnDef$meta$hea2","localeCompare","call","_b$columnDef$meta","Filters","props","total","table","texts","useLocalization","ref","React","useRef","allColumns","getAllLeafColumns","filter","column","isInternalColumn","id","sort","appliedFilters","getState","columnFilters","useGlobalKeyDown","key","shift","event","preventDefault","_ref$current","current","click","filters","setFilters","useState","placeholderCount","setPlaceholderCount","handleChangeFilter","currentId","currentFilters","nextFilters","index","findIndex","f","handleRemoveFilter","columnId","length","count","handleCreateFilterFromPlaceholder","value","comparator","Table3FilterComparator","Contains","undefined","handleRemovePlaceholder","handleCreatePlaceholder","handleApply","setColumnFilters","controlRenderer","_allColumns$find$colu","find","c","control","IsEmpty","IsNotEmpty","handleClear","resetColumnFilters","Button","table3","tooltip","className","cn","popover","popoverProps","Popover","Content","button","replace","String","getFilteredRowModel","rows","map","Filter","position","onChange","onRemove","Array","_","Placeholder","onCreate","appearance","onClick","buttons","addFilter","Group","Close","Shortcut","keys","Icon","name"],"mappings":"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"}
+{"version":3,"file":"Filters.js","sources":["../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/Filters.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTable, Column as RTColumn } from '@tanstack/react-table';\nimport { Button } from '../../../../../Button/Button';\nimport { Icon } from '../../../../../Icon/Icon';\nimport { Popover } from '../../../../../Popover/Popover';\nimport { Table3FilterValue, Table3FilterComparator, Table3Filter } from '../../../../types';\nimport { Shortcut } from '../../../../../Shortcut/Shortcut';\nimport { useGlobalKeyDown } from '../../../../../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { isInternalColumn } from '../../../../util/columns';\nimport { Placeholder } from './components/Placeholder';\nimport { Filter } from './components/Filter';\nimport { Group } from '../../../../../Group/Group';\n\nfunction sortByHeader<TType = unknown>(a: RTColumn<TType>, b: RTColumn<TType>) {\n    return (a.columnDef.meta?.header as string)?.localeCompare?.(b.columnDef.meta?.header as string);\n}\n\nexport type FiltersProps<TType = unknown> = {\n    total: number;\n    table: RTable<TType>;\n};\n\nexport function Filters<TType = unknown>(props: FiltersProps<TType>) {\n    const { total, table } = props;\n    const { locale, texts } = useLocalization();\n    const ref = React.useRef<HTMLButtonElement>(null);\n    const allColumns = table\n        .getAllLeafColumns()\n        .filter(column => !isInternalColumn(column.id))\n        .sort(sortByHeader);\n    const appliedFilters = table.getState().columnFilters;\n\n    useGlobalKeyDown({ key: 'f', meta: true, shift: true }, (event: KeyboardEvent) => {\n        event.preventDefault();\n        ref.current?.click();\n    });\n\n    // state, since we \"apply\" filters\n    const [filters, setFilters] = React.useState<Table3Filter[]>(table.getState().columnFilters as Table3Filter[]);\n    const [placeholderCount, setPlaceholderCount] = React.useState(1);\n\n    // filters\n    const handleChangeFilter = (currentId: string, filter: { id: string; value: Table3FilterValue }) => {\n        setFilters(currentFilters => {\n            const nextFilters = [...currentFilters];\n            const index = nextFilters.findIndex(f => f.id === currentId);\n            nextFilters[index] = filter;\n            return nextFilters;\n        });\n    };\n\n    const handleRemoveFilter = (columnId: string) => {\n        if (filters.length === 1 && placeholderCount === 0) {\n            setPlaceholderCount(count => count + 1);\n        }\n\n        setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));\n    };\n\n    // placeholders\n    const handleCreateFilterFromPlaceholder = (columnId: string) => {\n        setFilters(currentFilters => [\n            ...currentFilters,\n            {\n                id: columnId,\n                value: {\n                    comparator: Table3FilterComparator.Contains,\n                    value: undefined,\n                },\n            },\n        ]);\n        handleRemovePlaceholder();\n    };\n\n    const handleCreatePlaceholder = () => {\n        setPlaceholderCount(count => count + 1);\n    };\n\n    const handleRemovePlaceholder = () => {\n        setPlaceholderCount(count => count - 1);\n    };\n\n    //\n    const handleApply = () => {\n        table.setColumnFilters(\n            filters.filter(f => {\n                const controlRenderer = (allColumns.find(c => c.id === f.id) as RTColumn<TType, unknown>).columnDef.meta?.control;\n                if (\n                    f.value.comparator === Table3FilterComparator.IsEmpty ||\n                    f.value.comparator === Table3FilterComparator.IsNotEmpty ||\n                    controlRenderer === 'switch'\n                ) {\n                    return true;\n                }\n                return !!f.value.value;\n            })\n        );\n    };\n\n    const handleClear = () => {\n        table.resetColumnFilters();\n        setFilters([]);\n        setPlaceholderCount(1);\n    };\n\n    return (\n        <Button\n            aria-label={texts.table3.filters.tooltip}\n            className={cn({\n                '!wcag-blue-100': appliedFilters.length,\n            })}\n            popover={popoverProps => (\n                <Popover {...popoverProps}>\n                    <Popover.Content>\n                        <div className=\"flex w-[40rem] flex-col gap-4\">\n                            <div className=\"flex h-8\">\n                                <div className=\"flex w-full items-center gap-2\">\n                                    <h4 className=\"mb-0 inline-flex\">{texts.table3.filters.button}</h4>\n                                    <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n                                        {texts.table3.filters.total\n                                            .replace(\n                                                '[CURRENT]',\n                                                new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)\n                                            )\n                                            .replace('[TOTAL]', new Intl.NumberFormat(locale).format(total))}\n                                    </p>\n                                </div>\n                            </div>\n                            <div className=\"flex flex-col gap-2\">\n                                {filters.map((filter, index) => (\n                                    <Filter\n                                        key={`filter_${index}`}\n                                        allColumns={allColumns as RTColumn<unknown, unknown>[]}\n                                        filter={filter}\n                                        filters={filters}\n                                        position={index}\n                                        onChange={handleChangeFilter}\n                                        onRemove={handleRemoveFilter}\n                                    />\n                                ))}\n                                {[...Array(placeholderCount)].map((_, index) => (\n                                    <Placeholder\n                                        key={`placeholder_${index}`}\n                                        allColumns={allColumns as RTColumn<unknown, unknown>[]}\n                                        filters={filters}\n                                        position={filters.length + index}\n                                        onCreate={handleCreateFilterFromPlaceholder as any}\n                                        onRemove={\n                                            placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined\n                                        }\n                                    />\n                                ))}\n                                <div className=\"justify-start\">\n                                    <Button appearance=\"discrete\" onClick={handleCreatePlaceholder}>\n                                        + {texts.table3.filters.buttons.addFilter}\n                                    </Button>\n                                </div>\n                            </div>\n                            <Group className=\"ml-auto\">\n                                <Popover.Close>\n                                    <Button>Cancel</Button>\n                                </Popover.Close>\n                                <Button onClick={handleClear}>Clear</Button>\n                                <Button appearance=\"primary\" onClick={handleApply}>\n                                    Apply\n                                </Button>\n                            </Group>\n                        </div>\n                    </Popover.Content>\n                </Popover>\n            )}\n            ref={ref}\n            tooltip={\n                <>\n                    {texts.table3.filters.tooltip}\n                    <Shortcut className=\"ml-2\" keys={{ key: 'f', meta: true, shift: true }} />\n                </>\n            }>\n            <Icon name={appliedFilters.length ? 'filter-solid' : 'filter'} />\n            {texts.table3.filters.button} {appliedFilters.length ? `(${appliedFilters.length})` : ''}\n        </Button>\n    );\n}\n"],"names":["sortByHeader","a","b","_a$columnDef$meta","columnDef","meta","_a$columnDef$meta$hea","header","_a$columnDef$meta$hea2","localeCompare","call","_b$columnDef$meta","Filters","props","total","table","locale","texts","useLocalization","ref","React","useRef","allColumns","getAllLeafColumns","filter","column","isInternalColumn","id","sort","appliedFilters","getState","columnFilters","useGlobalKeyDown","key","shift","event","preventDefault","_ref$current","current","click","filters","setFilters","useState","placeholderCount","setPlaceholderCount","handleChangeFilter","currentId","currentFilters","nextFilters","index","findIndex","f","handleRemoveFilter","columnId","length","count","handleCreateFilterFromPlaceholder","value","comparator","Table3FilterComparator","Contains","undefined","handleRemovePlaceholder","handleCreatePlaceholder","handleApply","setColumnFilters","controlRenderer","_allColumns$find$colu","find","c","control","IsEmpty","IsNotEmpty","handleClear","resetColumnFilters","Button","table3","tooltip","className","cn","popover","popoverProps","Popover","Content","button","replace","Intl","NumberFormat","format","getFilteredRowModel","rows","map","Filter","position","onChange","onRemove","Array","_","Placeholder","onCreate","appearance","onClick","buttons","addFilter","Group","Close","Shortcut","keys","Icon","name"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { shouldTriggerShortcut } from '../../../../utils/keyboard.js';
 import _ from 'lodash-es';
 
 var SavingStateValue;
@@ -56,14 +57,20 @@ function useEditing(isEnabled, onSave) {
     if (event.defaultPrevented) {
       return;
     }
-    if (event.ctrlKey || event.metaKey) {
-      if (event.key === 'e') {
-        setIsEditing(editing => !editing);
-      } else if (event.key === 's') {
-        // Prevent default browser save
-        event.preventDefault();
-        saveChangesIfNeeded();
-      }
+    if (shouldTriggerShortcut(event, {
+      key: 'e',
+      meta: true,
+      shift: false
+    })) {
+      setIsEditing(editing => !editing);
+    } else if (shouldTriggerShortcut(event, {
+      key: 's',
+      meta: true,
+      shift: false
+    })) {
+      // Prevent default browser save
+      event.preventDefault();
+      saveChangesIfNeeded();
     }
   }, [isEditing]);
   const handleBlur = React__default.useCallback(event => {

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useEditing.tsx"],"sourcesContent":["import React from 'react';\nimport _ from 'lodash';\nimport { Cell as RTCell } from '@tanstack/react-table';\nimport { IndicatorReason } from '../../components/columns/cell/Indicator';\n\nexport enum SavingStateValue {\n    Saving = 'saving',\n    Saved = 'saved',\n    Error = 'error',\n}\n\nexport type SavingState = {\n    state: SavingStateValue;\n};\n\nexport function useEditing<TType = unknown>(isEnabled: boolean, onSave?: (row: TType) => void) {\n    // used to switch the table into editing mode\n    const [isEditing, setIsEditing] = React.useState(false);\n    // Saving indicator need to show saving state per row, saving state can have at lkeast two states 'saving', 'saved',\n    // 'saved' should remain for a few seconds to show tick icon after row has been saved.\n    const [savingStates, setSavingStates] = React.useState<Record<string, SavingState> | null>(null);\n\n    // sets of row changes pending save, either they have not saved yet or they have errors\n    const [changes, setChanges] = React.useState<Record<string, TType> | null>(null);\n\n    const [detailModeEditing, setDetailModeEditing] = React.useState(false);\n\n    function getCellValue<T extends TType>(cell: RTCell<T, unknown>) {\n        return changes ? changes[cell.row.id]?.[cell.column.id] : undefined;\n    }\n\n    // Saves editing cell value into editing state.\n    function setCellValue<T extends TType>(cell: RTCell<T, unknown>, value: unknown) {\n        setChanges(currentChanges => {\n            const nextChanges = { ...currentChanges };\n\n            if (nextChanges[cell.row.id]) {\n                nextChanges[cell.row.id][cell.column.id] = value;\n                // we should probably delete the cell if it has just reverted back to its original value\n            } else {\n                nextChanges[cell.row.id] = { ...cell.row.original, [cell.column.id]: value };\n            }\n\n            return nextChanges;\n        });\n    }\n\n    // Removes changes from editing state by row id\n    function resetChange(rowId: string) {\n        let currentChanges: Record<string, TType> | null = changes ? { ...changes } : {};\n        if (currentChanges) {\n            delete currentChanges[rowId];\n        }\n        const changeset = Object.keys(currentChanges);\n        if (changeset.length === 0) {\n            currentChanges = null;\n        }\n\n        setChanges(currentChanges);\n    }\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent) => {\n            if (event.defaultPrevented) {\n                return;\n            }\n\n            if (event.ctrlKey || event.metaKey) {\n                if (event.key === 'e') {\n                    setIsEditing(editing => !editing);\n                } else if (event.key === 's') {\n                    // Prevent default browser save\n                    event.preventDefault();\n                    saveChangesIfNeeded();\n                }\n            }\n        },\n        [isEditing]\n    );\n\n    const handleBlur = React.useCallback((event: React.FocusEvent) => {\n        if (event.target === event.currentTarget) {\n            saveChangesIfNeeded();\n        }\n    }, []);\n\n    // Creates initial saving states from changes object\n    const addSavingStates = () => {\n        const changeset = Object.keys(changes || {});\n        const additionalSavingStates = _.reduce(\n            changeset,\n            (result, value) => {\n                return { ...result, [value]: { state: SavingStateValue.Saving } };\n            },\n            {}\n        );\n        setSavingStates({ ...savingStates, ...additionalSavingStates });\n    };\n\n    // Repoves edititng state by row is. Used in delayed saving indicator.\n    const removeSavingState = (rowId: string) => {\n        const newSavingStates = { ...savingStates };\n        delete newSavingStates[rowId];\n        setSavingStates(newSavingStates);\n    };\n\n    // Checks if we have changes, then saves them\n    const saveChangesIfNeeded = async () => {\n        if (!changes) {\n            return;\n        }\n\n        const changeset = Object.keys(changes);\n        if (onSave && changeset.length) {\n            addSavingStates();\n\n            const responses = await Promise.allSettled(changeset.map(rowId => onSave(changes[rowId])));\n\n            setChanges(currentChanges => {\n                const nextChanges = { ...currentChanges };\n\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        delete nextChanges[rowId];\n                    }\n                });\n\n                return nextChanges;\n            });\n\n            setSavingStates(savingStates => {\n                const nextSavingStates = savingStates ? { ...savingStates } : {};\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        nextSavingStates[rowId] = { state: SavingStateValue.Saved };\n                    } else {\n                        // add the error when validation is added\n                        nextSavingStates[rowId] = { state: SavingStateValue.Error };\n                    }\n                });\n                return nextSavingStates;\n            });\n        }\n    };\n\n    const [rowMoveReason, setRowMoveReason] = React.useState<Record<string, IndicatorReason | null>>({});\n\n    const removeRowMoveReason = (columnId: string) => {\n        setRowMoveReason(prevState => {\n            const newState = { ...prevState };\n            delete newState[columnId];\n\n            return newState;\n        });\n    };\n\n    const showWarning = React.useCallback(\n        event => {\n            if (isEditing && changes && Object.keys(changes).length > 0) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        },\n        [isEditing, changes]\n    );\n\n    React.useEffect(() => {\n        window.addEventListener('beforeunload', showWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showWarning);\n        };\n    }, [showWarning]);\n\n    return {\n        isEnabled,\n        isEditing,\n        toggleEditing: setIsEditing,\n        changes,\n        getCellValue,\n        setCellValue,\n        saveChangesIfNeeded,\n        detailModeEditing,\n        setDetailModeEditing,\n        rowMoveReason,\n        setRowMoveReason,\n        removeRowMoveReason,\n        handleKeyDown,\n        handleBlur,\n        resetChange,\n        savingStates,\n        removeSavingState,\n    };\n}\n"],"names":["SavingStateValue","useEditing","isEnabled","onSave","isEditing","setIsEditing","React","useState","savingStates","setSavingStates","changes","setChanges","detailModeEditing","setDetailModeEditing","getCellValue","cell","_changes$cell$row$id","row","id","column","undefined","setCellValue","value","currentChanges","nextChanges","original","resetChange","rowId","changeset","Object","keys","length","handleKeyDown","useCallback","event","defaultPrevented","ctrlKey","metaKey","key","editing","preventDefault","saveChangesIfNeeded","handleBlur","target","currentTarget","addSavingStates","additionalSavingStates","_","reduce","result","state","Saving","removeSavingState","newSavingStates","Promise","resolve","_temp","allSettled","map","then","responses","forEach","response","index","status","nextSavingStates","Saved","Error","e","reject","rowMoveReason","setRowMoveReason","removeRowMoveReason","columnId","prevState","newState","showWarning","returnValue","useEffect","window","addEventListener","removeEventListener","toggleEditing"],"mappings":"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"}
+{"version":3,"file":"useEditing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useEditing.tsx"],"sourcesContent":["import React from 'react';\nimport _ from 'lodash';\nimport { Cell as RTCell } from '@tanstack/react-table';\n\nimport { IndicatorReason } from '../../components/columns/cell/Indicator';\nimport { shouldTriggerShortcut } from '../../../../utils/keyboard';\n\nexport enum SavingStateValue {\n    Saving = 'saving',\n    Saved = 'saved',\n    Error = 'error',\n}\n\nexport type SavingState = {\n    state: SavingStateValue;\n};\n\nexport function useEditing<TType = unknown>(isEnabled: boolean, onSave?: (row: TType) => void) {\n    // used to switch the table into editing mode\n    const [isEditing, setIsEditing] = React.useState(false);\n    // Saving indicator need to show saving state per row, saving state can have at lkeast two states 'saving', 'saved',\n    // 'saved' should remain for a few seconds to show tick icon after row has been saved.\n    const [savingStates, setSavingStates] = React.useState<Record<string, SavingState> | null>(null);\n\n    // sets of row changes pending save, either they have not saved yet or they have errors\n    const [changes, setChanges] = React.useState<Record<string, TType> | null>(null);\n\n    const [detailModeEditing, setDetailModeEditing] = React.useState(false);\n\n    function getCellValue<T extends TType>(cell: RTCell<T, unknown>) {\n        return changes ? changes[cell.row.id]?.[cell.column.id] : undefined;\n    }\n\n    // Saves editing cell value into editing state.\n    function setCellValue<T extends TType>(cell: RTCell<T, unknown>, value: unknown) {\n        setChanges(currentChanges => {\n            const nextChanges = { ...currentChanges };\n\n            if (nextChanges[cell.row.id]) {\n                nextChanges[cell.row.id][cell.column.id] = value;\n                // we should probably delete the cell if it has just reverted back to its original value\n            } else {\n                nextChanges[cell.row.id] = { ...cell.row.original, [cell.column.id]: value };\n            }\n\n            return nextChanges;\n        });\n    }\n\n    // Removes changes from editing state by row id\n    function resetChange(rowId: string) {\n        let currentChanges: Record<string, TType> | null = changes ? { ...changes } : {};\n        if (currentChanges) {\n            delete currentChanges[rowId];\n        }\n        const changeset = Object.keys(currentChanges);\n        if (changeset.length === 0) {\n            currentChanges = null;\n        }\n\n        setChanges(currentChanges);\n    }\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent) => {\n            if (event.defaultPrevented) {\n                return;\n            }\n\n            if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n                setIsEditing(editing => !editing);\n            } else if (shouldTriggerShortcut(event, { key: 's', meta: true, shift: false })) {\n                // Prevent default browser save\n                event.preventDefault();\n                saveChangesIfNeeded();\n            }\n        },\n        [isEditing]\n    );\n\n    const handleBlur = React.useCallback((event: React.FocusEvent) => {\n        if (event.target === event.currentTarget) {\n            saveChangesIfNeeded();\n        }\n    }, []);\n\n    // Creates initial saving states from changes object\n    const addSavingStates = () => {\n        const changeset = Object.keys(changes || {});\n        const additionalSavingStates = _.reduce(\n            changeset,\n            (result, value) => {\n                return { ...result, [value]: { state: SavingStateValue.Saving } };\n            },\n            {}\n        );\n        setSavingStates({ ...savingStates, ...additionalSavingStates });\n    };\n\n    // Repoves edititng state by row is. Used in delayed saving indicator.\n    const removeSavingState = (rowId: string) => {\n        const newSavingStates = { ...savingStates };\n        delete newSavingStates[rowId];\n        setSavingStates(newSavingStates);\n    };\n\n    // Checks if we have changes, then saves them\n    const saveChangesIfNeeded = async () => {\n        if (!changes) {\n            return;\n        }\n\n        const changeset = Object.keys(changes);\n        if (onSave && changeset.length) {\n            addSavingStates();\n\n            const responses = await Promise.allSettled(changeset.map(rowId => onSave(changes[rowId])));\n\n            setChanges(currentChanges => {\n                const nextChanges = { ...currentChanges };\n\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        delete nextChanges[rowId];\n                    }\n                });\n\n                return nextChanges;\n            });\n\n            setSavingStates(savingStates => {\n                const nextSavingStates = savingStates ? { ...savingStates } : {};\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        nextSavingStates[rowId] = { state: SavingStateValue.Saved };\n                    } else {\n                        // add the error when validation is added\n                        nextSavingStates[rowId] = { state: SavingStateValue.Error };\n                    }\n                });\n                return nextSavingStates;\n            });\n        }\n    };\n\n    const [rowMoveReason, setRowMoveReason] = React.useState<Record<string, IndicatorReason | null>>({});\n\n    const removeRowMoveReason = (columnId: string) => {\n        setRowMoveReason(prevState => {\n            const newState = { ...prevState };\n            delete newState[columnId];\n\n            return newState;\n        });\n    };\n\n    const showWarning = React.useCallback(\n        event => {\n            if (isEditing && changes && Object.keys(changes).length > 0) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        },\n        [isEditing, changes]\n    );\n\n    React.useEffect(() => {\n        window.addEventListener('beforeunload', showWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showWarning);\n        };\n    }, [showWarning]);\n\n    return {\n        isEnabled,\n        isEditing,\n        toggleEditing: setIsEditing,\n        changes,\n        getCellValue,\n        setCellValue,\n        saveChangesIfNeeded,\n        detailModeEditing,\n        setDetailModeEditing,\n        rowMoveReason,\n        setRowMoveReason,\n        removeRowMoveReason,\n        handleKeyDown,\n        handleBlur,\n        resetChange,\n        savingStates,\n        removeSavingState,\n    };\n}\n"],"names":["SavingStateValue","useEditing","isEnabled","onSave","isEditing","setIsEditing","React","useState","savingStates","setSavingStates","changes","setChanges","detailModeEditing","setDetailModeEditing","getCellValue","cell","_changes$cell$row$id","row","id","column","undefined","setCellValue","value","currentChanges","nextChanges","original","resetChange","rowId","changeset","Object","keys","length","handleKeyDown","useCallback","event","defaultPrevented","shouldTriggerShortcut","key","meta","shift","editing","preventDefault","saveChangesIfNeeded","handleBlur","target","currentTarget","addSavingStates","additionalSavingStates","_","reduce","result","state","Saving","removeSavingState","newSavingStates","Promise","resolve","_temp","allSettled","map","then","responses","forEach","response","index","status","nextSavingStates","Saved","Error","e","reject","rowMoveReason","setRowMoveReason","removeRowMoveReason","columnId","prevState","newState","showWarning","returnValue","useEffect","window","addEventListener","removeEventListener","toggleEditing"],"mappings":"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"}

package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js

@@ -5,7 +5,7 @@ const useGlobalKeyDown = (shortcut, handler) => {
   React__default.useEffect(() => {
     let handleKeyDown;
     if (shortcut) {
-      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler);
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false);
       document.addEventListener('keydown', handleKeyDown);
     }
     return () => {
@@ -13,7 +13,7 @@ const useGlobalKeyDown = (shortcut, handler) => {
         document.removeEventListener('keydown', handleKeyDown);
       }
     };
-  }, [shortcut]);
+  }, [shortcut, handler]);
 };
 
 export { useGlobalKeyDown };

package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalKeyDown.js","sources":["../../../../../../src/hooks/useGlobalKeyDown.ts"],"sourcesContent":["import React from 'react';\nimport { createShortcutKeyDownHandler, KeyDownHandlerOptions } from '../utils/keyboard';\n\nexport const useGlobalKeyDown = (\n    shortcut: string | KeyDownHandlerOptions | undefined,\n    handler: (event: KeyboardEvent) => void\n) => {\n    React.useEffect(() => {\n        let handleKeyDown;\n\n        if (shortcut) {\n            handleKeyDown = createShortcutKeyDownHandler(\n                shortcut,\n                handler as (event: KeyboardEvent | React.KeyboardEvent) => void\n            );\n\n            document.addEventListener('keydown', handleKeyDown);\n        }\n\n        return () => {\n            if (handleKeyDown) {\n                document.removeEventListener('keydown', handleKeyDown);\n            }\n        };\n    }, [shortcut]);\n};\n"],"names":["useGlobalKeyDown","shortcut","handler","React","useEffect","handleKeyDown","createShortcutKeyDownHandler","document","addEventListener","removeEventListener"],"mappings":";;;MAGaA,gBAAgB,GAAGA,CAC5BC,QAAoD,EACpDC,OAAuC;EAEvCC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,aAAa;IAEjB,IAAIJ,QAAQ,EAAE;MACVI,aAAa,GAAGC,4BAA4B,CACxCL,QAAQ,EACRC,OAA+D,CAClE;MAEDK,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEH,aAAa,CAAC;;IAGvD,OAAO;MACH,IAAIA,aAAa,EAAE;QACfE,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEJ,aAAa,CAAC;;KAE7D;GACJ,EAAE,CAACJ,QAAQ,CAAC,CAAC;AAClB;;;;"}
+{"version":3,"file":"useGlobalKeyDown.js","sources":["../../../../../../src/hooks/useGlobalKeyDown.ts"],"sourcesContent":["import React from 'react';\nimport { createShortcutKeyDownHandler, KeyDownHandlerOptions } from '../utils/keyboard';\n\nexport const useGlobalKeyDown = (\n    shortcut: string | KeyDownHandlerOptions | undefined,\n    handler: (event: KeyboardEvent) => void\n) => {\n    React.useEffect(() => {\n        let handleKeyDown;\n\n        if (shortcut) {\n            handleKeyDown = createShortcutKeyDownHandler(\n                shortcut,\n                handler as (event: KeyboardEvent | React.KeyboardEvent) => void,\n                false\n            );\n\n            document.addEventListener('keydown', handleKeyDown);\n        }\n\n        return () => {\n            if (handleKeyDown) {\n                document.removeEventListener('keydown', handleKeyDown);\n            }\n        };\n    }, [shortcut, handler]);\n};\n"],"names":["useGlobalKeyDown","shortcut","handler","React","useEffect","handleKeyDown","createShortcutKeyDownHandler","document","addEventListener","removeEventListener"],"mappings":";;;MAGaA,gBAAgB,GAAGA,CAC5BC,QAAoD,EACpDC,OAAuC;EAEvCC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,aAAa;IAEjB,IAAIJ,QAAQ,EAAE;MACVI,aAAa,GAAGC,4BAA4B,CACxCL,QAAQ,EACRC,OAA+D,EAC/D,KAAK,CACR;MAEDK,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEH,aAAa,CAAC;;IAGvD,OAAO;MACH,IAAIA,aAAa,EAAE;QACfE,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEJ,aAAa,CAAC;;KAE7D;GACJ,EAAE,CAACJ,QAAQ,EAAEC,OAAO,CAAC,CAAC;AAC3B;;;;"}

package/dist/esm/packages/taco/src/index.js

@@ -9,7 +9,7 @@ export { Accordion } from './components/Accordion/Accordion.js';
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
 export { Badge } from './components/Badge/Badge.js';
 export { useMergedRef } from './hooks/useMergedRef.js';
-export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs } from './utils/keyboard.js';
+export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs, shouldTriggerShortcut } from './utils/keyboard.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 export { Base, IconButton } from './components/IconButton/IconButton.js';
 export { LocalizationContext, LocalizationProvider, defaultLocalisationTexts, defaultLocalizationContext, useLocalization } from './components/Provider/Localization.js';

package/dist/esm/packages/taco/src/primitives/Button.js

@@ -13,6 +13,11 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   const internalRef = useMergedRef(ref);
   useGlobalKeyDown(shortcut, () => {
     var _internalRef$current;
+    const dialog = document.querySelector('[role="dialog"]');
+    // Don't trigger the click on the button if it is outside of the dialog
+    if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+      return;
+    }
     (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
   });
   const Tag = props.href ? 'a' : 'button';

package/dist/esm/packages/taco/src/primitives/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../../src/primitives/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { KeyDownHandlerOptions } from '../utils/keyboard';\nimport { useMergedRef } from '../hooks/useMergedRef';\nimport { useGlobalKeyDown } from '../hooks/useGlobalKeyDown';\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {\n    /** Content should be a text */\n    children: React.ReactNode;\n    /** Provides url for buttons being used as a link */\n    href?: string;\n    shortcut?: string | KeyDownHandlerOptions;\n    /** Provides target for buttons being used as a link */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n};\n\nconst Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { disabled, shortcut, target, type = 'button', ...otherProps } = props;\n    const internalRef = useMergedRef<HTMLButtonElement | HTMLAnchorElement>(ref);\n\n    useGlobalKeyDown(shortcut, () => {\n        internalRef.current?.click();\n    });\n\n    const Tag = props.href ? 'a' : 'button';\n\n    return (\n        <Tag\n            {...otherProps}\n            aria-disabled={disabled ? 'true' : undefined}\n            disabled={disabled}\n            target={Tag === 'a' ? target : undefined}\n            type={Tag !== 'a' ? type : undefined}\n            ref={internalRef as any}>\n            {React.Children.count(props.children) > 1\n                ? React.Children.map(props.children, child => (typeof child === 'string' ? <span>{child}</span> : child))\n                : props.children}\n        </Tag>\n    );\n});\n\nexport { Button };\nexport type { ButtonProps };\n"],"names":["Button","React","props","ref","disabled","shortcut","target","type","otherProps","internalRef","useMergedRef","useGlobalKeyDown","_internalRef$current","current","click","Tag","href","undefined","count","children","map","child"],"mappings":";;;;MAeMA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAAqD;EACrH,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,IAAI,GAAG,QAAQ;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAMO,WAAW,GAAGC,YAAY,CAAwCP,GAAG,CAAC;EAE5EQ,gBAAgB,CAACN,QAAQ,EAAE;;IACvB,CAAAO,oBAAA,GAAAH,WAAW,CAACI,OAAO,cAAAD,oBAAA,uBAAnBA,oBAAA,CAAqBE,KAAK,EAAE;GAC/B,CAAC;EAEF,MAAMC,GAAG,GAAGb,KAAK,CAACc,IAAI,GAAG,GAAG,GAAG,QAAQ;EAEvC,oBACIf,cAACc,GAAG,oBACIP,UAAU;qBACCJ,QAAQ,GAAG,MAAM,GAAGa,SAAS;IAC5Cb,QAAQ,EAAEA,QAAQ;IAClBE,MAAM,EAAES,GAAG,KAAK,GAAG,GAAGT,MAAM,GAAGW,SAAS;IACxCV,IAAI,EAAEQ,GAAG,KAAK,GAAG,GAAGR,IAAI,GAAGU,SAAS;IACpCd,GAAG,EAAEM;MACJR,QAAc,CAACiB,KAAK,CAAChB,KAAK,CAACiB,QAAQ,CAAC,GAAG,CAAC,GACnClB,QAAc,CAACmB,GAAG,CAAClB,KAAK,CAACiB,QAAQ,EAAEE,KAAK,IAAK,OAAOA,KAAK,KAAK,QAAQ,gBAAGpB,4BAAOoB,KAAK,CAAQ,GAAGA,KAAM,CAAC,GACvGnB,KAAK,CAACiB,QAAQ,CAClB;AAEd,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../../src/primitives/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { KeyDownHandlerOptions } from '../utils/keyboard';\nimport { useMergedRef } from '../hooks/useMergedRef';\nimport { useGlobalKeyDown } from '../hooks/useGlobalKeyDown';\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {\n    /** Content should be a text */\n    children: React.ReactNode;\n    /** Provides url for buttons being used as a link */\n    href?: string;\n    shortcut?: string | KeyDownHandlerOptions;\n    /** Provides target for buttons being used as a link */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n};\n\nconst Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { disabled, shortcut, target, type = 'button', ...otherProps } = props;\n    const internalRef = useMergedRef<HTMLButtonElement | HTMLAnchorElement>(ref);\n\n    useGlobalKeyDown(shortcut, () => {\n        const dialog = document.querySelector('[role=\"dialog\"]');\n\n        // Don't trigger the click on the button if it is outside of the dialog\n        if (dialog && !dialog?.contains(internalRef.current)) {\n            return;\n        }\n\n        internalRef.current?.click();\n    });\n\n    const Tag = props.href ? 'a' : 'button';\n\n    return (\n        <Tag\n            {...otherProps}\n            aria-disabled={disabled ? 'true' : undefined}\n            disabled={disabled}\n            target={Tag === 'a' ? target : undefined}\n            type={Tag !== 'a' ? type : undefined}\n            ref={internalRef as any}>\n            {React.Children.count(props.children) > 1\n                ? React.Children.map(props.children, child => (typeof child === 'string' ? <span>{child}</span> : child))\n                : props.children}\n        </Tag>\n    );\n});\n\nexport { Button };\nexport type { ButtonProps };\n"],"names":["Button","React","props","ref","disabled","shortcut","target","type","otherProps","internalRef","useMergedRef","useGlobalKeyDown","dialog","document","querySelector","contains","current","_internalRef$current","click","Tag","href","undefined","count","children","map","child"],"mappings":";;;;MAeMA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAAqD;EACrH,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,IAAI,GAAG,QAAQ;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAMO,WAAW,GAAGC,YAAY,CAAwCP,GAAG,CAAC;EAE5EQ,gBAAgB,CAACN,QAAQ,EAAE;;IACvB,MAAMO,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,iBAAiB,CAAC;;IAGxD,IAAIF,MAAM,IAAI,EAACA,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEG,QAAQ,CAACN,WAAW,CAACO,OAAO,CAAC,GAAE;MAClD;;IAGJ,CAAAC,oBAAA,GAAAR,WAAW,CAACO,OAAO,cAAAC,oBAAA,uBAAnBA,oBAAA,CAAqBC,KAAK,EAAE;GAC/B,CAAC;EAEF,MAAMC,GAAG,GAAGjB,KAAK,CAACkB,IAAI,GAAG,GAAG,GAAG,QAAQ;EAEvC,oBACInB,cAACkB,GAAG,oBACIX,UAAU;qBACCJ,QAAQ,GAAG,MAAM,GAAGiB,SAAS;IAC5CjB,QAAQ,EAAEA,QAAQ;IAClBE,MAAM,EAAEa,GAAG,KAAK,GAAG,GAAGb,MAAM,GAAGe,SAAS;IACxCd,IAAI,EAAEY,GAAG,KAAK,GAAG,GAAGZ,IAAI,GAAGc,SAAS;IACpClB,GAAG,EAAEM;MACJR,QAAc,CAACqB,KAAK,CAACpB,KAAK,CAACqB,QAAQ,CAAC,GAAG,CAAC,GACnCtB,QAAc,CAACuB,GAAG,CAACtB,KAAK,CAACqB,QAAQ,EAAEE,KAAK,IAAK,OAAOA,KAAK,KAAK,QAAQ,gBAAGxB,4BAAOwB,KAAK,CAAQ,GAAGA,KAAM,CAAC,GACvGvB,KAAK,CAACqB,QAAQ,CAClB;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/utils/keyboard.js

@@ -2,29 +2,34 @@ function isEventTriggeredOnInteractiveElement(eventTarget) {
   const element = eventTarget;
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
-function createShortcutKeyDownHandler(key, handler) {
+function shouldTriggerShortcut(event, key) {
+  const keyOptions = typeof key === 'string' ? {
+    key,
+    meta: false,
+    shift: false
+  } : key;
+  if (keyOptions.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !keyOptions.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+    return false;
+  }
+  if (keyOptions.shift && !event.shiftKey || keyOptions.shift === false && event.shiftKey) {
+    return false;
+  }
+  return event.key.toLowerCase() === keyOptions.key.toLowerCase();
+}
+function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
   return function (event) {
-    const keyOptions = typeof key === 'string' ? {
-      key,
-      meta: false,
-      shift: false
-    } : key;
     if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target)) {
       return;
     }
-    if (keyOptions.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !keyOptions.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
-      return;
-    }
-    if (keyOptions.shift && !event.shiftKey || keyOptions.shift === false && event.shiftKey) {
-      return;
-    }
-    const condition = event.key.toLowerCase() === keyOptions.key.toLowerCase();
+    const condition = shouldTriggerShortcut(event, key);
     if (condition) {
-      var _event$stopImmediateP;
-      // stops react handlers bubbling up to global
-      event.stopPropagation();
-      // stops global handlers bubbling up to other global
-      (_event$stopImmediateP = event.stopImmediatePropagation) === null || _event$stopImmediateP === void 0 ? void 0 : _event$stopImmediateP.call(event);
+      if (stopPropagation) {
+        var _event$stopImmediateP;
+        // stops react handlers bubbling up to global
+        event.stopPropagation();
+        // stops global handlers bubbling up to other global
+        (_event$stopImmediateP = event.stopImmediatePropagation) === null || _event$stopImmediateP === void 0 ? void 0 : _event$stopImmediateP.call(event);
+      }
       handler(event);
     }
   };
@@ -34,5 +39,5 @@ const isMacOs = () => {
   return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
 };
 
-export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs };
+export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs, shouldTriggerShortcut };
 //# sourceMappingURL=keyboard.js.map