@economic/taco 2.24.0 → 2.25.1-alpha.13

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js

@@ -0,0 +1,120 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { isElementInteractive } from '../../../../../../utils/dom.js';
+import { useDropTarget } from '../../../../../../utils/hooks/useDropTarget.js';
+import { Cell } from '../../Columns/Cell/Cell.js';
+
+const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
+  const {
+    children,
+    cellRenderer: CellRenderer,
+    index,
+    measureRow,
+    row,
+    table,
+    ...otherAttributes
+  } = props;
+  const tableMeta = table.options.meta;
+  const attributes = {
+    ...otherAttributes,
+    'data-row-id': row.id,
+    'data-row-index': index,
+    tabIndex: -1
+  };
+  const handleClick = React__default.useCallback(event => {
+    var _event$currentTarget;
+    const clickedElement = event.target;
+    if (!((_event$currentTarget = event.currentTarget) !== null && _event$currentTarget !== void 0 && _event$currentTarget.contains(event.target)) || isElementInteractive(clickedElement)) {
+      return;
+    }
+    tableMeta.rowClick.handleClick(event, row.original);
+  }, [row.original]);
+  const handleClickCapture = React__default.useCallback(() => {
+    // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable
+    requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));
+  }, []);
+  // row active
+  if (tableMeta.rowActive.isEnabled) {
+    attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;
+    // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes
+    attributes.onClickCapture = handleClickCapture;
+  }
+  // row click
+  if (tableMeta.rowClick.isEnabled) {
+    attributes.onClick = handleClick;
+  }
+  // row drag
+  if (tableMeta.rowDrag.isEnabled) {
+    attributes.draggable = true;
+    attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];
+  }
+  // row drop
+  const [isDraggedOver, dropTargetProps] = useDropTarget(event => {
+    var _tableMeta$rowDrop$ha, _tableMeta$rowDrop;
+    return (_tableMeta$rowDrop$ha = (_tableMeta$rowDrop = tableMeta.rowDrop).handleDrop) === null || _tableMeta$rowDrop$ha === void 0 ? void 0 : _tableMeta$rowDrop$ha.call(_tableMeta$rowDrop, event, row.original);
+  });
+  if (tableMeta.rowDrop.isEnabled) {
+    attributes.onDragEnter = dropTargetProps === null || dropTargetProps === void 0 ? void 0 : dropTargetProps.onDragEnter;
+    attributes.onDragLeave = dropTargetProps === null || dropTargetProps === void 0 ? void 0 : dropTargetProps.onDragLeave;
+    attributes.onDragOver = dropTargetProps === null || dropTargetProps === void 0 ? void 0 : dropTargetProps.onDragOver;
+    attributes.onDrop = dropTargetProps === null || dropTargetProps === void 0 ? void 0 : dropTargetProps.onDrop;
+    attributes['data-row-dragged-over'] = isDraggedOver;
+  }
+  // row grouping
+  if (table.options.enableGrouping) {
+    attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;
+  }
+  // row selection
+  if (table.options.enableRowSelection) {
+    attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;
+  }
+  // row expansion
+  let expandedRow;
+  if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {
+    var _tableMeta$rowExpansi, _tableMeta$rowExpansi2, _tableMeta$rowExpansi3;
+    attributes['data-row-expanded'] = true;
+    expandedRow = (_tableMeta$rowExpansi = (_tableMeta$rowExpansi2 = tableMeta.rowExpansion).rowExpansionRenderer) === null || _tableMeta$rowExpansi === void 0 ? void 0 : (_tableMeta$rowExpansi3 = _tableMeta$rowExpansi.call(_tableMeta$rowExpansi2, row.original)) === null || _tableMeta$rowExpansi3 === void 0 ? void 0 : _tableMeta$rowExpansi3();
+  }
+  const rowMeta = row.original._meta;
+  if (rowMeta) {
+    if (rowMeta.layout) {
+      attributes['data-row-meta-layout'] = rowMeta.layout;
+    }
+  }
+  const ref = React__default.useRef(null);
+  const expansionRef = React__default.useRef(null);
+  const isExpanded = !!attributes['data-row-expanded'];
+  useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);
+  const className = cn('group/row', {
+    'hover:cursor-pointer': typeof attributes.onClick === 'function'
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", Object.assign({}, attributes, {
+    className: className,
+    ref: ref
+  }), children, row.getVisibleCells().map((cell, cellIndex) => ( /*#__PURE__*/React__default.createElement(Cell, {
+    key: cell.id,
+    cell: cell,
+    index: cellIndex,
+    renderer: CellRenderer
+  })))), expandedRow ? ( /*#__PURE__*/React__default.createElement("tr", {
+    "data-row-parent-id": row.id,
+    ref: expansionRef
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: "col-span-full"
+  }, expandedRow))) : null);
+});
+function useSetVirtualisedRowHeight(measureRow, rowEl, expansionEl, isExpanded) {
+  React__default.useEffect(() => {
+    if (rowEl) {
+      const height = rowEl.getBoundingClientRect().height;
+      if (isExpanded && expansionEl) {
+        measureRow(height, expansionEl.getBoundingClientRect().height);
+      } else {
+        measureRow(height);
+      }
+    }
+  }, [isExpanded, rowEl, expansionEl]);
+}
+
+export { DisplayRow };
+//# sourceMappingURL=DisplayRow.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & TableRowRendererProps<TType>;\n\nexport const DisplayRow = React.memo(function DisplayRow<TType = unknown>(props: DisplayRowProps<TType>) {\n    const { children, cellRenderer: CellRenderer, index, measureRow, row, table, ...otherAttributes } = props;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const attributes: any = {\n        ...otherAttributes,\n        'data-row-id': row.id,\n        'data-row-index': index,\n        tabIndex: -1,\n    };\n\n    const handleClick = React.useCallback(\n        (event: React.MouseEvent<HTMLTableRowElement>) => {\n            const clickedElement = event.target as HTMLElement;\n\n            if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n                return;\n            }\n\n            tableMeta.rowClick.handleClick(event, row.original);\n        },\n        [row.original]\n    );\n    const handleClickCapture = React.useCallback(() => {\n        // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable\n        requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));\n    }, []);\n\n    // row active\n    if (tableMeta.rowActive.isEnabled) {\n        attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n        // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes\n        attributes.onClickCapture = handleClickCapture;\n    }\n\n    // row click\n    if (tableMeta.rowClick.isEnabled) {\n        attributes.onClick = handleClick;\n    }\n\n    // row drag\n    if (tableMeta.rowDrag.isEnabled) {\n        attributes.draggable = true;\n        attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n    }\n\n    // row drop\n    const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n    if (tableMeta.rowDrop.isEnabled) {\n        attributes.onDragEnter = dropTargetProps?.onDragEnter;\n        attributes.onDragLeave = dropTargetProps?.onDragLeave;\n        attributes.onDragOver = dropTargetProps?.onDragOver;\n        attributes.onDrop = dropTargetProps?.onDrop;\n        attributes['data-row-dragged-over'] = isDraggedOver;\n    }\n\n    // row grouping\n    if (table.options.enableGrouping) {\n        attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n    }\n\n    // row selection\n    if (table.options.enableRowSelection) {\n        attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n    }\n\n    // row expansion\n    let expandedRow;\n\n    if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\n        attributes['data-row-expanded'] = true;\n        expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n    }\n\n    const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n    if (rowMeta) {\n        if (rowMeta.layout) {\n            attributes['data-row-meta-layout'] = rowMeta.layout;\n        }\n    }\n\n    const ref = React.useRef<HTMLTableRowElement>(null);\n    const expansionRef = React.useRef<HTMLTableRowElement>(null);\n    const isExpanded = !!attributes['data-row-expanded'];\n\n    useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);\n\n    const className = cn('group/row', {\n        'hover:cursor-pointer': typeof attributes.onClick === 'function',\n    });\n\n    return (\n        <>\n            <tr {...attributes} className={className} ref={ref}>\n                {children}\n                {row.getVisibleCells().map((cell, cellIndex) => (\n                    <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n                ))}\n            </tr>\n            {expandedRow ? (\n                <tr data-row-parent-id={row.id} ref={expansionRef}>\n                    <td className=\"col-span-full\">{expandedRow}</td>\n                </tr>\n            ) : null}\n        </>\n    );\n}) as <TType = unknown>(props: TableRowRendererProps<TType>) => JSX.Element;\n\nfunction useSetVirtualisedRowHeight(\n    measureRow: (size: number, expansionHeight?: number) => void,\n    rowEl: HTMLTableRowElement | null,\n    expansionEl: HTMLTableRowElement | null,\n    isExpanded: boolean\n) {\n    React.useEffect(() => {\n        if (rowEl) {\n            const height = rowEl.getBoundingClientRect().height;\n\n            if (isExpanded && expansionEl) {\n                measureRow(height, expansionEl.getBoundingClientRect().height);\n            } else {\n                measureRow(height);\n            }\n        }\n    }, [isExpanded, rowEl, expansionEl]);\n}\n"],"names":["DisplayRow","React","memo","props","children","cellRenderer","CellRenderer","index","measureRow","row","table","otherAttributes","tableMeta","options","meta","attributes","id","tabIndex","handleClick","useCallback","event","clickedElement","target","_event$currentTarget","currentTarget","contains","isElementInteractive","rowClick","original","handleClickCapture","requestAnimationFrame","rowActive","setRowActiveIndex","isEnabled","rowActiveIndex","undefined","onClickCapture","onClick","rowDrag","draggable","dragging","isDraggedOver","dropTargetProps","useDropTarget","_tableMeta$rowDrop$ha","_tableMeta$rowDrop","rowDrop","handleDrop","call","onDragEnter","onDragLeave","onDragOver","onDrop","enableGrouping","getIsGrouped","enableRowSelection","getIsSelected","getIsAllSubRowsSelected","expandedRow","rowExpansion","getIsExpanded","_tableMeta$rowExpansi","_tableMeta$rowExpansi2","_tableMeta$rowExpansi3","rowExpansionRenderer","rowMeta","_meta","layout","ref","useRef","expansionRef","isExpanded","useSetVirtualisedRowHeight","current","className","cn","getVisibleCells","map","cell","cellIndex","Cell","key","renderer","rowEl","expansionEl","useEffect","height","getBoundingClientRect"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/SkeletonRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/SkeletonRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport { useInView } from 'react-intersection-observer';\n\nexport type RowProps<TType = unknown> = {\n    index: number;\n    row: ReactTableRow<TType>;\n    table: ReactTable<TType>;\n};\n\nexport function SkeletonRow<TType = unknown>(props: RowProps<TType>) {\n    const { index, row, table } = props;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    if (tableMeta.server.isEnabled) {\n        return <RowWithServerLoading {...props} index={index} />;\n    }\n\n    return <Skeleton id={row.id} cells={row.getVisibleCells()} />;\n}\n\nexport function RowWithServerLoading<TType = unknown>(props: RowProps<TType>) {\n    const { index, row, table } = props;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const pageIndex = (Math.floor(index / tableMeta.server.pageSize) * tableMeta.server.pageSize) / tableMeta.server.pageSize;\n\n    const { ref, inView } = useInView({\n        threshold: 0,\n        triggerOnce: true,\n        initialInView: pageIndex === 0,\n    });\n\n    React.useEffect(() => {\n        if (inView) {\n            tableMeta.server.loadPage?.(\n                pageIndex,\n                table.getState().sorting,\n                table.getState().columnFilters,\n                table.getState().globalFilter\n            );\n        }\n    }, [inView]);\n\n    return <Skeleton cells={row.getVisibleCells()} ref={ref} />;\n}\n\nexport const Skeleton = React.forwardRef(function Skeleton(props: any, ref: React.Ref<HTMLTableRowElement>) {\n    const { cells } = props;\n\n    return (\n        <>\n            <tr ref={ref}>\n                {cells.map(cell => (\n                    <td key={cell.id}>\n                        <span className=\"bg-grey-100 text-grey-700 h-4 w-full text-center text-xs\" />\n                    </td>\n                ))}\n            </tr>\n        </>\n    );\n});\n"],"names":["SkeletonRow","props","index","row","table","tableMeta","options","meta","server","isEnabled","React","RowWithServerLoading","Skeleton","id","cells","getVisibleCells","pageIndex","Math","floor","pageSize","ref","inView","useInView","threshold","triggerOnce","initialInView","useEffect","_tableMeta$server$loa","_tableMeta$server","loadPage","call","getState","sorting","columnFilters","globalFilter","forwardRef","map","cell","key","className"],"mappings":";;;SAUgBA,WAAWA,CAAkBC,KAAsB;EAC/D,MAAM;IAAEC,KAAK;IAAEC,GAAG;IAAEC;GAAO,GAAGH,KAAK;EACnC,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAA6B;EAE7D,IAAIF,SAAS,CAACG,MAAM,CAACC,SAAS,EAAE;IAC5B,oBAAOC,6BAACC,oBAAoB,oBAAKV,KAAK;MAAEC,KAAK,EAAEA;OAAS;;EAG5D,oBAAOQ,6BAACE,QAAQ;IAACC,EAAE,EAAEV,GAAG,CAACU,EAAE;IAAEC,KAAK,EAAEX,GAAG,CAACY,eAAe;IAAM;AACjE;SAEgBJ,oBAAoBA,CAAkBV,KAAsB;EACxE,MAAM;IAAEC,KAAK;IAAEC,GAAG;IAAEC;GAAO,GAAGH,KAAK;EACnC,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAA6B;EAE7D,MAAMS,SAAS,GAAIC,IAAI,CAACC,KAAK,CAAChB,KAAK,GAAGG,SAAS,CAACG,MAAM,CAACW,QAAQ,CAAC,GAAGd,SAAS,CAACG,MAAM,CAACW,QAAQ,GAAId,SAAS,CAACG,MAAM,CAACW,QAAQ;EAEzH,MAAM;IAAEC,GAAG;IAAEC;GAAQ,GAAGC,SAAS,CAAC;IAC9BC,SAAS,EAAE,CAAC;IACZC,WAAW,EAAE,IAAI;IACjBC,aAAa,EAAET,SAAS,KAAK;GAChC,CAAC;EAEFN,cAAK,CAACgB,SAAS,CAAC;IACZ,IAAIL,MAAM,EAAE;MAAA,IAAAM,qBAAA,EAAAC,iBAAA;MACR,CAAAD,qBAAA,IAAAC,iBAAA,GAAAvB,SAAS,CAACG,MAAM,EAACqB,QAAQ,cAAAF,qBAAA,uBAAzBA,qBAAA,CAAAG,IAAA,CAAAF,iBAAA,EACIZ,SAAS,EACTZ,KAAK,CAAC2B,QAAQ,EAAE,CAACC,OAAO,EACxB5B,KAAK,CAAC2B,QAAQ,EAAE,CAACE,aAAa,EAC9B7B,KAAK,CAAC2B,QAAQ,EAAE,CAACG,YAAY,CAChC;;GAER,EAAE,CAACb,MAAM,CAAC,CAAC;EAEZ,oBAAOX,6BAACE,QAAQ;IAACE,KAAK,EAAEX,GAAG,CAACY,eAAe,EAAE;IAAEK,GAAG,EAAEA;IAAO;AAC/D;MAEaR,QAAQ,gBAAGF,cAAK,CAACyB,UAAU,CAAC,SAASvB,QAAQA,CAACX,KAAU,EAAEmB,GAAmC;EACtG,MAAM;IAAEN;GAAO,GAAGb,KAAK;EAEvB,oBACIS,yEACIA;IAAIU,GAAG,EAAEA;KACJN,KAAK,CAACsB,GAAG,CAACC,IAAI,mBACX3B;IAAI4B,GAAG,EAAED,IAAI,CAACxB;kBACVH;IAAM6B,SAAS,EAAC;IAA6D,CAC5E,CACR,CAAC,CACD,CACN;AAEX,CAAC;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/Row.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { SkeletonRow } from './BuiltIns/SkeletonRow.js';
+import { RowContext } from './RowContext.js';
+
+/* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */
+function Row(props) {
+  const {
+    renderer: RowRenderer,
+    cellRenderer: CellRenderer,
+    ...displayRowProps
+  } = props;
+  const tableMeta = props.table.options.meta;
+  const isHovered = tableMeta.rowActive.rowHoverIndex === props.index;
+  // context - it must be here for cells to read it, since they render alongside the row inside DisplayRow
+  const contextValue = React__default.useMemo(() => ({
+    isHovered,
+    rowIndex: props.index
+  }), [isHovered, props.index]);
+  if (props.row.original === undefined) {
+    return /*#__PURE__*/React__default.createElement(SkeletonRow, Object.assign({}, props));
+  }
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React__default.createElement(RowRenderer, Object.assign({}, displayRowProps, {
+    cellRenderer: CellRenderer
+  })));
+}
+
+export { Row };
+//# sourceMappingURL=Row.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Row/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { SkeletonRow } from './BuiltIns/SkeletonRow';\nimport { RowContext } from './RowContext';\nimport { TableRowRenderer, TableRowRendererProps } from '../../types';\n\nexport type RowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> &\n    TableRowRendererProps<TType> & {\n        renderer: TableRowRenderer<TType>;\n    };\n\n/* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */\nexport function Row<TType = unknown>(props: RowProps<TType>) {\n    const { renderer: RowRenderer, cellRenderer: CellRenderer, ...displayRowProps } = props;\n\n    const tableMeta = props.table.options.meta as ReactTableMeta<TType>;\n    const isHovered = tableMeta.rowActive.rowHoverIndex === props.index;\n    // context - it must be here for cells to read it, since they render alongside the row inside DisplayRow\n    const contextValue = React.useMemo(() => ({ isHovered, rowIndex: props.index }), [isHovered, props.index]);\n\n    if (props.row.original === undefined) {\n        return <SkeletonRow {...props} />;\n    }\n\n    return (\n        <RowContext.Provider value={contextValue}>\n            <RowRenderer<TType> {...displayRowProps} cellRenderer={CellRenderer} />\n        </RowContext.Provider>\n    );\n}\n"],"names":["Row","props","renderer","RowRenderer","cellRenderer","CellRenderer","displayRowProps","tableMeta","table","options","meta","isHovered","rowActive","rowHoverIndex","index","contextValue","React","useMemo","rowIndex","row","original","undefined","SkeletonRow","RowContext","Provider","value"],"mappings":";;;;AAWA;SACgBA,GAAGA,CAAkBC,KAAsB;EACvD,MAAM;IAAEC,QAAQ,EAAEC,WAAW;IAAEC,YAAY,EAAEC,YAAY;IAAE,GAAGC;GAAiB,GAAGL,KAAK;EAEvF,MAAMM,SAAS,GAAGN,KAAK,CAACO,KAAK,CAACC,OAAO,CAACC,IAA6B;EACnE,MAAMC,SAAS,GAAGJ,SAAS,CAACK,SAAS,CAACC,aAAa,KAAKZ,KAAK,CAACa,KAAK;;EAEnE,MAAMC,YAAY,GAAGC,cAAK,CAACC,OAAO,CAAC,OAAO;IAAEN,SAAS;IAAEO,QAAQ,EAAEjB,KAAK,CAACa;GAAO,CAAC,EAAE,CAACH,SAAS,EAAEV,KAAK,CAACa,KAAK,CAAC,CAAC;EAE1G,IAAIb,KAAK,CAACkB,GAAG,CAACC,QAAQ,KAAKC,SAAS,EAAE;IAClC,oBAAOL,6BAACM,WAAW,oBAAKrB,KAAK,EAAI;;EAGrC,oBACIe,6BAACO,UAAU,CAACC,QAAQ;IAACC,KAAK,EAAEV;kBACxBC,6BAACb,WAAW,oBAAYG,eAAe;IAAEF,YAAY,EAAEC;KAAgB,CACrD;AAE9B;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/RowContext.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+const RowContext = /*#__PURE__*/React__default.createContext({
+  isHovered: false,
+  rowIndex: -1
+});
+
+export { RowContext };
+//# sourceMappingURL=RowContext.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/RowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowContext.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Row/RowContext.tsx"],"sourcesContent":["import React from 'react';\n\ntype RowContextValue = {\n    isHovered: boolean;\n    rowIndex: number;\n};\n\nexport const RowContext = React.createContext<RowContextValue>({\n    isHovered: false,\n    rowIndex: -1,\n});\n"],"names":["RowContext","React","createContext","isHovered","rowIndex"],"mappings":";;MAOaA,UAAU,gBAAGC,cAAK,CAACC,aAAa,CAAkB;EAC3DC,SAAS,EAAE,KAAK;EAChBC,QAAQ,EAAE,CAAC;CACd;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/Toolbar.js

@@ -0,0 +1,53 @@
+import React__default from 'react';
+import { Group } from '../../../../../components/Group/Group.js';
+import { Search } from './components/Search/Search.js';
+import { Settings } from './components/Settings/Settings.js';
+import { Print } from './components/Print/Print.js';
+import { Filters } from './components/Filters/Filters.js';
+
+function TableToolbar(props) {
+  const {
+    children: customTools,
+    table,
+    ...attributes
+  } = props;
+  if (!isToolbarVisible(table, !!customTools)) {
+    return null;
+  }
+  const canFilter = table.instance.options.enableColumnFilters;
+  const canPrint = table.meta.printing.isEnabled;
+  const canSettings = canChangeSettings(table.instance, table.props.customSettings);
+  const canSearch = table.meta.search.isEnabled;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 print:hidden",
+    "data-taco": "table-toolbar"
+  }), table.props.toolbarLeft, /*#__PURE__*/React__default.createElement(Group, {
+    className: "ml-auto flex-shrink-0 print:hidden"
+  }, customTools, canFilter ? /*#__PURE__*/React__default.createElement(Filters, {
+    length: table.meta.length,
+    table: table.instance
+  }) : null, table.props.toolbarRight, canPrint ? /*#__PURE__*/React__default.createElement(Print, {
+    table: table.instance,
+    tableId: table.id,
+    tableRef: table.ref
+  }) : null, canSettings ? /*#__PURE__*/React__default.createElement(Settings, {
+    customSettings: table.props.customSettings,
+    table: table.instance
+  }) : null, canSearch ? /*#__PURE__*/React__default.createElement(Search, {
+    scrollToIndex: table.renderer.scrollToIndex,
+    table: table.instance
+  }) : null)), table.props.toolbarPanel ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4"
+  }, table.props.toolbarPanel) : undefined);
+}
+function canChangeSettings(table, customSettings) {
+  const tableMeta = table.options.meta;
+  return table.options.enableHiding || tableMeta.columnOrdering.isEnabled || tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled || typeof customSettings === 'function';
+}
+function isToolbarVisible(table, customTools) {
+  const hasInternalToolbar = customTools || table.instance.options.enableColumnFilters || table.meta.printing.isEnabled || canChangeSettings(table.instance, table.props.customSettings) || table.meta.search.isEnabled;
+  return hasInternalToolbar || !!table.props.toolbarLeft || !!table.props.toolbarRight;
+}
+
+export { TableToolbar };
+//# sourceMappingURL=Toolbar.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Group } from '../../../../../components/Group/Group';\nimport { Search } from './components/Search/Search';\nimport { Settings } from './components/Settings/Settings';\nimport { Print } from './components/Print/Print';\nimport { Filters } from './components/Filters/Filters';\nimport { TableCustomSettingsRenderer } from '../../../types';\nimport { useTable } from '../../useTable';\n\nexport type TableToolbarProps = React.TableHTMLAttributes<HTMLDivElement> & {\n    children?: JSX.Element | null;\n    table: ReturnType<typeof useTable>;\n};\n\nexport function TableToolbar(props: TableToolbarProps) {\n    const { children: customTools, table, ...attributes } = props;\n\n    if (!isToolbarVisible(table, !!customTools)) {\n        return null;\n    }\n\n    const canFilter = table.instance.options.enableColumnFilters;\n    const canPrint = table.meta.printing.isEnabled;\n    const canSettings = canChangeSettings(table.instance, table.props.customSettings);\n    const canSearch = table.meta.search.isEnabled;\n\n    return (\n        <>\n            <div\n                {...attributes}\n                className=\"mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 print:hidden\"\n                data-taco=\"table-toolbar\">\n                {table.props.toolbarLeft}\n                <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n                    {customTools}\n                    {canFilter ? <Filters length={table.meta.length} table={table.instance} /> : null}\n                    {table.props.toolbarRight}\n                    {canPrint ? <Print table={table.instance} tableId={table.id} tableRef={table.ref} /> : null}\n                    {canSettings ? <Settings customSettings={table.props.customSettings} table={table.instance} /> : null}\n                    {canSearch ? <Search scrollToIndex={table.renderer.scrollToIndex} table={table.instance} /> : null}\n                </Group>\n            </div>\n            {table.props.toolbarPanel ? <div className=\"mb-4\">{table.props.toolbarPanel}</div> : undefined}\n        </>\n    );\n}\n\nfunction canChangeSettings<TType = unknown>(table: ReactTable<TType>, customSettings?: TableCustomSettingsRenderer) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    return (\n        table.options.enableHiding ||\n        tableMeta.columnOrdering.isEnabled ||\n        tableMeta.fontSize.isEnabled ||\n        tableMeta.rowHeight.isEnabled ||\n        typeof customSettings === 'function'\n    );\n}\n\nfunction isToolbarVisible(table: ReturnType<typeof useTable>, customTools: boolean) {\n    const hasInternalToolbar =\n        customTools ||\n        table.instance.options.enableColumnFilters ||\n        table.meta.printing.isEnabled ||\n        canChangeSettings(table.instance, table.props.customSettings) ||\n        table.meta.search.isEnabled;\n\n    return hasInternalToolbar || !!table.props.toolbarLeft || !!table.props.toolbarRight;\n}\n"],"names":["TableToolbar","props","children","customTools","table","attributes","isToolbarVisible","canFilter","instance","options","enableColumnFilters","canPrint","meta","printing","isEnabled","canSettings","canChangeSettings","customSettings","canSearch","search","React","className","toolbarLeft","Group","Filters","length","toolbarRight","Print","tableId","id","tableRef","ref","Settings","Search","scrollToIndex","renderer","toolbarPanel","undefined","tableMeta","enableHiding","columnOrdering","fontSize","rowHeight","hasInternalToolbar"],"mappings":";;;;;;;SAegBA,YAAYA,CAACC,KAAwB;EACjD,MAAM;IAAEC,QAAQ,EAAEC,WAAW;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAE7D,IAAI,CAACK,gBAAgB,CAACF,KAAK,EAAE,CAAC,CAACD,WAAW,CAAC,EAAE;IACzC,OAAO,IAAI;;EAGf,MAAMI,SAAS,GAAGH,KAAK,CAACI,QAAQ,CAACC,OAAO,CAACC,mBAAmB;EAC5D,MAAMC,QAAQ,GAAGP,KAAK,CAACQ,IAAI,CAACC,QAAQ,CAACC,SAAS;EAC9C,MAAMC,WAAW,GAAGC,iBAAiB,CAACZ,KAAK,CAACI,QAAQ,EAAEJ,KAAK,CAACH,KAAK,CAACgB,cAAc,CAAC;EACjF,MAAMC,SAAS,GAAGd,KAAK,CAACQ,IAAI,CAACO,MAAM,CAACL,SAAS;EAE7C,oBACIM,yEACIA,sDACQf,UAAU;IACdgB,SAAS,EAAC,gEAAgE;iBAChE;MACTjB,KAAK,CAACH,KAAK,CAACqB,WAAW,eACxBF,6BAACG,KAAK;IAACF,SAAS,EAAC;KACZlB,WAAW,EACXI,SAAS,gBAAGa,6BAACI,OAAO;IAACC,MAAM,EAAErB,KAAK,CAACQ,IAAI,CAACa,MAAM;IAAErB,KAAK,EAAEA,KAAK,CAACI;IAAY,GAAG,IAAI,EAChFJ,KAAK,CAACH,KAAK,CAACyB,YAAY,EACxBf,QAAQ,gBAAGS,6BAACO,KAAK;IAACvB,KAAK,EAAEA,KAAK,CAACI,QAAQ;IAAEoB,OAAO,EAAExB,KAAK,CAACyB,EAAE;IAAEC,QAAQ,EAAE1B,KAAK,CAAC2B;IAAO,GAAG,IAAI,EAC1FhB,WAAW,gBAAGK,6BAACY,QAAQ;IAACf,cAAc,EAAEb,KAAK,CAACH,KAAK,CAACgB,cAAc;IAAEb,KAAK,EAAEA,KAAK,CAACI;IAAY,GAAG,IAAI,EACpGU,SAAS,gBAAGE,6BAACa,MAAM;IAACC,aAAa,EAAE9B,KAAK,CAAC+B,QAAQ,CAACD,aAAa;IAAE9B,KAAK,EAAEA,KAAK,CAACI;IAAY,GAAG,IAAI,CAC9F,CACN,EACLJ,KAAK,CAACH,KAAK,CAACmC,YAAY,gBAAGhB;IAAKC,SAAS,EAAC;KAAQjB,KAAK,CAACH,KAAK,CAACmC,YAAY,CAAO,GAAGC,SAAS,CAC/F;AAEX;AAEA,SAASrB,iBAAiBA,CAAkBZ,KAAwB,EAAEa,cAA4C;EAC9G,MAAMqB,SAAS,GAAGlC,KAAK,CAACK,OAAO,CAACG,IAA6B;EAE7D,OACIR,KAAK,CAACK,OAAO,CAAC8B,YAAY,IAC1BD,SAAS,CAACE,cAAc,CAAC1B,SAAS,IAClCwB,SAAS,CAACG,QAAQ,CAAC3B,SAAS,IAC5BwB,SAAS,CAACI,SAAS,CAAC5B,SAAS,IAC7B,OAAOG,cAAc,KAAK,UAAU;AAE5C;AAEA,SAASX,gBAAgBA,CAACF,KAAkC,EAAED,WAAoB;EAC9E,MAAMwC,kBAAkB,GACpBxC,WAAW,IACXC,KAAK,CAACI,QAAQ,CAACC,OAAO,CAACC,mBAAmB,IAC1CN,KAAK,CAACQ,IAAI,CAACC,QAAQ,CAACC,SAAS,IAC7BE,iBAAiB,CAACZ,KAAK,CAACI,QAAQ,EAAEJ,KAAK,CAACH,KAAK,CAACgB,cAAc,CAAC,IAC7Db,KAAK,CAACQ,IAAI,CAACO,MAAM,CAACL,SAAS;EAE/B,OAAO6B,kBAAkB,IAAI,CAAC,CAACvC,KAAK,CAACH,KAAK,CAACqB,WAAW,IAAI,CAAC,CAAClB,KAAK,CAACH,KAAK,CAACyB,YAAY;AACxF;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/Filters.js

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import { Icon } from '../../../../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../../../../components/IconButton/IconButton.js';
+import { useLocalization } from '../../../../../../../components/Provider/Localization.js';
+import { Button } from '../../../../../../../components/Button/Button.js';
+import { Shortcut } from '../../../../../../../components/Shortcut/Shortcut.js';
+import { useIsLargeScreen } from '../../../../../../../hooks/useIsLargeScreen.js';
+import { isEmptyFilter } from './util.js';
+import { ManageFiltersPopover } from './ManageFiltersPopover.js';
+
+function Filters(props) {
+  const {
+    length,
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const isLargeScreen = useIsLargeScreen();
+  const columnFilters = table.getState().columnFilters;
+  const appliedFilters = columnFilters.filter(f => !isEmptyFilter(f));
+  const ref = React__default.useRef(null);
+  const shortcut = {
+    key: 'f',
+    meta: true,
+    shift: true
+  };
+  const buttonProps = {
+    'aria-label': texts.table.filters.tooltip,
+    className: appliedFilters.length ? '!wcag-blue-100' : undefined,
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(ManageFiltersPopover, Object.assign({}, popoverProps, {
+      length: length,
+      table: table
+    })),
+    shortcut,
+    ref,
+    tooltip: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+      className: "ml-2",
+      keys: shortcut
+    })))
+  };
+  React__default.useEffect(() => {
+    const emptyFilter = columnFilters.find(isEmptyFilter);
+    // we set an empty filter when adding a filter through a column header.
+    if (emptyFilter) {
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
+    }
+  }, [columnFilters]);
+  if (!isLargeScreen && !appliedFilters.length) {
+    return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, buttonProps, {
+      icon: "filter"
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps), /*#__PURE__*/React__default.createElement(Icon, {
+    className: !isLargeScreen ? '-mr-1.5' : undefined,
+    name: appliedFilters.length ? 'filter-solid' : 'filter'
+  }), isLargeScreen ? texts.table.filters.button : '', appliedFilters.length ? `(${appliedFilters.length})` : '');
+}
+
+export { Filters };
+//# sourceMappingURL=Filters.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/components/Filters/Filters.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { useIsLargeScreen } from '../../../../../../../hooks/useIsLargeScreen';\nimport { useLocalization } from '../../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../../components/IconButton/IconButton';\nimport { Button } from '../../../../../../../components/Button/Button';\nimport { Icon } from '../../../../../../../components/Icon/Icon';\nimport { Shortcut } from '../../../../../../../components/Shortcut/Shortcut';\nimport { ManageFiltersPopover } from './ManageFiltersPopover';\nimport { TableFilter } from '../../../../../types';\nimport { isEmptyFilter } from './util';\n\nexport type FiltersProps<TType = unknown> = {\n    length: number;\n    table: ReactTable<TType>;\n};\n\nexport function Filters<TType = unknown>(props: FiltersProps<TType>) {\n    const { length, table } = props;\n    const { texts } = useLocalization();\n    const isLargeScreen = useIsLargeScreen();\n    const columnFilters = table.getState().columnFilters as TableFilter[];\n    const appliedFilters = columnFilters.filter(f => !isEmptyFilter(f));\n    const ref = React.useRef<HTMLButtonElement>(null);\n\n    const shortcut = { key: 'f', meta: true, shift: true };\n\n    const buttonProps = {\n        'aria-label': texts.table.filters.tooltip,\n        className: appliedFilters.length ? '!wcag-blue-100' : undefined,\n        popover: popoverProps => <ManageFiltersPopover {...popoverProps} length={length} table={table} />,\n        shortcut,\n        ref,\n        tooltip: (\n            <>\n                {texts.table.filters.tooltip}\n                <Shortcut className=\"ml-2\" keys={shortcut} />\n            </>\n        ),\n    };\n\n    React.useEffect(() => {\n        const emptyFilter = columnFilters.find(isEmptyFilter);\n\n        // we set an empty filter when adding a filter through a column header.\n        if (emptyFilter) {\n            ref.current?.click();\n        }\n    }, [columnFilters]);\n\n    if (!isLargeScreen && !appliedFilters.length) {\n        return <IconButton {...buttonProps} icon=\"filter\" />;\n    }\n\n    return (\n        <Button {...buttonProps}>\n            <Icon className={!isLargeScreen ? '-mr-1.5' : undefined} name={appliedFilters.length ? 'filter-solid' : 'filter'} />\n            {isLargeScreen ? texts.table.filters.button : ''}\n            {appliedFilters.length ? `(${appliedFilters.length})` : ''}\n        </Button>\n    );\n}\n"],"names":["Filters","props","length","table","texts","useLocalization","isLargeScreen","useIsLargeScreen","columnFilters","getState","appliedFilters","filter","f","isEmptyFilter","ref","React","useRef","shortcut","key","meta","shift","buttonProps","filters","tooltip","className","undefined","popover","popoverProps","ManageFiltersPopover","Shortcut","keys","useEffect","emptyFilter","find","_ref$current","current","click","IconButton","icon","Button","Icon","name","button"],"mappings":";;;;;;;;;;SAiBgBA,OAAOA,CAAkBC,KAA0B;EAC/D,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGF,KAAK;EAC/B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,aAAa,GAAGL,KAAK,CAACM,QAAQ,EAAE,CAACD,aAA8B;EACrE,MAAME,cAAc,GAAGF,aAAa,CAACG,MAAM,CAACC,CAAC,IAAI,CAACC,aAAa,CAACD,CAAC,CAAC,CAAC;EACnE,MAAME,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAoB,IAAI,CAAC;EAEjD,MAAMC,QAAQ,GAAG;IAAEC,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE,IAAI;IAAEC,KAAK,EAAE;GAAM;EAEtD,MAAMC,WAAW,GAAG;IAChB,YAAY,EAAEjB,KAAK,CAACD,KAAK,CAACmB,OAAO,CAACC,OAAO;IACzCC,SAAS,EAAEd,cAAc,CAACR,MAAM,GAAG,gBAAgB,GAAGuB,SAAS;IAC/DC,OAAO,EAAEC,YAAY,iBAAIZ,6BAACa,oBAAoB,oBAAKD,YAAY;MAAEzB,MAAM,EAAEA,MAAM;MAAEC,KAAK,EAAEA;OAAS;IACjGc,QAAQ;IACRH,GAAG;IACHS,OAAO,iBACHR,4DACKX,KAAK,CAACD,KAAK,CAACmB,OAAO,CAACC,OAAO,eAC5BR,6BAACc,QAAQ;MAACL,SAAS,EAAC,MAAM;MAACM,IAAI,EAAEb;MAAY,CAC9C;GAEV;EAEDF,cAAK,CAACgB,SAAS,CAAC;IACZ,MAAMC,WAAW,GAAGxB,aAAa,CAACyB,IAAI,CAACpB,aAAa,CAAC;;IAGrD,IAAImB,WAAW,EAAE;MAAA,IAAAE,YAAA;MACb,CAAAA,YAAA,GAAApB,GAAG,CAACqB,OAAO,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,KAAK,EAAE;;GAE3B,EAAE,CAAC5B,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACF,aAAa,IAAI,CAACI,cAAc,CAACR,MAAM,EAAE;IAC1C,oBAAOa,6BAACsB,UAAU,oBAAKhB,WAAW;MAAEiB,IAAI,EAAC;OAAW;;EAGxD,oBACIvB,6BAACwB,MAAM,oBAAKlB,WAAW,gBACnBN,6BAACyB,IAAI;IAAChB,SAAS,EAAE,CAAClB,aAAa,GAAG,SAAS,GAAGmB,SAAS;IAAEgB,IAAI,EAAE/B,cAAc,CAACR,MAAM,GAAG,cAAc,GAAG;IAAY,EACnHI,aAAa,GAAGF,KAAK,CAACD,KAAK,CAACmB,OAAO,CAACoB,MAAM,GAAG,EAAE,EAC/ChC,cAAc,CAACR,MAAM,OAAOQ,cAAc,CAACR,SAAS,GAAG,EAAE,CACrD;AAEjB;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/ManageFiltersPopover.js

@@ -0,0 +1,129 @@
+import React__default from 'react';
+import { useLocalization } from '../../../../../../../components/Provider/Localization.js';
+import { Button } from '../../../../../../../components/Button/Button.js';
+import { Popover } from '../../../../../../../components/Popover/Popover.js';
+import { Group } from '../../../../../../../components/Group/Group.js';
+import { isInternalColumn } from '../../../../../useTableManager/util/columns.js';
+import { TableFilterComparator } from '../../../../../types.js';
+import { sortByHeader, isEmptyFilter } from './util.js';
+import { Filter } from './components/Filter.js';
+
+const placeholderFilter = {
+  id: '',
+  value: {
+    comparator: TableFilterComparator.Contains,
+    value: undefined
+  }
+};
+function ManageFiltersPopover(props) {
+  const {
+    length,
+    table,
+    ...popoverProps
+  } = props;
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id)).sort(sortByHeader);
+  const columnFilters = table.getState().columnFilters;
+  // state, since we "apply" filters - our filter values have a special shape, so we force to our type
+  const [filters, setFilters] = React__default.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
+  // this runs if filters are set outside (e.g. through column header)
+  React__default.useEffect(() => {
+    setFilters(columnFilters.length === 0 ? [placeholderFilter] : columnFilters);
+    // focus the filter value, as we preset the column/comparator.
+    requestAnimationFrame(() => {
+      const filterValues = document.querySelectorAll('[data-query-selector="filter-value"]');
+      const lastFilter = filterValues.length ? filterValues[filterValues.length - 1] : undefined;
+      lastFilter === null || lastFilter === void 0 ? void 0 : lastFilter.focus();
+    });
+  }, [columnFilters]);
+  // filters
+  const handleChangeFilter = (position, filter) => {
+    setFilters(currentFilters => {
+      return currentFilters.map((current, index) => {
+        if (index === position) {
+          return filter;
+        }
+        return current;
+      });
+    });
+  };
+  const handleRemoveFilter = position => {
+    if (filters.length === 1) {
+      setFilters([placeholderFilter]);
+      return;
+    }
+    setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));
+  };
+  const handleCreate = () => {
+    setFilters(filters.concat(placeholderFilter));
+  };
+  //
+  const handleApply = () => {
+    table.setColumnFilters(() => {
+      const newFilters = filters.filter(f => {
+        var _allColumns$find, _allColumns$find$colu;
+        if (f.id === null || f.id === '') {
+          return false;
+        }
+        const controlRenderer = (_allColumns$find = allColumns.find(c => c.id === f.id)) === null || _allColumns$find === void 0 ? void 0 : (_allColumns$find$colu = _allColumns$find.columnDef.meta) === null || _allColumns$find$colu === void 0 ? void 0 : _allColumns$find$colu.control;
+        if (f.value.comparator === TableFilterComparator.IsEmpty || f.value.comparator === TableFilterComparator.IsNotEmpty || controlRenderer === 'switch') {
+          return true;
+        }
+        return !!f.value.value;
+      });
+      return newFilters;
+    });
+  };
+  const handleClear = () => {
+    table.resetColumnFilters();
+    setFilters([placeholderFilter]);
+  };
+  const handleClose = open => {
+    if (!open) {
+      const nonEmptyFilters = columnFilters.filter(f => !isEmptyFilter(f));
+      table.setColumnFilters(nonEmptyFilters);
+      setFilters(nonEmptyFilters.length === 0 ? [placeholderFilter] : nonEmptyFilters);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+    onChange: handleClose
+  }), /*#__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 h-8"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "mb-0 inline-flex"
+  }, texts.table.filters.button), /*#__PURE__*/React__default.createElement("p", {
+    className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
+  }, texts.table.filters.total.replace('[CURRENT]', new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', new Intl.NumberFormat(locale).format(length))))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, filters.map((filter, index) => ( /*#__PURE__*/React__default.createElement(Filter, {
+    key: `filter_${index}`,
+    allColumns: allColumns,
+    filter: filter,
+    filters: filters,
+    position: index,
+    onChange: handleChangeFilter,
+    onRemove: filters.length > 0 && filters.some(f => f.id) || filters.length > 1 ? handleRemoveFilter : undefined
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "justify-start"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "discrete",
+    onClick: handleCreate
+  }, "+ ", texts.table.filters.buttons.addFilter))), /*#__PURE__*/React__default.createElement(Group, {
+    className: "ml-auto"
+  }, /*#__PURE__*/React__default.createElement(Popover.Close, null, /*#__PURE__*/React__default.createElement(Button, null, "Cancel")), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleClear
+  }, "Clear"), /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "primary",
+    onClick: handleApply
+  }, "Apply")))));
+}
+
+export { ManageFiltersPopover };
+//# sourceMappingURL=ManageFiltersPopover.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/ManageFiltersPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageFiltersPopover.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/components/Filters/ManageFiltersPopover.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { Popover } from '../../../../../../../components/Popover/Popover';\nimport { useLocalization } from '../../../../../../../components/Provider/Localization';\nimport { Button } from '../../../../../../../components/Button/Button';\nimport { Group } from '../../../../../../../components/Group/Group';\nimport { isEmptyFilter, sortByHeader } from './util';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { TableFilter, TableFilterComparator, TableFilterValue } from '../../../../../types';\nimport { Filter } from './components/Filter';\n\nexport type ManageFiltersPopoverProps<TType = unknown> = {\n    length: number;\n    table: ReactTable<TType>;\n};\n\nconst placeholderFilter: TableFilter = { id: '', value: { comparator: TableFilterComparator.Contains, value: undefined } };\n\nexport function ManageFiltersPopover<TType = unknown>(props: ManageFiltersPopoverProps<TType>) {\n    const { length, table, ...popoverProps } = props;\n    const { locale, texts } = useLocalization();\n\n    const allColumns = table\n        .getAllLeafColumns()\n        .filter(column => !isInternalColumn(column.id))\n        .sort(sortByHeader);\n\n    const columnFilters = table.getState().columnFilters as TableFilter[];\n\n    // state, since we \"apply\" filters - our filter values have a special shape, so we force to our type\n    const [filters, setFilters] = React.useState<TableFilter[]>(columnFilters.length ? columnFilters : [placeholderFilter]);\n\n    // this runs if filters are set outside (e.g. through column header)\n    React.useEffect(() => {\n        setFilters(columnFilters.length === 0 ? [placeholderFilter] : columnFilters);\n\n        // focus the filter value, as we preset the column/comparator.\n        requestAnimationFrame(() => {\n            const filterValues = document.querySelectorAll('[data-query-selector=\"filter-value\"]');\n            const lastFilter = filterValues.length ? filterValues[filterValues.length - 1] : undefined;\n\n            (lastFilter as HTMLElement)?.focus();\n        });\n    }, [columnFilters]);\n\n    // filters\n    const handleChangeFilter = (position: number, filter: { id: string; value: TableFilterValue }) => {\n        setFilters(currentFilters => {\n            return currentFilters.map((current, index) => {\n                if (index === position) {\n                    return filter;\n                }\n                return current;\n            });\n        });\n    };\n\n    const handleRemoveFilter = position => {\n        if (filters.length === 1) {\n            setFilters([placeholderFilter]);\n            return;\n        }\n\n        setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));\n    };\n\n    const handleCreate = () => {\n        setFilters(filters.concat(placeholderFilter));\n    };\n\n    //\n    const handleApply = () => {\n        table.setColumnFilters(() => {\n            const newFilters = filters.filter(f => {\n                if (f.id === null || f.id === '') {\n                    return false;\n                }\n\n                const controlRenderer = allColumns.find(c => c.id === f.id)?.columnDef.meta?.control;\n\n                if (\n                    f.value.comparator === TableFilterComparator.IsEmpty ||\n                    f.value.comparator === TableFilterComparator.IsNotEmpty ||\n                    controlRenderer === 'switch'\n                ) {\n                    return true;\n                }\n\n                return !!f.value.value;\n            });\n\n            return newFilters;\n        });\n    };\n\n    const handleClear = () => {\n        table.resetColumnFilters();\n        setFilters([placeholderFilter]);\n    };\n\n    const handleClose = (open: boolean) => {\n        if (!open) {\n            const nonEmptyFilters = columnFilters.filter(f => !isEmptyFilter(f));\n            table.setColumnFilters(nonEmptyFilters);\n            setFilters(nonEmptyFilters.length === 0 ? [placeholderFilter] : nonEmptyFilters);\n        }\n    };\n\n    return (\n        <Popover {...popoverProps} onChange={handleClose}>\n            <Popover.Content>\n                <div className=\"flex w-[40rem] flex-col gap-4\">\n                    <div className=\"flex h-8\">\n                        <div className=\"flex w-full items-center gap-2\">\n                            <h4 className=\"mb-0 inline-flex\">{texts.table.filters.button}</h4>\n                            <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n                                {texts.table.filters.total\n                                    .replace(\n                                        '[CURRENT]',\n                                        new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)\n                                    )\n                                    .replace('[TOTAL]', new Intl.NumberFormat(locale).format(length))}\n                            </p>\n                        </div>\n                    </div>\n                    <div className=\"flex flex-col gap-2\">\n                        {filters.map((filter, index) => (\n                            <Filter\n                                key={`filter_${index}`}\n                                allColumns={allColumns}\n                                filter={filter}\n                                filters={filters}\n                                position={index}\n                                onChange={handleChangeFilter}\n                                onRemove={\n                                    (filters.length > 0 && filters.some(f => f.id)) || filters.length > 1\n                                        ? handleRemoveFilter\n                                        : undefined\n                                }\n                            />\n                        ))}\n                        <div className=\"justify-start\">\n                            <Button appearance=\"discrete\" onClick={handleCreate}>\n                                + {texts.table.filters.buttons.addFilter}\n                            </Button>\n                        </div>\n                    </div>\n                    <Group className=\"ml-auto\">\n                        <Popover.Close>\n                            <Button>Cancel</Button>\n                        </Popover.Close>\n                        <Button onClick={handleClear}>Clear</Button>\n                        <Button appearance=\"primary\" onClick={handleApply}>\n                            Apply\n                        </Button>\n                    </Group>\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"names":["placeholderFilter","id","value","comparator","TableFilterComparator","Contains","undefined","ManageFiltersPopover","props","length","table","popoverProps","locale","texts","useLocalization","allColumns","getAllLeafColumns","filter","column","isInternalColumn","sort","sortByHeader","columnFilters","getState","filters","setFilters","React","useState","useEffect","requestAnimationFrame","filterValues","document","querySelectorAll","lastFilter","focus","handleChangeFilter","position","currentFilters","map","current","index","handleRemoveFilter","_","handleCreate","concat","handleApply","setColumnFilters","newFilters","f","controlRenderer","_allColumns$find","find","c","_allColumns$find$colu","columnDef","meta","control","IsEmpty","IsNotEmpty","handleClear","resetColumnFilters","handleClose","open","nonEmptyFilters","isEmptyFilter","Popover","onChange","Content","className","button","total","replace","Intl","NumberFormat","format","getFilteredRowModel","rows","Filter","key","onRemove","some","Button","appearance","onClick","buttons","addFilter","Group","Close"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/Filter.js

@@ -0,0 +1,102 @@
+import React__default from 'react';
+import { IconButton } from '../../../../../../../../components/IconButton/IconButton.js';
+import { useLocalization } from '../../../../../../../../components/Provider/Localization.js';
+import { TableFilterComparator } from '../../../../../../types.js';
+import { FilterColumn } from './FilterColumn.js';
+import { FilterComparator } from './FilterComparator.js';
+import { FilterValue } from './FilterValue.js';
+
+function Filter(props) {
+  const {
+    allColumns,
+    filter,
+    filters,
+    onChange: handleChange,
+    onRemove,
+    position
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const column = allColumns.find(c => c.id === filter.id);
+  const ref = React__default.useRef(null);
+  const {
+    id,
+    value: {
+      comparator,
+      value
+    }
+  } = filter;
+  const handleChangeColumn = columnId => {
+    var _previousColumn$colum, _nextColumn$columnDef;
+    const previousColumn = allColumns.find(column => column.id === id);
+    const nextColumn = allColumns.find(column => column.id === columnId);
+    // UX requirement: if old column data type is the same as next column data type,
+    // then we applying the same filter value for the next column,
+    // but when data types are different, we're reseting comparator ans value for the next column
+    const value = (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum = previousColumn.columnDef.meta) === null || _previousColumn$colum === void 0 ? void 0 : _previousColumn$colum.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType) ? filter.value : {
+      comparator: TableFilterComparator.Contains,
+      value: undefined
+    };
+    handleChange(position, {
+      id: columnId,
+      value
+    });
+  };
+  const handleChangeComparator = comparator => {
+    let nextValue = filter.value.value;
+    if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {
+      nextValue = undefined;
+    }
+    handleChange(position, {
+      id,
+      value: {
+        comparator,
+        value: nextValue
+      }
+    });
+  };
+  const handleChangeValue = value => {
+    handleChange(position, {
+      id,
+      value: {
+        ...filter.value,
+        value
+      }
+    });
+  };
+  const handleRemove = () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(position);
+  React__default.useEffect(() => {
+    if (ref.current && !id) {
+      ref.current.focus(); // after adding a new filter placeholder, we want to focus it right way.
+    }
+  }, [id]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-start gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
+    allColumns: allColumns,
+    filters: filters,
+    onChange: handleChangeColumn,
+    value: id,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(FilterComparator, {
+    column: column,
+    onChange: handleChangeComparator,
+    value: comparator
+  }), /*#__PURE__*/React__default.createElement(FilterValue, {
+    column: column,
+    comparator: comparator,
+    onChange: handleChangeValue,
+    value: value
+  }), onRemove ? /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    className: "ml-auto",
+    icon: "close",
+    onClick: handleRemove
+  }) : null);
+}
+
+export { Filter };
+//# sourceMappingURL=Filter.js.map