@economic/taco 1.19.1 → 1.21.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersButton.js","sources":["../../../../../../../../../src/components/Table2/components/filters/FiltersButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { Button } from '../../../Button/Button';\nimport { Icon } from '../../../Icon/Icon';\nimport { Popover } from '../../../Popover/Popover';\nimport { Table2Filter } from '../../types';\nimport { isInternalColumn } from '../../utilities/columns';\nimport { ColumnFilter } from './components/ColumnFilter';\nimport { Group } from '../../../Group/Group';\nimport { Shortcut } from '../../../Shortcut/Shortcut';\nimport { useGlobalKeyboardShortcut } from '../../../../hooks/useGlobalKeyboardShortcut';\n\nexport type FiltersButtonProps = {\n    length: number;\n    table: RTTable<any>;\n};\n\nexport const FiltersButton = ({ length, table }: FiltersButtonProps) => {\n    const ref = React.useRef<HTMLButtonElement>(null);\n    const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));\n    const { shouldDisableTableActions } = table.options.meta as TableMeta<any>;\n\n    const columnFilters = table.getState().columnFilters;\n\n    const filteredColumns = columnFilters.reduce((columns: RTColumn<any, any>[], columnFilter) => {\n        const column = allColumns.find(c => c.id === columnFilter.id);\n\n        if (column) {\n            return [...columns, column];\n        }\n\n        return columns;\n    }, []);\n\n    const handleAdd = () => {\n        const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));\n\n        if (firstFilterableColumn) {\n            firstFilterableColumn.setFilterValue({\n                comparator: undefined,\n                value: undefined,\n            } as Table2Filter);\n        }\n    };\n\n    const handleReset = () => {\n        table.resetColumnFilters();\n    };\n\n    useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n        if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {\n            event.preventDefault();\n            ref.current?.click();\n        }\n    });\n\n    return (\n        <Button\n            appearance={columnFilters.length ? 'primary' : 'default'}\n            className={cn({\n                '!wcag-blue-100': columnFilters.length,\n            })}\n            disabled={shouldDisableTableActions}\n            popover={popoverProps => (\n                <Popover {...popoverProps}>\n                    <Popover.Content>\n                        <div className=\"flex w-[40rem] flex-col gap-4\">\n                            <div className=\"flex w-full items-center gap-2\">\n                                <h4 className=\"mb-0 inline-flex\">Filter</h4>\n                                <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n                                    Viewing {table.getFilteredRowModel().rows.length} of {length}\n                                </p>\n                            </div>\n                            <div className=\"flex flex-col gap-2\">\n                                {filteredColumns.map((column, index) => (\n                                    <ColumnFilter\n                                        key={`${column.id}_${index}`}\n                                        allColumns={allColumns}\n                                        index={index}\n                                        column={column}\n                                        table={table}\n                                    />\n                                ))}\n                            </div>\n                            <Group className=\"justify-between\">\n                                <Button appearance=\"discrete\" onClick={handleAdd}>\n                                    + Add filter\n                                </Button>\n                                {columnFilters.length ? <Button onClick={handleReset}>Clear all filters</Button> : null}\n                            </Group>\n                        </div>\n                    </Popover.Content>\n                </Popover>\n            )}\n            ref={ref}\n            tooltip={\n                <>\n                    {columnFilters.length ? 'Change filters' : 'Apply filters'}\n                    <Shortcut className=\"ml-2\" keys={['Ctrl', 'Shift', 'F']} />\n                </>\n            }>\n            <Icon name={columnFilters.length ? 'filter-solid' : 'filter'} />\n            {columnFilters.length ? `Filters (${columnFilters.length})` : 'Filters'}\n        </Button>\n    );\n};\n"],"names":["FiltersButton","length","table","ref","React","useRef","allColumns","getAllLeafColumns","filter","column","isInternalColumn","id","shouldDisableTableActions","options","meta","columnFilters","getState","filteredColumns","reduce","columns","columnFilter","find","c","handleAdd","firstFilterableColumn","getCanFilter","f","setFilterValue","comparator","undefined","value","handleReset","resetColumnFilters","useGlobalKeyboardShortcut","event","key","ctrlKey","metaKey","shiftKey","preventDefault","current","click","Button","appearance","className","cn","disabled","popover","popoverProps","Popover","Content","getFilteredRowModel","rows","map","index","ColumnFilter","Group","onClick","tooltip","Shortcut","keys","Icon","name"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Column.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { Select2 } from '../../../../Select2/Select2.js';
+
+const Column = ({
+  allColumns,
+  column,
+  index,
+  table,
+  ...props
+}) => {
+  const handleChange = id => {
+    table.setColumnFilters(currentColumnFilters => {
+      const nextColumnFilters = [...currentColumnFilters];
+      nextColumnFilters[index].id = id;
+      nextColumnFilters[index].value = {};
+      return nextColumnFilters;
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, props, {
+    autoFocus: true,
+    onChange: handleChange,
+    value: column.id
+  }), allColumns.map(c => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: c.id,
+    disabled: !c.getCanFilter() || c.id !== column.id && !!table.getState().columnFilters.find(f => f.id === c.id),
+    value: c.id
+  }, String(c.columnDef.header))));
+};
+
+export { Column };
+//# sourceMappingURL=Column.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Column.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/Column.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, Table as RTTable } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../Select2/Select2';\nimport { Table2Filter } from '../../../types';\n\ntype ColumnProps = Omit<Select2Props, 'children'> & {\n    allColumns: RTColumn<any, any>[];\n    column: RTColumn<any, any>;\n    index: number;\n    table: RTTable<any>;\n};\n\nexport const Column = ({ allColumns, column, index, table, ...props }: ColumnProps) => {\n    const handleChange = id => {\n        table.setColumnFilters(currentColumnFilters => {\n            const nextColumnFilters = [...currentColumnFilters];\n            nextColumnFilters[index].id = id;\n            (nextColumnFilters[index] as Table2Filter).value = {};\n            return nextColumnFilters;\n        });\n    };\n\n    return (\n        <Select2 {...props} autoFocus onChange={handleChange} value={column.id}>\n            {allColumns.map(c => (\n                <Select2.Option\n                    key={c.id}\n                    disabled={\n                        !c.getCanFilter() || (c.id !== column.id && !!table.getState().columnFilters.find(f => f.id === c.id))\n                    }\n                    value={c.id}>\n                    {String(c.columnDef.header)}\n                </Select2.Option>\n            ))}\n        </Select2>\n    );\n};\n"],"names":["Column","allColumns","column","index","table","props","handleChange","id","setColumnFilters","currentColumnFilters","nextColumnFilters","value","React","Select2","autoFocus","onChange","map","c","Option","key","disabled","getCanFilter","getState","columnFilters","find","f","String","columnDef","header"],"mappings":";;;MAYaA,MAAM,GAAG,CAAC;EAAEC,UAAU;EAAEC,MAAM;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;CAAoB;EAC9E,MAAMC,YAAY,GAAGC,EAAE;IACnBH,KAAK,CAACI,gBAAgB,CAACC,oBAAoB;MACvC,MAAMC,iBAAiB,GAAG,CAAC,GAAGD,oBAAoB,CAAC;MACnDC,iBAAiB,CAACP,KAAK,CAAC,CAACI,EAAE,GAAGA,EAAE;MAC/BG,iBAAiB,CAACP,KAAK,CAAkB,CAACQ,KAAK,GAAG,EAAE;MACrD,OAAOD,iBAAiB;KAC3B,CAAC;GACL;EAED,oBACIE,6BAACC,OAAO,oBAAKR,KAAK;IAAES,SAAS;IAACC,QAAQ,EAAET,YAAY;IAAEK,KAAK,EAAET,MAAM,CAACK;MAC/DN,UAAU,CAACe,GAAG,CAACC,CAAC,iBACbL,6BAACC,OAAO,CAACK,MAAM;IACXC,GAAG,EAAEF,CAAC,CAACV,EAAE;IACTa,QAAQ,EACJ,CAACH,CAAC,CAACI,YAAY,EAAE,IAAKJ,CAAC,CAACV,EAAE,KAAKL,MAAM,CAACK,EAAE,IAAI,CAAC,CAACH,KAAK,CAACkB,QAAQ,EAAE,CAACC,aAAa,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,CAAClB,EAAE,KAAKU,CAAC,CAACV,EAAE,CAAE;IAE1GI,KAAK,EAAEM,CAAC,CAACV;KACRmB,MAAM,CAACT,CAAC,CAACU,SAAS,CAACC,MAAM,CAAC,CAElC,CAAC,CACI;AAElB;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js

@@ -0,0 +1,121 @@
+import React__default from 'react';
+import { IconButton } from '../../../../IconButton/IconButton.js';
+import { Input } from '../../../../Input/Input.js';
+import { Datepicker } from '../../../../Datepicker/Datepicker.js';
+import { Switch } from '../../../../Switch/Switch.js';
+import { Table2FilterComparator } from '../../../types.js';
+import { Column } from './Column.js';
+import { Comparator } from './Comparator.js';
+import { InferredControl } from './InferredControl.js';
+
+const ColumnFilter = props => {
+  var _column$columnDef$hea, _column$columnDef$met, _column$columnDef$met2, _control;
+  const {
+    allColumns,
+    column,
+    index,
+    table
+  } = props;
+  const {
+    comparator,
+    value
+  } = column.getFilterValue();
+  const ariaLabel = String((_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : '');
+  const ref = React__default.useRef(null);
+  let control;
+  const controlType = (_column$columnDef$met = (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : 'input';
+  if (typeof controlType === 'function') {
+    control = controlType({
+      onBlur: () => Promise.resolve(),
+      onFocus: () => Promise.resolve(),
+      ref,
+      setValue: value => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value
+      })),
+      value,
+      disabled: false,
+      readOnly: false
+    });
+  } else if (controlType === 'input') {
+    control = /*#__PURE__*/React__default.createElement(Input, {
+      "aria-label": ariaLabel,
+      onChange: event => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: event.target.value
+      })),
+      value: String(value !== null && value !== void 0 ? value : '')
+    });
+  } else if (controlType === 'datepicker') {
+    control = /*#__PURE__*/React__default.createElement(Datepicker, {
+      "aria-label": ariaLabel,
+      onChange: event => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: event.detail
+      })),
+      value: value
+    });
+  } else if (controlType === 'switch') {
+    control = /*#__PURE__*/React__default.createElement(Switch, {
+      "aria-label": ariaLabel,
+      checked: Boolean(value),
+      onChange: checked => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: checked
+      }))
+    });
+  }
+  const handleRemove = () => column.setFilterValue(undefined);
+  const comparators = guessComparatorsBasedOnControl(controlType, control);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-2 flex gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, index === 0 ? 'Where' : 'And'), /*#__PURE__*/React__default.createElement(Column, {
+    className: "!w-32 flex-shrink-0",
+    allColumns: allColumns,
+    column: column,
+    index: index,
+    table: table
+  }), /*#__PURE__*/React__default.createElement(Comparator, {
+    className: "!w-32 flex-shrink-0",
+    column: column,
+    comparator: comparator,
+    validComparators: comparators
+  }), comparator !== undefined ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-grow items-center"
+  }, (_control = control) !== null && _control !== void 0 ? _control : /*#__PURE__*/React__default.createElement(InferredControl, {
+    column: column,
+    comparator: comparator,
+    value: value
+  })) : null, /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "close",
+    onClick: handleRemove
+  }));
+};
+const guessComparatorsBasedOnControl = (control, instance) => {
+  if ( /*#__PURE__*/React__default.isValidElement(instance)) {
+    const {
+      props,
+      type
+    } = instance;
+    if (type.displayName === 'Select2') {
+      if (props.multiple) {
+        return [Table2FilterComparator.IsOneOf, Table2FilterComparator.IsNoneOf, Table2FilterComparator.IsAllOf];
+      }
+      return [Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo];
+    }
+  }
+  switch (control) {
+    case 'datepicker':
+      return [Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
+    case 'switch':
+      return [Table2FilterComparator.IsEqualTo];
+    default:
+      return [Table2FilterComparator.Contains, Table2FilterComparator.DoesNotContain, Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
+  }
+};
+
+export { ColumnFilter };
+//# sourceMappingURL=ColumnFilter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilter.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/ColumnFilter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, Table as RTTable } from '@tanstack/react-table';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Input } from '../../../../Input/Input';\nimport { Table2ColumnControlRenderer, Table2Filter, Table2FilterComparator } from '../../../types';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Column } from './Column';\nimport { Comparator } from './Comparator';\nimport { InferredControl } from './InferredControl';\n\nexport type ColumnFilterProps = {\n    allColumns: RTColumn<any, any>[];\n    column: RTColumn<any, any>;\n    index: number;\n    table: RTTable<any>;\n};\n\nexport const ColumnFilter = (props: ColumnFilterProps) => {\n    const { allColumns, column, index, table } = props;\n    const { comparator, value } = column.getFilterValue() as Table2Filter;\n    const ariaLabel = String(column.columnDef.header ?? '');\n    const ref = React.useRef(null);\n\n    let control;\n    const controlType = column.columnDef.meta?.control ?? 'input';\n\n    if (typeof controlType === 'function') {\n        control = controlType({\n            onBlur: () => Promise.resolve(),\n            onFocus: () => Promise.resolve(),\n            ref,\n            setValue: value => column.setFilterValue(currentValue => ({ ...currentValue, value })),\n            value,\n            disabled: false,\n            readOnly: false,\n        });\n    } else if (controlType === 'input') {\n        control = (\n            <Input\n                aria-label={ariaLabel}\n                onChange={event => column.setFilterValue(currentValue => ({ ...currentValue, value: event.target.value }))}\n                value={String(value ?? '')}\n            />\n        );\n    } else if (controlType === 'datepicker') {\n        control = (\n            <Datepicker\n                aria-label={ariaLabel}\n                onChange={event => column.setFilterValue(currentValue => ({ ...currentValue, value: (event as any).detail }))}\n                value={value as Date}\n            />\n        );\n    } else if (controlType === 'switch') {\n        control = (\n            <Switch\n                aria-label={ariaLabel}\n                checked={Boolean(value)}\n                onChange={checked => column.setFilterValue(currentValue => ({ ...currentValue, value: checked }))}\n            />\n        );\n    }\n\n    const handleRemove = () => column.setFilterValue(undefined);\n    const comparators = guessComparatorsBasedOnControl(controlType, control);\n\n    return (\n        <div className=\"mb-2 flex gap-2\">\n            <div className=\"flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n                {index === 0 ? 'Where' : 'And'}\n            </div>\n            <Column className=\"!w-32 flex-shrink-0\" allColumns={allColumns} column={column} index={index} table={table} />\n            <Comparator className=\"!w-32 flex-shrink-0\" column={column} comparator={comparator} validComparators={comparators} />\n            {comparator !== undefined ? (\n                <div className=\"flex flex-grow items-center\">\n                    {control ?? <InferredControl column={column} comparator={comparator} value={value} />}\n                </div>\n            ) : null}\n            <IconButton appearance=\"discrete\" icon=\"close\" onClick={handleRemove} />\n        </div>\n    );\n};\n\nconst guessComparatorsBasedOnControl = (control: Table2ColumnControlRenderer, instance: JSX.Element) => {\n    if (React.isValidElement(instance)) {\n        const { props, type } = instance as any;\n\n        if (type.displayName === 'Select2') {\n            if (props.multiple) {\n                return [Table2FilterComparator.IsOneOf, Table2FilterComparator.IsNoneOf, Table2FilterComparator.IsAllOf];\n            }\n\n            return [Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo];\n        }\n    }\n\n    switch (control) {\n        case 'datepicker':\n            return [\n                Table2FilterComparator.IsEqualTo,\n                Table2FilterComparator.IsNotEqualTo,\n                Table2FilterComparator.IsGreaterThan,\n                Table2FilterComparator.IsLessThan,\n                Table2FilterComparator.IsBetween,\n            ];\n\n        case 'switch':\n            return [Table2FilterComparator.IsEqualTo];\n\n        default:\n            return [\n                Table2FilterComparator.Contains,\n                Table2FilterComparator.DoesNotContain,\n                Table2FilterComparator.IsEqualTo,\n                Table2FilterComparator.IsNotEqualTo,\n                Table2FilterComparator.IsGreaterThan,\n                Table2FilterComparator.IsLessThan,\n                Table2FilterComparator.IsBetween,\n            ];\n    }\n};\n"],"names":["ColumnFilter","props","allColumns","column","index","table","comparator","value","getFilterValue","ariaLabel","String","columnDef","header","ref","React","useRef","control","controlType","meta","onBlur","Promise","resolve","onFocus","setValue","setFilterValue","currentValue","disabled","readOnly","Input","onChange","event","target","Datepicker","detail","Switch","checked","Boolean","handleRemove","undefined","comparators","guessComparatorsBasedOnControl","className","Column","Comparator","validComparators","InferredControl","IconButton","appearance","icon","onClick","instance","isValidElement","type","displayName","multiple","Table2FilterComparator","IsOneOf","IsNoneOf","IsAllOf","IsEqualTo","IsNotEqualTo","IsGreaterThan","IsLessThan","IsBetween","Contains","DoesNotContain"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js

@@ -0,0 +1,60 @@
+import React__default from 'react';
+import { Select2 } from '../../../../Select2/Select2.js';
+import { Table2FilterComparator } from '../../../types.js';
+
+const Comparator = ({
+  column,
+  comparator,
+  validComparators,
+  ...props
+}) => {
+  const handleChange = comparator => {
+    column.setFilterValue(currentFilterValue => ({
+      comparator,
+      value: comparator === Table2FilterComparator.IsBetween ? [] : currentFilterValue.value
+    }));
+  };
+  React__default.useEffect(() => {
+    if (comparator === undefined) {
+      const initialComparator = validComparators[0];
+      column.setFilterValue(currentFilterValue => ({
+        comparator: initialComparator,
+        value: initialComparator === Table2FilterComparator.IsBetween && !Array.isArray(currentFilterValue.value) ? [] : currentFilterValue.value
+      }));
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, props, {
+    onChange: handleChange,
+    value: comparator
+  }), validComparators.map(comp => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: comp,
+    value: comp
+  }, getComparatorText(comp))));
+};
+const getComparatorText = comparator => {
+  switch (comparator) {
+    case Table2FilterComparator.Contains:
+      return 'Contains';
+    case Table2FilterComparator.DoesNotContain:
+      return 'Does not contain';
+    case Table2FilterComparator.IsEqualTo:
+      return 'Is';
+    case Table2FilterComparator.IsNotEqualTo:
+      return 'Is not';
+    case Table2FilterComparator.IsGreaterThan:
+      return 'Is greater than';
+    case Table2FilterComparator.IsLessThan:
+      return 'Is less than';
+    case Table2FilterComparator.IsBetween:
+      return 'Is between';
+    case Table2FilterComparator.IsOneOf:
+      return 'Is one of';
+    case Table2FilterComparator.IsNoneOf:
+      return 'Is none of';
+    case Table2FilterComparator.IsAllOf:
+      return 'Is all of';
+  }
+};
+
+export { Comparator };
+//# sourceMappingURL=Comparator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Comparator.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/Comparator.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../Select2/Select2';\nimport { Table2FilterComparator } from '../../../types';\n\ntype ComparatorProps = Omit<Select2Props, 'children'> & {\n    column: RTColumn<any, any>;\n    comparator?: Table2FilterComparator;\n    validComparators: Table2FilterComparator[];\n};\n\nexport const Comparator = ({ column, comparator, validComparators, ...props }: ComparatorProps) => {\n    const handleChange = comparator => {\n        column.setFilterValue(currentFilterValue => ({\n            comparator,\n            value: comparator === Table2FilterComparator.IsBetween ? [] : currentFilterValue.value,\n        }));\n    };\n\n    React.useEffect(() => {\n        if (comparator === undefined) {\n            const initialComparator = validComparators[0];\n            column.setFilterValue(currentFilterValue => ({\n                comparator: initialComparator,\n                value:\n                    initialComparator === Table2FilterComparator.IsBetween && !Array.isArray(currentFilterValue.value)\n                        ? []\n                        : currentFilterValue.value,\n            }));\n        }\n    }, []);\n\n    return (\n        <Select2 {...props} onChange={handleChange} value={comparator}>\n            {validComparators.map(comp => (\n                <Select2.Option key={comp} value={comp}>\n                    {getComparatorText(comp)}\n                </Select2.Option>\n            ))}\n        </Select2>\n    );\n};\n\nconst getComparatorText = (comparator: Table2FilterComparator) => {\n    switch (comparator) {\n        case Table2FilterComparator.Contains:\n            return 'Contains';\n        case Table2FilterComparator.DoesNotContain:\n            return 'Does not contain';\n        case Table2FilterComparator.IsEqualTo:\n            return 'Is';\n        case Table2FilterComparator.IsNotEqualTo:\n            return 'Is not';\n        case Table2FilterComparator.IsGreaterThan:\n            return 'Is greater than';\n        case Table2FilterComparator.IsLessThan:\n            return 'Is less than';\n        case Table2FilterComparator.IsBetween:\n            return 'Is between';\n        case Table2FilterComparator.IsOneOf:\n            return 'Is one of';\n        case Table2FilterComparator.IsNoneOf:\n            return 'Is none of';\n        case Table2FilterComparator.IsAllOf:\n            return 'Is all of';\n    }\n};\n"],"names":["Comparator","column","comparator","validComparators","props","handleChange","setFilterValue","currentFilterValue","value","Table2FilterComparator","IsBetween","React","useEffect","undefined","initialComparator","Array","isArray","Select2","onChange","map","comp","Option","key","getComparatorText","Contains","DoesNotContain","IsEqualTo","IsNotEqualTo","IsGreaterThan","IsLessThan","IsOneOf","IsNoneOf","IsAllOf"],"mappings":";;;;MAWaA,UAAU,GAAG,CAAC;EAAEC,MAAM;EAAEC,UAAU;EAAEC,gBAAgB;EAAE,GAAGC;CAAwB;EAC1F,MAAMC,YAAY,GAAGH,UAAU;IAC3BD,MAAM,CAACK,cAAc,CAACC,kBAAkB,KAAK;MACzCL,UAAU;MACVM,KAAK,EAAEN,UAAU,KAAKO,sBAAsB,CAACC,SAAS,GAAG,EAAE,GAAGH,kBAAkB,CAACC;KACpF,CAAC,CAAC;GACN;EAEDG,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIV,UAAU,KAAKW,SAAS,EAAE;MAC1B,MAAMC,iBAAiB,GAAGX,gBAAgB,CAAC,CAAC,CAAC;MAC7CF,MAAM,CAACK,cAAc,CAACC,kBAAkB,KAAK;QACzCL,UAAU,EAAEY,iBAAiB;QAC7BN,KAAK,EACDM,iBAAiB,KAAKL,sBAAsB,CAACC,SAAS,IAAI,CAACK,KAAK,CAACC,OAAO,CAACT,kBAAkB,CAACC,KAAK,CAAC,GAC5F,EAAE,GACFD,kBAAkB,CAACC;OAChC,CAAC,CAAC;;GAEV,EAAE,EAAE,CAAC;EAEN,oBACIG,6BAACM,OAAO,oBAAKb,KAAK;IAAEc,QAAQ,EAAEb,YAAY;IAAEG,KAAK,EAAEN;MAC9CC,gBAAgB,CAACgB,GAAG,CAACC,IAAI,iBACtBT,6BAACM,OAAO,CAACI,MAAM;IAACC,GAAG,EAAEF,IAAI;IAAEZ,KAAK,EAAEY;KAC7BG,iBAAiB,CAACH,IAAI,CAAC,CAE/B,CAAC,CACI;AAElB;AAEA,MAAMG,iBAAiB,GAAIrB,UAAkC;EACzD,QAAQA,UAAU;IACd,KAAKO,sBAAsB,CAACe,QAAQ;MAChC,OAAO,UAAU;IACrB,KAAKf,sBAAsB,CAACgB,cAAc;MACtC,OAAO,kBAAkB;IAC7B,KAAKhB,sBAAsB,CAACiB,SAAS;MACjC,OAAO,IAAI;IACf,KAAKjB,sBAAsB,CAACkB,YAAY;MACpC,OAAO,QAAQ;IACnB,KAAKlB,sBAAsB,CAACmB,aAAa;MACrC,OAAO,iBAAiB;IAC5B,KAAKnB,sBAAsB,CAACoB,UAAU;MAClC,OAAO,cAAc;IACzB,KAAKpB,sBAAsB,CAACC,SAAS;MACjC,OAAO,YAAY;IACvB,KAAKD,sBAAsB,CAACqB,OAAO;MAC/B,OAAO,WAAW;IACtB,KAAKrB,sBAAsB,CAACsB,QAAQ;MAChC,OAAO,YAAY;IACvB,KAAKtB,sBAAsB,CAACuB,OAAO;MAC/B,OAAO,WAAW;;AAE9B,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/filters/components/InferredControl.js

@@ -0,0 +1,96 @@
+import React__default from 'react';
+import { Input } from '../../../../Input/Input.js';
+import { Datepicker } from '../../../../Datepicker/Datepicker.js';
+import { Switch } from '../../../../Switch/Switch.js';
+import { Table2FilterComparator } from '../../../types.js';
+
+const InferredControl = ({
+  column,
+  comparator,
+  value
+}) => {
+  var _column$columnDef$met2, _column$columnDef$met3;
+  const ariaLabel = column.columnDef.header;
+  if (comparator === Table2FilterComparator.IsBetween) {
+    var _column$columnDef$met;
+    const fromValue = Array.isArray(value) ? value[0] : undefined;
+    const toValue = Array.isArray(value) ? value[1] : undefined;
+    if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType) === 'datetime') {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex flex-grow items-center gap-2"
+      }, /*#__PURE__*/React__default.createElement(Datepicker, {
+        "aria-label": ariaLabel,
+        onChange: event => column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [event.detail, toValue]
+        })),
+        value: fromValue
+      }), /*#__PURE__*/React__default.createElement(Datepicker, {
+        "aria-label": ariaLabel,
+        onChange: event => column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [fromValue, event.detail]
+        })),
+        value: toValue
+      }));
+    }
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-grow items-center gap-2"
+    }, /*#__PURE__*/React__default.createElement(Input, {
+      "aria-label": ariaLabel,
+      className: "flex-grow",
+      placeholder: "from",
+      onChange: event => {
+        const value = parseInt(event.target.value);
+        column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [isNaN(value) ? undefined : value, toValue]
+        }));
+      },
+      value: fromValue !== null && fromValue !== void 0 ? fromValue : ''
+    }), /*#__PURE__*/React__default.createElement(Input, {
+      className: "flex-grow",
+      placeholder: "to",
+      onChange: event => {
+        const value = parseInt(event.target.value);
+        column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [fromValue, isNaN(value) ? undefined : value]
+        }));
+      },
+      value: toValue !== null && toValue !== void 0 ? toValue : ''
+    }));
+  }
+  if (((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.dataType) === 'datetime') {
+    return /*#__PURE__*/React__default.createElement(Datepicker, {
+      "aria-label": ariaLabel,
+      onChange: event => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: event.detail
+      })),
+      value: value
+    });
+  } else if (((_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType) === 'boolean') {
+    return /*#__PURE__*/React__default.createElement(Switch, {
+      "aria-label": ariaLabel,
+      onChange: checked => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: checked
+      })),
+      checked: value
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(Input, {
+    "aria-label": ariaLabel,
+    className: "flex-grow",
+    onChange: event => column.setFilterValue(currentValue => ({
+      ...currentValue,
+      value: event.target.value
+    })),
+    required: true,
+    value: value !== null && value !== void 0 ? value : ''
+  });
+};
+
+export { InferredControl };
+//# sourceMappingURL=InferredControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InferredControl.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/InferredControl.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../Input/Input';\nimport { Table2FilterComparator } from '../../../types';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\n\ntype InferredControlProps = {\n    column: RTColumn<any, any>;\n    comparator: Table2FilterComparator;\n    value: any | any[];\n};\n\nexport const InferredControl = ({ column, comparator, value }: InferredControlProps) => {\n    const ariaLabel = column.columnDef.header as string | undefined;\n\n    if (comparator === Table2FilterComparator.IsBetween) {\n        const fromValue = Array.isArray(value) ? value[0] : undefined;\n        const toValue = Array.isArray(value) ? value[1] : undefined;\n\n        if (column.columnDef.meta?.dataType === 'datetime') {\n            return (\n                <div className=\"flex flex-grow items-center gap-2\">\n                    <Datepicker\n                        aria-label={ariaLabel}\n                        onChange={event =>\n                            column.setFilterValue(currentValue => ({\n                                ...currentValue,\n                                value: [(event as any).detail, toValue],\n                            }))\n                        }\n                        value={fromValue}\n                    />\n                    <Datepicker\n                        aria-label={ariaLabel}\n                        onChange={event =>\n                            column.setFilterValue(currentValue => ({\n                                ...currentValue,\n                                value: [fromValue, (event as any).detail],\n                            }))\n                        }\n                        value={toValue}\n                    />\n                </div>\n            );\n        }\n\n        return (\n            <div className=\"flex flex-grow items-center gap-2\">\n                <Input\n                    aria-label={ariaLabel}\n                    className=\"flex-grow\"\n                    placeholder=\"from\"\n                    onChange={event => {\n                        const value = parseInt(event.target.value);\n                        column.setFilterValue(currentValue => ({\n                            ...currentValue,\n                            value: [isNaN(value) ? undefined : value, toValue],\n                        }));\n                    }}\n                    value={fromValue ?? ''}\n                />\n                <Input\n                    className=\"flex-grow\"\n                    placeholder=\"to\"\n                    onChange={event => {\n                        const value = parseInt(event.target.value);\n                        column.setFilterValue(currentValue => ({\n                            ...currentValue,\n                            value: [fromValue, isNaN(value) ? undefined : value],\n                        }));\n                    }}\n                    value={toValue ?? ''}\n                />\n            </div>\n        );\n    }\n\n    if (column.columnDef.meta?.dataType === 'datetime') {\n        return (\n            <Datepicker\n                aria-label={ariaLabel}\n                onChange={event =>\n                    column.setFilterValue(currentValue => ({\n                        ...currentValue,\n                        value: (event as any).detail,\n                    }))\n                }\n                value={value}\n            />\n        );\n    } else if (column.columnDef.meta?.dataType === 'boolean') {\n        return (\n            <Switch\n                aria-label={ariaLabel}\n                onChange={checked =>\n                    column.setFilterValue(currentValue => ({\n                        ...currentValue,\n                        value: checked,\n                    }))\n                }\n                checked={value}\n            />\n        );\n    }\n\n    return (\n        <Input\n            aria-label={ariaLabel}\n            className=\"flex-grow\"\n            onChange={event =>\n                column.setFilterValue(currentValue => ({\n                    ...currentValue,\n                    value: event.target.value,\n                }))\n            }\n            required\n            value={value ?? ''}\n        />\n    );\n};\n"],"names":["InferredControl","column","comparator","value","ariaLabel","columnDef","header","Table2FilterComparator","IsBetween","fromValue","Array","isArray","undefined","toValue","meta","dataType","React","className","Datepicker","onChange","event","setFilterValue","currentValue","detail","Input","placeholder","parseInt","target","isNaN","Switch","checked","required"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/components/row/Context.js

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+const RowContext = /*#__PURE__*/React__default.createContext({
+  validationErrors: null,
+  setValidationErrors: () => undefined,
+  rowMoveReason: {},
+  setRowMoveReason: () => undefined
+});
+const useRowContext = () => {
+  const context = React__default.useContext(RowContext);
+  if (context === undefined) {
+    throw new Error('useRowContext must be used within a RowProvider');
+  }
+  return context;
+};
+const RowProvider = ({
+  children,
+  ...providerProps
+}) => {
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: providerProps
+  }, children);
+};
+
+export { RowProvider, useRowContext };
+//# sourceMappingURL=Context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../../../../../../src/components/Table2/components/row/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { SaveHandlerErrorResponse } from '../../types';\nimport { IndicatorReason } from '../column/Indicator';\n\ntype RowContext = {\n    validationErrors: SaveHandlerErrorResponse;\n    setValidationErrors: React.Dispatch<React.SetStateAction<SaveHandlerErrorResponse>>;\n    rowMoveReason: Record<string, IndicatorReason | null>;\n    setRowMoveReason: React.Dispatch<React.SetStateAction<Record<string, IndicatorReason | null>>>;\n};\n\nconst RowContext = React.createContext<RowContext>({\n    validationErrors: null,\n    setValidationErrors: () => undefined,\n    rowMoveReason: {},\n    setRowMoveReason: () => undefined,\n});\n\nexport const useRowContext = () => {\n    const context = React.useContext(RowContext);\n\n    if (context === undefined) {\n        throw new Error('useRowContext must be used within a RowProvider');\n    }\n\n    return context;\n};\n\ntype RowProviderProps = RowContext & { children: React.ReactNode };\n\nexport const RowProvider = ({ children, ...providerProps }: RowProviderProps) => {\n    return <RowContext.Provider value={providerProps}>{children}</RowContext.Provider>;\n};\n"],"names":["RowContext","React","createContext","validationErrors","setValidationErrors","undefined","rowMoveReason","setRowMoveReason","useRowContext","context","useContext","Error","RowProvider","children","providerProps","Provider","value"],"mappings":";;AAWA,MAAMA,UAAU,gBAAGC,cAAK,CAACC,aAAa,CAAa;EAC/CC,gBAAgB,EAAE,IAAI;EACtBC,mBAAmB,EAAE,MAAMC,SAAS;EACpCC,aAAa,EAAE,EAAE;EACjBC,gBAAgB,EAAE,MAAMF;CAC3B,CAAC;MAEWG,aAAa,GAAG;EACzB,MAAMC,OAAO,GAAGR,cAAK,CAACS,UAAU,CAACV,UAAU,CAAC;EAE5C,IAAIS,OAAO,KAAKJ,SAAS,EAAE;IACvB,MAAM,IAAIM,KAAK,CAAC,iDAAiD,CAAC;;EAGtE,OAAOF,OAAO;AAClB;MAIaG,WAAW,GAAG,CAAC;EAAEC,QAAQ;EAAE,GAAGC;CAAiC;EACxE,oBAAOb,6BAACD,UAAU,CAACe,QAAQ;IAACC,KAAK,EAAEF;KAAgBD,QAAQ,CAAuB;AACtF;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/row/ExpandedRow.js

@@ -0,0 +1,33 @@
+import React__default from 'react';
+
+const ExpandedRow = ({
+  index,
+  setSize,
+  ...props
+}) => {
+  const ref = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref.current) {
+      var _ref$current;
+      const height = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().height;
+      setSize(sizes => {
+        if (height !== sizes[index]) {
+          var _ref$current2;
+          return {
+            ...sizes,
+            [index]: (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect().height
+          };
+        }
+        return sizes;
+      });
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+    className: "border-grey-300 bg-grey-50 col-span-full border-b p-4"
+  }, props, {
+    ref: ref
+  }));
+};
+
+export { ExpandedRow };
+//# sourceMappingURL=ExpandedRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandedRow.js","sources":["../../../../../../../../../src/components/Table2/components/row/ExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nexport const ExpandedRow = ({ index, setSize, ...props }) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const height = ref.current?.getBoundingClientRect().height;\n\n            setSize(sizes => {\n                if (height !== sizes[index]) {\n                    return { ...sizes, [index]: ref.current?.getBoundingClientRect().height };\n                }\n\n                return sizes;\n            });\n        }\n    }, []);\n\n    return <div className=\"border-grey-300 bg-grey-50 col-span-full border-b p-4\" {...props} ref={ref} />;\n};\n"],"names":["ExpandedRow","index","setSize","props","ref","React","useRef","useEffect","current","height","getBoundingClientRect","sizes","className"],"mappings":";;MAEaA,WAAW,GAAG,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAE,GAAGC;CAAO;EACpD,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAE9CD,cAAK,CAACE,SAAS,CAAC;IACZ,IAAIH,GAAG,CAACI,OAAO,EAAE;MAAA;MACb,MAAMC,MAAM,mBAAGL,GAAG,CAACI,OAAO,iDAAX,aAAaE,qBAAqB,EAAE,CAACD,MAAM;MAE1DP,OAAO,CAACS,KAAK;QACT,IAAIF,MAAM,KAAKE,KAAK,CAACV,KAAK,CAAC,EAAE;UAAA;UACzB,OAAO;YAAE,GAAGU,KAAK;YAAE,CAACV,KAAK,oBAAGG,GAAG,CAACI,OAAO,kDAAX,cAAaE,qBAAqB,EAAE,CAACD;WAAQ;;QAG7E,OAAOE,KAAK;OACf,CAAC;;GAET,EAAE,EAAE,CAAC;EAEN,oBAAON;IAAKO,SAAS,EAAC;KAA4DT,KAAK;IAAEC,GAAG,EAAEA;KAAO;AACzG;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/row/Row.js

@@ -0,0 +1,58 @@
+import React__default from 'react';
+import { RowProvider } from './Context.js';
+
+const HOVER_THRESHOLD_MS = 50;
+const Row = ({
+  row,
+  rowIndex,
+  table,
+  ...props
+}) => {
+  const meta = table.options.meta;
+  const isActiveRow = meta.activeRowIndex === rowIndex;
+  const isDragging = meta.dragging[row.id];
+  const [validationErrors, setValidationErrors] = React__default.useState(null);
+  const [rowMoveReason, setRowMoveReason] = React__default.useState({});
+  // This effect aims to focus the first focussable cell when edit mode is turned on.
+  React__default.useEffect(() => {
+    var _meta$tableRef$curren;
+    const isFocusInsideTable = (_meta$tableRef$curren = meta.tableRef.current) === null || _meta$tableRef$curren === void 0 ? void 0 : _meta$tableRef$curren.contains(document.activeElement);
+    // If the foucs is outside the table i.e., table action popups, search etc., then don't focus the first cell.
+    if (meta.editMode.isEditing && isActiveRow && isFocusInsideTable) {
+      meta.editMode.moveToFirstColumn(meta.focussableColumnIndexes);
+    }
+    // We are intentionally not adding activeRow to the depency variable so that everytime active row is changed,
+    // first focussable cell is not focussed.
+  }, [meta.editMode.isEditing, meta.focussableColumnIndexes]);
+  const handleSetValidationErrors = errors => {
+    if (errors !== null) {
+      meta.setShouldDisableTableActions(true);
+    }
+    setValidationErrors(errors);
+  };
+  const hoverTimerRef = React__default.useRef();
+  const handleEnter = () => {
+    hoverTimerRef.current = setTimeout(() => meta.setHoveredRowIndex(rowIndex), HOVER_THRESHOLD_MS);
+  };
+  const handleLeave = () => {
+    clearTimeout(hoverTimerRef.current);
+    hoverTimerRef.current = undefined;
+    meta.setHoveredRowIndex(undefined);
+  };
+  return /*#__PURE__*/React__default.createElement(RowProvider, {
+    validationErrors: validationErrors,
+    setValidationErrors: handleSetValidationErrors,
+    rowMoveReason: rowMoveReason,
+    setRowMoveReason: setRowMoveReason
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    role: "row",
+    draggable: true,
+    "aria-current": isActiveRow ? 'true' : undefined,
+    "aria-grabbed": isDragging ? 'true' : undefined,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave
+  })));
+};
+
+export { Row };
+//# sourceMappingURL=Row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table2/components/row/Row.tsx"],"sourcesContent":["import { TableMeta } from '@tanstack/react-table';\nimport React from 'react';\nimport { SaveHandlerErrorResponse } from '../../types';\nimport { IndicatorReason } from '../column/Indicator';\nimport { RowProvider } from './Context';\n\nconst HOVER_THRESHOLD_MS = 50;\n\nexport const Row = ({ row, rowIndex, table, ...props }) => {\n    const meta = table.options.meta as TableMeta<any>;\n    const isActiveRow = meta.activeRowIndex === rowIndex;\n    const isDragging = meta.dragging[row.id];\n\n    const [validationErrors, setValidationErrors] = React.useState<SaveHandlerErrorResponse | null>(null);\n    const [rowMoveReason, setRowMoveReason] = React.useState<Record<string, IndicatorReason | null>>({});\n\n    // This effect aims to focus the first focussable cell when edit mode is turned on.\n    React.useEffect(() => {\n        const isFocusInsideTable = meta.tableRef.current?.contains(document.activeElement);\n\n        // If the foucs is outside the table i.e., table action popups, search etc., then don't focus the first cell.\n        if (meta.editMode.isEditing && isActiveRow && isFocusInsideTable) {\n            meta.editMode.moveToFirstColumn(meta.focussableColumnIndexes);\n        }\n        // We are intentionally not adding activeRow to the depency variable so that everytime active row is changed,\n        // first focussable cell is not focussed.\n    }, [meta.editMode.isEditing, meta.focussableColumnIndexes]);\n\n    const handleSetValidationErrors = (errors: React.SetStateAction<SaveHandlerErrorResponse>) => {\n        if (errors !== null) {\n            meta.setShouldDisableTableActions(true);\n        }\n\n        setValidationErrors(errors);\n    };\n\n    const hoverTimerRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n    const handleEnter = () => {\n        hoverTimerRef.current = setTimeout(() => meta.setHoveredRowIndex(rowIndex), HOVER_THRESHOLD_MS);\n    };\n    const handleLeave = () => {\n        clearTimeout(hoverTimerRef.current);\n        hoverTimerRef.current = undefined;\n        meta.setHoveredRowIndex(undefined);\n    };\n\n    return (\n        <RowProvider\n            validationErrors={validationErrors}\n            setValidationErrors={handleSetValidationErrors}\n            rowMoveReason={rowMoveReason}\n            setRowMoveReason={setRowMoveReason}>\n            <div\n                {...props}\n                role=\"row\"\n                draggable\n                aria-current={isActiveRow ? 'true' : undefined}\n                aria-grabbed={isDragging ? 'true' : undefined}\n                onMouseEnter={handleEnter}\n                onMouseLeave={handleLeave}\n            />\n        </RowProvider>\n    );\n};\n"],"names":["HOVER_THRESHOLD_MS","Row","row","rowIndex","table","props","meta","options","isActiveRow","activeRowIndex","isDragging","dragging","id","validationErrors","setValidationErrors","React","useState","rowMoveReason","setRowMoveReason","useEffect","isFocusInsideTable","tableRef","current","contains","document","activeElement","editMode","isEditing","moveToFirstColumn","focussableColumnIndexes","handleSetValidationErrors","errors","setShouldDisableTableActions","hoverTimerRef","useRef","handleEnter","setTimeout","setHoveredRowIndex","handleLeave","clearTimeout","undefined","RowProvider","role","draggable","onMouseEnter","onMouseLeave"],"mappings":";;;AAMA,MAAMA,kBAAkB,GAAG,EAAE;MAEhBC,GAAG,GAAG,CAAC;EAAEC,GAAG;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;CAAO;EAClD,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAsB;EACjD,MAAME,WAAW,GAAGF,IAAI,CAACG,cAAc,KAAKN,QAAQ;EACpD,MAAMO,UAAU,GAAGJ,IAAI,CAACK,QAAQ,CAACT,GAAG,CAACU,EAAE,CAAC;EAExC,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAkC,IAAI,CAAC;EACrG,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGH,cAAK,CAACC,QAAQ,CAAyC,EAAE,CAAC;;EAGpGD,cAAK,CAACI,SAAS,CAAC;;IACZ,MAAMC,kBAAkB,4BAAGd,IAAI,CAACe,QAAQ,CAACC,OAAO,0DAArB,sBAAuBC,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC;;IAGlF,IAAInB,IAAI,CAACoB,QAAQ,CAACC,SAAS,IAAInB,WAAW,IAAIY,kBAAkB,EAAE;MAC9Dd,IAAI,CAACoB,QAAQ,CAACE,iBAAiB,CAACtB,IAAI,CAACuB,uBAAuB,CAAC;;;;GAIpE,EAAE,CAACvB,IAAI,CAACoB,QAAQ,CAACC,SAAS,EAAErB,IAAI,CAACuB,uBAAuB,CAAC,CAAC;EAE3D,MAAMC,yBAAyB,GAAIC,MAAsD;IACrF,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjBzB,IAAI,CAAC0B,4BAA4B,CAAC,IAAI,CAAC;;IAG3ClB,mBAAmB,CAACiB,MAAM,CAAC;GAC9B;EAED,MAAME,aAAa,GAAGlB,cAAK,CAACmB,MAAM,EAAiC;EAEnE,MAAMC,WAAW,GAAG;IAChBF,aAAa,CAACX,OAAO,GAAGc,UAAU,CAAC,MAAM9B,IAAI,CAAC+B,kBAAkB,CAAClC,QAAQ,CAAC,EAAEH,kBAAkB,CAAC;GAClG;EACD,MAAMsC,WAAW,GAAG;IAChBC,YAAY,CAACN,aAAa,CAACX,OAAO,CAAC;IACnCW,aAAa,CAACX,OAAO,GAAGkB,SAAS;IACjClC,IAAI,CAAC+B,kBAAkB,CAACG,SAAS,CAAC;GACrC;EAED,oBACIzB,6BAAC0B,WAAW;IACR5B,gBAAgB,EAAEA,gBAAgB;IAClCC,mBAAmB,EAAEgB,yBAAyB;IAC9Cb,aAAa,EAAEA,aAAa;IAC5BC,gBAAgB,EAAEA;kBAClBH,sDACQV,KAAK;IACTqC,IAAI,EAAC,KAAK;IACVC,SAAS;oBACKnC,WAAW,GAAG,MAAM,GAAGgC,SAAS;oBAChC9B,UAAU,GAAG,MAAM,GAAG8B,SAAS;IAC7CI,YAAY,EAAET,WAAW;IACzBU,YAAY,EAAEP;KAChB,CACQ;AAEtB;;;;"}

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useActiveRowStateListener.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+
+const useActiveRowStateListener = (table, rows, activeRowIndex) => {
+  const meta = table.options.meta;
+  React__default.useEffect(() => {
+    if (meta.editMode.isEditing && meta.shouldPauseSortingAndFiltering) {
+      meta.setShouldPauseSortingAndFiltering(false);
+    }
+  }, [activeRowIndex.activeRowIndex]);
+  // if a filter would exclude the active row, reset it to 0
+  React__default.useEffect(() => {
+    if (activeRowIndex.activeRowIndex > rows.length - 1) {
+      meta.setActiveRowIndex(rows.length ? rows.length - 1 : 0);
+    }
+  }, [table.getState().columnFilters, rows.length]);
+};
+
+export { useActiveRowStateListener };
+//# sourceMappingURL=useActiveRowStateListener.js.map

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useActiveRowStateListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveRowStateListener.js","sources":["../../../../../../../../../src/components/Table2/hooks/listeners/useActiveRowStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Row as RTRow, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { useActiveRow } from '../useActiveRow';\n\nexport const useActiveRowStateListener = <TType = any>(\n    table: RTTable<any>,\n    rows: RTRow<any>[],\n    activeRowIndex: useActiveRow<TType>\n) => {\n    const meta = table.options.meta as TableMeta<any>;\n\n    React.useEffect(() => {\n        if (meta.editMode.isEditing && meta.shouldPauseSortingAndFiltering) {\n            meta.setShouldPauseSortingAndFiltering(false);\n        }\n    }, [activeRowIndex.activeRowIndex]);\n\n    // if a filter would exclude the active row, reset it to 0\n    React.useEffect(() => {\n        if (activeRowIndex.activeRowIndex > rows.length - 1) {\n            meta.setActiveRowIndex(rows.length ? rows.length - 1 : 0);\n        }\n    }, [table.getState().columnFilters, rows.length]);\n};\n"],"names":["useActiveRowStateListener","table","rows","activeRowIndex","meta","options","React","useEffect","editMode","isEditing","shouldPauseSortingAndFiltering","setShouldPauseSortingAndFiltering","length","setActiveRowIndex","getState","columnFilters"],"mappings":";;MAIaA,yBAAyB,GAAG,CACrCC,KAAmB,EACnBC,IAAkB,EAClBC,cAAmC;EAEnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,OAAO,CAACD,IAAsB;EAEjDE,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIH,IAAI,CAACI,QAAQ,CAACC,SAAS,IAAIL,IAAI,CAACM,8BAA8B,EAAE;MAChEN,IAAI,CAACO,iCAAiC,CAAC,KAAK,CAAC;;GAEpD,EAAE,CAACR,cAAc,CAACA,cAAc,CAAC,CAAC;;EAGnCG,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIJ,cAAc,CAACA,cAAc,GAAGD,IAAI,CAACU,MAAM,GAAG,CAAC,EAAE;MACjDR,IAAI,CAACS,iBAAiB,CAACX,IAAI,CAACU,MAAM,GAAGV,IAAI,CAACU,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;;GAEhE,EAAE,CAACX,KAAK,CAACa,QAAQ,EAAE,CAACC,aAAa,EAAEb,IAAI,CAACU,MAAM,CAAC,CAAC;AACrD;;;;"}

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js

@@ -0,0 +1,44 @@
+import React__default from 'react';
+
+const isResizingPinnedColumn = (columnId, table) => {
+  var _table$getState$colum, _table$getState$colum2;
+  return !!columnId && ((_table$getState$colum = table.getState().columnPinning.left) === null || _table$getState$colum === void 0 ? void 0 : _table$getState$colum.includes((_table$getState$colum2 = table.getState().columnSizingInfo) === null || _table$getState$colum2 === void 0 ? void 0 : _table$getState$colum2.isResizingColumn));
+};
+const getOffsetsFromSize = (pinning, visibility, sizing) => {
+  const pinned = pinning.left.filter(c => visibility[c] !== false);
+  const offsets = {};
+  let leftOffset = 0;
+  for (const k of pinned) {
+    if (!Number.isInteger(sizing[k])) {
+      break;
+    }
+    offsets[k] = leftOffset;
+    leftOffset += sizing[k];
+  }
+  return offsets;
+};
+// pinned columns have position sticky, and because we support more than one of them
+// we must set a 'left' css value. this hook listens to changes on state that will
+// affect the left offset (resize, visibility, pinning) and updates offsets based on width
+const useColumnOffsetStateListener = (table, setColumnOffsets) => {
+  const {
+    columnPinning,
+    columnSizing,
+    columnSizingInfo,
+    columnVisibility
+  } = table.getState();
+  React__default.useEffect(() => {
+    if (isResizingPinnedColumn(columnSizingInfo.isResizingColumn, table)) {
+      setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
+    }
+  }, [columnSizingInfo]);
+  React__default.useEffect(() => {
+    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
+  }, [columnVisibility]);
+  React__default.useEffect(() => {
+    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
+  }, [columnPinning.left]);
+};
+
+export { getOffsetsFromSize, useColumnOffsetStateListener };
+//# sourceMappingURL=useColumnOffsetStateListener.js.map

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnOffsetStateListener.js","sources":["../../../../../../../../../src/components/Table2/hooks/listeners/useColumnOffsetStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, ColumnSizingState, ColumnPinningState, VisibilityState, OnChangeFn } from '@tanstack/react-table';\nimport { ColumnOffsetState } from '../../types';\n\nconst isResizingPinnedColumn = (columnId: string | false, table: RTTable<any>) =>\n    !!columnId && table.getState().columnPinning.left?.includes(table.getState().columnSizingInfo?.isResizingColumn as string);\n\nexport const getOffsetsFromSize = (pinning: ColumnPinningState, visibility: VisibilityState, sizing: ColumnSizingState) => {\n    const pinned = (pinning.left as string[]).filter(c => visibility[c] !== false);\n\n    const offsets = {};\n    let leftOffset = 0;\n\n    for (const k of pinned) {\n        if (!Number.isInteger(sizing[k])) {\n            break;\n        }\n\n        offsets[k] = leftOffset;\n        leftOffset += sizing[k];\n    }\n\n    return offsets;\n};\n\n// pinned columns have position sticky, and because we support more than one of them\n// we must set a 'left' css value. this hook listens to changes on state that will\n// affect the left offset (resize, visibility, pinning) and updates offsets based on width\nexport const useColumnOffsetStateListener = (table: RTTable<any>, setColumnOffsets: OnChangeFn<ColumnOffsetState>) => {\n    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility } = table.getState();\n\n    React.useEffect(() => {\n        if (isResizingPinnedColumn(columnSizingInfo.isResizingColumn, table)) {\n            setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));\n        }\n    }, [columnSizingInfo]);\n\n    React.useEffect(() => {\n        setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));\n    }, [columnVisibility]);\n\n    React.useEffect(() => {\n        setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));\n    }, [columnPinning.left]);\n};\n"],"names":["isResizingPinnedColumn","columnId","table","getState","columnPinning","left","includes","columnSizingInfo","isResizingColumn","getOffsetsFromSize","pinning","visibility","sizing","pinned","filter","c","offsets","leftOffset","k","Number","isInteger","useColumnOffsetStateListener","setColumnOffsets","columnSizing","columnVisibility","React","useEffect"],"mappings":";;AAIA,MAAMA,sBAAsB,GAAG,CAACC,QAAwB,EAAEC,KAAmB;EAAA;EAAA,OACzE,CAAC,CAACD,QAAQ,8BAAIC,KAAK,CAACC,QAAQ,EAAE,CAACC,aAAa,CAACC,IAAI,0DAAnC,sBAAqCC,QAAQ,2BAACJ,KAAK,CAACC,QAAQ,EAAE,CAACI,gBAAgB,2DAAjC,uBAAmCC,gBAA0B,CAAC;AAAA;MAEjHC,kBAAkB,GAAG,CAACC,OAA2B,EAAEC,UAA2B,EAAEC,MAAyB;EAClH,MAAMC,MAAM,GAAIH,OAAO,CAACL,IAAiB,CAACS,MAAM,CAACC,CAAC,IAAIJ,UAAU,CAACI,CAAC,CAAC,KAAK,KAAK,CAAC;EAE9E,MAAMC,OAAO,GAAG,EAAE;EAClB,IAAIC,UAAU,GAAG,CAAC;EAElB,KAAK,MAAMC,CAAC,IAAIL,MAAM,EAAE;IACpB,IAAI,CAACM,MAAM,CAACC,SAAS,CAACR,MAAM,CAACM,CAAC,CAAC,CAAC,EAAE;MAC9B;;IAGJF,OAAO,CAACE,CAAC,CAAC,GAAGD,UAAU;IACvBA,UAAU,IAAIL,MAAM,CAACM,CAAC,CAAC;;EAG3B,OAAOF,OAAO;AAClB;AAEA;AACA;AACA;MACaK,4BAA4B,GAAG,CAACnB,KAAmB,EAAEoB,gBAA+C;EAC7G,MAAM;IAAElB,aAAa;IAAEmB,YAAY;IAAEhB,gBAAgB;IAAEiB;GAAkB,GAAGtB,KAAK,CAACC,QAAQ,EAAE;EAE5FsB,cAAK,CAACC,SAAS,CAAC;IACZ,IAAI1B,sBAAsB,CAACO,gBAAgB,CAACC,gBAAgB,EAAEN,KAAK,CAAC,EAAE;MAClEoB,gBAAgB,CAACb,kBAAkB,CAACL,aAAa,EAAEoB,gBAAgB,EAAED,YAAY,CAAC,CAAC;;GAE1F,EAAE,CAAChB,gBAAgB,CAAC,CAAC;EAEtBkB,cAAK,CAACC,SAAS,CAAC;IACZJ,gBAAgB,CAACb,kBAAkB,CAACL,aAAa,EAAEoB,gBAAgB,EAAED,YAAY,CAAC,CAAC;GACtF,EAAE,CAACC,gBAAgB,CAAC,CAAC;EAEtBC,cAAK,CAACC,SAAS,CAAC;IACZJ,gBAAgB,CAACb,kBAAkB,CAACL,aAAa,EAAEoB,gBAAgB,EAAED,YAAY,CAAC,CAAC;GACtF,EAAE,CAACnB,aAAa,CAACC,IAAI,CAAC,CAAC;AAC5B;;;;"}