@economic/taco 1.19.1 → 1.21.0

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,238 @@
+import React__default from 'react';
+import { Icon } from '../../Icon/Icon.js';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { Input } from '../../Input/Input.js';
+import { Popover } from '../../Popover/Popover.js';
+import { isInternalColumn, COLUMN_ID_FOR_SELECTION, COLUMN_ID_FOR_EXPANSION } from '../utilities/columns.js';
+import { Container } from '../../../primitives/Sortable/components/Container.js';
+import '@dnd-kit/sortable';
+import { Item } from '../../../primitives/Sortable/components/Item.js';
+import { List } from '../../../primitives/Sortable/components/List.js';
+
+const OrderableColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var _column$columnDef$hea;
+  const {
+    canBeReordered,
+    column,
+    isReorderingAllowed,
+    ...attributes
+  } = props;
+  let icon;
+  if (canBeReordered) {
+    icon = /*#__PURE__*/React__default.createElement(Icon, {
+      name: "drag",
+      className: "text-grey-500 hover:text-grey-700 mr-0.5 -ml-2 -mt-px cursor-move"
+    });
+  } else if (isReorderingAllowed) {
+    icon = /*#__PURE__*/React__default.createElement("span", {
+      className: "mr-0.5 inline-flex w-4"
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: "hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-1 px-2 aria-pressed:z-10",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "pointer-events-none"
+  }, icon, (_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id), column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
+    checked: column.getIsVisible(),
+    onChange: column.toggleVisibility
+  }) : null);
+});
+const isOrderingAllowed = (table, column) => {
+  var _column$columnDef$met;
+  const meta = table.options.meta;
+  if (table.options.enablePinning) {
+    return true;
+  }
+  return meta.enableColumnReordering ? !((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.disableReordering) : false;
+};
+const SortableColumnContainer = ({
+  state,
+  moveColumn,
+  reorderColumn,
+  table
+}) => {
+  var _ref;
+  const meta = table.options.meta;
+  const reorder = (activeId, overId, listId) => {
+    const draggedColumn = state[listId].find(c => c.id === activeId);
+    const targetColumn = state[listId].find(c => c.id === overId);
+    if (draggedColumn && targetColumn) {
+      reorderColumn(draggedColumn.id, targetColumn.id, listId === 'pinned');
+    }
+  };
+  const move = (activeId, oldListId) => {
+    const column = state[oldListId].find(c => c.id === activeId);
+    if (column) {
+      moveColumn(column);
+    }
+  };
+  const isReorderingAllowed = (_ref = meta.enableColumnReordering || table.options.enablePinning) !== null && _ref !== void 0 ? _ref : false;
+  if (!table.options.enablePinning) {
+    return /*#__PURE__*/React__default.createElement(Container, {
+      reorder: reorder,
+      move: move
+    }, /*#__PURE__*/React__default.createElement(List, {
+      id: "other",
+      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+    }, state.other.map(column => {
+      var _column$columnDef$met2;
+      const canBeReordered = isOrderingAllowed(table, column);
+      return /*#__PURE__*/React__default.createElement(Item, {
+        key: column.id,
+        disabled: (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.disableReordering,
+        id: column.id,
+        asChild: true
+      }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
+        canBeReordered: canBeReordered,
+        column: column,
+        isReorderingAllowed: isReorderingAllowed,
+        onDoubleClick: event => {
+          event.stopPropagation();
+          move(column.id, 'other');
+        }
+      }));
+    })));
+  }
+  return /*#__PURE__*/React__default.createElement(Container, {
+    reorder: reorder,
+    move: move
+  }, /*#__PURE__*/React__default.createElement("h5", {
+    className: "mx-4"
+  }, "Pinned columns"), /*#__PURE__*/React__default.createElement(List, {
+    id: "pinned",
+    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+  }, state.pinned.length ? state.pinned.map(column => {
+    var _column$columnDef$met3;
+    const canBeReordered = isOrderingAllowed(table, column);
+    return /*#__PURE__*/React__default.createElement(Item, {
+      key: column.id,
+      disabled: (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.disableReordering,
+      id: column.id,
+      asChild: true
+    }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
+      canBeReordered: canBeReordered,
+      column: column,
+      isReorderingAllowed: isReorderingAllowed,
+      onDoubleClick: event => {
+        event.stopPropagation();
+        move(column.id, 'pinned');
+      }
+    }));
+  }) : /*#__PURE__*/React__default.createElement("p", {
+    className: "text-grey-500 mb-0 flex h-8 items-center px-2"
+  }, "Drop column here to pin")), /*#__PURE__*/React__default.createElement("h5", {
+    className: "mx-4"
+  }, "Other columns"), /*#__PURE__*/React__default.createElement(List, {
+    id: "other",
+    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+  }, state.other.length ? state.other.map(column => {
+    var _column$columnDef$met4;
+    const canBeReordered = isOrderingAllowed(table, column);
+    return /*#__PURE__*/React__default.createElement(Item, {
+      key: column.id,
+      disabled: (_column$columnDef$met4 = column.columnDef.meta) === null || _column$columnDef$met4 === void 0 ? void 0 : _column$columnDef$met4.disableReordering,
+      id: column.id,
+      asChild: true
+    }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
+      canBeReordered: canBeReordered,
+      column: column,
+      isReorderingAllowed: isReorderingAllowed,
+      onDoubleClick: event => {
+        event.stopPropagation();
+        move(column.id, 'other');
+      }
+    }));
+  }) : /*#__PURE__*/React__default.createElement("p", {
+    className: "text-grey-500 mb-0 flex h-8 items-center px-2"
+  }, "Drop column here to unpin")));
+};
+const reorder = (draggedColumnId, targetColumnId, list = []) => {
+  const nextColumnOrder = [...list];
+  nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === targetColumnId), 0, nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === draggedColumnId), 1)[0]);
+  return nextColumnOrder;
+};
+const ColumnSettingsButton = ({
+  table
+}) => {
+  const [query, setQuery] = React__default.useState('');
+  const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const [state, setState] = React__default.useState({
+    pinned: columns.filter(column => column.getIsPinned()),
+    other: columns.filter(column => !column.getIsPinned())
+  });
+  const pinColumn = column => {
+    if (state.pinned.find(c => c.id === column.id)) {
+      setState(currentState => ({
+        pinned: currentState.pinned.filter(c => c.id !== column.id),
+        other: [column].concat(...currentState.other)
+      }));
+    } else {
+      setState(currentState => ({
+        pinned: currentState.pinned.concat(column),
+        other: currentState.other.filter(c => c.id !== column.id)
+      }));
+    }
+  };
+  const reorderColumn = (draggedColumnId, targetColumnId, pinned) => {
+    if (pinned) {
+      setState(currentState => ({
+        ...currentState,
+        pinned: reorder(draggedColumnId, targetColumnId, currentState.pinned)
+      }));
+    } else {
+      setState(currentState => ({
+        ...currentState,
+        other: reorder(draggedColumnId, targetColumnId, currentState.other)
+      }));
+    }
+  };
+  // probably a more elegant way to do this without local state but had
+  // a range of issues using the native apis directly
+  React__default.useEffect(() => {
+    const internals = [];
+    if (table.options.enableRowSelection) {
+      internals.push(COLUMN_ID_FOR_SELECTION);
+    }
+    if (table.options.enableExpanding) {
+      internals.push(COLUMN_ID_FOR_EXPANSION);
+    }
+    table.setColumnPinning({
+      left: internals.concat(...state.pinned.map(c => c.id))
+    });
+    table.setColumnOrder(internals.concat([...state.pinned, ...state.other].map(c => c.id)));
+  }, [state]);
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "Change column settings",
+    icon: "columns",
+    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"
+    }, /*#__PURE__*/React__default.createElement(Input, {
+      onChange: event => setQuery(event.target.value),
+      placeholder: "Search column...",
+      value: query
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto"
+    }, query ? columns.filter(column => {
+      var _column$columnDef$hea2;
+      return (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString().includes(query);
+    }).map(column => /*#__PURE__*/React__default.createElement(OrderableColumn, {
+      key: column.id,
+      canBeReordered: false,
+      column: column,
+      isReorderingAllowed: false
+    })) : /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
+      state: state,
+      moveColumn: pinColumn,
+      reorderColumn: reorderColumn,
+      table: table
+    }))))),
+    tooltip: "Column settings"
+  });
+};
+
+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 { Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { Checkbox } from '../../Checkbox/Checkbox';\nimport { Icon } from '../../Icon/Icon';\nimport { Input } from '../../Input/Input';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Popover } from '../../Popover/Popover';\nimport * as Sortable from '../../../primitives/Sortable/Sortable';\nimport { COLUMN_ID_FOR_EXPANSION, COLUMN_ID_FOR_SELECTION, isInternalColumn } from '../utilities/columns';\nimport { SortableItemId } from '../../../primitives/Sortable/Sortable';\n\ntype OrderableColumnProps = React.HTMLAttributes<HTMLDivElement> & {\n    canBeReordered: boolean;\n    column: RTColumn<any, any>;\n    isReorderingAllowed: boolean;\n};\n\nconst OrderableColumn = React.forwardRef<HTMLDivElement, OrderableColumnProps>((props, ref) => {\n    const { canBeReordered, column, isReorderingAllowed, ...attributes } = props;\n\n    let icon;\n\n    if (canBeReordered) {\n        icon = <Icon name=\"drag\" className=\"text-grey-500 hover:text-grey-700 mr-0.5 -ml-2 -mt-px cursor-move\" />;\n    } else if (isReorderingAllowed) {\n        icon = <span className=\"mr-0.5 inline-flex w-4\" />;\n    }\n\n    return (\n        <div\n            {...attributes}\n            className=\"hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-1 px-2 aria-pressed:z-10\"\n            ref={ref}>\n            <span className=\"pointer-events-none\">\n                {icon}\n                {column.columnDef.header ?? column.columnDef.id}\n            </span>\n            {column.getCanHide() ? <Checkbox checked={column.getIsVisible()} onChange={column.toggleVisibility} /> : null}\n        </div>\n    );\n});\n\nconst isOrderingAllowed = (table, column) => {\n    const meta = table.options.meta as TableMeta<any>;\n\n    if (table.options.enablePinning) {\n        return true;\n    }\n\n    return meta.enableColumnReordering ? !column.columnDef.meta?.disableReordering : false;\n};\n\ntype SortableColumnContainerProps = {\n    state: PinnedState;\n    moveColumn: (column: RTColumn<any, any>) => void;\n    reorderColumn: (draggedColumnId: string, targetColumnId: string, pinned: boolean) => void;\n    table: RTTable<any>;\n};\n\nconst SortableColumnContainer = ({ state, moveColumn, reorderColumn, table }: SortableColumnContainerProps) => {\n    const meta = table.options.meta as TableMeta<any>;\n\n    const reorder = (activeId: SortableItemId, overId: SortableItemId, listId: string) => {\n        const draggedColumn: RTColumn<any, any> = state[listId].find(c => c.id === activeId);\n        const targetColumn: RTColumn<any, any> = state[listId].find(c => c.id === overId);\n\n        if (draggedColumn && targetColumn) {\n            reorderColumn(draggedColumn.id, targetColumn.id, listId === 'pinned');\n        }\n    };\n\n    const move = (activeId: SortableItemId, oldListId: string) => {\n        const column = state[oldListId].find(c => c.id === activeId);\n\n        if (column) {\n            moveColumn(column);\n        }\n    };\n\n    const isReorderingAllowed = (meta.enableColumnReordering || table.options.enablePinning) ?? false;\n\n    if (!table.options.enablePinning) {\n        return (\n            <Sortable.Container reorder={reorder} move={move}>\n                <Sortable.List id=\"other\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2\">\n                    {state.other.map((column: RTColumn<any, any>) => {\n                        const canBeReordered = isOrderingAllowed(table, column);\n\n                        return (\n                            <Sortable.Item\n                                key={column.id}\n                                disabled={column.columnDef.meta?.disableReordering}\n                                id={column.id}\n                                asChild>\n                                <OrderableColumn\n                                    canBeReordered={canBeReordered}\n                                    column={column}\n                                    isReorderingAllowed={isReorderingAllowed}\n                                    onDoubleClick={event => {\n                                        event.stopPropagation();\n                                        move(column.id, 'other');\n                                    }}\n                                />\n                            </Sortable.Item>\n                        );\n                    })}\n                </Sortable.List>\n            </Sortable.Container>\n        );\n    }\n\n    return (\n        <Sortable.Container reorder={reorder} move={move}>\n            <h5 className=\"mx-4\">Pinned columns</h5>\n            <Sortable.List id=\"pinned\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2\">\n                {state.pinned.length ? (\n                    state.pinned.map(column => {\n                        const canBeReordered = isOrderingAllowed(table, column);\n\n                        return (\n                            <Sortable.Item\n                                key={column.id}\n                                disabled={column.columnDef.meta?.disableReordering}\n                                id={column.id}\n                                asChild>\n                                <OrderableColumn\n                                    canBeReordered={canBeReordered}\n                                    column={column}\n                                    isReorderingAllowed={isReorderingAllowed}\n                                    onDoubleClick={event => {\n                                        event.stopPropagation();\n                                        move(column.id, 'pinned');\n                                    }}\n                                />\n                            </Sortable.Item>\n                        );\n                    })\n                ) : (\n                    <p className=\"text-grey-500 mb-0 flex h-8 items-center px-2\">Drop column here to pin</p>\n                )}\n            </Sortable.List>\n            <h5 className=\"mx-4\">Other columns</h5>\n\n            <Sortable.List id=\"other\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2\">\n                {state.other.length ? (\n                    state.other.map((column: RTColumn<any, any>) => {\n                        const canBeReordered = isOrderingAllowed(table, column);\n\n                        return (\n                            <Sortable.Item\n                                key={column.id}\n                                disabled={column.columnDef.meta?.disableReordering}\n                                id={column.id}\n                                asChild>\n                                <OrderableColumn\n                                    canBeReordered={canBeReordered}\n                                    column={column}\n                                    isReorderingAllowed={isReorderingAllowed}\n                                    onDoubleClick={event => {\n                                        event.stopPropagation();\n                                        move(column.id, 'other');\n                                    }}\n                                />\n                            </Sortable.Item>\n                        );\n                    })\n                ) : (\n                    <p className=\"text-grey-500 mb-0 flex h-8 items-center px-2\">Drop column here to unpin</p>\n                )}\n            </Sortable.List>\n        </Sortable.Container>\n    );\n};\n\nconst reorder = (draggedColumnId: string, targetColumnId: string, list: RTColumn<any>[] = []): RTColumn<any>[] => {\n    const nextColumnOrder = [...list];\n    nextColumnOrder.splice(\n        nextColumnOrder.findIndex(c => c.id === targetColumnId),\n        0,\n        nextColumnOrder.splice(\n            nextColumnOrder.findIndex(c => c.id === draggedColumnId),\n            1\n        )[0]\n    );\n    return nextColumnOrder;\n};\n\ntype PinnedState = {\n    pinned: RTColumn<any>[];\n    other: RTColumn<any>[];\n};\ntype ColumnSettingsButtonProps = {\n    table: RTTable<any>;\n};\n\nexport const ColumnSettingsButton = ({ table }: ColumnSettingsButtonProps) => {\n    const [query, setQuery] = React.useState('');\n    const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));\n\n    const [state, setState] = React.useState<PinnedState>({\n        pinned: columns.filter(column => column.getIsPinned()),\n        other: columns.filter(column => !column.getIsPinned()),\n    });\n\n    const pinColumn = (column: RTColumn<any, any>) => {\n        if (state.pinned.find(c => c.id === column.id)) {\n            setState(currentState => ({\n                pinned: currentState.pinned.filter(c => c.id !== column.id),\n                other: [column].concat(...currentState.other),\n            }));\n        } else {\n            setState(currentState => ({\n                pinned: currentState.pinned.concat(column),\n                other: currentState.other.filter(c => c.id !== column.id),\n            }));\n        }\n    };\n\n    const reorderColumn = (draggedColumnId: string, targetColumnId: string, pinned: boolean) => {\n        if (pinned) {\n            setState(currentState => ({\n                ...currentState,\n                pinned: reorder(draggedColumnId, targetColumnId, currentState.pinned),\n            }));\n        } else {\n            setState(currentState => ({\n                ...currentState,\n                other: reorder(draggedColumnId, targetColumnId, currentState.other),\n            }));\n        }\n    };\n\n    // probably a more elegant way to do this without local state but had\n    // a range of issues using the native apis directly\n    React.useEffect(() => {\n        const internals: string[] = [];\n\n        if (table.options.enableRowSelection) {\n            internals.push(COLUMN_ID_FOR_SELECTION);\n        }\n\n        if (table.options.enableExpanding) {\n            internals.push(COLUMN_ID_FOR_EXPANSION);\n        }\n\n        table.setColumnPinning({ left: internals.concat(...state.pinned.map(c => c.id)) });\n        table.setColumnOrder(internals.concat([...state.pinned, ...state.other].map(c => c.id)));\n    }, [state]);\n\n    return (\n        <IconButton\n            aria-label=\"Change column settings\"\n            icon=\"columns\"\n            popover={popoverProps => (\n                <Popover {...popoverProps}>\n                    <Popover.Content align=\"end\">\n                        <div className=\"flex w-60 flex-col gap-2\">\n                            <Input\n                                onChange={event => setQuery(event.target.value)}\n                                placeholder=\"Search column...\"\n                                value={query}\n                            />\n                            <div className=\"-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto\">\n                                {query ? (\n                                    columns\n                                        .filter(column => column.columnDef.header?.toString().includes(query))\n                                        .map(column => (\n                                            <OrderableColumn\n                                                key={column.id}\n                                                canBeReordered={false}\n                                                column={column}\n                                                isReorderingAllowed={false}\n                                            />\n                                        ))\n                                ) : (\n                                    <SortableColumnContainer\n                                        state={state}\n                                        moveColumn={pinColumn}\n                                        reorderColumn={reorderColumn}\n                                        table={table}\n                                    />\n                                )}\n                            </div>\n                        </div>\n                    </Popover.Content>\n                </Popover>\n            )}\n            tooltip=\"Column settings\"\n        />\n    );\n};\n"],"names":["OrderableColumn","React","forwardRef","props","ref","canBeReordered","column","isReorderingAllowed","attributes","icon","Icon","name","className","columnDef","header","id","getCanHide","Checkbox","checked","getIsVisible","onChange","toggleVisibility","isOrderingAllowed","table","meta","options","enablePinning","enableColumnReordering","disableReordering","SortableColumnContainer","state","moveColumn","reorderColumn","reorder","activeId","overId","listId","draggedColumn","find","c","targetColumn","move","oldListId","Sortable","other","map","key","disabled","asChild","onDoubleClick","event","stopPropagation","pinned","length","draggedColumnId","targetColumnId","list","nextColumnOrder","splice","findIndex","ColumnSettingsButton","query","setQuery","useState","columns","getAllLeafColumns","filter","isInternalColumn","setState","getIsPinned","pinColumn","currentState","concat","useEffect","internals","enableRowSelection","push","COLUMN_ID_FOR_SELECTION","enableExpanding","COLUMN_ID_FOR_EXPANSION","setColumnPinning","left","setColumnOrder","IconButton","popover","popoverProps","Popover","Content","align","Input","target","value","placeholder","toString","includes","tooltip"],"mappings":"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"}

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

@@ -0,0 +1,58 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+import { Button } from '../../Button/Button.js';
+import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { Shortcut } from '../../Shortcut/Shortcut.js';
+import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';
+
+const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeButton(props, ref) {
+  const {
+    table,
+    tableRef
+  } = props;
+  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]);
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {
+      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();
+  };
+  return /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleClick,
+    className: cn({
+      '!wcag-blue-100': meta.editMode.isEditing
+    }),
+    ref: internalRef,
+    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Edit", /*#__PURE__*/React__default.createElement(Shortcut, {
+      className: "ml-2",
+      keys: ['Ctrl', 'E']
+    }))
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "edit"
+  }), "Edit");
+});
+
+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 { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut';\n\nexport type EditModeButtonProps = {\n    table: RTTable<any>;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const EditModeButton = React.forwardRef<HTMLButtonElement, EditModeButtonProps>(function EditModeButton(props, ref) {\n    const { table, tableRef } = props;\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    useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n        if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {\n            event.preventDefault();\n            internalRef.current?.click();\n        }\n    });\n\n    React.useEffect(() => {\n        window.addEventListener('beforeunload', showWarning);\n\n        return () => window.removeEventListener('beforeunload', showWarning);\n    }, [showWarning]);\n\n    const handleClick = () => {\n        meta.editMode.toggleEditing();\n        tableRef.current?.focus();\n    };\n\n    return (\n        <Button\n            onClick={handleClick}\n            className={cn({\n                '!wcag-blue-100': meta.editMode.isEditing,\n            })}\n            ref={internalRef}\n            tooltip={\n                <>\n                    Edit\n                    <Shortcut className=\"ml-2\" keys={['Ctrl', 'E']} />\n                </>\n            }>\n            <Icon name=\"edit\" />\n            Edit\n        </Button>\n    );\n});\n"],"names":["EditModeButton","React","forwardRef","props","ref","table","tableRef","internalRef","useMergedRef","meta","options","isEditing","editMode","showWarning","useCallback","event","returnValue","useGlobalKeyboardShortcut","key","ctrlKey","metaKey","preventDefault","current","click","useEffect","window","addEventListener","removeEventListener","handleClick","toggleEditing","focus","Button","onClick","className","cn","tooltip","Shortcut","keys","Icon","name"],"mappings":";;;;;;;;MAcaA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASF,cAAc,CAACG,KAAK,EAAEC,GAAG;EACrH,MAAM;IAAEC,KAAK;IAAEC;GAAU,GAAGH,KAAK;EACjC,MAAMI,WAAW,GAAGC,YAAY,CAAoBJ,GAAG,CAAC;EACxD,MAAMK,IAAI,GAAGJ,KAAK,CAACK,OAAO,CAACD,IAAsB;EACjD,MAAM;IAAEE;GAAW,GAAGF,IAAI,CAACG,QAAQ;EAEnC,MAAMC,WAAW,GAAGZ,cAAK,CAACa,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,yBAAyB,CAAEF,KAAoB;IAC3C,IAAIA,KAAK,CAACG,GAAG,KAAK,GAAG,KAAKH,KAAK,CAACI,OAAO,IAAIJ,KAAK,CAACK,OAAO,CAAC,EAAE;MAAA;MACvDL,KAAK,CAACM,cAAc,EAAE;MACtB,wBAAAd,WAAW,CAACe,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;;GAEnC,CAAC;EAEFtB,cAAK,CAACuB,SAAS,CAAC;IACZC,MAAM,CAACC,gBAAgB,CAAC,cAAc,EAAEb,WAAW,CAAC;IAEpD,OAAO,MAAMY,MAAM,CAACE,mBAAmB,CAAC,cAAc,EAAEd,WAAW,CAAC;GACvE,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMe,WAAW,GAAG;;IAChBnB,IAAI,CAACG,QAAQ,CAACiB,aAAa,EAAE;IAC7B,qBAAAvB,QAAQ,CAACgB,OAAO,sDAAhB,kBAAkBQ,KAAK,EAAE;GAC5B;EAED,oBACI7B,6BAAC8B,MAAM;IACHC,OAAO,EAAEJ,WAAW;IACpBK,SAAS,EAAEC,EAAE,CAAC;MACV,gBAAgB,EAAEzB,IAAI,CAACG,QAAQ,CAACD;KACnC,CAAC;IACFP,GAAG,EAAEG,WAAW;IAChB4B,OAAO,eACHlC,iFAEIA,6BAACmC,QAAQ;MAACH,SAAS,EAAC,MAAM;MAACI,IAAI,EAAE,CAAC,MAAM,EAAE,GAAG;MAAK;kBAG1DpC,6BAACqC,IAAI;IAACC,IAAI,EAAC;IAAS,SAEf;AAEjB,CAAC;;;;"}

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

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { Menu } from '../../Menu/Menu.js';
+
+const RowDensityButton = ({
+  table
+}) => {
+  const meta = table.options.meta;
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "Change row density",
+    icon: `density-${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"
+    }, "Compact"), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+      value: "normal"
+    }, "Normal"), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+      value: "comfortable"
+    }, "Comfortable"), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+      value: "spacious"
+    }, "Spacious")))),
+    tooltip: "Row density"
+  });
+};
+
+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';\n\ntype RowDensityButtonProps = {\n    table: RTTable<any>;\n};\n\nexport const RowDensityButton = ({ table }: RowDensityButtonProps) => {\n    const meta = table.options.meta as TableMeta<any>;\n    return (\n        <IconButton\n            aria-label=\"Change row density\"\n            icon={`density-${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\">Compact</Menu.RadioGroup.Item>\n                            <Menu.RadioGroup.Item value=\"normal\">Normal</Menu.RadioGroup.Item>\n                            <Menu.RadioGroup.Item value=\"comfortable\">Comfortable</Menu.RadioGroup.Item>\n                            <Menu.RadioGroup.Item value=\"spacious\">Spacious</Menu.RadioGroup.Item>\n                        </Menu.RadioGroup>\n                    </Menu.Content>\n                </Menu>\n            )}\n            tooltip=\"Row density\"\n        />\n    );\n};\n"],"names":["RowDensityButton","table","meta","options","React","IconButton","icon","rowDensity","menu","menuProps","Menu","Content","align","RadioGroup","onChange","setRowDensity","value","Item","tooltip"],"mappings":";;;;MAWaA,gBAAgB,GAAG,CAAC;EAAEC;CAA8B;EAC7D,MAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,CAACD,IAAsB;EACjD,oBACIE,6BAACC,UAAU;kBACI,oBAAoB;IAC/BC,IAAI,aAAaJ,IAAI,CAACK,YAAwB;IAC9CC,IAAI,EAAEC,SAAS,iBACXL,6BAACM,IAAI,oBAAKD,SAAS,gBACfL,6BAACM,IAAI,CAACC,OAAO;MAACC,KAAK,EAAC;oBAChBR,6BAACM,IAAI,CAACG,UAAU;MACZC,QAAQ,EAAEP,UAAU,IAAIL,IAAI,CAACa,aAAa,CAACR,UAAwB,CAAC;MACpES,KAAK,EAAEd,IAAI,CAACK;oBACZH,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;iBAAwC,eACpEZ,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;gBAAsC,eAClEZ,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;qBAAgD,eAC5EZ,6BAACM,IAAI,CAACG,UAAU,CAACI,IAAI;MAACD,KAAK,EAAC;kBAA0C,CACxD,CACP,CAEtB;IACDE,OAAO,EAAC;IACV;AAEV;;;;"}

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

@@ -0,0 +1,55 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { SearchInput } from '../../SearchInput/SearchInput.js';
+import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';
+
+const Search = props => {
+  const {
+    value,
+    ...attributes
+  } = props;
+  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);
+  };
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
+      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,
+    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 { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut';\n\nexport const Search = (props: SearchInputProps) => {\n    const { value, ...attributes } = props;\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    useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n        if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {\n            if (document.activeElement !== ref.current) {\n                event.preventDefault();\n                ref.current?.focus();\n            }\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            ref={ref}\n        />\n    );\n};\n"],"names":["Search","props","value","attributes","ref","React","useRef","handleKeyDown","event","key","onSearch","handleInput","onInput","isDefaultPrevented","currentTarget","handleBlur","target","useGlobalKeyboardShortcut","ctrlKey","metaKey","document","activeElement","current","preventDefault","focus","className","cn","SearchInput","onBlur","onKeyDown"],"mappings":";;;;;MAKaA,MAAM,GAAIC,KAAuB;EAC1C,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGF,KAAK;EACtC,MAAMG,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;EAEhD,MAAMC,aAAa,GAAIC,KAA4C;IAC/D,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;MAAA;MACxB,mBAAAR,KAAK,CAACS,QAAQ,oDAAd,qBAAAT,KAAK,EAAY,EAAE,CAAC;;GAE3B;;EAGD,MAAMU,WAAW,GAAIH,KAAwC;IACzD,IAAIP,KAAK,CAACW,OAAO,EAAE;MACfX,KAAK,CAACW,OAAO,CAACJ,KAAK,CAAC;;IAGxB,IAAI,CAACA,KAAK,CAACK,kBAAkB,EAAE,IAAI,CAACL,KAAK,CAACM,aAAa,CAACZ,KAAK,EAAE;MAAA;MAC3D,oBAAAD,KAAK,CAACS,QAAQ,qDAAd,sBAAAT,KAAK,EAAY,EAAE,CAAC;;GAE3B;EAED,MAAMc,UAAU,GAAGP,KAAK;;IACpB,MAAMN,KAAK,GAAGM,KAAK,CAACQ,MAAM,CAACd,KAAK;IAChC,oBAAAD,KAAK,CAACS,QAAQ,qDAAd,sBAAAT,KAAK,EAAYC,KAAK,CAAC;GAC1B;EAEDe,yBAAyB,CAAET,KAAoB;IAC3C,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,KAAKD,KAAK,CAACU,OAAO,IAAIV,KAAK,CAACW,OAAO,CAAC,EAAE;MACvD,IAAIC,QAAQ,CAACC,aAAa,KAAKjB,GAAG,CAACkB,OAAO,EAAE;QAAA;QACxCd,KAAK,CAACe,cAAc,EAAE;QACtB,gBAAAnB,GAAG,CAACkB,OAAO,iDAAX,aAAaE,KAAK,EAAE;;;GAG/B,CAAC;EAEF,MAAMC,SAAS,GAAGC,EAAE,CAAC,MAAM,EAAE;IACzB,gBAAgB,EAAE,CAAC,CAACxB;GACvB,CAAC;EAEF,oBACIG,6BAACsB,WAAW,oBACJxB,UAAU;IACdsB,SAAS,EAAEA,SAAS;IACpBG,MAAM,EAAEb,UAAU;IAClBH,OAAO,EAAED,WAAW;IACpBkB,SAAS,EAAEtB,aAAa;IACxBH,GAAG,EAAEA;KACP;AAEV;;;;"}