@economic/taco 1.19.0 → 1.20.0

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

@@ -0,0 +1,159 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../../Icon/Icon.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { IconButton } from '../../../IconButton/IconButton.js';
+import { isOverflowing } from '../../../../utils/dom.js';
+import { flexRender } from '@tanstack/react-table';
+import { isInternalColumn, MIN_COLUMN_SIZE } from '../../utilities/columns.js';
+import { getCellSizingClasses, getCellAlignmentClasses } from '../../utilities/cell.js';
+import { ColumnBase } from './Base.js';
+
+const Header = function Header(props) {
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
+  const {
+    header,
+    index,
+    isLastColumn,
+    table,
+    tableRef,
+    ...columnProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const pinned = !!header.column.getIsPinned();
+  const isOtherColumnBeingResized = table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;
+  const className = cn('group/header sticky top-0 bg-white border-b-2 relative font-bold z-[15] hover:z-[16]', {
+    'z-[16]': header.column.getIsResizing(),
+    'z-[17]': pinned,
+    'cursor-pointer select-none': header.column.getCanSort(),
+    'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.menu),
+    'pointer-events-none': isOtherColumnBeingResized
+  }, getCellSizingClasses('normal'), (_header$column$column2 = header.column.columnDef.meta) === null || _header$column$column2 === void 0 ? void 0 : _header$column$column2.headerClassName, props.className);
+  // set the column size after the first render (after auto layout with 'max-content') has run
+  // this way columns default to fit their content, then we save that size for resizing
+  const refCallback = node => {
+    if (node && !table.getState().columnSizing[header.id]) {
+      const size = Math.ceil(node.getBoundingClientRect().width);
+      table.setColumnSizing(sizes => ({
+        ...sizes,
+        [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size
+      }));
+    }
+  };
+  // we use mousedown because clicking and dragging resize and then letting go over the
+  // column, results in sorting being applied
+  const handleMouseDown = header.column.getCanSort() ? event => {
+    // only detect left clicks
+    if (event.button === 0) {
+      var _tableRef$current;
+      event.preventDefault();
+      table.resetRowSelection();
+      header.column.toggleSorting();
+      (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+    }
+  } : undefined;
+  const handleResizerDoubleClick = () => {
+    var _header$column$column3;
+    const size = (_header$column$column3 = header.column.columnDef.meta) === null || _header$column$column3 === void 0 ? void 0 : _header$column$column3.defaultWidth;
+    table.setColumnSizing(sizes => {
+      const nextSizes = {
+        ...sizes
+      };
+      if (size) {
+        nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
+      } else {
+        delete nextSizes[header.id];
+      }
+      return nextSizes;
+    });
+  };
+  const handleResizerClick = event => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const handleResize = event => {
+    // prevent the parent onMouseDown propagating
+    event.stopPropagation();
+    header.getResizeHandler()(event);
+  };
+  const content = /*#__PURE__*/React__default.createElement("div", {
+    className: "truncate",
+    ref: textRef
+  }, flexRender(header.column.columnDef.header, header.getContext()));
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
+    // base props
+    column: header.column,
+    table: table,
+    "aria-sort": (_asc$desc$header$colu = {
+      asc: 'ascending',
+      desc: 'descending'
+    }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu !== void 0 ? _asc$desc$header$colu : 'none',
+    className: className,
+    onMouseDown: handleMouseDown,
+    ref: refCallback,
+    role: "columnheader",
+    "data-column-index": index
+  }), isInternalColumn(header.id) ? flexRender(header.column.columnDef.header, header.getContext()) : /*#__PURE__*/React__default.createElement("div", {
+    className: cn('flex flex-grow overflow-hidden', {
+      'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!((_header$column$column4 = header.column.columnDef.meta) !== null && _header$column$column4 !== void 0 && _header$column$column4.menu)
+    }, getCellAlignmentClasses((_header$column$column5 = header.column.columnDef.meta) === null || _header$column$column5 === void 0 ? void 0 : _header$column$column5.align))
+  }, isOverflowing(textRef.current) ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: (_header$column$column6 = (_header$column$column7 = header.column.columnDef.meta) === null || _header$column$column7 === void 0 ? void 0 : _header$column$column7.tooltip) !== null && _header$column$column6 !== void 0 ? _header$column$column6 : content,
+    placement: "top"
+  }, content) : content, (_asc$desc$header$colu2 = {
+    asc: /*#__PURE__*/React__default.createElement(Icon, {
+      name: "chevron-up-solid",
+      className: "pointer-events-none -my-0.5"
+    }),
+    desc: /*#__PURE__*/React__default.createElement(Icon, {
+      name: "chevron-down-solid",
+      className: "pointer-events-none -my-0.5"
+    })
+  }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), (_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
+    header: header
+  }) : null, header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    placement: "top",
+    title: "Resize column"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible', {
+      '-mr-2.5 w-5 justify-center': !isLastColumn,
+      'w-2': isLastColumn,
+      '!visible': header.column.getIsResizing()
+    }),
+    onDoubleClick: handleResizerDoubleClick,
+    onMouseDown: handleResize,
+    onTouchStart: handleResize,
+    // this prevents sort handlers being activated
+    onClick: handleResizerClick
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('h-full w-1 rounded', {
+      '!bg-blue-500': header.column.getIsResizing(),
+      'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing()
+    })
+  }))) : null);
+};
+const HeaderMenu = ({
+  header
+}) => {
+  const [open, setOpen] = React__default.useState(false);
+  const className = cn('-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex', {
+    '!flex': open
+  });
+  return header.column.columnDef.meta ?
+  /*#__PURE__*/
+  // This div catches the mousedown events from menu item and menu trigger and prevents
+  // mousedown event from bubbling up to the Header component to prevent toggling sorting
+  React__default.createElement("div", {
+    onMouseDown: event => event.stopPropagation()
+  }, header.column.columnDef.meta.menu({
+    trigger: /*#__PURE__*/React__default.createElement(IconButton, {
+      className: className,
+      icon: "more"
+    }),
+    open: open,
+    onChange: setOpen
+  })) : null;
+};
+
+export { Header };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../src/components/Table2/components/column/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, Header as RTHeader } from '@tanstack/react-table';\nimport { Icon } from '../../../Icon/Icon';\nimport { ColumnBase, ColumnBaseProps } from './Base';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { isInternalColumn, MIN_COLUMN_SIZE } from '../../utilities/columns';\nimport { isOverflowing } from '../../../../utils/dom';\nimport { getCellAlignmentClasses, getCellSizingClasses } from '../../utilities/cell';\nimport { IconButton } from '../../../IconButton/IconButton';\n\ntype HeaderProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    header: RTHeader<TType, unknown>;\n    index: number;\n    isLastColumn: boolean;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const Header = function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, index, isLastColumn, table, tableRef, ...columnProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n    const pinned = !!header.column.getIsPinned();\n    const isOtherColumnBeingResized =\n        table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;\n\n    const className = cn(\n        'group/header sticky top-0 bg-white border-b-2 relative font-bold z-[15] hover:z-[16]',\n        {\n            'z-[16]': header.column.getIsResizing(),\n            'z-[17]': pinned, // pinned headers should show above cells and other headers, so we add z-index\n            'cursor-pointer select-none': header.column.getCanSort(),\n            'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || header.column.columnDef.meta?.menu,\n            'pointer-events-none': isOtherColumnBeingResized,\n        },\n        getCellSizingClasses('normal'),\n        header.column.columnDef.meta?.headerClassName,\n        props.className\n    );\n\n    // set the column size after the first render (after auto layout with 'max-content') has run\n    // this way columns default to fit their content, then we save that size for resizing\n    const refCallback = (node: HTMLDivElement) => {\n        if (node && !table.getState().columnSizing[header.id]) {\n            const size = Math.ceil(node.getBoundingClientRect().width);\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size,\n            }));\n        }\n    };\n\n    // we use mousedown because clicking and dragging resize and then letting go over the\n    // column, results in sorting being applied\n    const handleMouseDown = header.column.getCanSort()\n        ? (event: React.MouseEvent) => {\n              // only detect left clicks\n              if (event.button === 0) {\n                  event.preventDefault();\n                  table.resetRowSelection();\n                  header.column.toggleSorting();\n                  tableRef.current?.focus();\n              }\n          }\n        : undefined;\n\n    const handleResizerDoubleClick = () => {\n        const size = header.column.columnDef.meta?.defaultWidth;\n        table.setColumnSizing(sizes => {\n            const nextSizes = { ...sizes };\n\n            if (size) {\n                nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;\n            } else {\n                delete nextSizes[header.id];\n            }\n\n            return nextSizes;\n        });\n    };\n\n    const handleResizerClick = event => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleResize = event => {\n        // prevent the parent onMouseDown propagating\n        event.stopPropagation();\n        header.getResizeHandler()(event);\n    };\n\n    const content = (\n        <div className=\"truncate\" ref={textRef}>\n            {flexRender(header.column.columnDef.header, header.getContext())}\n        </div>\n    );\n\n    return (\n        <ColumnBase\n            {...columnProps}\n            // base props\n            column={header.column}\n            table={table}\n            // other props\n            aria-sort={\n                {\n                    asc: 'ascending',\n                    desc: 'descending',\n                }[header.column.getIsSorted() as any] ?? 'none'\n            }\n            className={className}\n            onMouseDown={handleMouseDown}\n            ref={refCallback}\n            role=\"columnheader\"\n            // helper props\n            data-column-index={index}>\n            {isInternalColumn(header.id) ? (\n                flexRender(header.column.columnDef.header, header.getContext())\n            ) : (\n                <div\n                    className={cn(\n                        'flex flex-grow overflow-hidden',\n                        {\n                            'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!header.column.columnDef.meta?.menu,\n                        },\n                        getCellAlignmentClasses(header.column.columnDef.meta?.align)\n                    )}>\n                    {isOverflowing(textRef.current) ? (\n                        <Tooltip title={header.column.columnDef.meta?.tooltip ?? content} placement=\"top\">\n                            {content}\n                        </Tooltip>\n                    ) : (\n                        content\n                    )}\n                    {{\n                        asc: <Icon name=\"chevron-up-solid\" className=\"pointer-events-none -my-0.5\" />,\n                        desc: <Icon name=\"chevron-down-solid\" className=\"pointer-events-none -my-0.5\" />,\n                    }[header.column.getIsSorted() as string] ?? null}\n                </div>\n            )}\n            {header.column.columnDef.meta?.menu ? <HeaderMenu header={header} /> : null}\n            {header.column.getCanResize() ? (\n                <Tooltip placement=\"top\" title=\"Resize column\">\n                    <div\n                        className={cn(\n                            'invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible',\n                            {\n                                '-mr-2.5 w-5 justify-center': !isLastColumn,\n                                'w-2': isLastColumn,\n                                '!visible': header.column.getIsResizing(),\n                            }\n                        )}\n                        onDoubleClick={handleResizerDoubleClick}\n                        onMouseDown={handleResize}\n                        onTouchStart={handleResize}\n                        // this prevents sort handlers being activated\n                        onClick={handleResizerClick}>\n                        <div\n                            className={cn('h-full w-1 rounded', {\n                                '!bg-blue-500': header.column.getIsResizing(),\n                                'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing(),\n                            })}\n                        />\n                    </div>\n                </Tooltip>\n            ) : null}\n        </ColumnBase>\n    );\n};\n\nconst HeaderMenu = ({ header }) => {\n    const [open, setOpen] = React.useState(false);\n\n    const className = cn(\n        '-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex',\n        {\n            '!flex': open,\n        }\n    );\n    return header.column.columnDef.meta ? (\n        // This div catches the mousedown events from menu item and menu trigger and prevents\n        // mousedown event from bubbling up to the Header component to prevent toggling sorting\n        <div onMouseDown={event => event.stopPropagation()}>\n            {header.column.columnDef.meta.menu({\n                trigger: <IconButton className={className} icon=\"more\" />,\n                open: open,\n                onChange: setOpen,\n            })}\n        </div>\n    ) : null;\n};\n"],"names":["Header","props","header","index","isLastColumn","table","tableRef","columnProps","textRef","React","useRef","pinned","column","getIsPinned","isOtherColumnBeingResized","getState","columnSizingInfo","isResizingColumn","id","className","cn","getIsResizing","getCanSort","getCanResize","columnDef","meta","menu","getCellSizingClasses","headerClassName","refCallback","node","columnSizing","size","Math","ceil","getBoundingClientRect","width","setColumnSizing","sizes","isInternalColumn","MIN_COLUMN_SIZE","handleMouseDown","event","button","preventDefault","resetRowSelection","toggleSorting","current","focus","undefined","handleResizerDoubleClick","defaultWidth","nextSizes","handleResizerClick","stopPropagation","handleResize","getResizeHandler","content","ref","flexRender","getContext","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","HeaderMenu","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","trigger","IconButton","icon","onChange"],"mappings":"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"}

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

@@ -0,0 +1,78 @@
+import React__default from 'react';
+import { Icon } from '../../../Icon/Icon.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { useRowContext } from '../row/Context.js';
+import ReactDOM from 'react-dom';
+
+var IndicatorReason;
+(function (IndicatorReason) {
+  IndicatorReason["SEARCH"] = "SEARCH";
+  IndicatorReason["SORTING"] = "SORTING";
+  IndicatorReason["FILTER"] = "FILTER";
+})(IndicatorReason || (IndicatorReason = {}));
+const useIndicatorText = reason => {
+  let title = '';
+  let description = '';
+  const {
+    texts: {
+      table2: tableTexts
+    }
+  } = useLocalization();
+  switch (reason) {
+    case IndicatorReason.SEARCH:
+      title = tableTexts.rowWillBeFiltered;
+      description = tableTexts.searchFilterMovementReason;
+      break;
+    case IndicatorReason.SORTING:
+      title = tableTexts.rowWillMove;
+      description = tableTexts.sortingMovementReason;
+      break;
+    case IndicatorReason.FILTER:
+      title = tableTexts.rowWillBeFiltered;
+      description = tableTexts.tableFilterMovementReason;
+      break;
+  }
+  return {
+    title,
+    description
+  };
+};
+const Indicator = ({
+  reason,
+  columnName,
+  mountNode
+}) => {
+  const container = React__default.useMemo(() => {
+    const element = document.createElement('div');
+    element.className += '-translate-y-1/2 z-[13] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    return element;
+  }, []);
+  const indicatorText = useIndicatorText(reason);
+  const {
+    validationErrors
+  } = useRowContext();
+  const hasValidationErrorsInRow = !!validationErrors;
+  React__default.useEffect(() => {
+    // mountNode could be null when rows are filtered
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('relative');
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
+    return () => {
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
+    };
+  }, [hasValidationErrorsInRow]);
+  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
+  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: indicatorText.description.replace('[COLUMN]', columnName)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex gap-1 hover:cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "info",
+    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
+  }), indicatorText.title)), container);
+};
+
+export { Indicator, IndicatorReason, useIndicatorText };
+//# sourceMappingURL=Indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sources":["../../../../../../../../../src/components/Table2/components/column/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Icon } from '../../../Icon/Icon';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useRowContext } from '../row/Context';\n\nexport enum IndicatorReason {\n    SEARCH = 'SEARCH',\n    SORTING = 'SORTING',\n    FILTER = 'FILTER',\n}\n\nexport const useIndicatorText = reason => {\n    let title = '';\n    let description = '';\n\n    const {\n        texts: { table2: tableTexts },\n    } = useLocalization();\n\n    switch (reason) {\n        case IndicatorReason.SEARCH:\n            title = tableTexts.rowWillBeFiltered;\n            description = tableTexts.searchFilterMovementReason;\n            break;\n        case IndicatorReason.SORTING:\n            title = tableTexts.rowWillMove;\n            description = tableTexts.sortingMovementReason;\n            break;\n        case IndicatorReason.FILTER:\n            title = tableTexts.rowWillBeFiltered;\n            description = tableTexts.tableFilterMovementReason;\n            break;\n    }\n\n    return { title, description };\n};\n\nexport type IndicatorProps = {\n    reason: IndicatorReason;\n    columnName: string;\n    mountNode: Element | null;\n};\nexport const Indicator = ({ reason, columnName, mountNode }: IndicatorProps) => {\n    const container = React.useMemo(() => {\n        const element = document.createElement('div');\n        element.className +=\n            '-translate-y-1/2 z-[13] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';\n\n        return element;\n    }, []);\n\n    const indicatorText = useIndicatorText(reason);\n\n    const { validationErrors } = useRowContext();\n    const hasValidationErrorsInRow = !!validationErrors;\n\n    React.useEffect(() => {\n        // mountNode could be null when rows are filtered\n        mountNode?.classList.add('relative');\n        mountNode?.appendChild(container);\n\n        return () => {\n            mountNode?.classList.remove('relative');\n            mountNode?.removeChild(container);\n        };\n    }, [hasValidationErrorsInRow]);\n\n    // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring\n    // and being able to use Taco Tooltip component in side the visual indicator, portal is used.\n    return ReactDOM.createPortal(\n        <Tooltip title={indicatorText.description.replace('[COLUMN]', columnName)}>\n            <span className=\"flex gap-1 hover:cursor-pointer\">\n                <Icon name=\"info\" className=\"!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {indicatorText.title}\n            </span>\n        </Tooltip>,\n        container\n    );\n};\n"],"names":["IndicatorReason","useIndicatorText","reason","title","description","texts","table2","tableTexts","useLocalization","SEARCH","rowWillBeFiltered","searchFilterMovementReason","SORTING","rowWillMove","sortingMovementReason","FILTER","tableFilterMovementReason","Indicator","columnName","mountNode","container","React","useMemo","element","document","createElement","className","indicatorText","validationErrors","useRowContext","hasValidationErrorsInRow","useEffect","classList","add","appendChild","remove","removeChild","ReactDOM","createPortal","Tooltip","replace","Icon","name"],"mappings":";;;;;;;IAQYA;AAAZ,WAAYA,eAAe;EACvBA,oCAAiB;EACjBA,sCAAmB;EACnBA,oCAAiB;AACrB,CAAC,EAJWA,eAAe,KAAfA,eAAe;MAMdC,gBAAgB,GAAGC,MAAM;EAClC,IAAIC,KAAK,GAAG,EAAE;EACd,IAAIC,WAAW,GAAG,EAAE;EAEpB,MAAM;IACFC,KAAK,EAAE;MAAEC,MAAM,EAAEC;;GACpB,GAAGC,eAAe,EAAE;EAErB,QAAQN,MAAM;IACV,KAAKF,eAAe,CAACS,MAAM;MACvBN,KAAK,GAAGI,UAAU,CAACG,iBAAiB;MACpCN,WAAW,GAAGG,UAAU,CAACI,0BAA0B;MACnD;IACJ,KAAKX,eAAe,CAACY,OAAO;MACxBT,KAAK,GAAGI,UAAU,CAACM,WAAW;MAC9BT,WAAW,GAAGG,UAAU,CAACO,qBAAqB;MAC9C;IACJ,KAAKd,eAAe,CAACe,MAAM;MACvBZ,KAAK,GAAGI,UAAU,CAACG,iBAAiB;MACpCN,WAAW,GAAGG,UAAU,CAACS,yBAAyB;MAClD;;EAGR,OAAO;IAAEb,KAAK;IAAEC;GAAa;AACjC;MAOaa,SAAS,GAAG,CAAC;EAAEf,MAAM;EAAEgB,UAAU;EAAEC;CAA2B;EACvE,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC;IAC5B,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7CF,OAAO,CAACG,SAAS,IACb,yJAAyJ;IAE7J,OAAOH,OAAO;GACjB,EAAE,EAAE,CAAC;EAEN,MAAMI,aAAa,GAAG1B,gBAAgB,CAACC,MAAM,CAAC;EAE9C,MAAM;IAAE0B;GAAkB,GAAGC,aAAa,EAAE;EAC5C,MAAMC,wBAAwB,GAAG,CAAC,CAACF,gBAAgB;EAEnDP,cAAK,CAACU,SAAS,CAAC;;IAEZZ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEa,SAAS,CAACC,GAAG,CAAC,UAAU,CAAC;IACpCd,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEe,WAAW,CAACd,SAAS,CAAC;IAEjC,OAAO;MACHD,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEa,SAAS,CAACG,MAAM,CAAC,UAAU,CAAC;MACvChB,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEiB,WAAW,CAAChB,SAAS,CAAC;KACpC;GACJ,EAAE,CAACU,wBAAwB,CAAC,CAAC;;;EAI9B,oBAAOO,QAAQ,CAACC,YAAY,eACxBjB,6BAACkB,OAAO;IAACpC,KAAK,EAAEwB,aAAa,CAACvB,WAAW,CAACoC,OAAO,CAAC,UAAU,EAAEtB,UAAU;kBACpEG;IAAMK,SAAS,EAAC;kBACZL,6BAACoB,IAAI;IAACC,IAAI,EAAC,MAAM;IAAChB,SAAS,EAAC;IAAuD,EAClFC,aAAa,CAACxB,KAAK,CACjB,CACD,EACViB,SAAS,CACZ;AACL;;;;"}

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { useTruncated } from '../../../../utils/hooks/useTruncated.js';
+
+const ValidationError = ({
+  className,
+  ...props
+}) => {
+  const ref = React__default.useRef(null);
+  const {
+    truncated
+  } = useTruncated(ref.current);
+  const error = /*#__PURE__*/React__default.createElement("span", Object.assign({
+    className: cn('truncate px-px text-xs font-normal leading-normal text-red-500', {
+      'hover:cursor-pointer': truncated
+    }, className),
+    ref: ref,
+    role: "alert"
+  }, props));
+  if (truncated) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: props.children
+    }, error);
+  }
+  return error;
+};
+
+export { ValidationError };
+//# sourceMappingURL=ValidationError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationError.js","sources":["../../../../../../../../../src/components/Table2/components/column/ValidationError.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useTruncated } from '../../../../utils/hooks/useTruncated';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport const ValidationError = ({ className, ...props }: { className?: string; children: string }) => {\n    const ref = React.useRef<HTMLSpanElement>(null);\n    const { truncated } = useTruncated(ref.current);\n\n    const error = (\n        <span\n            className={cn(\n                'truncate px-px text-xs font-normal leading-normal text-red-500',\n                {\n                    'hover:cursor-pointer': truncated,\n                },\n                className\n            )}\n            ref={ref}\n            role=\"alert\"\n            {...props}\n        />\n    );\n\n    if (truncated) {\n        return <Tooltip title={props.children}>{error}</Tooltip>;\n    }\n\n    return error;\n};\n"],"names":["ValidationError","className","props","ref","React","useRef","truncated","useTruncated","current","error","cn","role","Tooltip","title","children"],"mappings":";;;;;MAKaA,eAAe,GAAG,CAAC;EAAEC,SAAS;EAAE,GAAGC;CAAiD;EAC7F,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAkB,IAAI,CAAC;EAC/C,MAAM;IAAEC;GAAW,GAAGC,YAAY,CAACJ,GAAG,CAACK,OAAO,CAAC;EAE/C,MAAMC,KAAK,gBACPL;IACIH,SAAS,EAAES,EAAE,CACT,gEAAgE,EAChE;MACI,sBAAsB,EAAEJ;KAC3B,EACDL,SAAS,CACZ;IACDE,GAAG,EAAEA,GAAG;IACRQ,IAAI,EAAC;KACDT,KAAK,EAEhB;EAED,IAAII,SAAS,EAAE;IACX,oBAAOF,6BAACQ,OAAO;MAACC,KAAK,EAAEX,KAAK,CAACY;OAAWL,KAAK,CAAW;;EAG5D,OAAOA,KAAK;AAChB;;;;"}

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

@@ -0,0 +1,38 @@
+import { isDate } from 'date-fns';
+import { isWeakEqual } from '../../../../utils/date.js';
+
+const hasChanged = (value, newValue) => {
+  if (isDate(value) && isDate(newValue)) {
+    return !isWeakEqual(value, newValue);
+  } else if (Array.isArray(value)) {
+    return JSON.stringify(value) !== JSON.stringify(newValue);
+  }
+  return value !== newValue;
+};
+const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc) => {
+  const miniSortRows = [{
+    ...cell.row,
+    original: {
+      ...cell.row.original,
+      [cell.column.id]: value
+    }
+  }];
+  // getValue is used by the built-in sort functons, so we need to make sure it returns the changed value
+  miniSortRows[0].getValue = () => value;
+  let index = 0;
+  if (rowIndex > 0) {
+    miniSortRows.unshift(rows[rowIndex - 1]);
+    index = 1;
+  }
+  if (rowIndex < rows.length - 1) {
+    miniSortRows.push(rows[rowIndex + 1]);
+  }
+  let resortedRows = [...miniSortRows].sort((a, b) => cell.column.getSortingFn()(a, b, cell.column.id));
+  if (desc) {
+    resortedRows = resortedRows.reverse();
+  }
+  return resortedRows[index].id !== cell.row.id;
+};
+
+export { hasChanged, willRowMoveAfterSorting };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../../../src/components/Table2/components/column/utils.ts"],"sourcesContent":["import { isDate } from 'date-fns';\n\nimport { isWeakEqual as isWeakEqualDate } from '../../../../utils/date';\n\nexport const hasChanged = (value, newValue) => {\n    if (isDate(value) && isDate(newValue)) {\n        return !isWeakEqualDate(value, newValue);\n    } else if (Array.isArray(value)) {\n        return JSON.stringify(value) !== JSON.stringify(newValue);\n    }\n\n    return value !== newValue;\n};\n\nexport const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc): boolean => {\n    const miniSortRows = [{ ...cell.row, original: { ...cell.row.original, [cell.column.id]: value } }];\n    // getValue is used by the built-in sort functons, so we need to make sure it returns the changed value\n    miniSortRows[0].getValue = () => value;\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        miniSortRows.unshift(rows[rowIndex - 1]);\n        index = 1;\n    }\n\n    if (rowIndex < rows.length - 1) {\n        miniSortRows.push(rows[rowIndex + 1]);\n    }\n\n    let resortedRows = [...miniSortRows].sort((a, b) => cell.column.getSortingFn()(a, b, cell.column.id));\n\n    if (desc) {\n        resortedRows = resortedRows.reverse();\n    }\n\n    return resortedRows[index].id !== cell.row.id;\n};\n"],"names":["hasChanged","value","newValue","isDate","isWeakEqualDate","Array","isArray","JSON","stringify","willRowMoveAfterSorting","cell","rowIndex","rows","desc","miniSortRows","row","original","column","id","getValue","index","unshift","length","push","resortedRows","sort","a","b","getSortingFn","reverse"],"mappings":";;;MAIaA,UAAU,GAAG,CAACC,KAAK,EAAEC,QAAQ;EACtC,IAAIC,MAAM,CAACF,KAAK,CAAC,IAAIE,MAAM,CAACD,QAAQ,CAAC,EAAE;IACnC,OAAO,CAACE,WAAe,CAACH,KAAK,EAAEC,QAAQ,CAAC;GAC3C,MAAM,IAAIG,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,EAAE;IAC7B,OAAOM,IAAI,CAACC,SAAS,CAACP,KAAK,CAAC,KAAKM,IAAI,CAACC,SAAS,CAACN,QAAQ,CAAC;;EAG7D,OAAOD,KAAK,KAAKC,QAAQ;AAC7B;MAEaO,uBAAuB,GAAG,CAACR,KAAK,EAAES,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,IAAI;EACrE,MAAMC,YAAY,GAAG,CAAC;IAAE,GAAGJ,IAAI,CAACK,GAAG;IAAEC,QAAQ,EAAE;MAAE,GAAGN,IAAI,CAACK,GAAG,CAACC,QAAQ;MAAE,CAACN,IAAI,CAACO,MAAM,CAACC,EAAE,GAAGjB;;GAAS,CAAC;;EAEnGa,YAAY,CAAC,CAAC,CAAC,CAACK,QAAQ,GAAG,MAAMlB,KAAK;EAEtC,IAAImB,KAAK,GAAG,CAAC;EAEb,IAAIT,QAAQ,GAAG,CAAC,EAAE;IACdG,YAAY,CAACO,OAAO,CAACT,IAAI,CAACD,QAAQ,GAAG,CAAC,CAAC,CAAC;IACxCS,KAAK,GAAG,CAAC;;EAGb,IAAIT,QAAQ,GAAGC,IAAI,CAACU,MAAM,GAAG,CAAC,EAAE;IAC5BR,YAAY,CAACS,IAAI,CAACX,IAAI,CAACD,QAAQ,GAAG,CAAC,CAAC,CAAC;;EAGzC,IAAIa,YAAY,GAAG,CAAC,GAAGV,YAAY,CAAC,CAACW,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKjB,IAAI,CAACO,MAAM,CAACW,YAAY,EAAE,CAACF,CAAC,EAAEC,CAAC,EAAEjB,IAAI,CAACO,MAAM,CAACC,EAAE,CAAC,CAAC;EAErG,IAAIL,IAAI,EAAE;IACNW,YAAY,GAAGA,YAAY,CAACK,OAAO,EAAE;;EAGzC,OAAOL,YAAY,CAACJ,KAAK,CAAC,CAACF,EAAE,KAAKR,IAAI,CAACK,GAAG,CAACG,EAAE;AACjD;;;;"}

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

@@ -0,0 +1,89 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../../Icon/Icon.js';
+import { Button } from '../../../Button/Button.js';
+import { Popover } from '../../../Popover/Popover.js';
+import { Group } from '../../../Group/Group.js';
+import { Shortcut } from '../../../Shortcut/Shortcut.js';
+import { isInternalColumn } from '../../utilities/columns.js';
+import { ColumnFilter } from './components/ColumnFilter.js';
+import { useGlobalKeyboardShortcut } from '../../../../hooks/useGlobalKeyboardShortcut.js';
+
+const FiltersButton = ({
+  length,
+  table
+}) => {
+  const ref = React__default.useRef(null);
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const {
+    shouldDisableTableActions
+  } = table.options.meta;
+  const columnFilters = table.getState().columnFilters;
+  const filteredColumns = columnFilters.reduce((columns, columnFilter) => {
+    const column = allColumns.find(c => c.id === columnFilter.id);
+    if (column) {
+      return [...columns, column];
+    }
+    return columns;
+  }, []);
+  const handleAdd = () => {
+    const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));
+    if (firstFilterableColumn) {
+      firstFilterableColumn.setFilterValue({
+        comparator: undefined,
+        value: undefined
+      });
+    }
+  };
+  const handleReset = () => {
+    table.resetColumnFilters();
+  };
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
+      var _ref$current;
+      event.preventDefault();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(Button, {
+    appearance: columnFilters.length ? 'primary' : 'default',
+    className: cn({
+      '!wcag-blue-100': columnFilters.length
+    }),
+    disabled: shouldDisableTableActions,
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-[40rem] flex-col gap-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-full items-center gap-2"
+    }, /*#__PURE__*/React__default.createElement("h4", {
+      className: "mb-0 inline-flex"
+    }, "Filter"), /*#__PURE__*/React__default.createElement("p", {
+      className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
+    }, "Viewing ", table.getFilteredRowModel().rows.length, " of ", length)), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-2"
+    }, filteredColumns.map((column, index) => /*#__PURE__*/React__default.createElement(ColumnFilter, {
+      key: `${column.id}_${index}`,
+      allColumns: allColumns,
+      index: index,
+      column: column,
+      table: table
+    }))), /*#__PURE__*/React__default.createElement(Group, {
+      className: "justify-between"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      appearance: "discrete",
+      onClick: handleAdd
+    }, "+ Add filter"), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button, {
+      onClick: handleReset
+    }, "Clear all filters") : null)))),
+    ref: ref,
+    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFilters.length ? 'Change filters' : 'Apply filters', /*#__PURE__*/React__default.createElement(Shortcut, {
+      className: "ml-2",
+      keys: ['Ctrl', 'Shift', 'F']
+    }))
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: columnFilters.length ? 'filter-solid' : 'filter'
+  }), columnFilters.length ? `Filters (${columnFilters.length})` : 'Filters');
+};
+
+export { FiltersButton };
+//# sourceMappingURL=FiltersButton.js.map

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":";;;;;;;;;;;MAkBaA,aAAa,GAAG,CAAC;EAAEC,MAAM;EAAEC;CAA2B;EAC/D,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMC,UAAU,GAAGJ,KAAK,CAACK,iBAAiB,EAAE,CAACC,MAAM,CAACC,MAAM,IAAI,CAACC,gBAAgB,CAACD,MAAM,CAACE,EAAE,CAAC,CAAC;EAC3F,MAAM;IAAEC;GAA2B,GAAGV,KAAK,CAACW,OAAO,CAACC,IAAsB;EAE1E,MAAMC,aAAa,GAAGb,KAAK,CAACc,QAAQ,EAAE,CAACD,aAAa;EAEpD,MAAME,eAAe,GAAGF,aAAa,CAACG,MAAM,CAAC,CAACC,OAA6B,EAAEC,YAAY;IACrF,MAAMX,MAAM,GAAGH,UAAU,CAACe,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACX,EAAE,KAAKS,YAAY,CAACT,EAAE,CAAC;IAE7D,IAAIF,MAAM,EAAE;MACR,OAAO,CAAC,GAAGU,OAAO,EAAEV,MAAM,CAAC;;IAG/B,OAAOU,OAAO;GACjB,EAAE,EAAE,CAAC;EAEN,MAAMI,SAAS,GAAG;IACd,MAAMC,qBAAqB,GAAGlB,UAAU,CAACe,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACG,YAAY,EAAE,IAAI,CAACV,aAAa,CAACM,IAAI,CAACK,CAAC,IAAIA,CAAC,CAACf,EAAE,KAAKW,CAAC,CAACX,EAAE,CAAC,CAAC;IAE/G,IAAIa,qBAAqB,EAAE;MACvBA,qBAAqB,CAACG,cAAc,CAAC;QACjCC,UAAU,EAAEC,SAAS;QACrBC,KAAK,EAAED;OACM,CAAC;;GAEzB;EAED,MAAME,WAAW,GAAG;IAChB7B,KAAK,CAAC8B,kBAAkB,EAAE;GAC7B;EAEDC,yBAAyB,CAAEC,KAAoB;IAC3C,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,KAAKD,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACG,OAAO,CAAC,IAAIH,KAAK,CAACI,QAAQ,EAAE;MAAA;MACzEJ,KAAK,CAACK,cAAc,EAAE;MACtB,gBAAApC,GAAG,CAACqC,OAAO,iDAAX,aAAaC,KAAK,EAAE;;GAE3B,CAAC;EAEF,oBACIrC,6BAACsC,MAAM;IACHC,UAAU,EAAE5B,aAAa,CAACd,MAAM,GAAG,SAAS,GAAG,SAAS;IACxD2C,SAAS,EAAEC,EAAE,CAAC;MACV,gBAAgB,EAAE9B,aAAa,CAACd;KACnC,CAAC;IACF6C,QAAQ,EAAElC,yBAAyB;IACnCmC,OAAO,EAAEC,YAAY,iBACjB5C,6BAAC6C,OAAO,oBAAKD,YAAY,gBACrB5C,6BAAC6C,OAAO,CAACC,OAAO,qBACZ9C;MAAKwC,SAAS,EAAC;oBACXxC;MAAKwC,SAAS,EAAC;oBACXxC;MAAIwC,SAAS,EAAC;gBAA8B,eAC5CxC;MAAGwC,SAAS,EAAC;mBACA1C,KAAK,CAACiD,mBAAmB,EAAE,CAACC,IAAI,CAACnD,MAAM,UAAMA,MAAM,CAC5D,CACF,eACNG;MAAKwC,SAAS,EAAC;OACV3B,eAAe,CAACoC,GAAG,CAAC,CAAC5C,MAAM,EAAE6C,KAAK,kBAC/BlD,6BAACmD,YAAY;MACTpB,GAAG,KAAK1B,MAAM,CAACE,MAAM2C,OAAO;MAC5BhD,UAAU,EAAEA,UAAU;MACtBgD,KAAK,EAAEA,KAAK;MACZ7C,MAAM,EAAEA,MAAM;MACdP,KAAK,EAAEA;MAEd,CAAC,CACA,eACNE,6BAACoD,KAAK;MAACZ,SAAS,EAAC;oBACbxC,6BAACsC,MAAM;MAACC,UAAU,EAAC,UAAU;MAACc,OAAO,EAAElC;sBAE9B,EACRR,aAAa,CAACd,MAAM,gBAAGG,6BAACsC,MAAM;MAACe,OAAO,EAAE1B;2BAAuC,GAAG,IAAI,CACnF,CACN,CACQ,CAEzB;IACD5B,GAAG,EAAEA,GAAG;IACRuD,OAAO,eACHtD,4DACKW,aAAa,CAACd,MAAM,GAAG,gBAAgB,GAAG,eAAe,eAC1DG,6BAACuD,QAAQ;MAACf,SAAS,EAAC,MAAM;MAACgB,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;MAAK;kBAGnExD,6BAACyD,IAAI;IAACC,IAAI,EAAE/C,aAAa,CAACd,MAAM,GAAG,cAAc,GAAG;IAAY,EAC/Dc,aAAa,CAACd,MAAM,eAAec,aAAa,CAACd,SAAS,GAAG,SAAS,CAClE;AAEjB;;;;"}

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;;;;"}