@economic/taco 1.0.5 → 1.0.6

package/dist/esm/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';\r\nimport { PluginHook } from 'react-table';\r\nimport { InView } from 'react-intersection-observer';\r\nimport keycode from 'keycode';\r\nimport { sanitizeRowProps } from '../../util';\r\nimport { IconButton } from '../../../IconButton/IconButton';\r\nimport { LocalizationTexts } from '../../../Provider/Provider';\r\nimport { Menu } from '../../../Menu/Menu';\r\nimport { RowAction, RowActionHandler, TableRow } from '../../types';\r\n\r\nconst actionGroupClassName = '-mt-1 -mb-1 h-8 flex';\r\n\r\nconst hasActions = (inlineEditingUniqueId: any, handlers: any, actions: RowActionHandler<any>[] | undefined): number => {\r\n    return (\r\n        !!actions ||\r\n        handlers.onRowCreate ||\r\n        handlers.onRowCopy ||\r\n        handlers.onRowDelete ||\r\n        !!inlineEditingUniqueId ||\r\n        handlers.onRowEdit\r\n    );\r\n};\r\n\r\nconst getActions = (\r\n    actions: RowActionHandler<any>[] | undefined,\r\n    row: TableRow<any> | undefined = undefined\r\n): [RowAction<any>[], RowAction<any>[]] => {\r\n    const primary: RowAction<any>[] = [];\r\n    const secondary: RowAction<any>[] = [];\r\n\r\n    if (actions) {\r\n        let visibleActions = actions.filter(x => !!x);\r\n\r\n        if (row) {\r\n            visibleActions = visibleActions.filter((action: RowAction<any>) => {\r\n                if (action.visible !== undefined) {\r\n                    if (typeof action.visible === 'function') {\r\n                        return action.visible(row);\r\n                    }\r\n\r\n                    return action.visible;\r\n                }\r\n\r\n                return true;\r\n            });\r\n        }\r\n\r\n        visibleActions.forEach((action: RowAction<any>) => {\r\n            if (action.showOnRow) {\r\n                primary.push(action);\r\n            } else {\r\n                secondary.push(action);\r\n            }\r\n        });\r\n    }\r\n\r\n    return [primary, secondary];\r\n};\r\n\r\nconst getLength = (inlineEditingUniqueId: any, handlers: any, actions: RowActionHandler<any>[] | undefined): number => {\r\n    const [primaryActions, secondaryActions] = getActions(actions);\r\n\r\n    let length = primaryActions.length + (secondaryActions.length ? 1 : 0);\r\n\r\n    if (handlers.onRowCreate) {\r\n        length++;\r\n    }\r\n\r\n    if (handlers.onRowCopy) {\r\n        length++;\r\n    }\r\n\r\n    if (handlers.onRowDelete) {\r\n        length++;\r\n    }\r\n\r\n    if (!!inlineEditingUniqueId || handlers.onRowEdit) {\r\n        length++;\r\n\r\n        if (length < 2) {\r\n            length++;\r\n        }\r\n    }\r\n\r\n    return length;\r\n};\r\n\r\nconst getActionProps = (action: RowAction<any>, row: TableRow<any>) => {\r\n    return {\r\n        'aria-label': typeof action.tooltip === 'function' ? action.tooltip(row) : action.tooltip,\r\n        disabled: typeof action.disabled === 'function' ? action.disabled(row) : action.disabled,\r\n        onClick: (event: React.MouseEvent<HTMLElement>) => {\r\n            action.onClick(row, event);\r\n        },\r\n    };\r\n};\r\n\r\nconst EditModeActions = () => {\r\n    React.useEffect(() => {\r\n        const listener = (event: any) => {\r\n            if (event.keyCode === keycode('escape') && event.target?.form?.reset) {\r\n                event.preventDefault();\r\n                event.target.form.reset();\r\n            }\r\n        };\r\n\r\n        document.addEventListener('keydown', listener);\r\n\r\n        return () => {\r\n            document.removeEventListener('keydown', listener);\r\n        };\r\n    }, []);\r\n\r\n    return (\r\n        <div className={actionGroupClassName}>\r\n            <IconButton appearance=\"primary\" icon=\"tick\" type=\"submit\" className=\"mr-2\" />\r\n            <IconButton appearance=\"ghost\" icon=\"close\" type=\"reset\" />\r\n        </div>\r\n    );\r\n};\r\n\r\nexport const useRowActions = <T extends {}>(\r\n    inlineEditingUniqueId: keyof T | undefined,\r\n    handlers: any,\r\n    actions: RowActionHandler<T>[] | undefined,\r\n    rowExpansionRenderer: any,\r\n    texts: LocalizationTexts,\r\n    windowed = false\r\n): PluginHook<{}> => {\r\n    const inlineEditing = !!inlineEditingUniqueId;\r\n    const actionsLength = getLength(inlineEditingUniqueId, handlers, actions);\r\n\r\n    const plugin = (hooks: any): void => {\r\n        if (hasActions(inlineEditingUniqueId, handlers, actions)) {\r\n            hooks.visibleColumns.push((columns: any) => [\r\n                ...columns,\r\n                {\r\n                    id: '_actions',\r\n                    className: 'flex justify-end px-1 overflow-visible',\r\n                    flex: `0 0 calc((${actionsLength} * 2rem) + .5rem)`,\r\n                    Cell: ({ row }: any) => {\r\n                        if (row.isEditing) {\r\n                            return <EditModeActions />;\r\n                        }\r\n\r\n                        const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);\r\n                        const [primaryActions, secondaryActions] = getActions(actions, sanitizedRow);\r\n\r\n                        const output = (\r\n                            <>\r\n                                {handlers.onRowCreate && (\r\n                                    <IconButton\r\n                                        appearance=\"discrete\"\r\n                                        icon=\"circle-plus\"\r\n                                        aria-label={texts.table.newSubRow}\r\n                                        tooltip={texts.table.newSubRow}\r\n                                        disabled={inlineEditing && !row.canEdit}\r\n                                        onClick={(event: React.MouseEvent) => {\r\n                                            event.stopPropagation();\r\n                                            event.persist();\r\n                                            row.setActive();\r\n\r\n                                            if (!row.isExpanded) {\r\n                                                row.toggleRowExpanded();\r\n                                            }\r\n\r\n                                            handlers.onRowCreate(sanitizedRow, event);\r\n                                        }}\r\n                                    />\r\n                                )}\r\n                                {(inlineEditing || handlers.onRowEdit) && (\r\n                                    <IconButton\r\n                                        appearance=\"discrete\"\r\n                                        icon=\"edit\"\r\n                                        aria-label={texts.table.edit}\r\n                                        tooltip={texts.table.edit}\r\n                                        disabled={inlineEditing && !row.canEdit}\r\n                                        onClick={(event: React.MouseEvent) => {\r\n                                            event.stopPropagation();\r\n                                            row.setActive();\r\n\r\n                                            if (inlineEditing) {\r\n                                                row.toggleRowEditing();\r\n                                            } else if (handlers.onRowEdit) {\r\n                                                event.persist();\r\n                                                handlers.onRowEdit(sanitizedRow, event);\r\n                                            }\r\n                                        }}\r\n                                    />\r\n                                )}\r\n                                {handlers.onRowCopy && (\r\n                                    <IconButton\r\n                                        appearance=\"discrete\"\r\n                                        icon=\"copy\"\r\n                                        aria-label={texts.table.copy}\r\n                                        tooltip={texts.table.copy}\r\n                                        disabled={inlineEditing && !row.canEdit}\r\n                                        onClick={(event: React.MouseEvent) => {\r\n                                            event.stopPropagation();\r\n                                            event.persist();\r\n                                            row.setActive();\r\n                                            handlers.onRowCopy(sanitizedRow, event);\r\n                                        }}\r\n                                    />\r\n                                )}\r\n                                {handlers.onRowDelete && (\r\n                                    <IconButton\r\n                                        appearance=\"discrete\"\r\n                                        icon=\"delete\"\r\n                                        aria-label={texts.table.del}\r\n                                        tooltip={texts.table.del}\r\n                                        disabled={inlineEditing && !row.canEdit}\r\n                                        onClick={(event: React.MouseEvent) => {\r\n                                            event.stopPropagation();\r\n                                            event.persist();\r\n                                            row.setActive();\r\n                                            handlers.onRowDelete(sanitizedRow, event);\r\n                                        }}\r\n                                    />\r\n                                )}\r\n                                {primaryActions.map((action: RowAction<T>, index: number) => (\r\n                                    <IconButton\r\n                                        {...getActionProps(action, sanitizedRow)}\r\n                                        key={index}\r\n                                        appearance=\"discrete\"\r\n                                        icon={typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon}\r\n                                        tooltip={\r\n                                            typeof action.tooltip === 'function' ? action.tooltip(sanitizedRow) : action.tooltip\r\n                                        }\r\n                                    />\r\n                                ))}\r\n                                {secondaryActions.length ? (\r\n                                    <Menu>\r\n                                        <Menu.Trigger>\r\n                                            <IconButton\r\n                                                appearance=\"discrete\"\r\n                                                icon=\"ellipsis-vertical\"\r\n                                                aria-label={texts.table.actions}\r\n                                                tooltip={texts.table.actions}\r\n                                                disabled={inlineEditing && !row.canEdit}\r\n                                                onClick={(event: React.MouseEvent) => {\r\n                                                    event.stopPropagation();\r\n                                                    row.setActive();\r\n                                                }}\r\n                                            />\r\n                                        </Menu.Trigger>\r\n                                        <Menu.Content>\r\n                                            {secondaryActions.map((action: RowAction<T>, index: number) => (\r\n                                                <Menu.Item\r\n                                                    key={index}\r\n                                                    icon={\r\n                                                        typeof action.icon === 'function'\r\n                                                            ? action.icon(sanitizedRow)\r\n                                                            : action.icon\r\n                                                    }\r\n                                                    {...getActionProps(action, sanitizedRow)}\r\n                                                >\r\n                                                    {typeof action.text === 'function' ? action.text(sanitizedRow) : action.text}\r\n                                                </Menu.Item>\r\n                                            ))}\r\n                                        </Menu.Content>\r\n                                    </Menu>\r\n                                ) : null}\r\n                            </>\r\n                        );\r\n\r\n                        if (windowed) {\r\n                            return <div className={actionGroupClassName}>{output}</div>;\r\n                        }\r\n\r\n                        return (\r\n                            <InView rootMargin=\"100px 0px\">\r\n                                {({ inView, ref }) => (\r\n                                    <div className={actionGroupClassName} ref={ref}>\r\n                                        {inView ? output : null}\r\n                                    </div>\r\n                                )}\r\n                            </InView>\r\n                        );\r\n                    },\r\n                },\r\n            ]);\r\n        }\r\n    };\r\n    plugin.pluginName = 'useRowActions';\r\n    return plugin;\r\n};\r\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","keyCode","keycode","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","key","Menu","Trigger","Content","Item","text","InView","rootMargin","inView","ref","pluginName"],"mappings":"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"}

package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js

@@ -0,0 +1,129 @@
+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: () => 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

package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowDraggable.js","sources":["../../../../../../src/components/Table/hooks/plugins/useRowDraggable.tsx"],"sourcesContent":["import React from 'react';\r\nimport { actions, PluginHook } from 'react-table';\r\nimport { Icon } from '../../../Icon/Icon';\r\nimport { RowDragHandler } from '../../types';\r\nimport { sanitizeRowProps } from '../../util';\r\n\r\nconst pluginName = 'useRowDraggable';\r\n\r\nactions.resetRowDragging = 'resetRowDragging';\r\nactions.toggleRowDragging = 'toggleRowDragging';\r\n\r\nfunction reducer(state: any, action: any): object {\r\n    if (action.type === actions.init) {\r\n        return {\r\n            draggingRowIndexPath: null,\r\n            ...state,\r\n        };\r\n    }\r\n\r\n    if (action.type === actions.resetRowDragging) {\r\n        return {\r\n            ...state,\r\n            draggingRowIndexPath: null,\r\n        };\r\n    }\r\n\r\n    if (action.type === actions.toggleRowDragging) {\r\n        const { indexPath } = action;\r\n        return {\r\n            ...state,\r\n            draggingRowIndexPath: indexPath,\r\n        };\r\n    }\r\n\r\n    return state;\r\n}\r\n\r\nconst prepareRow = (row: any, { instance }: any): void => {\r\n    row.toggleRowDragging = () => {\r\n        if (instance.state.draggingRowIndexPath === row.id) {\r\n            instance.dispatch({ type: actions.resetRowDragging });\r\n        } else {\r\n            instance.dispatch({ type: actions.toggleRowDragging, indexPath: row.id });\r\n        }\r\n    };\r\n\r\n    if (instance.state.draggingRowIndexPath) {\r\n        row.isDragging = instance.state.draggingRowIndexPath === row.id || !!instance.state.selectedRowIds?.[row.id];\r\n    } else {\r\n        row.isDragging = false;\r\n    }\r\n};\r\n\r\nconst visibleColumns = (columns: any) => {\r\n    return [\r\n        {\r\n            id: 'draggable',\r\n            className: 'yt-table__cell--draggable flex-col px-0',\r\n            Cell: () => <Icon name=\"drag\" className=\"text-grey-darkest invisible w-[20px] cursor-grab\" />,\r\n            flex: '0 0 20px',\r\n        },\r\n        ...columns,\r\n    ];\r\n};\r\n\r\nconst getRowProps =\r\n    (onRowDrag: RowDragHandler<any>) =>\r\n    (props: any, { instance, row }: any) => {\r\n        const onDragStart = (event: React.DragEvent): void => {\r\n            event.persist();\r\n            row.toggleRowDragging();\r\n\r\n            const indexPaths = [row.id, ...Object.keys(instance.state.selectedRowIds)];\r\n            const data = instance.rows.filter((r: any) => indexPaths.includes(r.id)).map(sanitizeRowProps);\r\n\r\n            const showPlaceholder = (placeholder: string) => {\r\n                const element = window.document.createElement('div');\r\n                element.id = 'yt-table__drag__placeholder';\r\n                element.innerText = placeholder;\r\n                window.document.body.appendChild(element);\r\n\r\n                if (typeof DataTransfer.prototype.setDragImage === 'function') {\r\n                    event.dataTransfer.setDragImage(element, 0, 20);\r\n                }\r\n            };\r\n\r\n            onRowDrag(data, showPlaceholder, event);\r\n        };\r\n\r\n        const onDragEnd = (): void => {\r\n            const element: HTMLElement | null = document.getElementById('yt-table__drag__placeholder');\r\n\r\n            if (element && element.parentNode) {\r\n                element.parentNode.removeChild(element);\r\n            }\r\n\r\n            row.toggleRowDragging();\r\n        };\r\n\r\n        return [\r\n            props,\r\n            {\r\n                draggable: true,\r\n                onDragStart,\r\n                onDragEnd,\r\n            },\r\n        ];\r\n    };\r\n\r\nexport const useRowDraggable = (onRowDrag: RowDragHandler<any> | undefined): PluginHook<{}> => {\r\n    const plugin = (hooks: any): void => {\r\n        if (onRowDrag) {\r\n            hooks.stateReducers.push(reducer);\r\n            hooks.prepareRow.push(prepareRow);\r\n            hooks.visibleColumns.push(visibleColumns);\r\n            hooks.getRowProps.push(getRowProps(onRowDrag));\r\n        }\r\n    };\r\n    plugin.pluginName = pluginName;\r\n\r\n    return plugin;\r\n};\r\n"],"names":["pluginName","actions","resetRowDragging","toggleRowDragging","reducer","state","action","type","init","draggingRowIndexPath","indexPath","prepareRow","row","instance","id","dispatch","isDragging","selectedRowIds","visibleColumns","columns","className","Cell","React","Icon","name","flex","getRowProps","onRowDrag","props","onDragStart","event","persist","indexPaths","Object","keys","data","rows","filter","r","includes","map","sanitizeRowProps","showPlaceholder","placeholder","element","window","document","createElement","innerText","body","appendChild","DataTransfer","prototype","setDragImage","dataTransfer","onDragEnd","getElementById","parentNode","removeChild","draggable","useRowDraggable","plugin","hooks","stateReducers","push"],"mappings":"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"}

package/dist/esm/components/Table/hooks/plugins/useRowEditing.js

@@ -0,0 +1,100 @@
+import React__default from 'react';
+import { actions } from 'react-table';
+
+const pluginName = 'useRowEditing';
+actions.resetRowEditing = 'resetRowEditing';
+actions.toggleRowEditing = 'toggleRowEditing';
+actions.toggleEditing = 'toggleEditing';
+
+function reducer(state, action) {
+  if (action.type === actions.init) {
+    return {
+      allowEditing: true,
+      editingRowUniqueId: null,
+      ...state
+    };
+  }
+
+  if (action.type === actions.resetRowEditing || action.type === actions.resetPage || action.type === actions.gotoPage) {
+    return { ...state,
+      editingRowUniqueId: null
+    };
+  }
+
+  if (action.type === actions.toggleRowEditing) {
+    const {
+      id
+    } = action;
+    return { ...state,
+      editingRowUniqueId: id
+    };
+  }
+
+  if (action.type === actions.toggleEditing) {
+    return { ...state,
+      allowEditing: !state.allowEditing
+    };
+  }
+
+  return state;
+}
+
+function useInstance(instance) {
+  const {
+    dispatch
+  } = instance;
+  const resetRowEditing = React__default.useCallback(() => {
+    dispatch({
+      type: actions.resetRowEditing
+    });
+  }, [dispatch]);
+  const toggleRowEditing = React__default.useCallback(id => {
+    dispatch({
+      type: actions.toggleRowEditing,
+      id
+    });
+  }, [dispatch]);
+  const toggleEditing = React__default.useCallback(() => {
+    dispatch({
+      type: actions.toggleEditing
+    });
+  }, [dispatch]);
+  Object.assign(instance, {
+    resetRowEditing,
+    toggleRowEditing,
+    toggleEditing
+  });
+}
+
+const prepareRow = uniqueId => (row, {
+  instance
+}) => {
+  const id = row.original[uniqueId];
+
+  row.toggleRowEditing = () => {
+    if (instance.state.editingRowUniqueId === id) {
+      instance.resetRowEditing();
+    } else {
+      instance.toggleRowEditing(id);
+    }
+  };
+
+  row.isEditing = row.original._createKey ? instance.state.editingRowUniqueId === row.original._createKey : instance.state.editingRowUniqueId === id;
+  row.canEdit = instance.state.allowEditing && (row.isEditing || !instance.state.editingRowUniqueId);
+};
+
+const useRowEditing = uniqueId => {
+  const plugin = hooks => {
+    if (uniqueId) {
+      hooks.stateReducers.push(reducer);
+      hooks.useInstance.push(useInstance);
+      hooks.prepareRow.push(prepareRow(uniqueId));
+    }
+  };
+
+  plugin.pluginName = pluginName;
+  return plugin;
+};
+
+export { useRowEditing };
+//# sourceMappingURL=useRowEditing.js.map

package/dist/esm/components/Table/hooks/plugins/useRowEditing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowEditing.js","sources":["../../../../../../src/components/Table/hooks/plugins/useRowEditing.tsx"],"sourcesContent":["import React from 'react';\r\nimport { actions, PluginHook } from 'react-table';\r\n\r\nconst pluginName = 'useRowEditing';\r\n\r\nactions.resetRowEditing = 'resetRowEditing';\r\nactions.toggleRowEditing = 'toggleRowEditing';\r\nactions.toggleEditing = 'toggleEditing';\r\n\r\nfunction reducer(state: any, action: any): object {\r\n    if (action.type === actions.init) {\r\n        return {\r\n            allowEditing: true,\r\n            editingRowUniqueId: null,\r\n            ...state,\r\n        };\r\n    }\r\n\r\n    if (action.type === actions.resetRowEditing || action.type === actions.resetPage || action.type === actions.gotoPage) {\r\n        return {\r\n            ...state,\r\n            editingRowUniqueId: null,\r\n        };\r\n    }\r\n\r\n    if (action.type === actions.toggleRowEditing) {\r\n        const { id } = action;\r\n        return {\r\n            ...state,\r\n            editingRowUniqueId: id,\r\n        };\r\n    }\r\n\r\n    if (action.type === actions.toggleEditing) {\r\n        return {\r\n            ...state,\r\n            allowEditing: !state.allowEditing,\r\n        };\r\n    }\r\n\r\n    return state;\r\n}\r\n\r\nfunction useInstance(instance: any): void {\r\n    const { dispatch } = instance;\r\n\r\n    const resetRowEditing = React.useCallback(() => {\r\n        dispatch({ type: actions.resetRowEditing });\r\n    }, [dispatch]);\r\n\r\n    const toggleRowEditing = React.useCallback(\r\n        id => {\r\n            dispatch({ type: actions.toggleRowEditing, id });\r\n        },\r\n        [dispatch]\r\n    );\r\n\r\n    const toggleEditing = React.useCallback(() => {\r\n        dispatch({ type: actions.toggleEditing });\r\n    }, [dispatch]);\r\n\r\n    Object.assign(instance, {\r\n        resetRowEditing,\r\n        toggleRowEditing,\r\n        toggleEditing,\r\n    });\r\n}\r\n\r\nconst prepareRow =\r\n    <T extends {}>(uniqueId: keyof T) =>\r\n    (row: any, { instance }: any): void => {\r\n        const id = row.original[uniqueId];\r\n\r\n        row.toggleRowEditing = () => {\r\n            if (instance.state.editingRowUniqueId === id) {\r\n                instance.resetRowEditing();\r\n            } else {\r\n                instance.toggleRowEditing(id);\r\n            }\r\n        };\r\n\r\n        row.isEditing = row.original._createKey\r\n            ? instance.state.editingRowUniqueId === row.original._createKey\r\n            : instance.state.editingRowUniqueId === id;\r\n        row.canEdit = instance.state.allowEditing && (row.isEditing || !instance.state.editingRowUniqueId);\r\n    };\r\n\r\nexport const useRowEditing = <T extends {}>(uniqueId: keyof T | undefined): PluginHook<{}> => {\r\n    const plugin = (hooks: any): void => {\r\n        if (uniqueId) {\r\n            hooks.stateReducers.push(reducer);\r\n            hooks.useInstance.push(useInstance);\r\n            hooks.prepareRow.push(prepareRow<T>(uniqueId));\r\n        }\r\n    };\r\n    plugin.pluginName = pluginName;\r\n\r\n    return plugin;\r\n};\r\n"],"names":["pluginName","actions","resetRowEditing","toggleRowEditing","toggleEditing","reducer","state","action","type","init","allowEditing","editingRowUniqueId","resetPage","gotoPage","id","useInstance","instance","dispatch","React","useCallback","Object","assign","prepareRow","uniqueId","row","original","isEditing","_createKey","canEdit","useRowEditing","plugin","hooks","stateReducers","push"],"mappings":"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"}

package/dist/esm/components/Table/hooks/plugins/useRowSelect.js

@@ -0,0 +1,108 @@
+import React__default from 'react';
+import { Checkbox } from '../../../Checkbox/Checkbox.js';
+import { useRowSelect as useRowSelect$1 } from 'react-table';
+
+// this wraps react-table's internal useRowSelect hook
+
+const toggleBetween = (fromRowIndex, toRowIndex) => {
+  const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;
+  const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;
+  return [fromIndex, toIndex];
+}; // react-table calls "index paths" row ids. we named them indexPaths to reduce confusion with natural ids
+// the selection hook usess react-table's row selection, so this hok references row.id - it is the index path
+
+
+const useRowSelect = onSelectedRows => {
+  const plugin = hooks => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useRowSelect$1(hooks);
+
+    if (onSelectedRows) {
+      const toggleRowSelected = (indexPath, checked) => onSelectedRows(state => {
+        const nextState = { ...state
+        };
+
+        if (checked) {
+          nextState[indexPath] = true;
+        } else {
+          delete nextState[indexPath];
+        }
+
+        return nextState;
+      });
+
+      const prepareRow = row => {
+        row.toggleRowSelected = () => toggleRowSelected(row.id, !row.isSelected);
+      };
+
+      hooks.prepareRow.push(prepareRow); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+      const lastSelectedSortedIndex = React__default.useRef();
+      hooks.visibleColumns.push(columns => [{
+        id: 'selection',
+        Header: ({
+          getToggleAllRowsSelectedProps,
+          rows
+        }) => {
+          const {
+            onChange: _,
+            ...props
+          } = getToggleAllRowsSelectedProps();
+
+          const onChange = checked => {
+            if (checked) {
+              // this intentionally only selects top level rows - sub rows add too much complexity
+              onSelectedRows(Object.assign({}, Array(rows.length).fill(true)));
+            } else {
+              onSelectedRows({});
+            }
+          };
+
+          return React__default.createElement(Checkbox, Object.assign({}, props, {
+            onChange: onChange
+          }));
+        },
+        Cell: ({
+          row,
+          rows
+        }) => {
+          const {
+            onChange: _,
+            ...props
+          } = row.getToggleRowSelectedProps(); // row.index refers to the index in the original data, not the current index
+
+          const sortedIndex = rows.findIndex(r => r.index === row.index);
+
+          const onClick = event => {
+            if (event.shiftKey) {
+              const [fromIndex, toIndex] = toggleBetween(lastSelectedSortedIndex.current || 0, sortedIndex);
+
+              for (let i = fromIndex; i <= toIndex; i++) {
+                toggleRowSelected(rows[i].id, true);
+              }
+            } else {
+              toggleRowSelected(row.id, !props.checked);
+            }
+
+            lastSelectedSortedIndex.current = sortedIndex;
+          };
+
+          return React__default.createElement(Checkbox, Object.assign({}, props, {
+            className: "mt-2.5",
+            onClick: onClick,
+            // this is necessary to remove console spam from eslint
+            onChange: () => false
+          }));
+        },
+        flex: '0 0 36px',
+        className: 'flex-col justify-start !py-0'
+      }, ...columns]);
+    }
+  };
+
+  plugin.pluginName = 'useRowSelect';
+  return plugin;
+};
+
+export { useRowSelect };
+//# sourceMappingURL=useRowSelect.js.map

package/dist/esm/components/Table/hooks/plugins/useRowSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowSelect.js","sources":["../../../../../../src/components/Table/hooks/plugins/useRowSelect.tsx"],"sourcesContent":["// this wraps react-table's internal useRowSelect hook\r\nimport React from 'react';\r\nimport { useRowSelect as useBaseRowSelect, Row, PluginHook } from 'react-table';\r\nimport { Checkbox } from '../../../Checkbox/Checkbox';\r\nimport { SelectedRowsHandler } from '../../types';\r\n\r\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\r\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\r\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\r\n\r\n    return [fromIndex, toIndex];\r\n};\r\n\r\n// react-table calls \"index paths\" row ids. we named them indexPaths to reduce confusion with natural ids\r\n// the selection hook usess react-table's row selection, so this hok references row.id - it is the index path\r\n\r\nexport const useRowSelect = (onSelectedRows: SelectedRowsHandler | undefined): PluginHook<{}> => {\r\n    const plugin = (hooks: any): void => {\r\n        // eslint-disable-next-line react-hooks/rules-of-hooks\r\n        useBaseRowSelect(hooks);\r\n\r\n        if (onSelectedRows) {\r\n            const toggleRowSelected = (indexPath: string, checked: boolean): void =>\r\n                onSelectedRows(state => {\r\n                    const nextState = { ...state };\r\n\r\n                    if (checked) {\r\n                        nextState[indexPath] = true;\r\n                    } else {\r\n                        delete nextState[indexPath];\r\n                    }\r\n\r\n                    return nextState;\r\n                });\r\n\r\n            const prepareRow = (row: any) => {\r\n                row.toggleRowSelected = () => toggleRowSelected(row.id, !row.isSelected);\r\n            };\r\n\r\n            hooks.prepareRow.push(prepareRow);\r\n\r\n            // eslint-disable-next-line react-hooks/rules-of-hooks\r\n            const lastSelectedSortedIndex = React.useRef();\r\n\r\n            hooks.visibleColumns.push((columns: any) => [\r\n                {\r\n                    id: 'selection',\r\n                    Header: ({ getToggleAllRowsSelectedProps, rows }: any) => {\r\n                        const { onChange: _, ...props } = getToggleAllRowsSelectedProps();\r\n\r\n                        const onChange = (checked): void => {\r\n                            if (checked) {\r\n                                // this intentionally only selects top level rows - sub rows add too much complexity\r\n                                onSelectedRows(Object.assign({}, Array(rows.length).fill(true)));\r\n                            } else {\r\n                                onSelectedRows({});\r\n                            }\r\n                        };\r\n\r\n                        return <Checkbox {...props} onChange={onChange} />;\r\n                    },\r\n                    Cell: ({ row, rows }: any) => {\r\n                        const { onChange: _, ...props } = row.getToggleRowSelectedProps();\r\n                        // row.index refers to the index in the original data, not the current index\r\n                        const sortedIndex = rows.findIndex((r: Row) => r.index === row.index);\r\n\r\n                        const onClick = (event: React.MouseEvent): void => {\r\n                            if (event.shiftKey) {\r\n                                const [fromIndex, toIndex] = toggleBetween(lastSelectedSortedIndex.current || 0, sortedIndex);\r\n\r\n                                for (let i = fromIndex; i <= toIndex; i++) {\r\n                                    toggleRowSelected(rows[i].id, true);\r\n                                }\r\n                            } else {\r\n                                toggleRowSelected(row.id, !props.checked);\r\n                            }\r\n\r\n                            lastSelectedSortedIndex.current = sortedIndex;\r\n                        };\r\n\r\n                        return (\r\n                            <Checkbox\r\n                                {...props}\r\n                                className=\"mt-2.5\"\r\n                                onClick={onClick}\r\n                                // this is necessary to remove console spam from eslint\r\n                                onChange={() => false}\r\n                            />\r\n                        );\r\n                    },\r\n                    flex: '0 0 36px',\r\n                    className: 'flex-col justify-start !py-0',\r\n                },\r\n                ...columns,\r\n            ]);\r\n        }\r\n    };\r\n    plugin.pluginName = 'useRowSelect';\r\n    return plugin;\r\n};\r\n"],"names":["toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","useRowSelect","onSelectedRows","plugin","hooks","useBaseRowSelect","toggleRowSelected","indexPath","checked","state","nextState","prepareRow","row","id","isSelected","push","lastSelectedSortedIndex","React","useRef","visibleColumns","columns","Header","getToggleAllRowsSelectedProps","rows","onChange","_","props","Object","assign","Array","length","fill","Checkbox","Cell","getToggleRowSelectedProps","sortedIndex","findIndex","r","index","onClick","event","shiftKey","current","i","className","flex","pluginName"],"mappings":"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"}

package/dist/esm/components/Table/hooks/useRowCreation.js

@@ -0,0 +1,106 @@
+import React__default from 'react';
+import { v4 } from 'uuid';
+import set from 'lodash-es/set';
+import { convertRowIndexPathToNumberArray, getByRowIndexPath, getParentRowIndexPath } from '../util/rowIndexPath.js';
+import unset from 'lodash-es/unset';
+import get from 'lodash-es/get';
+import compact from 'lodash-es/compact';
+import pullAt from 'lodash-es/pullAt';
+
+const insertChildTableRow = (data, rowIndexPath = undefined, values = {}) => {
+  const nexTRow = JSON.parse(JSON.stringify(data));
+  let childRowIndexPath;
+
+  if (rowIndexPath) {
+    var _currentRow$subRows;
+
+    const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);
+    const currentRow = getByRowIndexPath(nexTRow, rowIndexes.join('.'));
+    const nextSubRows = (_currentRow$subRows = currentRow === null || currentRow === void 0 ? void 0 : currentRow.subRows) !== null && _currentRow$subRows !== void 0 ? _currentRow$subRows : [];
+    const path = rowIndexes.map(i => `[${i}]`).join('.subRows') + '.subRows';
+    nextSubRows.unshift(values);
+    set(nexTRow, path, nextSubRows); // rebuild the new id
+
+    rowIndexes.push(0);
+    childRowIndexPath = rowIndexes.join('.');
+  } else {
+    nexTRow.unshift(values);
+    childRowIndexPath = '0';
+  }
+
+  return [nexTRow, childRowIndexPath];
+};
+const removeChildTableRow = (data, rowIndexPath) => {
+  const nexTRow = JSON.parse(JSON.stringify(data));
+  const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);
+  const rootIndex = Number(rowIndexes.shift());
+
+  if (rowIndexes.length) {
+    // unset
+    const unsetPath = rowIndexes.map(index => `subRows[${index}]`).join('.');
+    unset(nexTRow[rootIndex], unsetPath); // remove empty value from subRows
+
+    rowIndexes.pop();
+    const setPath = rowIndexes.length ? rowIndexes.map(index => `subRows[${index}]`).join('.') + '.subRows' : 'subRows';
+    set(nexTRow[rootIndex], setPath, compact(get(nexTRow[rootIndex], setPath)));
+  } else {
+    pullAt(nexTRow, rootIndex);
+  }
+
+  return nexTRow;
+};
+const useTableRowCreation = (data, tableRef) => {
+  const [internalData, setInternalData] = React__default.useState(JSON.parse(JSON.stringify(data)));
+  const [activeRowIndexPath, setActiveRowIndexPath] = React__default.useState(undefined);
+  React__default.useEffect(() => {
+    if (activeRowIndexPath !== undefined) {
+      // keep the same edit key, so that we don't remount the row/form
+      const currentRow = getByRowIndexPath(internalData, activeRowIndexPath); // get the active creation rows parent
+
+      const parentId = getParentRowIndexPath(activeRowIndexPath); // insert a new empty row in the external data (with the same key)
+
+      const [nexTRow, newRowIndexPath] = insertChildTableRow(JSON.parse(JSON.stringify(data)), parentId, currentRow); // update and set that row as active, we basically just changed it's position in our internal data
+
+      setActiveRowIndexPath(newRowIndexPath);
+      setInternalData(nexTRow);
+
+      if (tableRef !== null && tableRef !== void 0 && tableRef.current) {
+        tableRef.current.instance.toggleRowEditing(currentRow === null || currentRow === void 0 ? void 0 : currentRow._createKey);
+      }
+    } else {
+      setInternalData(data);
+    }
+  }, [JSON.stringify(data)]);
+
+  const create = (rowIndexPath = undefined, values = {}) => {
+    const _createKey = v4();
+
+    const [nexTRow, newRowIndexPath] = insertChildTableRow(internalData, rowIndexPath, { ...values,
+      _createKey
+    });
+    setActiveRowIndexPath(newRowIndexPath);
+    setInternalData(nexTRow);
+
+    if (tableRef !== null && tableRef !== void 0 && tableRef.current) {
+      tableRef.current.instance.toggleRowEditing(_createKey);
+    }
+
+    return newRowIndexPath;
+  };
+
+  const remove = rowIndexPath => {
+    const nexTRow = removeChildTableRow(internalData, rowIndexPath);
+    setInternalData(nexTRow);
+    setActiveRowIndexPath(undefined);
+  };
+
+  return {
+    data: internalData,
+    create,
+    remove,
+    isCreating: activeRowIndexPath !== undefined
+  };
+};
+
+export { insertChildTableRow, removeChildTableRow, useTableRowCreation };
+//# sourceMappingURL=useRowCreation.js.map

package/dist/esm/components/Table/hooks/useRowCreation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowCreation.js","sources":["../../../../../src/components/Table/hooks/useRowCreation.tsx"],"sourcesContent":["import React from 'react';\r\nimport { v4 as uuid } from 'uuid';\r\nimport set from 'lodash/set';\r\nimport unset from 'lodash/unset';\r\nimport get from 'lodash/get';\r\nimport compact from 'lodash/compact';\r\nimport pullAt from 'lodash/pullAt';\r\n\r\nimport { convertRowIndexPathToNumberArray, getByRowIndexPath, getParentRowIndexPath } from '../util/rowIndexPath';\r\nimport { Row, RowIndexPath, TableRef } from '../types';\r\n\r\nexport const insertChildTableRow = <TRow,>(\r\n    data: Row<TRow>[],\r\n    rowIndexPath: RowIndexPath = undefined,\r\n    values: any = {}\r\n): [Row<TRow>[], RowIndexPath] => {\r\n    const nexTRow: Row<TRow>[] = JSON.parse(JSON.stringify(data));\r\n\r\n    let childRowIndexPath;\r\n\r\n    if (rowIndexPath) {\r\n        const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);\r\n        const currentRow = getByRowIndexPath(nexTRow, rowIndexes.join('.'));\r\n        const nextSubRows = currentRow?.subRows ?? [];\r\n\r\n        const path = rowIndexes.map(i => `[${i}]`).join('.subRows') + '.subRows';\r\n        nextSubRows.unshift(values);\r\n        set(nexTRow, path, nextSubRows);\r\n\r\n        // rebuild the new id\r\n        rowIndexes.push(0);\r\n        childRowIndexPath = rowIndexes.join('.');\r\n    } else {\r\n        nexTRow.unshift(values);\r\n        childRowIndexPath = '0';\r\n    }\r\n\r\n    return [nexTRow, childRowIndexPath];\r\n};\r\n\r\nexport const removeChildTableRow = <TRow,>(data: Row<TRow>[], rowIndexPath: RowIndexPath): Row<TRow>[] => {\r\n    const nexTRow = JSON.parse(JSON.stringify(data));\r\n\r\n    const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);\r\n    const rootIndex = Number(rowIndexes.shift());\r\n\r\n    if (rowIndexes.length) {\r\n        // unset\r\n        const unsetPath = rowIndexes.map(index => `subRows[${index}]`).join('.');\r\n        unset(nexTRow[rootIndex], unsetPath);\r\n\r\n        // remove empty value from subRows\r\n        rowIndexes.pop();\r\n        const setPath = rowIndexes.length ? rowIndexes.map(index => `subRows[${index}]`).join('.') + '.subRows' : 'subRows';\r\n        set(nexTRow[rootIndex], setPath, compact(get(nexTRow[rootIndex], setPath)));\r\n    } else {\r\n        pullAt(nexTRow, rootIndex);\r\n    }\r\n\r\n    return nexTRow;\r\n};\r\n\r\nexport type useTableRowCreation<TRow> = {\r\n    data: Row<TRow>[];\r\n    create: (rowIndexPath: RowIndexPath, values?: object | undefined) => RowIndexPath;\r\n    remove: (rowIndexPath: RowIndexPath) => void;\r\n    isCreating: boolean;\r\n};\r\n\r\nexport const useTableRowCreation = <TRow,>(data: Row<TRow>[], tableRef: React.RefObject<TableRef>): useTableRowCreation<TRow> => {\r\n    const [internalData, setInternalData] = React.useState(JSON.parse(JSON.stringify(data)));\r\n    const [activeRowIndexPath, setActiveRowIndexPath] = React.useState<string | undefined>(undefined);\r\n\r\n    React.useEffect(() => {\r\n        if (activeRowIndexPath !== undefined) {\r\n            // keep the same edit key, so that we don't remount the row/form\r\n            const currentRow: any = getByRowIndexPath(internalData, activeRowIndexPath);\r\n\r\n            // get the active creation rows parent\r\n            const parentId = getParentRowIndexPath(activeRowIndexPath);\r\n\r\n            // insert a new empty row in the external data (with the same key)\r\n            const [nexTRow, newRowIndexPath] = insertChildTableRow(JSON.parse(JSON.stringify(data)), parentId, currentRow);\r\n\r\n            // update and set that row as active, we basically just changed it's position in our internal data\r\n            setActiveRowIndexPath(newRowIndexPath);\r\n            setInternalData(nexTRow);\r\n\r\n            if (tableRef?.current) {\r\n                tableRef.current.instance.toggleRowEditing(currentRow?._createKey);\r\n            }\r\n        } else {\r\n            setInternalData(data);\r\n        }\r\n    }, [JSON.stringify(data)]);\r\n\r\n    const create = (rowIndexPath: RowIndexPath = undefined, values: object | undefined = {}): RowIndexPath => {\r\n        const _createKey = uuid();\r\n        const [nexTRow, newRowIndexPath] = insertChildTableRow(internalData, rowIndexPath, { ...values, _createKey });\r\n        setActiveRowIndexPath(newRowIndexPath);\r\n        setInternalData(nexTRow);\r\n\r\n        if (tableRef?.current) {\r\n            tableRef.current.instance.toggleRowEditing(_createKey);\r\n        }\r\n\r\n        return newRowIndexPath;\r\n    };\r\n\r\n    const remove = (rowIndexPath: any): void => {\r\n        const nexTRow = removeChildTableRow(internalData, rowIndexPath);\r\n        setInternalData(nexTRow);\r\n        setActiveRowIndexPath(undefined);\r\n    };\r\n\r\n    return {\r\n        data: internalData,\r\n        create,\r\n        remove,\r\n        isCreating: activeRowIndexPath !== undefined,\r\n    };\r\n};\r\n"],"names":["insertChildTableRow","data","rowIndexPath","undefined","values","nexTRow","JSON","parse","stringify","childRowIndexPath","rowIndexes","convertRowIndexPathToNumberArray","currentRow","getByRowIndexPath","join","nextSubRows","subRows","path","map","i","unshift","set","push","removeChildTableRow","rootIndex","Number","shift","length","unsetPath","index","unset","pop","setPath","compact","get","pullAt","useTableRowCreation","tableRef","internalData","setInternalData","React","useState","activeRowIndexPath","setActiveRowIndexPath","useEffect","parentId","getParentRowIndexPath","newRowIndexPath","current","instance","toggleRowEditing","_createKey","create","uuid","remove","isCreating"],"mappings":"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"}