@economic/taco 1.12.3 → 1.13.1

package/dist/esm/packages/taco/src/components/Table/components/PaginatedTable.js

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { Table } from './Table.js';
+
+const PaginatedTable = /*#__PURE__*/React__default.forwardRef(function PaginatedTable(props, ref) {
+  return /*#__PURE__*/React__default.createElement(Table, Object.assign({}, props, {
+    disablePagination: false,
+    ref: ref
+  }));
+});
+PaginatedTable.Column = () => null;
+PaginatedTable.Group = () => null;
+
+export { PaginatedTable };
+//# sourceMappingURL=PaginatedTable.js.map

package/dist/esm/packages/taco/src/components/Table/components/PaginatedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedTable.js","sources":["../../../../../../../../src/components/Table/components/PaginatedTable.tsx"],"sourcesContent":["import React from 'react';\nimport { ForwardedGenericTableWithStatics, TableProps, TableRef } from '../types';\nimport { Table } from './Table';\n\nexport const PaginatedTable = React.forwardRef(function PaginatedTable<T>(props: TableProps<T>, ref: React.Ref<TableRef>) {\n    return <Table {...props} disablePagination={false} ref={ref} />;\n}) as ForwardedGenericTableWithStatics;\n\nPaginatedTable.Column = () => null;\nPaginatedTable.Group = () => null;\n"],"names":["PaginatedTable","React","forwardRef","props","ref","Table","disablePagination","Column","Group"],"mappings":";;;MAIaA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,cAAc,CAAIG,KAAoB,EAAEC,GAAwB;EACpH,oBAAOH,6BAACI,KAAK,oBAAKF,KAAK;IAAEG,iBAAiB,EAAE,KAAK;IAAEF,GAAG,EAAEA;KAAO;AACnE,CAAC;AAEDJ,cAAc,CAACO,MAAM,GAAG,MAAM,IAAI;AAClCP,cAAc,CAACQ,KAAK,GAAG,MAAM,IAAI;;;;"}

package/dist/esm/packages/taco/src/components/Table/components/Table.js

@@ -0,0 +1,52 @@
+import React__default from 'react';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
+import { Pagination } from '../../Pagination/Pagination.js';
+import { useTable } from '../hooks/useTable.js';
+import { Row } from '../util/renderRow.js';
+import { BaseTable, DefaultEmptyState } from './BaseTable.js';
+
+const Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
+  const {
+    emptyStateRenderer = DefaultEmptyState,
+    ...otherProps
+  } = props;
+  const tableRef = useProxiedRef(ref);
+  const {
+    rowProps,
+    tableProps,
+    rows,
+    prepareRow,
+    pagination,
+    instance
+  } = useTable(otherProps, tableRef);
+  let paginationElement;
+  if (pagination) {
+    paginationElement = /*#__PURE__*/React__default.createElement(Pagination, {
+      className: "my-4 w-full",
+      length: pagination.length,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      setPageIndex: pagination.setPageIndex,
+      setPageSize: pagination.setPageSize,
+      showPageControls: pagination.length > pagination.pageSize,
+      dangerouslyHijackGlobalKeyboardNavigation: props.dangerouslyHijackGlobalKeyboardNavigation
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paginationElement, /*#__PURE__*/React__default.createElement(BaseTable, Object.assign({}, tableProps, {
+    ref: tableRef
+  }), rows.length ? rows.map((row, index) => {
+    prepareRow(row, index);
+    return /*#__PURE__*/React__default.createElement(Row, Object.assign({}, rowProps, {
+      key: index,
+      index: index,
+      row: row,
+      instance: instance,
+      headerGroups: tableProps.headerGroups
+    }));
+  }) : emptyStateRenderer()), paginationElement);
+});
+Table.Column = () => null;
+Table.Group = () => null;
+
+export { Table };
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\n\nexport const Table = React.forwardRef(function Table<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\n\n    let paginationElement;\n\n    if (pagination) {\n        paginationElement = (\n            <Pagination\n                className=\"my-4 w-full\"\n                length={pagination.length}\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                setPageIndex={pagination.setPageIndex}\n                setPageSize={pagination.setPageSize}\n                showPageControls={pagination.length > pagination.pageSize}\n                dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\n            />\n        );\n    }\n\n    return (\n        <>\n            {paginationElement}\n            <BaseTable {...tableProps} ref={tableRef}>\n                {rows.length\n                    ? rows.map((row: InternalTableRow, index: number) => {\n                          prepareRow(row, index);\n                          return (\n                              <Row\n                                  {...rowProps}\n                                  key={index}\n                                  index={index}\n                                  row={row}\n                                  instance={instance}\n                                  headerGroups={tableProps.headerGroups}\n                              />\n                          );\n                      })\n                    : emptyStateRenderer()}\n            </BaseTable>\n            {paginationElement}\n        </>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nTable.Column = () => null;\nTable.Group = () => null;\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","rowProps","tableProps","rows","prepareRow","pagination","instance","useTable","paginationElement","Pagination","className","length","pageIndex","pageSize","setPageIndex","setPageSize","showPageControls","dangerouslyHijackGlobalKeyboardNavigation","BaseTable","map","row","index","Row","key","headerGroups","Column","Group"],"mappings":";;;;;;;MASaA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAK,CAChDG,KAAoD,EACpDC,GAAwB;EAExB,MAAM;IAAEC,kBAAkB,GAAGC,iBAAiB;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EACvE,MAAMK,QAAQ,GAAQC,aAAa,CAAiBL,GAAG,CAAC;EACxD,MAAM;IAAEM,QAAQ;IAAEC,UAAU;IAAEC,IAAI;IAAEC,UAAU;IAAEC,UAAU;IAAEC;GAAU,GAAGC,QAAQ,CAACT,UAAU,EAAEC,QAAQ,CAAC;EAEvG,IAAIS,iBAAiB;EAErB,IAAIH,UAAU,EAAE;IACZG,iBAAiB,gBACbhB,6BAACiB,UAAU;MACPC,SAAS,EAAC,aAAa;MACvBC,MAAM,EAAEN,UAAU,CAACM,MAAM;MACzBC,SAAS,EAAEP,UAAU,CAACO,SAAS;MAC/BC,QAAQ,EAAER,UAAU,CAACQ,QAAQ;MAC7BC,YAAY,EAAET,UAAU,CAACS,YAAY;MACrCC,WAAW,EAAEV,UAAU,CAACU,WAAW;MACnCC,gBAAgB,EAAEX,UAAU,CAACM,MAAM,GAAGN,UAAU,CAACQ,QAAQ;MACzDI,yCAAyC,EAAEvB,KAAK,CAACuB;MAExD;;EAGL,oBACIzB,4DACKgB,iBAAiB,eAClBhB,6BAAC0B,SAAS,oBAAKhB,UAAU;IAAEP,GAAG,EAAEI;MAC3BI,IAAI,CAACQ,MAAM,GACNR,IAAI,CAACgB,GAAG,CAAC,CAACC,GAAqB,EAAEC,KAAa;IAC1CjB,UAAU,CAACgB,GAAG,EAAEC,KAAK,CAAC;IACtB,oBACI7B,6BAAC8B,GAAG,oBACIrB,QAAQ;MACZsB,GAAG,EAAEF,KAAK;MACVA,KAAK,EAAEA,KAAK;MACZD,GAAG,EAAEA,GAAG;MACRd,QAAQ,EAAEA,QAAQ;MAClBkB,YAAY,EAAEtB,UAAU,CAACsB;OAC3B;GAET,CAAC,GACF5B,kBAAkB,EAAE,CAClB,EACXY,iBAAiB,CACnB;AAEX,CAAC;AAEDjB,KAAK,CAACkC,MAAM,GAAG,MAAM,IAAI;AACzBlC,KAAK,CAACmC,KAAK,GAAG,MAAM,IAAI;;;;"}

package/dist/esm/packages/taco/src/components/Table/components/WindowedTable.js

@@ -0,0 +1,178 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useLocalization } from '../../Provider/Provider.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
+import { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener.js';
+import { useTable } from '../hooks/useTable.js';
+import { Row } from '../util/renderRow.js';
+import { BaseTable, DefaultEmptyState } from './BaseTable.js';
+import { VariableSizeList, areEqual } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+
+const ROW_HEIGHT = 40;
+const VariableRow = /*#__PURE__*/React__default.memo(({
+  data,
+  index,
+  style: {
+    height: _,
+    ...style
+  }
+}) => {
+  const {
+    texts
+  } = useLocalization();
+  const {
+    rows,
+    setRowHeight,
+    rowProps,
+    tableProps,
+    instance,
+    prepareRow,
+    rowHeights
+  } = data;
+  const row = rows[index];
+  const ref = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref !== null && ref !== void 0 && ref.current) {
+      setRowHeight(index, ref.current.getBoundingClientRect().height);
+    }
+  }, [rowHeights[index]]);
+  if (row) {
+    prepareRow(row, index);
+    return /*#__PURE__*/React__default.createElement(Row, Object.assign({}, rowProps, {
+      style: style,
+      key: index,
+      index: index,
+      row: row,
+      instance: instance,
+      headerGroups: tableProps.headerGroups,
+      setRowHeight: setRowHeight,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "yt-table__row",
+    role: "row",
+    style: style
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "yt-table__cell text-grey-dark"
+  }, texts.table.loading));
+}, areEqual);
+const getAverageRowHeight = (rowHeights = {}) => {
+  const keys = Object.keys(rowHeights);
+  const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);
+  return estimatedHeight / keys.length;
+};
+const WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTable(props, ref) {
+  const tableRef = useProxiedRef(ref);
+  const {
+    emptyStateRenderer = DefaultEmptyState,
+    length,
+    loadMore,
+    ...otherProps
+  } = props;
+  const {
+    rowProps,
+    tableProps,
+    rows,
+    prepareRow,
+    instance,
+    state
+  } = useTable({
+    ...otherProps,
+    windowed: true
+  }, tableRef);
+  // determine heights for windowing calculations
+  const headerRef = React__default.useRef(null);
+  const [rowsRef, setRowsRef] = React__default.useState(null);
+  const tableDimensions = useBoundingClientRectListener(tableRef);
+  const headerDimensions = useBoundingClientRectListener(headerRef);
+  const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;
+  // variable row height calculations
+  const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;
+  const rowHeights = React__default.useRef({});
+  const setRowHeight = React__default.useCallback((index, size) => {
+    if (rowHeights.current[index] !== size) {
+      rowHeights.current = {
+        ...rowHeights.current,
+        [index]: size
+      };
+      if (rowsRef) {
+        rowsRef.resetAfterIndex(0);
+      }
+    }
+  }, []);
+  const getRowHeight = React__default.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);
+  React__default.useEffect(() => {
+    if (rowsRef && rowProps.activeIndex !== undefined) {
+      rowsRef.scrollToItem(rowProps.activeIndex, 'start');
+    }
+  }, [rowsRef, rowProps.activeIndex]);
+  // trigger recalculation of variable row heights if the data changes
+  React__default.useEffect(() => {
+    rowHeights.current = {};
+    if (rowsRef) {
+      rowsRef.resetAfterIndex(0);
+    }
+  }, [rows.length]);
+  const contentHeight = estimatedRowHeight * props.data.length || 0;
+  const isScrollbarVisible = height !== null ? contentHeight > height : false;
+  const className = cn(tableProps.className, 'yt-table--windowed', {
+    'table-with-scrollbar': isScrollbarVisible
+  });
+  let list;
+  const itemData = {
+    rows,
+    setRowHeight,
+    rowProps,
+    tableProps,
+    instance,
+    prepareRow,
+    state,
+    rowHeights: rowHeights.current
+  };
+  if (height && rows.length) {
+    const listProps = {
+      height,
+      itemData,
+      estimatedItemSize: getAverageRowHeight(rowHeights.current),
+      itemSize: getRowHeight,
+      width: '100%'
+    };
+    if (loadMore && length) {
+      const isLoaded = index => !!rows[index];
+      list = /*#__PURE__*/React__default.createElement(InfiniteLoader, {
+        isItemLoaded: isLoaded,
+        itemCount: length,
+        loadMoreItems: loadMore
+      }, ({
+        onItemsRendered,
+        ref
+      }) => /*#__PURE__*/React__default.createElement(VariableSizeList, Object.assign({}, listProps, {
+        itemCount: length,
+        onItemsRendered: onItemsRendered,
+        ref: list => {
+          ref(list);
+          setRowsRef(list);
+        }
+      }), VariableRow));
+    } else {
+      list = /*#__PURE__*/React__default.createElement(VariableSizeList, Object.assign({}, listProps, {
+        itemCount: rows.length,
+        ref: ref => {
+          setRowsRef(ref);
+        }
+      }), VariableRow);
+    }
+  }
+  return /*#__PURE__*/React__default.createElement(BaseTable, Object.assign({}, tableProps, {
+    className: className,
+    headerRef: headerRef,
+    ref: tableRef
+  }), list ? list : emptyStateRenderer());
+});
+WindowedTable.Column = () => null;
+WindowedTable.Group = () => null;
+
+export { WindowedTable };
+//# sourceMappingURL=WindowedTable.js.map

package/dist/esm/packages/taco/src/components/Table/components/WindowedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowedTable.js","sources":["../../../../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n    const { texts } = useLocalization();\n    const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n    const row = rows[index];\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            setRowHeight(index, ref.current.getBoundingClientRect().height);\n        }\n    }, [rowHeights[index]]);\n\n    if (row) {\n        prepareRow(row, index);\n\n        return (\n            <Row\n                {...rowProps}\n                style={style}\n                key={index}\n                index={index}\n                row={row}\n                instance={instance}\n                headerGroups={tableProps.headerGroups}\n                setRowHeight={setRowHeight}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div className=\"yt-table__row\" role=\"row\" style={style}>\n            <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n        </div>\n    );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n    const keys = Object.keys(rowHeights);\n    const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n    return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n    const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n    // determine heights for windowing calculations\n    const headerRef = React.useRef<HTMLDivElement>(null);\n    const [rowsRef, setRowsRef] = React.useState<any>(null);\n    const tableDimensions = useBoundingClientRectListener(tableRef);\n    const headerDimensions = useBoundingClientRectListener(headerRef);\n    const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n    // variable row height calculations\n    const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n    const rowHeights = React.useRef<Record<string, number>>({});\n    const setRowHeight = React.useCallback((index: number, size: number) => {\n        if (rowHeights.current[index] !== size) {\n            rowHeights.current = {\n                ...rowHeights.current,\n                [index]: size,\n            };\n\n            if (rowsRef) {\n                rowsRef.resetAfterIndex(0);\n            }\n        }\n    }, []);\n    const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n    React.useEffect(() => {\n        if (rowsRef && rowProps.activeIndex !== undefined) {\n            rowsRef.scrollToItem(rowProps.activeIndex, 'start');\n        }\n    }, [rowsRef, rowProps.activeIndex]);\n\n    // trigger recalculation of variable row heights if the data changes\n    React.useEffect(() => {\n        rowHeights.current = {};\n\n        if (rowsRef) {\n            rowsRef.resetAfterIndex(0);\n        }\n    }, [rows.length]);\n\n    const contentHeight = estimatedRowHeight * props.data.length || 0;\n    const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n    const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n    let list;\n\n    const itemData = {\n        rows,\n        setRowHeight,\n        rowProps,\n        tableProps,\n        instance,\n        prepareRow,\n        state,\n        rowHeights: rowHeights.current,\n    };\n\n    if (height && rows.length) {\n        const listProps = {\n            height,\n            itemData,\n            estimatedItemSize: getAverageRowHeight(rowHeights.current),\n            itemSize: getRowHeight,\n            width: '100%',\n        };\n\n        if (loadMore && length) {\n            const isLoaded = (index: number) => !!rows[index];\n\n            list = (\n                <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n                    {({ onItemsRendered, ref }: any) => (\n                        <VariableSizeList\n                            {...listProps}\n                            itemCount={length}\n                            onItemsRendered={onItemsRendered}\n                            ref={list => {\n                                ref(list);\n                                setRowsRef(list);\n                            }}>\n                            {VariableRow}\n                        </VariableSizeList>\n                    )}\n                </InfiniteLoader>\n            );\n        } else {\n            list = (\n                <VariableSizeList\n                    {...listProps}\n                    itemCount={rows.length}\n                    ref={ref => {\n                        setRowsRef(ref);\n                    }}>\n                    {VariableRow}\n                </VariableSizeList>\n            );\n        }\n    }\n\n    return (\n        <BaseTable {...tableProps} className={className} headerRef={headerRef} ref={tableRef}>\n            {list ? list : emptyStateRenderer()}\n        </BaseTable>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","height","_","texts","useLocalization","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","state","useTable","windowed","headerRef","rowsRef","setRowsRef","useState","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","Column","Group"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowActions.js

@@ -0,0 +1,207 @@
+import React__default from 'react';
+import { IconButton } from '../../../IconButton/IconButton.js';
+import { Menu } from '../../../Menu/Menu.js';
+import { sanitizeRowProps } from '../../util.js';
+import { InView } from 'react-intersection-observer';
+
+const actionGroupClassName = '-mt-1 -mb-1 h-8 flex';
+const hasActions = (inlineEditingUniqueId, handlers, actions) => {
+  return !!actions || handlers.onRowCreate || handlers.onRowCopy || handlers.onRowDelete || !!inlineEditingUniqueId || handlers.onRowEdit;
+};
+const getActions = (actions, row = undefined) => {
+  const primary = [];
+  const secondary = [];
+  if (actions) {
+    let visibleActions = actions.filter(x => !!x && typeof x !== 'boolean');
+    if (row) {
+      visibleActions = visibleActions.filter(action => {
+        if (action.visible !== undefined) {
+          if (typeof action.visible === 'function') {
+            return action.visible(row);
+          }
+          return action.visible;
+        }
+        return true;
+      });
+    }
+    visibleActions.forEach(action => {
+      if (action.showOnRow) {
+        primary.push(action);
+      } else {
+        secondary.push(action);
+      }
+    });
+  }
+  return [primary, secondary];
+};
+const getLength = (inlineEditingUniqueId, handlers, actions) => {
+  const [primaryActions, secondaryActions] = getActions(actions);
+  let length = primaryActions.length + (secondaryActions.length ? 1 : 0);
+  if (handlers.onRowCreate) {
+    length++;
+  }
+  if (handlers.onRowCopy) {
+    length++;
+  }
+  if (handlers.onRowDelete) {
+    length++;
+  }
+  if (!!inlineEditingUniqueId || handlers.onRowEdit) {
+    length++;
+    if (length < 2) {
+      length++;
+    }
+  }
+  return length;
+};
+const getActionProps = (action, row) => {
+  return {
+    'aria-label': typeof action.tooltip === 'function' ? action.tooltip(row) : action.tooltip,
+    disabled: typeof action.disabled === 'function' ? action.disabled(row) : action.disabled,
+    onClick: event => {
+      action.onClick(row, event);
+    }
+  };
+};
+const EditModeActions = () => {
+  React__default.useEffect(() => {
+    const listener = event => {
+      var _event$target, _event$target$form;
+      if (event.key === 'Escape' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
+        event.preventDefault();
+        event.target.form.reset();
+      }
+    };
+    document.addEventListener('keydown', listener);
+    return () => {
+      document.removeEventListener('keydown', listener);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: actionGroupClassName
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "primary",
+    icon: "tick",
+    type: "submit",
+    className: "mr-2"
+  }), /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "ghost",
+    icon: "close",
+    type: "reset"
+  }));
+};
+const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRenderer, texts, windowed = false) => {
+  const inlineEditing = !!inlineEditingUniqueId;
+  const actionsLength = getLength(inlineEditingUniqueId, handlers, actions);
+  const plugin = hooks => {
+    if (hasActions(inlineEditingUniqueId, handlers, actions)) {
+      hooks.visibleColumns.push(columns => [...columns, {
+        id: '_actions',
+        className: 'flex justify-end px-1 overflow-visible',
+        flex: `0 0 calc((${actionsLength} * 2rem) + .5rem)`,
+        Cell: ({
+          row
+        }) => {
+          if (row.isEditing) {
+            return /*#__PURE__*/React__default.createElement(EditModeActions, null);
+          }
+          const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);
+          const [primaryActions, secondaryActions] = getActions(actions, sanitizedRow);
+          const output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, handlers.onRowCreate && /*#__PURE__*/React__default.createElement(IconButton, {
+            appearance: "discrete",
+            icon: "circle-plus",
+            "aria-label": texts.table.newSubRow,
+            tooltip: texts.table.newSubRow,
+            disabled: inlineEditing && !row.canEdit,
+            onClick: event => {
+              event.stopPropagation();
+              event.persist();
+              row.setActive();
+              if (!row.isExpanded) {
+                row.toggleRowExpanded();
+              }
+              handlers.onRowCreate(sanitizedRow, event);
+            }
+          }), (inlineEditing || handlers.onRowEdit) && /*#__PURE__*/React__default.createElement(IconButton, {
+            appearance: "discrete",
+            icon: "edit",
+            "aria-label": texts.table.edit,
+            tooltip: texts.table.edit,
+            disabled: inlineEditing && !row.canEdit,
+            onClick: event => {
+              event.stopPropagation();
+              row.setActive();
+              if (inlineEditing) {
+                row.toggleRowEditing();
+              } else if (handlers.onRowEdit) {
+                event.persist();
+                handlers.onRowEdit(sanitizedRow, event);
+              }
+            }
+          }), handlers.onRowCopy && /*#__PURE__*/React__default.createElement(IconButton, {
+            appearance: "discrete",
+            icon: "copy",
+            "aria-label": texts.table.copy,
+            tooltip: texts.table.copy,
+            disabled: inlineEditing && !row.canEdit,
+            onClick: event => {
+              event.stopPropagation();
+              event.persist();
+              row.setActive();
+              handlers.onRowCopy(sanitizedRow, event);
+            }
+          }), handlers.onRowDelete && /*#__PURE__*/React__default.createElement(IconButton, {
+            appearance: "discrete",
+            icon: "delete",
+            "aria-label": texts.table.del,
+            tooltip: texts.table.del,
+            disabled: inlineEditing && !row.canEdit,
+            onClick: event => {
+              event.stopPropagation();
+              event.persist();
+              row.setActive();
+              handlers.onRowDelete(sanitizedRow, event);
+            }
+          }), primaryActions.map((action, index) => /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, getActionProps(action, sanitizedRow), {
+            key: index,
+            appearance: "discrete",
+            icon: typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon,
+            tooltip: typeof action.tooltip === 'function' ? action.tooltip(sanitizedRow) : action.tooltip
+          }))), secondaryActions.length ? /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(Menu.Trigger, null, /*#__PURE__*/React__default.createElement(IconButton, {
+            appearance: "discrete",
+            icon: "ellipsis-vertical",
+            "aria-label": texts.table.actions,
+            tooltip: texts.table.actions,
+            disabled: inlineEditing && !row.canEdit,
+            onClick: event => {
+              event.stopPropagation();
+              row.setActive();
+            }
+          })), /*#__PURE__*/React__default.createElement(Menu.Content, null, secondaryActions.map((action, index) => /*#__PURE__*/React__default.createElement(Menu.Item, Object.assign({
+            key: index,
+            icon: typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon
+          }, getActionProps(action, sanitizedRow)), typeof action.text === 'function' ? action.text(sanitizedRow) : action.text)))) : null);
+          if (windowed) {
+            return /*#__PURE__*/React__default.createElement("div", {
+              className: actionGroupClassName
+            }, output);
+          }
+          return /*#__PURE__*/React__default.createElement(InView, {
+            rootMargin: "100px 0px"
+          }, ({
+            inView,
+            ref
+          }) => /*#__PURE__*/React__default.createElement("div", {
+            className: actionGroupClassName,
+            ref: ref
+          }, inView ? output : null));
+        }
+      }]);
+    }
+  };
+  plugin.pluginName = 'useRowActions';
+  return plugin;
+};
+
+export { useRowActions };
+//# sourceMappingURL=useRowActions.js.map

package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowActions.js","sources":["../../../../../../../../../src/components/Table/hooks/plugins/useRowActions.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { InView } from 'react-intersection-observer';\nimport { sanitizeRowProps } from '../../util';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { LocalizationTexts } from '../../../Provider/Provider';\nimport { Menu } from '../../../Menu/Menu';\nimport { RowAction, RowActionHandler, TableRow } from '../../types';\n\nconst actionGroupClassName = '-mt-1 -mb-1 h-8 flex';\n\nconst hasActions = (inlineEditingUniqueId: any, handlers: any, actions: RowActionHandler<any>[] | undefined): number => {\n    return (\n        !!actions ||\n        handlers.onRowCreate ||\n        handlers.onRowCopy ||\n        handlers.onRowDelete ||\n        !!inlineEditingUniqueId ||\n        handlers.onRowEdit\n    );\n};\n\nconst getActions = (\n    actions: RowActionHandler<any>[] | undefined,\n    row: TableRow<any> | undefined = undefined\n): [RowAction<any>[], RowAction<any>[]] => {\n    const primary: RowAction<any>[] = [];\n    const secondary: RowAction<any>[] = [];\n\n    if (actions) {\n        let visibleActions = actions.filter(x => !!x && typeof x !== 'boolean') as RowAction<any>[];\n\n        if (row) {\n            visibleActions = visibleActions.filter(action => {\n                if (action.visible !== undefined) {\n                    if (typeof action.visible === 'function') {\n                        return action.visible(row);\n                    }\n\n                    return action.visible;\n                }\n\n                return true;\n            });\n        }\n\n        visibleActions.forEach(action => {\n            if (action.showOnRow) {\n                primary.push(action);\n            } else {\n                secondary.push(action);\n            }\n        });\n    }\n\n    return [primary, secondary];\n};\n\nconst getLength = (inlineEditingUniqueId: any, handlers: any, actions: RowActionHandler<any>[] | undefined): number => {\n    const [primaryActions, secondaryActions] = getActions(actions);\n\n    let length = primaryActions.length + (secondaryActions.length ? 1 : 0);\n\n    if (handlers.onRowCreate) {\n        length++;\n    }\n\n    if (handlers.onRowCopy) {\n        length++;\n    }\n\n    if (handlers.onRowDelete) {\n        length++;\n    }\n\n    if (!!inlineEditingUniqueId || handlers.onRowEdit) {\n        length++;\n\n        if (length < 2) {\n            length++;\n        }\n    }\n\n    return length;\n};\n\nconst getActionProps = (action: RowAction<any>, row: TableRow<any>) => {\n    return {\n        'aria-label': typeof action.tooltip === 'function' ? action.tooltip(row) : action.tooltip,\n        disabled: typeof action.disabled === 'function' ? action.disabled(row) : action.disabled,\n        onClick: (event: React.MouseEvent<HTMLElement>) => {\n            action.onClick(row, event);\n        },\n    };\n};\n\nconst EditModeActions = () => {\n    React.useEffect(() => {\n        const listener = (event: any) => {\n            if (event.key === 'Escape' && event.target?.form?.reset) {\n                event.preventDefault();\n                event.target.form.reset();\n            }\n        };\n\n        document.addEventListener('keydown', listener);\n\n        return () => {\n            document.removeEventListener('keydown', listener);\n        };\n    }, []);\n\n    return (\n        <div className={actionGroupClassName}>\n            <IconButton appearance=\"primary\" icon=\"tick\" type=\"submit\" className=\"mr-2\" />\n            <IconButton appearance=\"ghost\" icon=\"close\" type=\"reset\" />\n        </div>\n    );\n};\n\nexport const useRowActions = <T extends {}>(\n    inlineEditingUniqueId: keyof T | undefined,\n    handlers: any,\n    actions: RowActionHandler<T>[] | undefined,\n    rowExpansionRenderer: any,\n    texts: LocalizationTexts,\n    windowed = false\n): PluginHook<{}> => {\n    const inlineEditing = !!inlineEditingUniqueId;\n    const actionsLength = getLength(inlineEditingUniqueId, handlers, actions);\n\n    const plugin = (hooks: any): void => {\n        if (hasActions(inlineEditingUniqueId, handlers, actions)) {\n            hooks.visibleColumns.push((columns: any) => [\n                ...columns,\n                {\n                    id: '_actions',\n                    className: 'flex justify-end px-1 overflow-visible',\n                    flex: `0 0 calc((${actionsLength} * 2rem) + .5rem)`,\n                    Cell: ({ row }: any) => {\n                        if (row.isEditing) {\n                            return <EditModeActions />;\n                        }\n\n                        const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);\n                        const [primaryActions, secondaryActions] = getActions(actions, sanitizedRow);\n\n                        const output = (\n                            <>\n                                {handlers.onRowCreate && (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        icon=\"circle-plus\"\n                                        aria-label={texts.table.newSubRow}\n                                        tooltip={texts.table.newSubRow}\n                                        disabled={inlineEditing && !row.canEdit}\n                                        onClick={(event: React.MouseEvent) => {\n                                            event.stopPropagation();\n                                            event.persist();\n                                            row.setActive();\n\n                                            if (!row.isExpanded) {\n                                                row.toggleRowExpanded();\n                                            }\n\n                                            handlers.onRowCreate(sanitizedRow, event);\n                                        }}\n                                    />\n                                )}\n                                {(inlineEditing || handlers.onRowEdit) && (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        icon=\"edit\"\n                                        aria-label={texts.table.edit}\n                                        tooltip={texts.table.edit}\n                                        disabled={inlineEditing && !row.canEdit}\n                                        onClick={(event: React.MouseEvent) => {\n                                            event.stopPropagation();\n                                            row.setActive();\n\n                                            if (inlineEditing) {\n                                                row.toggleRowEditing();\n                                            } else if (handlers.onRowEdit) {\n                                                event.persist();\n                                                handlers.onRowEdit(sanitizedRow, event);\n                                            }\n                                        }}\n                                    />\n                                )}\n                                {handlers.onRowCopy && (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        icon=\"copy\"\n                                        aria-label={texts.table.copy}\n                                        tooltip={texts.table.copy}\n                                        disabled={inlineEditing && !row.canEdit}\n                                        onClick={(event: React.MouseEvent) => {\n                                            event.stopPropagation();\n                                            event.persist();\n                                            row.setActive();\n                                            handlers.onRowCopy(sanitizedRow, event);\n                                        }}\n                                    />\n                                )}\n                                {handlers.onRowDelete && (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        icon=\"delete\"\n                                        aria-label={texts.table.del}\n                                        tooltip={texts.table.del}\n                                        disabled={inlineEditing && !row.canEdit}\n                                        onClick={(event: React.MouseEvent) => {\n                                            event.stopPropagation();\n                                            event.persist();\n                                            row.setActive();\n                                            handlers.onRowDelete(sanitizedRow, event);\n                                        }}\n                                    />\n                                )}\n                                {primaryActions.map((action: RowAction<T>, index: number) => (\n                                    <IconButton\n                                        {...getActionProps(action, sanitizedRow)}\n                                        key={index}\n                                        appearance=\"discrete\"\n                                        icon={typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon}\n                                        tooltip={\n                                            typeof action.tooltip === 'function' ? action.tooltip(sanitizedRow) : action.tooltip\n                                        }\n                                    />\n                                ))}\n                                {secondaryActions.length ? (\n                                    <Menu>\n                                        <Menu.Trigger>\n                                            <IconButton\n                                                appearance=\"discrete\"\n                                                icon=\"ellipsis-vertical\"\n                                                aria-label={texts.table.actions}\n                                                tooltip={texts.table.actions}\n                                                disabled={inlineEditing && !row.canEdit}\n                                                onClick={(event: React.MouseEvent) => {\n                                                    event.stopPropagation();\n                                                    row.setActive();\n                                                }}\n                                            />\n                                        </Menu.Trigger>\n                                        <Menu.Content>\n                                            {secondaryActions.map((action: RowAction<T>, index: number) => (\n                                                <Menu.Item\n                                                    key={index}\n                                                    icon={\n                                                        typeof action.icon === 'function'\n                                                            ? action.icon(sanitizedRow)\n                                                            : action.icon\n                                                    }\n                                                    {...getActionProps(action, sanitizedRow)}>\n                                                    {typeof action.text === 'function' ? action.text(sanitizedRow) : action.text}\n                                                </Menu.Item>\n                                            ))}\n                                        </Menu.Content>\n                                    </Menu>\n                                ) : null}\n                            </>\n                        );\n\n                        if (windowed) {\n                            return <div className={actionGroupClassName}>{output}</div>;\n                        }\n\n                        return (\n                            <InView rootMargin=\"100px 0px\">\n                                {({ inView, ref }) => (\n                                    <div className={actionGroupClassName} ref={ref}>\n                                        {inView ? output : null}\n                                    </div>\n                                )}\n                            </InView>\n                        );\n                    },\n                },\n            ]);\n        }\n    };\n    plugin.pluginName = 'useRowActions';\n    return plugin;\n};\n"],"names":["actionGroupClassName","hasActions","inlineEditingUniqueId","handlers","actions","onRowCreate","onRowCopy","onRowDelete","onRowEdit","getActions","row","undefined","primary","secondary","visibleActions","filter","x","action","visible","forEach","showOnRow","push","getLength","primaryActions","secondaryActions","length","getActionProps","tooltip","disabled","onClick","event","EditModeActions","React","useEffect","listener","key","target","form","reset","preventDefault","document","addEventListener","removeEventListener","className","IconButton","appearance","icon","type","useRowActions","rowExpansionRenderer","texts","windowed","inlineEditing","actionsLength","plugin","hooks","visibleColumns","columns","id","flex","Cell","isEditing","sanitizedRow","sanitizeRowProps","output","table","newSubRow","canEdit","stopPropagation","persist","setActive","isExpanded","toggleRowExpanded","edit","toggleRowEditing","copy","del","map","index","Menu","Trigger","Content","Item","text","InView","rootMargin","inView","ref","pluginName"],"mappings":";;;;;;AASA,MAAMA,oBAAoB,GAAG,sBAAsB;AAEnD,MAAMC,UAAU,GAAG,CAACC,qBAA0B,EAAEC,QAAa,EAAEC,OAA4C;EACvG,OACI,CAAC,CAACA,OAAO,IACTD,QAAQ,CAACE,WAAW,IACpBF,QAAQ,CAACG,SAAS,IAClBH,QAAQ,CAACI,WAAW,IACpB,CAAC,CAACL,qBAAqB,IACvBC,QAAQ,CAACK,SAAS;AAE1B,CAAC;AAED,MAAMC,UAAU,GAAG,CACfL,OAA4C,EAC5CM,MAAiCC,SAAS;EAE1C,MAAMC,OAAO,GAAqB,EAAE;EACpC,MAAMC,SAAS,GAAqB,EAAE;EAEtC,IAAIT,OAAO,EAAE;IACT,IAAIU,cAAc,GAAGV,OAAO,CAACW,MAAM,CAACC,CAAC,IAAI,CAAC,CAACA,CAAC,IAAI,OAAOA,CAAC,KAAK,SAAS,CAAqB;IAE3F,IAAIN,GAAG,EAAE;MACLI,cAAc,GAAGA,cAAc,CAACC,MAAM,CAACE,MAAM;QACzC,IAAIA,MAAM,CAACC,OAAO,KAAKP,SAAS,EAAE;UAC9B,IAAI,OAAOM,MAAM,CAACC,OAAO,KAAK,UAAU,EAAE;YACtC,OAAOD,MAAM,CAACC,OAAO,CAACR,GAAG,CAAC;;UAG9B,OAAOO,MAAM,CAACC,OAAO;;QAGzB,OAAO,IAAI;OACd,CAAC;;IAGNJ,cAAc,CAACK,OAAO,CAACF,MAAM;MACzB,IAAIA,MAAM,CAACG,SAAS,EAAE;QAClBR,OAAO,CAACS,IAAI,CAACJ,MAAM,CAAC;OACvB,MAAM;QACHJ,SAAS,CAACQ,IAAI,CAACJ,MAAM,CAAC;;KAE7B,CAAC;;EAGN,OAAO,CAACL,OAAO,EAAEC,SAAS,CAAC;AAC/B,CAAC;AAED,MAAMS,SAAS,GAAG,CAACpB,qBAA0B,EAAEC,QAAa,EAAEC,OAA4C;EACtG,MAAM,CAACmB,cAAc,EAAEC,gBAAgB,CAAC,GAAGf,UAAU,CAACL,OAAO,CAAC;EAE9D,IAAIqB,MAAM,GAAGF,cAAc,CAACE,MAAM,IAAID,gBAAgB,CAACC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;EAEtE,IAAItB,QAAQ,CAACE,WAAW,EAAE;IACtBoB,MAAM,EAAE;;EAGZ,IAAItB,QAAQ,CAACG,SAAS,EAAE;IACpBmB,MAAM,EAAE;;EAGZ,IAAItB,QAAQ,CAACI,WAAW,EAAE;IACtBkB,MAAM,EAAE;;EAGZ,IAAI,CAAC,CAACvB,qBAAqB,IAAIC,QAAQ,CAACK,SAAS,EAAE;IAC/CiB,MAAM,EAAE;IAER,IAAIA,MAAM,GAAG,CAAC,EAAE;MACZA,MAAM,EAAE;;;EAIhB,OAAOA,MAAM;AACjB,CAAC;AAED,MAAMC,cAAc,GAAG,CAACT,MAAsB,EAAEP,GAAkB;EAC9D,OAAO;IACH,YAAY,EAAE,OAAOO,MAAM,CAACU,OAAO,KAAK,UAAU,GAAGV,MAAM,CAACU,OAAO,CAACjB,GAAG,CAAC,GAAGO,MAAM,CAACU,OAAO;IACzFC,QAAQ,EAAE,OAAOX,MAAM,CAACW,QAAQ,KAAK,UAAU,GAAGX,MAAM,CAACW,QAAQ,CAAClB,GAAG,CAAC,GAAGO,MAAM,CAACW,QAAQ;IACxFC,OAAO,EAAGC,KAAoC;MAC1Cb,MAAM,CAACY,OAAO,CAACnB,GAAG,EAAEoB,KAAK,CAAC;;GAEjC;AACL,CAAC;AAED,MAAMC,eAAe,GAAG;EACpBC,cAAK,CAACC,SAAS,CAAC;IACZ,MAAMC,QAAQ,GAAIJ,KAAU;;MACxB,IAAIA,KAAK,CAACK,GAAG,KAAK,QAAQ,qBAAIL,KAAK,CAACM,MAAM,gEAAZ,cAAcC,IAAI,+CAAlB,mBAAoBC,KAAK,EAAE;QACrDR,KAAK,CAACS,cAAc,EAAE;QACtBT,KAAK,CAACM,MAAM,CAACC,IAAI,CAACC,KAAK,EAAE;;KAEhC;IAEDE,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEP,QAAQ,CAAC;IAE9C,OAAO;MACHM,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAER,QAAQ,CAAC;KACpD;GACJ,EAAE,EAAE,CAAC;EAEN,oBACIF;IAAKW,SAAS,EAAE3C;kBACZgC,6BAACY,UAAU;IAACC,UAAU,EAAC,SAAS;IAACC,IAAI,EAAC,MAAM;IAACC,IAAI,EAAC,QAAQ;IAACJ,SAAS,EAAC;IAAS,eAC9EX,6BAACY,UAAU;IAACC,UAAU,EAAC,OAAO;IAACC,IAAI,EAAC,OAAO;IAACC,IAAI,EAAC;IAAU,CACzD;AAEd,CAAC;MAEYC,aAAa,GAAG,CACzB9C,qBAA0C,EAC1CC,QAAa,EACbC,OAA0C,EAC1C6C,oBAAyB,EACzBC,KAAwB,EACxBC,QAAQ,GAAG,KAAK;EAEhB,MAAMC,aAAa,GAAG,CAAC,CAAClD,qBAAqB;EAC7C,MAAMmD,aAAa,GAAG/B,SAAS,CAACpB,qBAAqB,EAAEC,QAAQ,EAAEC,OAAO,CAAC;EAEzE,MAAMkD,MAAM,GAAIC,KAAU;IACtB,IAAItD,UAAU,CAACC,qBAAqB,EAAEC,QAAQ,EAAEC,OAAO,CAAC,EAAE;MACtDmD,KAAK,CAACC,cAAc,CAACnC,IAAI,CAAEoC,OAAY,IAAK,CACxC,GAAGA,OAAO,EACV;QACIC,EAAE,EAAE,UAAU;QACdf,SAAS,EAAE,wCAAwC;QACnDgB,IAAI,eAAeN,gCAAgC;QACnDO,IAAI,EAAE,CAAC;UAAElD;SAAU;UACf,IAAIA,GAAG,CAACmD,SAAS,EAAE;YACf,oBAAO7B,6BAACD,eAAe,OAAG;;UAG9B,MAAM+B,YAAY,GAAGC,gBAAgB,CAACrD,GAAG,EAAEuC,oBAAoB,CAAC;UAChE,MAAM,CAAC1B,cAAc,EAAEC,gBAAgB,CAAC,GAAGf,UAAU,CAACL,OAAO,EAAE0D,YAAY,CAAC;UAE5E,MAAME,MAAM,gBACRhC,4DACK7B,QAAQ,CAACE,WAAW,iBACjB2B,6BAACY,UAAU;YACPC,UAAU,EAAC,UAAU;YACrBC,IAAI,EAAC,aAAa;0BACNI,KAAK,CAACe,KAAK,CAACC,SAAS;YACjCvC,OAAO,EAAEuB,KAAK,CAACe,KAAK,CAACC,SAAS;YAC9BtC,QAAQ,EAAEwB,aAAa,IAAI,CAAC1C,GAAG,CAACyD,OAAO;YACvCtC,OAAO,EAAGC,KAAuB;cAC7BA,KAAK,CAACsC,eAAe,EAAE;cACvBtC,KAAK,CAACuC,OAAO,EAAE;cACf3D,GAAG,CAAC4D,SAAS,EAAE;cAEf,IAAI,CAAC5D,GAAG,CAAC6D,UAAU,EAAE;gBACjB7D,GAAG,CAAC8D,iBAAiB,EAAE;;cAG3BrE,QAAQ,CAACE,WAAW,CAACyD,YAAY,EAAEhC,KAAK,CAAC;;YAGpD,EACA,CAACsB,aAAa,IAAIjD,QAAQ,CAACK,SAAS,kBACjCwB,6BAACY,UAAU;YACPC,UAAU,EAAC,UAAU;YACrBC,IAAI,EAAC,MAAM;0BACCI,KAAK,CAACe,KAAK,CAACQ,IAAI;YAC5B9C,OAAO,EAAEuB,KAAK,CAACe,KAAK,CAACQ,IAAI;YACzB7C,QAAQ,EAAEwB,aAAa,IAAI,CAAC1C,GAAG,CAACyD,OAAO;YACvCtC,OAAO,EAAGC,KAAuB;cAC7BA,KAAK,CAACsC,eAAe,EAAE;cACvB1D,GAAG,CAAC4D,SAAS,EAAE;cAEf,IAAIlB,aAAa,EAAE;gBACf1C,GAAG,CAACgE,gBAAgB,EAAE;eACzB,MAAM,IAAIvE,QAAQ,CAACK,SAAS,EAAE;gBAC3BsB,KAAK,CAACuC,OAAO,EAAE;gBACflE,QAAQ,CAACK,SAAS,CAACsD,YAAY,EAAEhC,KAAK,CAAC;;;YAItD,EACA3B,QAAQ,CAACG,SAAS,iBACf0B,6BAACY,UAAU;YACPC,UAAU,EAAC,UAAU;YACrBC,IAAI,EAAC,MAAM;0BACCI,KAAK,CAACe,KAAK,CAACU,IAAI;YAC5BhD,OAAO,EAAEuB,KAAK,CAACe,KAAK,CAACU,IAAI;YACzB/C,QAAQ,EAAEwB,aAAa,IAAI,CAAC1C,GAAG,CAACyD,OAAO;YACvCtC,OAAO,EAAGC,KAAuB;cAC7BA,KAAK,CAACsC,eAAe,EAAE;cACvBtC,KAAK,CAACuC,OAAO,EAAE;cACf3D,GAAG,CAAC4D,SAAS,EAAE;cACfnE,QAAQ,CAACG,SAAS,CAACwD,YAAY,EAAEhC,KAAK,CAAC;;YAGlD,EACA3B,QAAQ,CAACI,WAAW,iBACjByB,6BAACY,UAAU;YACPC,UAAU,EAAC,UAAU;YACrBC,IAAI,EAAC,QAAQ;0BACDI,KAAK,CAACe,KAAK,CAACW,GAAG;YAC3BjD,OAAO,EAAEuB,KAAK,CAACe,KAAK,CAACW,GAAG;YACxBhD,QAAQ,EAAEwB,aAAa,IAAI,CAAC1C,GAAG,CAACyD,OAAO;YACvCtC,OAAO,EAAGC,KAAuB;cAC7BA,KAAK,CAACsC,eAAe,EAAE;cACvBtC,KAAK,CAACuC,OAAO,EAAE;cACf3D,GAAG,CAAC4D,SAAS,EAAE;cACfnE,QAAQ,CAACI,WAAW,CAACuD,YAAY,EAAEhC,KAAK,CAAC;;YAGpD,EACAP,cAAc,CAACsD,GAAG,CAAC,CAAC5D,MAAoB,EAAE6D,KAAa,kBACpD9C,6BAACY,UAAU,oBACHlB,cAAc,CAACT,MAAM,EAAE6C,YAAY,CAAC;YACxC3B,GAAG,EAAE2C,KAAK;YACVjC,UAAU,EAAC,UAAU;YACrBC,IAAI,EAAE,OAAO7B,MAAM,CAAC6B,IAAI,KAAK,UAAU,GAAG7B,MAAM,CAAC6B,IAAI,CAACgB,YAAY,CAAC,GAAG7C,MAAM,CAAC6B,IAAI;YACjFnB,OAAO,EACH,OAAOV,MAAM,CAACU,OAAO,KAAK,UAAU,GAAGV,MAAM,CAACU,OAAO,CAACmC,YAAY,CAAC,GAAG7C,MAAM,CAACU;aAGxF,CAAC,EACDH,gBAAgB,CAACC,MAAM,gBACpBO,6BAAC+C,IAAI,qBACD/C,6BAAC+C,IAAI,CAACC,OAAO,qBACThD,6BAACY,UAAU;YACPC,UAAU,EAAC,UAAU;YACrBC,IAAI,EAAC,mBAAmB;0BACZI,KAAK,CAACe,KAAK,CAAC7D,OAAO;YAC/BuB,OAAO,EAAEuB,KAAK,CAACe,KAAK,CAAC7D,OAAO;YAC5BwB,QAAQ,EAAEwB,aAAa,IAAI,CAAC1C,GAAG,CAACyD,OAAO;YACvCtC,OAAO,EAAGC,KAAuB;cAC7BA,KAAK,CAACsC,eAAe,EAAE;cACvB1D,GAAG,CAAC4D,SAAS,EAAE;;YAErB,CACS,eACftC,6BAAC+C,IAAI,CAACE,OAAO,QACRzD,gBAAgB,CAACqD,GAAG,CAAC,CAAC5D,MAAoB,EAAE6D,KAAa,kBACtD9C,6BAAC+C,IAAI,CAACG,IAAI;YACN/C,GAAG,EAAE2C,KAAK;YACVhC,IAAI,EACA,OAAO7B,MAAM,CAAC6B,IAAI,KAAK,UAAU,GAC3B7B,MAAM,CAAC6B,IAAI,CAACgB,YAAY,CAAC,GACzB7C,MAAM,CAAC6B;aAEbpB,cAAc,CAACT,MAAM,EAAE6C,YAAY,CAAC,GACvC,OAAO7C,MAAM,CAACkE,IAAI,KAAK,UAAU,GAAGlE,MAAM,CAACkE,IAAI,CAACrB,YAAY,CAAC,GAAG7C,MAAM,CAACkE,IAAI,CAEnF,CAAC,CACS,CACZ,GACP,IAAI,CAEf;UAED,IAAIhC,QAAQ,EAAE;YACV,oBAAOnB;cAAKW,SAAS,EAAE3C;eAAuBgE,MAAM,CAAO;;UAG/D,oBACIhC,6BAACoD,MAAM;YAACC,UAAU,EAAC;aACd,CAAC;YAAEC,MAAM;YAAEC;WAAK,kBACbvD;YAAKW,SAAS,EAAE3C,oBAAoB;YAAEuF,GAAG,EAAEA;aACtCD,MAAM,GAAGtB,MAAM,GAAG,IAAI,CAE9B,CACI;;OAGpB,CACJ,CAAC;;GAET;EACDV,MAAM,CAACkC,UAAU,GAAG,eAAe;EACnC,OAAOlC,MAAM;AACjB;;;;"}

package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowDraggable.js

@@ -0,0 +1,113 @@
+import React__default from 'react';
+import { Icon } from '../../../Icon/Icon.js';
+import { actions } from 'react-table';
+import { sanitizeRowProps } from '../../util.js';
+
+const pluginName = 'useRowDraggable';
+actions.resetRowDragging = 'resetRowDragging';
+actions.toggleRowDragging = 'toggleRowDragging';
+function reducer(state, action) {
+  if (action.type === actions.init) {
+    return {
+      draggingRowIndexPath: null,
+      ...state
+    };
+  }
+  if (action.type === actions.resetRowDragging) {
+    return {
+      ...state,
+      draggingRowIndexPath: null
+    };
+  }
+  if (action.type === actions.toggleRowDragging) {
+    const {
+      indexPath
+    } = action;
+    return {
+      ...state,
+      draggingRowIndexPath: indexPath
+    };
+  }
+  return state;
+}
+const prepareRow = (row, {
+  instance
+}) => {
+  row.toggleRowDragging = () => {
+    if (instance.state.draggingRowIndexPath === row.id) {
+      instance.dispatch({
+        type: actions.resetRowDragging
+      });
+    } else {
+      instance.dispatch({
+        type: actions.toggleRowDragging,
+        indexPath: row.id
+      });
+    }
+  };
+  if (instance.state.draggingRowIndexPath) {
+    var _instance$state$selec;
+    row.isDragging = instance.state.draggingRowIndexPath === row.id || !!((_instance$state$selec = instance.state.selectedRowIds) !== null && _instance$state$selec !== void 0 && _instance$state$selec[row.id]);
+  } else {
+    row.isDragging = false;
+  }
+};
+const visibleColumns = columns => {
+  return [{
+    id: 'draggable',
+    className: 'yt-table__cell--draggable flex-col px-0',
+    Cell: () => /*#__PURE__*/React__default.createElement(Icon, {
+      name: "drag",
+      className: "text-grey-darkest invisible w-[20px] cursor-grab"
+    }),
+    flex: '0 0 20px'
+  }, ...columns];
+};
+const getRowProps = onRowDrag => (props, {
+  instance,
+  row
+}) => {
+  const onDragStart = event => {
+    event.persist();
+    row.toggleRowDragging();
+    const indexPaths = [row.id, ...Object.keys(instance.state.selectedRowIds)];
+    const data = instance.rows.filter(r => indexPaths.includes(r.id)).map(sanitizeRowProps);
+    const showPlaceholder = placeholder => {
+      const element = window.document.createElement('div');
+      element.id = 'yt-table__drag__placeholder';
+      element.innerText = placeholder;
+      window.document.body.appendChild(element);
+      if (typeof DataTransfer.prototype.setDragImage === 'function') {
+        event.dataTransfer.setDragImage(element, 0, 20);
+      }
+    };
+    onRowDrag(data, showPlaceholder, event);
+  };
+  const onDragEnd = () => {
+    const element = document.getElementById('yt-table__drag__placeholder');
+    if (element && element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    row.toggleRowDragging();
+  };
+  return [props, {
+    draggable: true,
+    onDragStart,
+    onDragEnd
+  }];
+};
+const useRowDraggable = onRowDrag => {
+  const plugin = hooks => {
+    if (onRowDrag) {
+      hooks.stateReducers.push(reducer);
+      hooks.prepareRow.push(prepareRow);
+      hooks.visibleColumns.push(visibleColumns);
+      hooks.getRowProps.push(getRowProps(onRowDrag));
+    }
+  };
+  plugin.pluginName = pluginName;
+  return plugin;
+};
+
+export { useRowDraggable };
+//# sourceMappingURL=useRowDraggable.js.map