@economic/taco 2.5.0 → 2.7.0

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

@@ -26,88 +26,92 @@ function getSortingFn(dataType, customFnOrBuiltIn) {
   return 'auto';
 }
 function useConvertChildrenToColumns(props, options, editing) {
-  var _props$actionsForRow;
-  const columnHelper = createColumnHelper();
-  const columns = [];
-  const defaultColumnSizing = {};
-  const defaultColumnVisibility = {};
-  const defaultSorting = [];
-  React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
-  .forEach(child => {
-    if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
-      var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enableSe, _child$props$enableTr;
-      if (child.props.defaultWidth) {
-        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
-      }
-      if (child.props.defaultHidden && options.enableColumnHiding) {
-        defaultColumnVisibility[child.props.accessor] = false;
-      }
-      if (child.props.sort !== undefined) {
-        defaultSorting.push({
+  // It's important to memoise column definitions, because it prevents columns like "Drag column" to re-render on every state change,
+  // and break dragging at the moment it happens.
+  return React__default.useMemo(() => {
+    var _props$actionsForRow;
+    const columnHelper = createColumnHelper();
+    const columns = [];
+    const defaultColumnSizing = {};
+    const defaultColumnVisibility = {};
+    const defaultSorting = [];
+    React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
+    .forEach(child => {
+      if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
+        var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enableSe, _child$props$enableTr;
+        if (child.props.defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+        }
+        if (child.props.defaultHidden && options.enableColumnHiding) {
+          defaultColumnVisibility[child.props.accessor] = false;
+        }
+        if (child.props.sort !== undefined) {
+          defaultSorting.push({
+            id: child.props.accessor,
+            desc: child.props.sort === 'desc'
+          });
+        }
+        columns.push({
+          accessorKey: child.props.accessor,
           id: child.props.accessor,
-          desc: child.props.sort === 'desc'
+          header: Header,
+          cell: Cell,
+          footer: Footer,
+          // sizing
+          minSize: MIN_COLUMN_SIZE,
+          enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
+          // filtering
+          enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
+          filterFn: 'tacoFilter',
+          // sorting
+          enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
+          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn),
+          sortDescFirst: false,
+          sortUndefined: 1,
+          // visibility
+          enableHiding: (_child$props$enableHi = child.props.enableHiding) !== null && _child$props$enableHi !== void 0 ? _child$props$enableHi : true,
+          // custom options
+          meta: {
+            align: child.props.align,
+            className: child.props.className,
+            control: child.props.control,
+            dataType: child.props.dataType,
+            enableOrdering: (_child$props$enableOr = child.props.enableOrdering) !== null && _child$props$enableOr !== void 0 ? _child$props$enableOr : true,
+            enableSearch: (_child$props$enableSe = child.props.enableSearch) !== null && _child$props$enableSe !== void 0 ? _child$props$enableSe : true,
+            enableTruncate: (_child$props$enableTr = child.props.enableTruncate) !== null && _child$props$enableTr !== void 0 ? _child$props$enableTr : false,
+            filters: child.props.filters,
+            footer: child.props.footer,
+            header: child.props.header,
+            headerClassName: child.props.headerClassName,
+            menu: child.props.menu,
+            renderer: child.props.renderer,
+            tooltip: child.props.tooltip
+          }
         });
       }
-      columns.push({
-        accessorKey: child.props.accessor,
-        id: child.props.accessor,
-        header: Header,
-        cell: Cell,
-        footer: Footer,
-        // sizing
-        minSize: MIN_COLUMN_SIZE,
-        enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
-        // filtering
-        enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
-        filterFn: 'tacoFilter',
-        // sorting
-        enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
-        sortingFn: getSortingFn(child.props.dataType, child.props.sortFn),
-        sortDescFirst: false,
-        sortUndefined: 1,
-        // visibility
-        enableHiding: (_child$props$enableHi = child.props.enableHiding) !== null && _child$props$enableHi !== void 0 ? _child$props$enableHi : true,
-        // custom options
-        meta: {
-          align: child.props.align,
-          className: child.props.className,
-          control: child.props.control,
-          dataType: child.props.dataType,
-          enableOrdering: (_child$props$enableOr = child.props.enableOrdering) !== null && _child$props$enableOr !== void 0 ? _child$props$enableOr : true,
-          enableSearch: (_child$props$enableSe = child.props.enableSearch) !== null && _child$props$enableSe !== void 0 ? _child$props$enableSe : true,
-          enableTruncate: (_child$props$enableTr = child.props.enableTruncate) !== null && _child$props$enableTr !== void 0 ? _child$props$enableTr : false,
-          filters: child.props.filters,
-          footer: child.props.footer,
-          header: child.props.header,
-          headerClassName: child.props.headerClassName,
-          menu: child.props.menu,
-          renderer: child.props.renderer,
-          tooltip: child.props.tooltip
-        }
-      });
+    });
+    if (options.enableRowExpansion && props.expandedRowRenderer) {
+      columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));
     }
-  });
-  if (options.enableRowExpansion && props.expandedRowRenderer) {
-    columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));
-  }
-  if (options.enableRowSelection) {
-    columns.unshift(columnHelper.display(createRowSelectionColumn(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)));
-  }
-  if (options.enableRowDrag && props.onRowDrag) {
-    columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
-  }
-  if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
-    columns.push(columnHelper.display(createRowActionsColumn()));
-  }
-  if (editing.isEnabled && editing.isEditing) {
-    columns.push(columnHelper.display(createRowEditingActionsColumn()));
-  }
-  return {
-    columns,
-    defaultColumnSizing,
-    defaultColumnVisibility,
-    defaultSorting
-  };
+    if (options.enableRowSelection) {
+      columns.unshift(columnHelper.display(createRowSelectionColumn(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)));
+    }
+    if (options.enableRowDrag && props.onRowDrag) {
+      columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
+    }
+    if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
+      columns.push(columnHelper.display(createRowActionsColumn()));
+    }
+    if (editing.isEnabled && editing.isEditing) {
+      columns.push(columnHelper.display(createRowEditingActionsColumn()));
+    }
+    return {
+      columns,
+      defaultColumnSizing,
+      defaultColumnVisibility,
+      defaultSorting
+    };
+  }, []);
 }
 
 export { useConvertChildrenToColumns };

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

@@ -1 +1 @@
-{"version":3,"file":"useConvertChildrenToColumns.js","sources":["../../../../../../../../src/components/Table3/hooks/useConvertChildrenToColumns.tsx"],"sourcesContent":["import React from 'react';\nimport { ColumnDef, ColumnSizingState, createColumnHelper, ColumnSort, VisibilityState } from '@tanstack/react-table';\nimport { Table3ColumnProps, Table3Props, Table3Options, Table3ColumnDataType, Table3SortFn } from '../types';\nimport { Header } from '../components/columns/header/Header';\nimport { Footer } from '../components/columns/footer/Footer';\nimport { Cell } from '../components/columns/cell/Cell';\nimport { createRowSelectionColumn } from '../components/columns/internal/Selection';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { createRowActionsColumn } from '../components/columns/internal/Actions';\nimport { createRowExpansionColumn } from '../components/columns/internal/Expansion';\nimport { createRowDragColumn } from '../components/columns/internal/Drag';\nimport { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions';\nimport { useEditing } from './features/useEditing';\n\nfunction getSortingFn<TType = unknown>(dataType?: Table3ColumnDataType, customFnOrBuiltIn?: Table3SortFn<TType>) {\n    if (typeof customFnOrBuiltIn === 'function') {\n        return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);\n    }\n\n    // if a built in is being used, just return that\n    if (customFnOrBuiltIn) {\n        return customFnOrBuiltIn;\n    }\n\n    // some times we alias based on the type\n    if (dataType && dataType !== 'boolean' && dataType !== 'number') {\n        return dataType;\n    }\n\n    // otherwise fall back to auto\n    return 'auto';\n}\n\nexport function useConvertChildrenToColumns<TType = unknown>(\n    props: Table3Props<TType>,\n    options: Table3Options,\n    editing: ReturnType<typeof useEditing>\n) {\n    const columnHelper = createColumnHelper<TType>();\n\n    const columns: ColumnDef<TType>[] = [];\n    const defaultColumnSizing: ColumnSizingState = {};\n    const defaultColumnVisibility: VisibilityState = {};\n    const defaultSorting: ColumnSort[] = [];\n\n    (React.Children.toArray(props.children) as React.ReactElement<Table3ColumnProps<TType>>[])\n        .filter(child => !!child) // remove falsey children\n        .forEach(child => {\n            if (React.isValidElement<Table3ColumnProps<TType>>(child) && child.props.accessor) {\n                if (child.props.defaultWidth) {\n                    defaultColumnSizing[child.props.accessor as string] =\n                        child.props.defaultWidth === 'grow' ? '1fr' : (child.props.defaultWidth as any);\n                }\n\n                if (child.props.defaultHidden && options.enableColumnHiding) {\n                    defaultColumnVisibility[child.props.accessor as string] = false;\n                }\n\n                if (child.props.sort !== undefined) {\n                    defaultSorting.push({\n                        id: child.props.accessor as string,\n                        desc: child.props.sort === 'desc',\n                    });\n                }\n\n                columns.push({\n                    accessorKey: child.props.accessor,\n                    id: child.props.accessor as string,\n                    header: Header,\n                    cell: Cell,\n                    footer: Footer,\n                    // sizing\n                    minSize: MIN_COLUMN_SIZE,\n                    enableResizing: child.props.enableResizing ?? true,\n                    // filtering\n                    enableColumnFilter: child.props.enableFiltering ?? true,\n                    filterFn: 'tacoFilter' as any,\n                    // sorting\n                    enableSorting: child.props.enableSorting ?? true,\n                    sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                    sortDescFirst: false,\n                    sortUndefined: 1,\n                    // visibility\n                    enableHiding: child.props.enableHiding ?? true,\n                    // custom options\n                    meta: {\n                        align: child.props.align,\n                        className: child.props.className,\n                        control: child.props.control,\n                        dataType: child.props.dataType,\n                        enableOrdering: child.props.enableOrdering ?? true,\n                        enableSearch: child.props.enableSearch ?? true,\n                        enableTruncate: child.props.enableTruncate ?? false,\n                        filters: child.props.filters,\n                        footer: child.props.footer,\n                        header: child.props.header,\n                        headerClassName: child.props.headerClassName,\n                        menu: child.props.menu,\n                        renderer: child.props.renderer,\n                        tooltip: child.props.tooltip,\n                    },\n                });\n            }\n        });\n\n    if (options.enableRowExpansion && props.expandedRowRenderer) {\n        columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));\n    }\n\n    if (options.enableRowSelection) {\n        columns.unshift(\n            columnHelper.display(\n                createRowSelectionColumn<TType>(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)\n            )\n        );\n    }\n\n    if (options.enableRowDrag && props.onRowDrag) {\n        columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));\n    }\n\n    if (props.actionsForRow?.length) {\n        columns.push(columnHelper.display(createRowActionsColumn<TType>()));\n    }\n\n    if (editing.isEnabled && editing.isEditing) {\n        columns.push(columnHelper.display(createRowEditingActionsColumn<TType>()));\n    }\n\n    return { columns, defaultColumnSizing, defaultColumnVisibility, defaultSorting };\n}\n"],"names":["getSortingFn","dataType","customFnOrBuiltIn","rowA","rowB","columnId","original","useConvertChildrenToColumns","props","options","editing","columnHelper","createColumnHelper","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","React","Children","toArray","children","filter","child","forEach","isValidElement","accessor","_child$props$enableRe","_child$props$enableFi","_child$props$enableSo","_child$props$enableHi","_child$props$enableOr","_child$props$enableSe","_child$props$enableTr","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","accessorKey","header","Header","cell","Cell","footer","Footer","minSize","MIN_COLUMN_SIZE","enableResizing","enableColumnFilter","enableFiltering","filterFn","enableSorting","sortingFn","sortFn","sortDescFirst","sortUndefined","enableHiding","meta","align","className","control","enableOrdering","enableSearch","enableTruncate","filters","headerClassName","menu","renderer","tooltip","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableRowDrag","onRowDrag","createRowDragColumn","_props$actionsForRow","actionsForRow","length","createRowActionsColumn","isEnabled","isEditing","createRowEditingActionsColumn"],"mappings":"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"}
+{"version":3,"file":"useConvertChildrenToColumns.js","sources":["../../../../../../../../src/components/Table3/hooks/useConvertChildrenToColumns.tsx"],"sourcesContent":["import React from 'react';\nimport { ColumnDef, ColumnSizingState, createColumnHelper, ColumnSort, VisibilityState } from '@tanstack/react-table';\nimport { Table3ColumnProps, Table3Props, Table3Options, Table3ColumnDataType, Table3SortFn } from '../types';\nimport { Header } from '../components/columns/header/Header';\nimport { Footer } from '../components/columns/footer/Footer';\nimport { Cell } from '../components/columns/cell/Cell';\nimport { createRowSelectionColumn } from '../components/columns/internal/Selection';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { createRowActionsColumn } from '../components/columns/internal/Actions';\nimport { createRowExpansionColumn } from '../components/columns/internal/Expansion';\nimport { createRowDragColumn } from '../components/columns/internal/Drag';\nimport { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions';\nimport { useEditing } from './features/useEditing';\n\nfunction getSortingFn<TType = unknown>(dataType?: Table3ColumnDataType, customFnOrBuiltIn?: Table3SortFn<TType>) {\n    if (typeof customFnOrBuiltIn === 'function') {\n        return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);\n    }\n\n    // if a built in is being used, just return that\n    if (customFnOrBuiltIn) {\n        return customFnOrBuiltIn;\n    }\n\n    // some times we alias based on the type\n    if (dataType && dataType !== 'boolean' && dataType !== 'number') {\n        return dataType;\n    }\n\n    // otherwise fall back to auto\n    return 'auto';\n}\n\nexport function useConvertChildrenToColumns<TType = unknown>(\n    props: Table3Props<TType>,\n    options: Table3Options,\n    editing: ReturnType<typeof useEditing>\n) {\n    // It's important to memoise column definitions, because it prevents columns like \"Drag column\" to re-render on every state change,\n    // and break dragging at the moment it happens.\n    return React.useMemo(() => {\n        const columnHelper = createColumnHelper<TType>();\n\n        const columns: ColumnDef<TType>[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n\n        (React.Children.toArray(props.children) as React.ReactElement<Table3ColumnProps<TType>>[])\n            .filter(child => !!child) // remove falsey children\n            .forEach(child => {\n                if (React.isValidElement<Table3ColumnProps<TType>>(child) && child.props.accessor) {\n                    if (child.props.defaultWidth) {\n                        defaultColumnSizing[child.props.accessor as string] =\n                            child.props.defaultWidth === 'grow' ? '1fr' : (child.props.defaultWidth as any);\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor as string] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor as string,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor as string,\n                        header: Header,\n                        cell: Cell,\n                        footer: Footer,\n                        // sizing\n                        minSize: MIN_COLUMN_SIZE,\n                        enableResizing: child.props.enableResizing ?? true,\n                        // filtering\n                        enableColumnFilter: child.props.enableFiltering ?? true,\n                        filterFn: 'tacoFilter' as any,\n                        // sorting\n                        enableSorting: child.props.enableSorting ?? true,\n                        sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                        sortDescFirst: false,\n                        sortUndefined: 1,\n                        // visibility\n                        enableHiding: child.props.enableHiding ?? true,\n                        // custom options\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            enableOrdering: child.props.enableOrdering ?? true,\n                            enableSearch: child.props.enableSearch ?? true,\n                            enableTruncate: child.props.enableTruncate ?? false,\n                            filters: child.props.filters,\n                            footer: child.props.footer,\n                            header: child.props.header,\n                            headerClassName: child.props.headerClassName,\n                            menu: child.props.menu,\n                            renderer: child.props.renderer,\n                            tooltip: child.props.tooltip,\n                        },\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && props.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn<TType>(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)\n                )\n            );\n        }\n\n        if (options.enableRowDrag && props.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));\n        }\n\n        if (props.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn<TType>()));\n        }\n\n        if (editing.isEnabled && editing.isEditing) {\n            columns.push(columnHelper.display(createRowEditingActionsColumn<TType>()));\n        }\n\n        return { columns, defaultColumnSizing, defaultColumnVisibility, defaultSorting };\n    }, []);\n}\n"],"names":["getSortingFn","dataType","customFnOrBuiltIn","rowA","rowB","columnId","original","useConvertChildrenToColumns","props","options","editing","React","useMemo","columnHelper","createColumnHelper","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","Children","toArray","children","filter","child","forEach","isValidElement","accessor","_child$props$enableRe","_child$props$enableFi","_child$props$enableSo","_child$props$enableHi","_child$props$enableOr","_child$props$enableSe","_child$props$enableTr","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","accessorKey","header","Header","cell","Cell","footer","Footer","minSize","MIN_COLUMN_SIZE","enableResizing","enableColumnFilter","enableFiltering","filterFn","enableSorting","sortingFn","sortFn","sortDescFirst","sortUndefined","enableHiding","meta","align","className","control","enableOrdering","enableSearch","enableTruncate","filters","headerClassName","menu","renderer","tooltip","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableRowDrag","onRowDrag","createRowDragColumn","_props$actionsForRow","actionsForRow","length","createRowActionsColumn","isEnabled","isEditing","createRowEditingActionsColumn"],"mappings":"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"}

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

@@ -20,6 +20,8 @@ const useCssGrid = table => {
         if (column.id === COLUMN_ID) {
           size = 'minmax(max-content, auto)';
         } else {
+          // getSize method is used instead of columnSizing state because columnSizing state doesn't have
+          // sizes of internal columns.
           size = `${column.getSize()}px`;
         }
       } else if (width !== undefined) {

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

@@ -1 +1 @@
-{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\n\nexport const useCssGrid = <TType = unknown>(table: RTable<TType>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const columnSizing = table.getState().columnSizing;\n    const rowsLength = table.getRowModel().rows.length;\n    const expandedRowsLength = Object.keys(table.getState().expanded).length;\n    const length = rowsLength + expandedRowsLength;\n\n    const gridTemplateColumns = React.useMemo(() => {\n        return allVisibleColumns.reduce((accum, column, index) => {\n            let size;\n            const isLastColumn = index === allVisibleColumns.length - 1;\n            // column has a getSize function, but it always returns a default value (150), and we want the\n            // first render to use auto layout - so we get the size directly from table state where it is undefined\n            const width = columnSizing[column.id] as number | '1fr';\n\n            if (isInternalColumn(column.id)) {\n                if (column.id === ACTIONS_COLUMN_ID) {\n                    size = 'minmax(max-content, auto)';\n                } else {\n                    size = `${column.getSize()}px`;\n                }\n            } else if (width !== undefined) {\n                if (width === '1fr') {\n                    size = 'minmax(max-content, 1fr)';\n                } else if (isLastColumn) {\n                    size = `minmax(${width}px, auto)`;\n                } else if (width < MIN_COLUMN_SIZE) {\n                    // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n                    // to go below the minSize - so we have to prevent it entirely on the grid layout\n                    size = `${MIN_COLUMN_SIZE}px`;\n                } else {\n                    size = `${width}px`;\n                }\n            } else {\n                size = 'minmax(max-content, auto)';\n            }\n\n            return `${accum} ${size}`.trim();\n        }, '');\n    }, [allVisibleColumns, columnSizing]);\n\n    const gridTemplateRows = React.useMemo(() => {\n        // 1fr makes sure that there is always a free space between the rows and footer when table height exceeds the\n        // cumulative height of all rows\n        return `min-content repeat(${length}, min-content) 1fr min-content`;\n    }, [length]);\n\n    const style: React.CSSProperties = {\n        gridTemplateColumns,\n        gridTemplateRows,\n    };\n\n    return { style };\n};\n"],"names":["useCssGrid","table","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","rowsLength","getRowModel","rows","length","expandedRowsLength","Object","keys","expanded","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isInternalColumn","ACTIONS_COLUMN_ID","getSize","undefined","MIN_COLUMN_SIZE","trim","gridTemplateRows","style"],"mappings":";;;;;MAMaA,UAAU,GAAqBC,KAAoB;EAC5D,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGH,KAAK,CAACI,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,UAAU,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACC,IAAI,CAACC,MAAM;EAClD,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,IAAI,CAACX,KAAK,CAACI,QAAQ,EAAE,CAACQ,QAAQ,CAAC,CAACJ,MAAM;EACxE,MAAMA,MAAM,GAAGH,UAAU,GAAGI,kBAAkB;EAE9C,MAAMI,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOd,iBAAiB,CAACe,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKlB,iBAAiB,CAACO,MAAM,GAAG,CAAC;;;MAG3D,MAAMc,KAAK,GAAGnB,YAAY,CAACe,MAAM,CAACK,EAAE,CAAmB;MAEvD,IAAIC,gBAAgB,CAACN,MAAM,CAACK,EAAE,CAAC,EAAE;QAC7B,IAAIL,MAAM,CAACK,EAAE,KAAKE,SAAiB,EAAE;UACjCL,IAAI,GAAG,2BAA2B;SACrC,MAAM;UACHA,IAAI,MAAMF,MAAM,CAACQ,OAAO,MAAM;;OAErC,MAAM,IAAIJ,KAAK,KAAKK,SAAS,EAAE;QAC5B,IAAIL,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGM,eAAe,EAAE;;;UAGhCR,IAAI,MAAMQ,mBAAmB;SAChC,MAAM;UACHR,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACS,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAAC5B,iBAAiB,EAAEE,YAAY,CAAC,CAAC;EAErC,MAAM2B,gBAAgB,GAAGhB,cAAK,CAACC,OAAO,CAAC;;;IAGnC,6BAA6BP,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMuB,KAAK,GAAwB;IAC/BlB,mBAAmB;IACnBiB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}
+{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\n\nexport const useCssGrid = <TType = unknown>(table: RTable<TType>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const columnSizing = table.getState().columnSizing;\n    const rowsLength = table.getRowModel().rows.length;\n    const expandedRowsLength = Object.keys(table.getState().expanded).length;\n    const length = rowsLength + expandedRowsLength;\n\n    const gridTemplateColumns = React.useMemo(() => {\n        return allVisibleColumns.reduce((accum, column, index) => {\n            let size;\n            const isLastColumn = index === allVisibleColumns.length - 1;\n            // column has a getSize function, but it always returns a default value (150), and we want the\n            // first render to use auto layout - so we get the size directly from table state where it is undefined\n            const width = columnSizing[column.id] as number | '1fr';\n\n            if (isInternalColumn(column.id)) {\n                if (column.id === ACTIONS_COLUMN_ID) {\n                    size = 'minmax(max-content, auto)';\n                } else {\n                    // getSize method is used instead of columnSizing state because columnSizing state doesn't have\n                    // sizes of internal columns.\n                    size = `${column.getSize()}px`;\n                }\n            } else if (width !== undefined) {\n                if (width === '1fr') {\n                    size = 'minmax(max-content, 1fr)';\n                } else if (isLastColumn) {\n                    size = `minmax(${width}px, auto)`;\n                } else if (width < MIN_COLUMN_SIZE) {\n                    // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n                    // to go below the minSize - so we have to prevent it entirely on the grid layout\n                    size = `${MIN_COLUMN_SIZE}px`;\n                } else {\n                    size = `${width}px`;\n                }\n            } else {\n                size = 'minmax(max-content, auto)';\n            }\n\n            return `${accum} ${size}`.trim();\n        }, '');\n    }, [allVisibleColumns, columnSizing]);\n\n    const gridTemplateRows = React.useMemo(() => {\n        // 1fr makes sure that there is always a free space between the rows and footer when table height exceeds the\n        // cumulative height of all rows\n        return `min-content repeat(${length}, min-content) 1fr min-content`;\n    }, [length]);\n\n    const style: React.CSSProperties = {\n        gridTemplateColumns,\n        gridTemplateRows,\n    };\n\n    return { style };\n};\n"],"names":["useCssGrid","table","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","rowsLength","getRowModel","rows","length","expandedRowsLength","Object","keys","expanded","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isInternalColumn","ACTIONS_COLUMN_ID","getSize","undefined","MIN_COLUMN_SIZE","trim","gridTemplateRows","style"],"mappings":";;;;;MAMaA,UAAU,GAAqBC,KAAoB;EAC5D,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGH,KAAK,CAACI,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,UAAU,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACC,IAAI,CAACC,MAAM;EAClD,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,IAAI,CAACX,KAAK,CAACI,QAAQ,EAAE,CAACQ,QAAQ,CAAC,CAACJ,MAAM;EACxE,MAAMA,MAAM,GAAGH,UAAU,GAAGI,kBAAkB;EAE9C,MAAMI,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOd,iBAAiB,CAACe,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKlB,iBAAiB,CAACO,MAAM,GAAG,CAAC;;;MAG3D,MAAMc,KAAK,GAAGnB,YAAY,CAACe,MAAM,CAACK,EAAE,CAAmB;MAEvD,IAAIC,gBAAgB,CAACN,MAAM,CAACK,EAAE,CAAC,EAAE;QAC7B,IAAIL,MAAM,CAACK,EAAE,KAAKE,SAAiB,EAAE;UACjCL,IAAI,GAAG,2BAA2B;SACrC,MAAM;;;UAGHA,IAAI,MAAMF,MAAM,CAACQ,OAAO,MAAM;;OAErC,MAAM,IAAIJ,KAAK,KAAKK,SAAS,EAAE;QAC5B,IAAIL,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGM,eAAe,EAAE;;;UAGhCR,IAAI,MAAMQ,mBAAmB;SAChC,MAAM;UACHR,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACS,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAAC5B,iBAAiB,EAAEE,YAAY,CAAC,CAAC;EAErC,MAAM2B,gBAAgB,GAAGhB,cAAK,CAACC,OAAO,CAAC;;;IAGnC,6BAA6BP,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMuB,KAAK,GAAwB;IAC/BlB,mBAAmB;IACnBiB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}

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

@@ -2,6 +2,9 @@ import React__default from 'react';
 
 const useLocalStorage = (key, initialValue) => {
   const [state, setState] = React__default.useState(() => {
+    if (!key) {
+      return initialValue;
+    }
     try {
       const localStorageValue = localStorage.getItem(key);
       if (typeof localStorageValue !== 'string') {
@@ -18,6 +21,9 @@ const useLocalStorage = (key, initialValue) => {
     }
   });
   React__default.useEffect(() => {
+    if (!key) {
+      return;
+    }
     try {
       const serializedState = JSON.stringify(state);
       localStorage.setItem(key, serializedState);
@@ -26,7 +32,11 @@ const useLocalStorage = (key, initialValue) => {
       // localStorage can throw. Also JSON.stringify can throw.
     }
   }, [key, state]);
-  const clear = () => localStorage.removeItem(key);
+  const clear = () => {
+    if (key) {
+      localStorage.removeItem(key);
+    }
+  };
   return [state, setState, clear];
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"useLocalStorage.js","sources":["../../../../../../src/hooks/useLocalStorage.ts"],"sourcesContent":["import React from 'react';\n\nexport const useLocalStorage = <TType>(key: string, initialValue?: TType): [TType, (value: TType) => void, () => void] => {\n    const [state, setState] = React.useState<TType>(() => {\n        try {\n            const localStorageValue = localStorage.getItem(key);\n\n            if (typeof localStorageValue !== 'string') {\n                localStorage.setItem(key, JSON.stringify(initialValue));\n                return initialValue;\n            } else {\n                return JSON.parse(localStorageValue || 'null');\n            }\n        } catch {\n            // If user is in private mode or has storage restriction\n            // localStorage can throw. JSON.parse and JSON.stringify\n            // can throw, too.\n            return initialValue;\n        }\n    });\n\n    React.useEffect(() => {\n        try {\n            const serializedState = JSON.stringify(state);\n            localStorage.setItem(key, serializedState);\n        } catch {\n            // If user is in private mode or has storage restriction\n            // localStorage can throw. Also JSON.stringify can throw.\n        }\n    }, [key, state]);\n\n    const clear = () => localStorage.removeItem(key);\n\n    return [state, setState, clear];\n};\n"],"names":["useLocalStorage","key","initialValue","state","setState","React","useState","localStorageValue","localStorage","getItem","setItem","JSON","stringify","parse","useEffect","serializedState","clear","removeItem"],"mappings":";;MAEaA,eAAe,GAAGA,CAAQC,GAAW,EAAEC,YAAoB;EACpE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAQ;IAC5C,IAAI;MACA,MAAMC,iBAAiB,GAAGC,YAAY,CAACC,OAAO,CAACR,GAAG,CAAC;MAEnD,IAAI,OAAOM,iBAAiB,KAAK,QAAQ,EAAE;QACvCC,YAAY,CAACE,OAAO,CAACT,GAAG,EAAEU,IAAI,CAACC,SAAS,CAACV,YAAY,CAAC,CAAC;QACvD,OAAOA,YAAY;OACtB,MAAM;QACH,OAAOS,IAAI,CAACE,KAAK,CAACN,iBAAiB,IAAI,MAAM,CAAC;;KAErD,CAAC,MAAM;;;;MAIJ,OAAOL,YAAY;;GAE1B,CAAC;EAEFG,cAAK,CAACS,SAAS,CAAC;IACZ,IAAI;MACA,MAAMC,eAAe,GAAGJ,IAAI,CAACC,SAAS,CAACT,KAAK,CAAC;MAC7CK,YAAY,CAACE,OAAO,CAACT,GAAG,EAAEc,eAAe,CAAC;KAC7C,CAAC,MAAM;;;;GAIX,EAAE,CAACd,GAAG,EAAEE,KAAK,CAAC,CAAC;EAEhB,MAAMa,KAAK,GAAGA,MAAMR,YAAY,CAACS,UAAU,CAAChB,GAAG,CAAC;EAEhD,OAAO,CAACE,KAAK,EAAEC,QAAQ,EAAEY,KAAK,CAAC;AACnC;;;;"}
+{"version":3,"file":"useLocalStorage.js","sources":["../../../../../../src/hooks/useLocalStorage.ts"],"sourcesContent":["import React from 'react';\n\nexport const useLocalStorage = <TType>(key?: string, initialValue?: TType): [TType, (value: TType) => void, () => void] => {\n    const [state, setState] = React.useState<TType>(() => {\n        if (!key) {\n            return initialValue;\n        }\n\n        try {\n            const localStorageValue = localStorage.getItem(key);\n\n            if (typeof localStorageValue !== 'string') {\n                localStorage.setItem(key, JSON.stringify(initialValue));\n                return initialValue;\n            } else {\n                return JSON.parse(localStorageValue || 'null');\n            }\n        } catch {\n            // If user is in private mode or has storage restriction\n            // localStorage can throw. JSON.parse and JSON.stringify\n            // can throw, too.\n            return initialValue;\n        }\n    });\n\n    React.useEffect(() => {\n        if (!key) {\n            return;\n        }\n\n        try {\n            const serializedState = JSON.stringify(state);\n            localStorage.setItem(key, serializedState);\n        } catch {\n            // If user is in private mode or has storage restriction\n            // localStorage can throw. Also JSON.stringify can throw.\n        }\n    }, [key, state]);\n\n    const clear = () => {\n        if (key) {\n            localStorage.removeItem(key);\n        }\n    };\n\n    return [state, setState, clear];\n};\n"],"names":["useLocalStorage","key","initialValue","state","setState","React","useState","localStorageValue","localStorage","getItem","setItem","JSON","stringify","parse","useEffect","serializedState","clear","removeItem"],"mappings":";;MAEaA,eAAe,GAAGA,CAAQC,GAAY,EAAEC,YAAoB;EACrE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAQ;IAC5C,IAAI,CAACL,GAAG,EAAE;MACN,OAAOC,YAAY;;IAGvB,IAAI;MACA,MAAMK,iBAAiB,GAAGC,YAAY,CAACC,OAAO,CAACR,GAAG,CAAC;MAEnD,IAAI,OAAOM,iBAAiB,KAAK,QAAQ,EAAE;QACvCC,YAAY,CAACE,OAAO,CAACT,GAAG,EAAEU,IAAI,CAACC,SAAS,CAACV,YAAY,CAAC,CAAC;QACvD,OAAOA,YAAY;OACtB,MAAM;QACH,OAAOS,IAAI,CAACE,KAAK,CAACN,iBAAiB,IAAI,MAAM,CAAC;;KAErD,CAAC,MAAM;;;;MAIJ,OAAOL,YAAY;;GAE1B,CAAC;EAEFG,cAAK,CAACS,SAAS,CAAC;IACZ,IAAI,CAACb,GAAG,EAAE;MACN;;IAGJ,IAAI;MACA,MAAMc,eAAe,GAAGJ,IAAI,CAACC,SAAS,CAACT,KAAK,CAAC;MAC7CK,YAAY,CAACE,OAAO,CAACT,GAAG,EAAEc,eAAe,CAAC;KAC7C,CAAC,MAAM;;;;GAIX,EAAE,CAACd,GAAG,EAAEE,KAAK,CAAC,CAAC;EAEhB,MAAMa,KAAK,GAAGA;IACV,IAAIf,GAAG,EAAE;MACLO,YAAY,CAACS,UAAU,CAAChB,GAAG,CAAC;;GAEnC;EAED,OAAO,CAACE,KAAK,EAAEC,QAAQ,EAAEY,KAAK,CAAC;AACnC;;;;"}

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

@@ -64,10 +64,10 @@ export { insertChildTableRow, removeChildTableRow, useTableRowCreation } from '.
 export { useBoundaryOverflowDetection } from './hooks/useBoundaryOverflowDetection.js';
 export { Table2 } from './components/Table2/Table2.js';
 export { useLazyEffect } from './hooks/useLazyEffect.js';
+export { Textarea } from './components/Textarea/Textarea.js';
 export { useTable3DataLoader } from './components/Table3/hooks/useTableDataLoader.js';
 export { Table3, fixedForwardRef } from './components/Table3/Table3.js';
 export { Tabs } from './components/Tabs/Tabs.js';
-export { Textarea } from './components/Textarea/Textarea.js';
 export { Tour, TourStep } from './components/Tour/Tour.js';
 export { useMatchMedia } from './hooks/useMatchMedia.js';
 export { Header } from './components/Header/Header.js';

package/dist/hooks/useLocalStorage.d.ts

@@ -1 +1 @@
-export declare const useLocalStorage: <TType>(key: string, initialValue?: TType | undefined) => [TType, (value: TType) => void, () => void];
+export declare const useLocalStorage: <TType>(key?: string | undefined, initialValue?: TType | undefined) => [TType, (value: TType) => void, () => void];

package/dist/index.css

@@ -641,7 +641,7 @@
 /* cells */
 [role='cell'],
 [role='columnheader'] {
-    @apply border-grey-300 bg-white;
+    @apply border-grey-300;
 }
 
 [role='cell']:not([data-highlighted='true']),
@@ -668,36 +668,99 @@
     @apply border-b;
 }
 
-/* hovered row */
-[data-pause-hover='false'] [data-taco='table2-body'] [role='row']:hover [role='cell'] {
-    @apply bg-grey-100;
-}
+/* row/cell backgrounds */
 
-/* dragged over row */
-[data-pause-hover='false'] [data-taco='table2-body'] [role='row'][data-dragged-over='true'] [role='cell'] {
-    @apply bg-grey-100;
+[role='columnheader'] {
+    @apply bg-white;
 }
 
-/* current row */
-[data-taco='table2-body'] [role='row'][data-current='true'] [role='cell'] {
-    @apply bg-grey-200;
-}
+/* normal rows */
+[role='row']:not([data-selected='true']):not([data-error='true']) [role='cell'] {
+        @apply bg-white;
+    }
+[role='row']:not([data-selected='true']):not([data-error='true']):hover [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.grey.100);
+        @apply bg-grey-100;
+    }
+[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true'] [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.grey.200);
+        @apply bg-grey-200;
+    }
+[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true']:hover [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.grey.100);
+        @apply bg-grey-100;
+    }
+/* normal rows when hover is paused */
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.white);
+        @apply !bg-white;
+    }
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover[data-current='true'] [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.grey.200);
+        @apply !bg-grey-200;
+    }
 
-/* selected row */
-[data-taco='table2-body'] [role='row'][data-selected='true']:not([aria-grabbed='true']) [role='cell'] {
-    @apply !bg-blue-100;
-}
+/* selected rows */
+[role='row'][data-selected='true']:not([data-error='true']) [role='cell'] {
+        @apply bg-blue-100;
+    }
+[role='row'][data-selected='true']:not([data-error='true']):hover [role='cell'] {
+        --table3-row-actions-shadow: #d6e3f6;
+        @apply bg-[#D6E3F6];
+    }
+[role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
+        --table3-row-actions-shadow: #ccd8eb;
+        @apply bg-[#CCD8EB];
+    }
+[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'] {
+        --table3-row-actions-shadow: #d6e3f6;
+        @apply bg-[#D6E3F6];
+    }
+/* selected rows when hover is paused */
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.blue.100);
+        @apply !bg-blue-100;
+    }
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover[data-current='true'] [role='cell'] {
+        --table3-row-actions-shadow: #ccd8eb;
+        @apply !bg-[#CCD8EB];
+    }
+
+/* error rows */
+[role='row'][data-error='true'] [role='cell'] {
+        @apply bg-[#FFEDE9];
+    }
+[role='row'][data-error='true']:hover [role='cell'] {
+        --table3-row-actions-shadow: #ffe4de;
+        @apply bg-[#FFE4DE];
+    }
+[role='row'][data-error='true'][data-current='true'] [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.red.100);
+        @apply bg-red-100;
+    }
+[role='row'][data-error='true'][data-current='true']:hover [role='cell'] {
+        --table3-row-actions-shadow: #ffe4de;
+        @apply bg-[#FFE4DE];
+    }
+/* error rows when hover is paused */
+[data-pause-hover='true'] [role='row'][data-error='true']:hover:not([data-current='true']) [role='cell'] {
+        --table3-row-actions-shadow: #ffede9;
+        @apply !bg-[#FFEDE9];
+    }
+[data-pause-hover='true'] [role='row'][data-error='true']:hover[data-current='true'] [role='cell'] {
+        --table3-row-actions-shadow: theme(colors.red.100);
+        @apply !bg-red-100;
+    }
 
+/* dragged over row */
+[role='row'][data-dragged-over='true'] [role='cell'] {
+    @apply !bg-grey-100;
+}
 /* dragging row */
-[data-taco='table2-body'] [role='row'][aria-grabbed='true'] [role='cell'] {
+[role='row'][aria-grabbed='true'] [role='cell'] {
     @apply !wcag-blue-500;
 }
 
-/* error row */
-[data-taco='table2-body'] [role='row'][data-error='true'] [role='cell'] {
-    @apply !bg-red-100/30;
-}
-
 /* cell component overrides */
 
 /* small font size */

package/dist/primitives/Listbox2/components/Root.d.ts

@@ -15,6 +15,6 @@ export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<
     multiple?: boolean | undefined;
     readOnly?: boolean | undefined;
     setValue: (value: Listbox2Value) => void;
-    value?: string | number | import("../types").Listbox2OptionValue[] | null | undefined;
+    value?: string | number | boolean | import("../types").Listbox2OptionValue[] | null | undefined;
 } & React.RefAttributes<CollectionPrimitive.CollectionRef>>;
 export declare const createListboxValueSetter: (multiple: boolean, setValue: React.Dispatch<React.SetStateAction<Listbox2Value | undefined>>) => (nextValue: Listbox2Value) => void;

package/dist/primitives/Listbox2/types.d.ts

@@ -1,2 +1,2 @@
-export declare type Listbox2OptionValue = string | number | null;
+export declare type Listbox2OptionValue = string | number | null | boolean;
 export declare type Listbox2Value = Listbox2OptionValue | Listbox2OptionValue[];