@economic/taco 2.0.0-alpha.173 → 2.0.0-alpha.6

package/dist/esm/packages/taco/src/components/Table2/components/BatchActionsMenu.js

@@ -0,0 +1,83 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { getButtonClasses } from '../../Button/util.js';
+import { Menu } from '../../Menu/Menu.js';
+import { useBoundaryOverflowDetection } from '../../../hooks/useBoundaryOverflowDetection.js';
+
+const BUTTON_CLASSES = /*#__PURE__*/cn( /*#__PURE__*/getButtonClasses(), 'hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 rounded px-2');
+function unwrapActionProperty(property, rowsData) {
+  return typeof property === 'function' ? property(rowsData) : property;
+}
+function createActionButton(actions, rowsData, onReset) {
+  return actions.map((action, index) => {
+    const button = /*#__PURE__*/React__default.createElement("button", {
+      className: BUTTON_CLASSES,
+      disabled: unwrapActionProperty(action.disabled, rowsData),
+      onClick: action.onClick ? () => action.onClick ? action.onClick(rowsData, onReset) : undefined : undefined
+    }, action.icon ? /*#__PURE__*/React__default.createElement(Icon, {
+      name: unwrapActionProperty(action.icon, rowsData)
+    }) : null, unwrapActionProperty(action.text, rowsData));
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index
+    }, typeof action.dialog === 'function' ? action.dialog(rowsData, onReset)({
+      trigger: button
+    }) : button);
+  });
+}
+function BatchActionsMenu({
+  actionsForTable = [],
+  summary,
+  table,
+  ...props
+}) {
+  const className = cn('bg-blue-900 yt-shadow flex w-96 flex-col gap-2 divide-y divide-white/25 rounded p-2 text-white', props.className);
+  const ref = React__default.useRef(null);
+  const boundaryIndex = useBoundaryOverflowDetection(ref, actionsForTable);
+  const rows = table.getSelectedRowModel().rows;
+  const rowsData = rows.map(row => row.original);
+  const handleReset = () => table.toggleAllRowsSelected(false);
+  const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(rowsData) : action.visible : true;
+  const visibleActions = actionsForTable.filter(isVisible);
+  let content;
+  if (boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < actionsForTable.length) {
+    const actions = visibleActions.slice(0, boundaryIndex);
+    const moreActions = visibleActions.slice(boundaryIndex);
+    content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, createActionButton(actions, rowsData, handleReset), moreActions.length ? /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(Menu.Trigger, null, /*#__PURE__*/React__default.createElement("button", {
+      className: cn(BUTTON_CLASSES, 'ml-auto w-8')
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      name: "more",
+      className: "m-0 p-0"
+    }))), /*#__PURE__*/React__default.createElement(Menu.Content, null, moreActions.map((action, index) => /*#__PURE__*/React__default.createElement(Menu.Item, {
+      key: index,
+      dialog: action.dialog ? action.dialog(rowsData, handleReset) : undefined,
+      disabled: unwrapActionProperty(action.disabled, rowsData),
+      icon: unwrapActionProperty(action.icon, rowsData),
+      onClick: action.onClick ? () => action.onClick ? action.onClick(rowsData, handleReset) : undefined : undefined
+    }, unwrapActionProperty(action.text, rowsData))))) : null);
+  } else {
+    content = createActionButton(visibleActions, rowsData, handleReset);
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: className,
+    tabIndex: 0
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-between gap-2 px-2"
+  }, rows.length, " items selected ", summary ? ` - ${summary(rowsData)}` : undefined, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Reset selected",
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    "aria-label": "Reset selected",
+    className: "rounded hover:bg-white/[0.08]",
+    onClick: handleReset
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "close"
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full gap-px overflow-hidden px-1 pt-2",
+    ref: ref
+  }, content));
+}
+
+export { BatchActionsMenu };
+//# sourceMappingURL=BatchActionsMenu.js.map

package/dist/esm/packages/taco/src/components/Table2/components/BatchActionsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BatchActionsMenu.js","sources":["../../../../../../../../src/components/Table2/components/BatchActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTTable } from '@tanstack/react-table';\nimport { Icon } from '../../Icon/Icon';\nimport { Table2ActionProps } from '../types';\nimport { getButtonClasses } from '../../Button/util';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { useBoundaryOverflowDetection } from '../../../hooks/useBoundaryOverflowDetection';\nimport { Menu } from '../../Menu/Menu';\n\ntype BatchActionsMenuProps<TType> = React.HTMLAttributes<HTMLDivElement> & {\n    actionsForTable?: Table2ActionProps<TType>[];\n    summary?: (rows: TType[]) => JSX.Element | string;\n    table: RTTable<TType>;\n};\n\nconst BUTTON_CLASSES = cn(\n    getButtonClasses(),\n    'hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 rounded px-2'\n);\n\nfunction unwrapActionProperty<TType = any>(property: unknown | ((rows: TType[]) => unknown), rowsData: TType[]) {\n    return typeof property === 'function' ? property(rowsData) : property;\n}\n\nfunction createActionButton<TType = any>(actions: Table2ActionProps<TType>[], rowsData: TType[], onReset) {\n    return actions.map((action, index) => {\n        const button = (\n            <button\n                className={BUTTON_CLASSES}\n                disabled={unwrapActionProperty(action.disabled, rowsData)}\n                onClick={action.onClick ? () => (action.onClick ? action.onClick(rowsData, onReset) : undefined) : undefined}>\n                {action.icon ? <Icon name={unwrapActionProperty(action.icon, rowsData)} /> : null}\n                {unwrapActionProperty(action.text, rowsData)}\n            </button>\n        );\n\n        return (\n            <React.Fragment key={index}>\n                {typeof action.dialog === 'function' ? action.dialog(rowsData, onReset)({ trigger: button }) : button}\n            </React.Fragment>\n        );\n    });\n}\n\nexport function BatchActionsMenu<TType = any>({ actionsForTable = [], summary, table, ...props }: BatchActionsMenuProps<TType>) {\n    const className = cn(\n        'bg-blue-900 yt-shadow flex w-96 flex-col gap-2 divide-y divide-white/25 rounded p-2 text-white',\n        props.className\n    );\n    const ref = React.useRef<HTMLDivElement>(null);\n    const boundaryIndex = useBoundaryOverflowDetection(ref, actionsForTable);\n    const rows = table.getSelectedRowModel().rows;\n    const rowsData = rows.map(row => row.original);\n\n    const handleReset = () => table.toggleAllRowsSelected(false);\n    const isVisible = (action: Table2ActionProps<TType>) =>\n        typeof action.visible !== 'undefined'\n            ? typeof action.visible === 'function'\n                ? action.visible(rowsData)\n                : action.visible\n            : true;\n\n    const visibleActions = actionsForTable.filter(isVisible);\n\n    let content;\n\n    if (boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < actionsForTable.length) {\n        const actions = visibleActions.slice(0, boundaryIndex);\n        const moreActions = visibleActions.slice(boundaryIndex);\n\n        content = (\n            <>\n                {createActionButton(actions, rowsData, handleReset)}\n                {moreActions.length ? (\n                    <Menu>\n                        <Menu.Trigger>\n                            <button className={cn(BUTTON_CLASSES, 'ml-auto w-8')}>\n                                <Icon name=\"more\" className=\"m-0 p-0\" />\n                            </button>\n                        </Menu.Trigger>\n                        <Menu.Content>\n                            {moreActions.map((action, index) => (\n                                <Menu.Item\n                                    key={index}\n                                    dialog={action.dialog ? action.dialog(rowsData, handleReset) : undefined}\n                                    disabled={unwrapActionProperty(action.disabled, rowsData)}\n                                    icon={unwrapActionProperty(action.icon, rowsData)}\n                                    onClick={\n                                        action.onClick\n                                            ? () => (action.onClick ? action.onClick(rowsData, handleReset) : undefined)\n                                            : undefined\n                                    }>\n                                    {unwrapActionProperty(action.text, rowsData)}\n                                </Menu.Item>\n                            ))}\n                        </Menu.Content>\n                    </Menu>\n                ) : null}\n            </>\n        );\n    } else {\n        content = createActionButton(visibleActions, rowsData, handleReset);\n    }\n\n    return (\n        <div {...props} className={className} tabIndex={0}>\n            <div className=\"flex items-center justify-between gap-2 px-2\">\n                {rows.length} items selected {summary ? ` - ${summary(rowsData)}` : undefined}\n                <Tooltip title=\"Reset selected\" placement=\"top\">\n                    <button aria-label=\"Reset selected\" className=\"rounded hover:bg-white/[0.08]\" onClick={handleReset}>\n                        <Icon name=\"close\" />\n                    </button>\n                </Tooltip>\n            </div>\n            <div className=\"flex w-full gap-px overflow-hidden px-1 pt-2\" ref={ref}>\n                {content}\n            </div>\n        </div>\n    );\n}\n"],"names":["BUTTON_CLASSES","cn","getButtonClasses","unwrapActionProperty","property","rowsData","createActionButton","actions","onReset","map","action","index","button","React","className","disabled","onClick","undefined","icon","Icon","name","text","Fragment","key","dialog","trigger","BatchActionsMenu","actionsForTable","summary","table","props","ref","useRef","boundaryIndex","useBoundaryOverflowDetection","rows","getSelectedRowModel","row","original","handleReset","toggleAllRowsSelected","isVisible","visible","visibleActions","filter","content","length","slice","moreActions","Menu","Trigger","Content","Item","tabIndex","Tooltip","title","placement"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js

@@ -0,0 +1,116 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { Button } from '../../Button/Button.js';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { Input } from '../../Input/Input.js';
+import { Popover } from '../../Popover/Popover.js';
+import { isInternalColumn, ensureOrdering } from '../utilities/columns.js';
+import { Container } from '../../../primitives/Sortable/components/Container.js';
+import { arrayMove } from '@dnd-kit/sortable';
+import { Item } from '../../../primitives/Sortable/components/Item.js';
+import { List } from '../../../primitives/Sortable/components/List.js';
+import { Truncate } from '../../Truncate/Truncate.js';
+
+function getColumnName(column) {
+  var _ref, _column$columnDef$hea, _column$columnDef$hea2;
+  return (_ref = (_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString()) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id) !== null && _ref !== void 0 ? _ref : '';
+}
+const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
+  const {
+    column,
+    draggable = false,
+    isOrderingEnabled,
+    ...dragAttributes
+  } = props;
+  const canHide = column.getCanHide();
+  const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {
+    'hover:bg-grey-200': canHide || draggable,
+    'hover:cursor-pointer': canHide,
+    'active:cursor-move active:bg-grey-300': draggable
+  });
+  const attributes = draggable ? dragAttributes : undefined;
+  const text = getColumnName(column);
+  const isVisible = column.getIsVisible();
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    key: column.id,
+    className: className,
+    onClick: () => column.toggleVisibility(!isVisible),
+    ref: ref
+  }), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "drag",
+    className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5"
+  }) : isOrderingEnabled ? /*#__PURE__*/React__default.createElement("span", {
+    className: "flex w-2"
+  }) : null, /*#__PURE__*/React__default.createElement(Truncate, {
+    tooltip: text
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex-grow select-none"
+  }, text)), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
+    checked: isVisible,
+    onChange: () => column.toggleVisibility(!isVisible)
+  }) : null);
+});
+function ColumnSettingsButton(props) {
+  const {
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const [query, setQuery] = React__default.useState('');
+  const allColumns = table.getAllLeafColumns();
+  const tableMeta = table.options.meta;
+  const columns = React__default.useMemo(() => allColumns.filter(column => !isInternalColumn(column.id)).filter(column => query !== null && query !== void 0 && query.length ? getColumnName(column).toLowerCase().includes(query.toLowerCase()) : true), [allColumns, query]);
+  const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
+  const handleReorder = (activeId, overId) => {
+    if (columns.find(column => {
+      var _column$columnDef$met;
+      return column.id === overId && ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.disableReordering);
+    })) {
+      return;
+    }
+    table.setColumnOrder(currentOrder => ensureOrdering(allColumns, arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
+  };
+  const popover = popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
+    align: "end"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-60 flex-col gap-2"
+  }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
+    onChange: event => setQuery(event.target.value),
+    placeholder: texts.table2.columnSettings.search,
+    value: query
+  }) : null, tableMeta.enableColumnReordering && columns.length && !(query !== null && query !== void 0 && query.length) ? /*#__PURE__*/React__default.createElement(Container, {
+    reorder: handleReorder
+  }, /*#__PURE__*/React__default.createElement(List, {
+    id: "columns",
+    className: listClassName
+  }, columns.map(column => {
+    var _column$columnDef$met2, _column$columnDef$met3;
+    return /*#__PURE__*/React__default.createElement(Item, {
+      key: column.id,
+      id: column.id,
+      disabled: (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.disableReordering,
+      asChild: true
+    }, /*#__PURE__*/React__default.createElement(Column, {
+      column: column,
+      draggable: !((_column$columnDef$met3 = column.columnDef.meta) !== null && _column$columnDef$met3 !== void 0 && _column$columnDef$met3.disableReordering),
+      isOrderingEnabled: true
+    }));
+  }))) : /*#__PURE__*/React__default.createElement("div", {
+    className: listClassName
+  }, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column, {
+    column: column,
+    key: column.id
+  })) : texts.table2.columnSettings.noResults))));
+  return /*#__PURE__*/React__default.createElement(Button, {
+    popover: popover,
+    tooltip: texts.table2.columnSettings.tooltip
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "columns"
+  }), " ", texts.table2.columnSettings.button);
+}
+
+export { ColumnSettingsButton };
+//# sourceMappingURL=ColumnSettingsButton.js.map

package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSettingsButton.js","sources":["../../../../../../../../src/components/Table2/components/ColumnSettingsButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Checkbox } from '../../Checkbox/Checkbox';\nimport { Popover } from '../../Popover/Popover';\nimport { Input } from '../../Input/Input';\nimport * as SortablePrimitive from '../../../primitives/Sortable/Sortable';\nimport { Icon } from '../../Icon/Icon';\nimport { ensureOrdering, isInternalColumn } from '../utilities/columns';\nimport { Truncate } from '../../Truncate/Truncate';\n\ntype ColumnProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    column: RTColumn<TType, unknown>;\n    draggable?: boolean;\n    isOrderingEnabled?: boolean;\n};\n\nfunction getColumnName<TType = unknown>(column: RTColumn<TType, unknown>) {\n    return column.columnDef.header?.toString() ?? column.columnDef.id ?? '';\n}\n\nconst Column = React.forwardRef(function Column<TType = unknown>(props: ColumnProps<TType>, ref: React.Ref<HTMLDivElement>) {\n    const { column, draggable = false, isOrderingEnabled, ...dragAttributes } = props;\n    const canHide = column.getCanHide();\n\n    const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {\n        'hover:bg-grey-200': canHide || draggable,\n        'hover:cursor-pointer': canHide,\n        'active:cursor-move active:bg-grey-300': draggable,\n    });\n\n    const attributes = draggable ? dragAttributes : undefined;\n    const text = getColumnName(column);\n    const isVisible = column.getIsVisible();\n\n    return (\n        <div {...attributes} key={column.id} className={className} onClick={() => column.toggleVisibility(!isVisible)} ref={ref}>\n            {draggable ? (\n                <Icon name=\"drag\" className=\"text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5\" />\n            ) : isOrderingEnabled ? (\n                <span className=\"flex w-2\" />\n            ) : null}\n            <Truncate tooltip={text}>\n                <span className=\"flex-grow select-none\">{text}</span>\n            </Truncate>\n            {canHide ? <Checkbox checked={isVisible} onChange={() => column.toggleVisibility(!isVisible)} /> : null}\n        </div>\n    );\n});\n\nexport type ColumnSettingsProps<TType = unknown> = {\n    table: RTable<TType>;\n};\n\nexport function ColumnSettingsButton<TType = unknown>(props: ColumnSettingsProps<TType>) {\n    const { table } = props;\n    const { texts } = useLocalization();\n    const [query, setQuery] = React.useState('');\n    const allColumns = table.getAllLeafColumns();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columns = React.useMemo(\n        () =>\n            allColumns\n                .filter(column => !isInternalColumn(column.id))\n                .filter(column => (query?.length ? getColumnName(column).toLowerCase().includes(query.toLowerCase()) : true)),\n        [allColumns, query]\n    );\n\n    const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';\n\n    const handleReorder = (activeId, overId) => {\n        if (columns.find(column => column.id === overId && column.columnDef.meta?.disableReordering)) {\n            return;\n        }\n\n        table.setColumnOrder(currentOrder =>\n            ensureOrdering(\n                allColumns,\n                SortablePrimitive.arrayMove(\n                    currentOrder,\n                    currentOrder.findIndex(c => c === activeId),\n                    currentOrder.findIndex(c => c === overId)\n                )\n            )\n        );\n    };\n\n    const popover = popoverProps => (\n        <Popover {...popoverProps}>\n            <Popover.Content align=\"end\">\n                <div className=\"flex w-60 flex-col gap-2\">\n                    {table.options.enableHiding ? (\n                        <Input\n                            onChange={event => setQuery(event.target.value)}\n                            placeholder={texts.table2.columnSettings.search}\n                            value={query}\n                        />\n                    ) : null}\n                    {tableMeta.enableColumnReordering && columns.length && !query?.length ? (\n                        <SortablePrimitive.Container reorder={handleReorder}>\n                            <SortablePrimitive.List id=\"columns\" className={listClassName}>\n                                {columns.map(column => (\n                                    <SortablePrimitive.Item\n                                        key={column.id}\n                                        id={column.id}\n                                        disabled={column.columnDef.meta?.disableReordering}\n                                        asChild>\n                                        <Column\n                                            column={column as any}\n                                            draggable={!column.columnDef.meta?.disableReordering}\n                                            isOrderingEnabled\n                                        />\n                                    </SortablePrimitive.Item>\n                                ))}\n                            </SortablePrimitive.List>\n                        </SortablePrimitive.Container>\n                    ) : (\n                        <div className={listClassName}>\n                            {columns.length\n                                ? columns.map(column => <Column column={column as any} key={column.id} />)\n                                : texts.table2.columnSettings.noResults}\n                        </div>\n                    )}\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n\n    return (\n        <Button popover={popover} tooltip={texts.table2.columnSettings.tooltip}>\n            <Icon name=\"columns\" /> {texts.table2.columnSettings.button}\n        </Button>\n    );\n}\n"],"names":["getColumnName","column","columnDef","header","toString","id","Column","React","forwardRef","props","ref","draggable","isOrderingEnabled","dragAttributes","canHide","getCanHide","className","cn","attributes","undefined","text","isVisible","getIsVisible","key","onClick","toggleVisibility","Icon","name","Truncate","tooltip","Checkbox","checked","onChange","ColumnSettingsButton","table","texts","useLocalization","query","setQuery","useState","allColumns","getAllLeafColumns","tableMeta","options","meta","columns","useMemo","filter","isInternalColumn","length","toLowerCase","includes","listClassName","handleReorder","activeId","overId","find","disableReordering","setColumnOrder","currentOrder","ensureOrdering","SortablePrimitive","findIndex","c","popover","popoverProps","Popover","Content","align","enableHiding","Input","event","target","value","placeholder","table2","columnSettings","search","enableColumnReordering","reorder","map","disabled","asChild","noResults","Button","button"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js

@@ -0,0 +1,81 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+import { useMergedRef } from '../../../hooks/useMergedRef.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';
+
+const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeButton(props, ref) {
+  const {
+    scrollToIndex,
+    table,
+    tableRef
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const internalRef = useMergedRef(ref);
+  const meta = table.options.meta;
+  const {
+    isEditing
+  } = meta.editMode;
+  const showWarning = React__default.useCallback(event => {
+    if (isEditing) {
+      event.returnValue = true;
+      return true;
+    }
+    return false;
+  }, [isEditing]);
+  useGlobalKeyDown({
+    key: 'e',
+    meta: true
+  }, event => {
+    var _internalRef$current;
+    event.preventDefault();
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
+  });
+  React__default.useEffect(() => {
+    window.addEventListener('beforeunload', showWarning);
+    return () => {
+      window.removeEventListener('beforeunload', showWarning);
+    };
+  }, [showWarning]);
+  const handleClick = () => {
+    var _tableRef$current;
+    meta.editMode.toggleEditing();
+    (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+    scrollToIndex(meta.activeRowIndex + 1);
+  };
+  const hasVisibleEditableColumns = React__default.useMemo(() => {
+    const hasColumns = table.getVisibleFlatColumns().some(column => {
+      var _column$columnDef$met;
+      return ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control) !== undefined;
+    });
+    if (!hasColumns && isEditing) {
+      handleClick();
+    }
+    return hasColumns;
+  }, [table.getState().columnVisibility]);
+  return /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleClick,
+    className: cn({
+      '!wcag-blue-100': meta.editMode.isEditing
+    }),
+    disabled: !hasVisibleEditableColumns,
+    ref: internalRef,
+    tooltip: hasVisibleEditableColumns ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.editing.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+      className: "ml-2",
+      keys: {
+        key: 'e',
+        meta: true
+      }
+    })) : texts.table2.editing.tooltipDisabled
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "edit"
+  }), texts.table2.editing.button);
+});
+
+export { EditModeButton };
+//# sourceMappingURL=EditModeButton.js.map

package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditModeButton.js","sources":["../../../../../../../../src/components/Table2/components/EditModeButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { Button } from '../../Button/Button';\nimport { Icon } from '../../Icon/Icon';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type EditModeButtonProps = {\n    scrollToIndex: (index: number) => void;\n    table: RTTable<any>;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const EditModeButton = React.forwardRef<HTMLButtonElement, EditModeButtonProps>(function EditModeButton(props, ref) {\n    const { scrollToIndex, table, tableRef } = props;\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const meta = table.options.meta as TableMeta<any>;\n    const { isEditing } = meta.editMode;\n\n    const showWarning = React.useCallback(\n        event => {\n            if (isEditing) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        },\n        [isEditing]\n    );\n\n    useGlobalKeyDown({ key: 'e', meta: true }, (event: KeyboardEvent) => {\n        event.preventDefault();\n        internalRef.current?.click();\n    });\n\n    React.useEffect(() => {\n        window.addEventListener('beforeunload', showWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showWarning);\n        };\n    }, [showWarning]);\n\n    const handleClick = () => {\n        meta.editMode.toggleEditing();\n        tableRef.current?.focus();\n        scrollToIndex(meta.activeRowIndex + 1);\n    };\n\n    const hasVisibleEditableColumns = React.useMemo(() => {\n        const hasColumns = table.getVisibleFlatColumns().some(column => column.columnDef.meta?.control !== undefined);\n\n        if (!hasColumns && isEditing) {\n            handleClick();\n        }\n\n        return hasColumns;\n    }, [table.getState().columnVisibility]);\n\n    return (\n        <Button\n            onClick={handleClick}\n            className={cn({\n                '!wcag-blue-100': meta.editMode.isEditing,\n            })}\n            disabled={!hasVisibleEditableColumns}\n            ref={internalRef}\n            tooltip={\n                hasVisibleEditableColumns ? (\n                    <>\n                        {texts.table2.editing.tooltip}\n                        <Shortcut className=\"ml-2\" keys={{ key: 'e', meta: true }} />\n                    </>\n                ) : (\n                    texts.table2.editing.tooltipDisabled\n                )\n            }>\n            <Icon name=\"edit\" />\n            {texts.table2.editing.button}\n        </Button>\n    );\n});\n"],"names":["EditModeButton","React","forwardRef","props","ref","scrollToIndex","table","tableRef","texts","useLocalization","internalRef","useMergedRef","meta","options","isEditing","editMode","showWarning","useCallback","event","returnValue","useGlobalKeyDown","key","preventDefault","current","click","useEffect","window","addEventListener","removeEventListener","handleClick","toggleEditing","focus","activeRowIndex","hasVisibleEditableColumns","useMemo","hasColumns","getVisibleFlatColumns","some","column","columnDef","control","undefined","getState","columnVisibility","Button","onClick","className","cn","disabled","tooltip","table2","editing","Shortcut","keys","tooltipDisabled","Icon","name","button"],"mappings":";;;;;;;;;MAgBaA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASF,cAAc,CAACG,KAAK,EAAEC,GAAG;EACrH,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;GAAU,GAAGJ,KAAK;EAChD,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,WAAW,GAAGC,YAAY,CAAoBP,GAAG,CAAC;EACxD,MAAMQ,IAAI,GAAGN,KAAK,CAACO,OAAO,CAACD,IAAsB;EACjD,MAAM;IAAEE;GAAW,GAAGF,IAAI,CAACG,QAAQ;EAEnC,MAAMC,WAAW,GAAGf,cAAK,CAACgB,WAAW,CACjCC,KAAK;IACD,IAAIJ,SAAS,EAAE;MACXI,KAAK,CAACC,WAAW,GAAG,IAAI;MACxB,OAAO,IAAI;;IAGf,OAAO,KAAK;GACf,EACD,CAACL,SAAS,CAAC,CACd;EAEDM,gBAAgB,CAAC;IAAEC,GAAG,EAAE,GAAG;IAAET,IAAI,EAAE;GAAM,EAAGM,KAAoB;;IAC5DA,KAAK,CAACI,cAAc,EAAE;IACtB,wBAAAZ,WAAW,CAACa,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;GAC/B,CAAC;EAEFvB,cAAK,CAACwB,SAAS,CAAC;IACZC,MAAM,CAACC,gBAAgB,CAAC,cAAc,EAAEX,WAAW,CAAC;IAEpD,OAAO;MACHU,MAAM,CAACE,mBAAmB,CAAC,cAAc,EAAEZ,WAAW,CAAC;KAC1D;GACJ,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMa,WAAW,GAAG;;IAChBjB,IAAI,CAACG,QAAQ,CAACe,aAAa,EAAE;IAC7B,qBAAAvB,QAAQ,CAACgB,OAAO,sDAAhB,kBAAkBQ,KAAK,EAAE;IACzB1B,aAAa,CAACO,IAAI,CAACoB,cAAc,GAAG,CAAC,CAAC;GACzC;EAED,MAAMC,yBAAyB,GAAGhC,cAAK,CAACiC,OAAO,CAAC;IAC5C,MAAMC,UAAU,GAAG7B,KAAK,CAAC8B,qBAAqB,EAAE,CAACC,IAAI,CAACC,MAAM;MAAA;MAAA,OAAI,0BAAAA,MAAM,CAACC,SAAS,CAAC3B,IAAI,0DAArB,sBAAuB4B,OAAO,MAAKC,SAAS;MAAC;IAE7G,IAAI,CAACN,UAAU,IAAIrB,SAAS,EAAE;MAC1Be,WAAW,EAAE;;IAGjB,OAAOM,UAAU;GACpB,EAAE,CAAC7B,KAAK,CAACoC,QAAQ,EAAE,CAACC,gBAAgB,CAAC,CAAC;EAEvC,oBACI1C,6BAAC2C,MAAM;IACHC,OAAO,EAAEhB,WAAW;IACpBiB,SAAS,EAAEC,EAAE,CAAC;MACV,gBAAgB,EAAEnC,IAAI,CAACG,QAAQ,CAACD;KACnC,CAAC;IACFkC,QAAQ,EAAE,CAACf,yBAAyB;IACpC7B,GAAG,EAAEM,WAAW;IAChBuC,OAAO,EACHhB,yBAAyB,gBACrBhC,4DACKO,KAAK,CAAC0C,MAAM,CAACC,OAAO,CAACF,OAAO,eAC7BhD,6BAACmD,QAAQ;MAACN,SAAS,EAAC,MAAM;MAACO,IAAI,EAAE;QAAEhC,GAAG,EAAE,GAAG;QAAET,IAAI,EAAE;;MAAU,CAC9D,GAEHJ,KAAK,CAAC0C,MAAM,CAACC,OAAO,CAACG;kBAG7BrD,6BAACsD,IAAI;IAACC,IAAI,EAAC;IAAS,EACnBhD,KAAK,CAAC0C,MAAM,CAACC,OAAO,CAACM,MAAM,CACvB;AAEjB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js

@@ -0,0 +1,47 @@
+import React__default from 'react';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { Menu } from '../../Menu/Menu.js';
+
+const convertDensityToHeightIcon = density => {
+  switch (density) {
+    case 'compact':
+      return 'short';
+    case 'normal':
+      return 'medium';
+    case 'comfortable':
+      return 'tall';
+    case 'spacious':
+      return 'extra-tall';
+  }
+};
+const RowDensityButton = ({
+  table
+}) => {
+  const {
+    texts
+  } = useLocalization();
+  const meta = table.options.meta;
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": texts.table2.rowDensity.tooltip,
+    icon: `height-${convertDensityToHeightIcon(meta.rowDensity)}`,
+    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
+      align: "end"
+    }, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
+      onChange: rowDensity => meta.setRowDensity(rowDensity),
+      value: meta.rowDensity
+    }, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+      value: "compact"
+    }, texts.table2.rowDensity.compact), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+      value: "normal"
+    }, texts.table2.rowDensity.normal), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+      value: "comfortable"
+    }, texts.table2.rowDensity.comfortable), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+      value: "spacious"
+    }, texts.table2.rowDensity.spacious)))),
+    tooltip: texts.table2.rowDensity.tooltip
+  });
+};
+
+export { RowDensityButton };
+//# sourceMappingURL=RowDensityButton.js.map

package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowDensityButton.js","sources":["../../../../../../../../src/components/Table2/components/RowDensityButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { IconName } from '../../Icon/Icon';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Menu } from '../../Menu/Menu';\nimport { RowDensity } from '../types';\nimport { useLocalization } from '../../Provider/Localization';\n\nconst convertDensityToHeightIcon = (density: RowDensity) => {\n    switch (density) {\n        case 'compact':\n            return 'short';\n        case 'normal':\n            return 'medium';\n        case 'comfortable':\n            return 'tall';\n        case 'spacious':\n            return 'extra-tall';\n    }\n};\n\ntype RowDensityButtonProps = {\n    table: RTTable<any>;\n};\n\nexport const RowDensityButton = ({ table }: RowDensityButtonProps) => {\n    const { texts } = useLocalization();\n    const meta = table.options.meta as TableMeta<any>;\n\n    return (\n        <IconButton\n            aria-label={texts.table2.rowDensity.tooltip}\n            icon={`height-${convertDensityToHeightIcon(meta.rowDensity)}` as IconName}\n            menu={menuProps => (\n                <Menu {...menuProps}>\n                    <Menu.Content align=\"end\">\n                        <Menu.RadioGroup\n                            onChange={rowDensity => meta.setRowDensity(rowDensity as RowDensity)}\n                            value={meta.rowDensity}>\n                            <Menu.RadioGroup.Item value=\"compact\">{texts.table2.rowDensity.compact}</Menu.RadioGroup.Item>\n                            <Menu.RadioGroup.Item value=\"normal\">{texts.table2.rowDensity.normal}</Menu.RadioGroup.Item>\n                            <Menu.RadioGroup.Item value=\"comfortable\">{texts.table2.rowDensity.comfortable}</Menu.RadioGroup.Item>\n                            <Menu.RadioGroup.Item value=\"spacious\">{texts.table2.rowDensity.spacious}</Menu.RadioGroup.Item>\n                        </Menu.RadioGroup>\n                    </Menu.Content>\n                </Menu>\n            )}\n            tooltip={texts.table2.rowDensity.tooltip}\n        />\n    );\n};\n"],"names":["convertDensityToHeightIcon","density","RowDensityButton","table","texts","useLocalization","meta","options","React","IconButton","table2","rowDensity","tooltip","icon","menu","menuProps","Menu","Content","align","RadioGroup","onChange","setRowDensity","value","Item","compact","normal","comfortable","spacious"],"mappings":";;;;;AAQA,MAAMA,0BAA0B,GAAIC,OAAmB;EACnD,QAAQA,OAAO;IACX,KAAK,SAAS;MACV,OAAO,OAAO;IAClB,KAAK,QAAQ;MACT,OAAO,QAAQ;IACnB,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,UAAU;MACX,OAAO,YAAY;;AAE/B,CAAC;MAMYC,gBAAgB,GAAG,CAAC;EAAEC;CAA8B;EAC7D,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,OAAO,CAACD,IAAsB;EAEjD,oBACIE,6BAACC,UAAU;kBACKL,KAAK,CAACM,MAAM,CAACC,UAAU,CAACC,OAAO;IAC3CC,IAAI,YAAYb,0BAA0B,CAACM,IAAI,CAACK,UAAU,GAAe;IACzEG,IAAI,EAAEC,SAAS,iBACXP,6BAACQ,IAAI,oBAAKD,SAAS,gBACfP,6BAACQ,IAAI,CAACC,OAAO;MAACC,KAAK,EAAC;oBAChBV,6BAACQ,IAAI,CAACG,UAAU;MACZC,QAAQ,EAAET,UAAU,IAAIL,IAAI,CAACe,aAAa,CAACV,UAAwB,CAAC;MACpEW,KAAK,EAAEhB,IAAI,CAACK;oBACZH,6BAACQ,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;OAAWlB,KAAK,CAACM,MAAM,CAACC,UAAU,CAACa,OAAO,CAAwB,eAC9FhB,6BAACQ,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;OAAUlB,KAAK,CAACM,MAAM,CAACC,UAAU,CAACc,MAAM,CAAwB,eAC5FjB,6BAACQ,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;OAAelB,KAAK,CAACM,MAAM,CAACC,UAAU,CAACe,WAAW,CAAwB,eACtGlB,6BAACQ,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;OAAYlB,KAAK,CAACM,MAAM,CAACC,UAAU,CAACgB,QAAQ,CAAwB,CAClF,CACP,CAEtB;IACDf,OAAO,EAAER,KAAK,CAACM,MAAM,CAACC,UAAU,CAACC;IACnC;AAEV;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/Search.js

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { SearchInput } from '../../SearchInput/SearchInput.js';
+
+const Search = props => {
+  const {
+    value,
+    ...attributes
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const ref = React__default.useRef(null);
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      var _props$onSearch;
+      (_props$onSearch = props.onSearch) === null || _props$onSearch === void 0 ? void 0 : _props$onSearch.call(props, '');
+    }
+  };
+  // gets called when the "clear" button is clicked
+  const handleInput = event => {
+    if (props.onInput) {
+      props.onInput(event);
+    }
+    if (!event.isDefaultPrevented() && !event.currentTarget.value) {
+      var _props$onSearch2;
+      (_props$onSearch2 = props.onSearch) === null || _props$onSearch2 === void 0 ? void 0 : _props$onSearch2.call(props, '');
+    }
+  };
+  const handleBlur = event => {
+    var _props$onSearch3;
+    const value = event.target.value;
+    (_props$onSearch3 = props.onSearch) === null || _props$onSearch3 === void 0 ? void 0 : _props$onSearch3.call(props, value);
+  };
+  useGlobalKeyDown({
+    key: 'f',
+    meta: true,
+    shift: false
+  }, event => {
+    if (document.activeElement !== ref.current) {
+      var _ref$current;
+      event.preventDefault();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    }
+  });
+  const className = cn('w-48', {
+    '!wcag-blue-100': !!value
+  });
+  return /*#__PURE__*/React__default.createElement(SearchInput, Object.assign({}, attributes, {
+    className: className,
+    onBlur: handleBlur,
+    onInput: handleInput,
+    onKeyDown: handleKeyDown,
+    placeholder: texts.table2.search.placeholder,
+    ref: ref
+  }));
+};
+
+export { Search };
+//# sourceMappingURL=Search.js.map

package/dist/esm/packages/taco/src/components/Table2/components/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Table2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { SearchInput, SearchInputProps } from '../../SearchInput/SearchInput';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport const Search = (props: SearchInputProps) => {\n    const { value, ...attributes } = props;\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Escape') {\n            props.onSearch?.('');\n        }\n    };\n\n    // gets called when the \"clear\" button is clicked\n    const handleInput = (event: React.FormEvent<HTMLInputElement>) => {\n        if (props.onInput) {\n            props.onInput(event);\n        }\n\n        if (!event.isDefaultPrevented() && !event.currentTarget.value) {\n            props.onSearch?.('');\n        }\n    };\n\n    const handleBlur = event => {\n        const value = event.target.value;\n        props.onSearch?.(value);\n    };\n\n    useGlobalKeyDown({ key: 'f', meta: true, shift: false }, (event: KeyboardEvent) => {\n        if (document.activeElement !== ref.current) {\n            event.preventDefault();\n            ref.current?.focus();\n        }\n    });\n\n    const className = cn('w-48', {\n        '!wcag-blue-100': !!value,\n    });\n\n    return (\n        <SearchInput\n            {...attributes}\n            className={className}\n            onBlur={handleBlur}\n            onInput={handleInput}\n            onKeyDown={handleKeyDown}\n            placeholder={texts.table2.search.placeholder}\n            ref={ref}\n        />\n    );\n};\n"],"names":["Search","props","value","attributes","texts","useLocalization","ref","React","useRef","handleKeyDown","event","key","onSearch","handleInput","onInput","isDefaultPrevented","currentTarget","handleBlur","target","useGlobalKeyDown","meta","shift","document","activeElement","current","preventDefault","focus","className","cn","SearchInput","onBlur","onKeyDown","placeholder","table2","search"],"mappings":";;;;;;MAMaA,MAAM,GAAIC,KAAuB;EAC1C,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGF,KAAK;EACtC,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;EAEhD,MAAMC,aAAa,GAAIC,KAA4C;IAC/D,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;MAAA;MACxB,mBAAAV,KAAK,CAACW,QAAQ,oDAAd,qBAAAX,KAAK,EAAY,EAAE,CAAC;;GAE3B;;EAGD,MAAMY,WAAW,GAAIH,KAAwC;IACzD,IAAIT,KAAK,CAACa,OAAO,EAAE;MACfb,KAAK,CAACa,OAAO,CAACJ,KAAK,CAAC;;IAGxB,IAAI,CAACA,KAAK,CAACK,kBAAkB,EAAE,IAAI,CAACL,KAAK,CAACM,aAAa,CAACd,KAAK,EAAE;MAAA;MAC3D,oBAAAD,KAAK,CAACW,QAAQ,qDAAd,sBAAAX,KAAK,EAAY,EAAE,CAAC;;GAE3B;EAED,MAAMgB,UAAU,GAAGP,KAAK;;IACpB,MAAMR,KAAK,GAAGQ,KAAK,CAACQ,MAAM,CAAChB,KAAK;IAChC,oBAAAD,KAAK,CAACW,QAAQ,qDAAd,sBAAAX,KAAK,EAAYC,KAAK,CAAC;GAC1B;EAEDiB,gBAAgB,CAAC;IAAER,GAAG,EAAE,GAAG;IAAES,IAAI,EAAE,IAAI;IAAEC,KAAK,EAAE;GAAO,EAAGX,KAAoB;IAC1E,IAAIY,QAAQ,CAACC,aAAa,KAAKjB,GAAG,CAACkB,OAAO,EAAE;MAAA;MACxCd,KAAK,CAACe,cAAc,EAAE;MACtB,gBAAAnB,GAAG,CAACkB,OAAO,iDAAX,aAAaE,KAAK,EAAE;;GAE3B,CAAC;EAEF,MAAMC,SAAS,GAAGC,EAAE,CAAC,MAAM,EAAE;IACzB,gBAAgB,EAAE,CAAC,CAAC1B;GACvB,CAAC;EAEF,oBACIK,6BAACsB,WAAW,oBACJ1B,UAAU;IACdwB,SAAS,EAAEA,SAAS;IACpBG,MAAM,EAAEb,UAAU;IAClBH,OAAO,EAAED,WAAW;IACpBkB,SAAS,EAAEtB,aAAa;IACxBuB,WAAW,EAAE5B,KAAK,CAAC6B,MAAM,CAACC,MAAM,CAACF,WAAW;IAC5C1B,GAAG,EAAEA;KACP;AAEV;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/column/Base.js

@@ -0,0 +1,32 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { getCellAlignmentClasses, getFrozenShadowClasses } from '../../utilities/cell.js';
+
+const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnBase(props, ref) {
+  var _column$columnDef$met;
+  const {
+    column,
+    frozenColumnIds,
+    scrolled,
+    style,
+    table,
+    ...attributes
+  } = props;
+  const isFrozenColumn = !!column.getIsPinned();
+  const meta = table.options.meta;
+  const left = meta.columnOffsets[column.id];
+  const className = cn('border-grey-300', getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), getFrozenShadowClasses(column, frozenColumnIds, scrolled), {
+    'cursor-pointer': !!attributes.onClick
+  }, attributes.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: className,
+    style: {
+      ...style,
+      left: isFrozenColumn && Number.isInteger(left) ? left : undefined
+    },
+    ref: ref
+  }));
+});
+
+export { ColumnBase };
+//# sourceMappingURL=Base.js.map

package/dist/esm/packages/taco/src/components/Table2/components/column/Base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Base.js","sources":["../../../../../../../../../src/components/Table2/components/column/Base.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { getCellAlignmentClasses, getFrozenShadowClasses } from '../../utilities/cell';\n\nexport type ColumnBaseProps<TType = any> = React.HTMLAttributes<HTMLDivElement> & {\n    column: RTColumn<TType, any>;\n    frozenColumnIds: string[];\n    scrolled: boolean;\n    table: RTTable<TType>;\n};\n\nexport const ColumnBase = React.forwardRef<HTMLDivElement, ColumnBaseProps>(function Table2ColumnBase(props, ref) {\n    const { column, frozenColumnIds, scrolled, style, table, ...attributes } = props;\n    const isFrozenColumn = !!column.getIsPinned();\n    const meta = table.options.meta as TableMeta<any>;\n    const left = meta.columnOffsets[column.id];\n\n    const className = cn(\n        'border-grey-300',\n        getCellAlignmentClasses(column.columnDef.meta?.align),\n        getFrozenShadowClasses(column, frozenColumnIds, scrolled),\n        {\n            'cursor-pointer': !!attributes.onClick,\n        },\n        attributes.className\n    );\n\n    return (\n        <div\n            {...attributes}\n            className={className}\n            style={{ ...style, left: isFrozenColumn && Number.isInteger(left) ? left : undefined }}\n            ref={ref}\n        />\n    );\n});\n"],"names":["ColumnBase","React","forwardRef","Table2ColumnBase","props","ref","column","frozenColumnIds","scrolled","style","table","attributes","isFrozenColumn","getIsPinned","meta","options","left","columnOffsets","id","className","cn","getCellAlignmentClasses","columnDef","align","getFrozenShadowClasses","onClick","Number","isInteger","undefined"],"mappings":";;;;MAYaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAkC,SAASC,gBAAgB,CAACC,KAAK,EAAEC,GAAG;;EAC5G,MAAM;IAAEC,MAAM;IAAEC,eAAe;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAChF,MAAMQ,cAAc,GAAG,CAAC,CAACN,MAAM,CAACO,WAAW,EAAE;EAC7C,MAAMC,IAAI,GAAGJ,KAAK,CAACK,OAAO,CAACD,IAAsB;EACjD,MAAME,IAAI,GAAGF,IAAI,CAACG,aAAa,CAACX,MAAM,CAACY,EAAE,CAAC;EAE1C,MAAMC,SAAS,GAAGC,EAAE,CAChB,iBAAiB,EACjBC,uBAAuB,0BAACf,MAAM,CAACgB,SAAS,CAACR,IAAI,0DAArB,sBAAuBS,KAAK,CAAC,EACrDC,sBAAsB,CAAClB,MAAM,EAAEC,eAAe,EAAEC,QAAQ,CAAC,EACzD;IACI,gBAAgB,EAAE,CAAC,CAACG,UAAU,CAACc;GAClC,EACDd,UAAU,CAACQ,SAAS,CACvB;EAED,oBACIlB,sDACQU,UAAU;IACdQ,SAAS,EAAEA,SAAS;IACpBV,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAEO,IAAI,EAAEJ,cAAc,IAAIc,MAAM,CAACC,SAAS,CAACX,IAAI,CAAC,GAAGA,IAAI,GAAGY;KAAW;IACtFvB,GAAG,EAAEA;KACP;AAEV,CAAC;;;;"}