@economic/taco 1.1.7 → 1.1.9

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

@@ -0,0 +1,260 @@
+import React__default from 'react';
+import { IconButton } from '../../../IconButton/IconButton.js';
+import keycode from 'keycode';
+import { Menu } from '../../../Menu/Menu.js';
+import { sanitizeRowProps } from '../../util.js';
+import { InView } from 'react-intersection-observer';
+
+var actionGroupClassName = '-mt-1 -mb-1 h-8 flex';
+
+var hasActions = function hasActions(inlineEditingUniqueId, handlers, actions) {
+  return !!actions || handlers.onRowCreate || handlers.onRowCopy || handlers.onRowDelete || !!inlineEditingUniqueId || handlers.onRowEdit;
+};
+
+var getActions = function getActions(actions, row) {
+  if (row === void 0) {
+    row = undefined;
+  }
+
+  var primary = [];
+  var secondary = [];
+
+  if (actions) {
+    var visibleActions = actions.filter(function (x) {
+      return !!x;
+    });
+
+    if (row) {
+      visibleActions = visibleActions.filter(function (action) {
+        if (action.visible !== undefined) {
+          if (typeof action.visible === 'function') {
+            return action.visible(row);
+          }
+
+          return action.visible;
+        }
+
+        return true;
+      });
+    }
+
+    visibleActions.forEach(function (action) {
+      if (action.showOnRow) {
+        primary.push(action);
+      } else {
+        secondary.push(action);
+      }
+    });
+  }
+
+  return [primary, secondary];
+};
+
+var getLength = function getLength(inlineEditingUniqueId, handlers, actions) {
+  var _getActions = getActions(actions),
+      primaryActions = _getActions[0],
+      secondaryActions = _getActions[1];
+
+  var 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;
+};
+
+var getActionProps = function 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: function onClick(event) {
+      action.onClick(row, event);
+    }
+  };
+};
+
+var EditModeActions = function EditModeActions() {
+  React__default.useEffect(function () {
+    var listener = function listener(event) {
+      var _event$target, _event$target$form;
+
+      if (event.keyCode === keycode('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 function () {
+      document.removeEventListener('keydown', listener);
+    };
+  }, []);
+  return React__default.createElement("div", {
+    className: actionGroupClassName
+  }, React__default.createElement(IconButton, {
+    appearance: "primary",
+    icon: "tick",
+    type: "submit",
+    className: "mr-2"
+  }), React__default.createElement(IconButton, {
+    appearance: "ghost",
+    icon: "close",
+    type: "reset"
+  }));
+};
+
+var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, actions, rowExpansionRenderer, texts, windowed) {
+  if (windowed === void 0) {
+    windowed = false;
+  }
+
+  var inlineEditing = !!inlineEditingUniqueId;
+  var actionsLength = getLength(inlineEditingUniqueId, handlers, actions);
+
+  var plugin = function plugin(hooks) {
+    if (hasActions(inlineEditingUniqueId, handlers, actions)) {
+      hooks.visibleColumns.push(function (columns) {
+        return [].concat(columns, [{
+          id: '_actions',
+          className: 'flex justify-end px-1 overflow-visible',
+          flex: "0 0 calc((" + actionsLength + " * 2rem) + .5rem)",
+          Cell: function Cell(_ref) {
+            var row = _ref.row;
+
+            if (row.isEditing) {
+              return React__default.createElement(EditModeActions, null);
+            }
+
+            var sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);
+
+            var _getActions2 = getActions(actions, sanitizedRow),
+                primaryActions = _getActions2[0],
+                secondaryActions = _getActions2[1];
+
+            var output = React__default.createElement(React__default.Fragment, null, handlers.onRowCreate && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "circle-plus",
+              "aria-label": texts.table.newSubRow,
+              tooltip: texts.table.newSubRow,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                event.persist();
+                row.setActive();
+
+                if (!row.isExpanded) {
+                  row.toggleRowExpanded();
+                }
+
+                handlers.onRowCreate(sanitizedRow, event);
+              }
+            }), (inlineEditing || handlers.onRowEdit) && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "edit",
+              "aria-label": texts.table.edit,
+              tooltip: texts.table.edit,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                row.setActive();
+
+                if (inlineEditing) {
+                  row.toggleRowEditing();
+                } else if (handlers.onRowEdit) {
+                  event.persist();
+                  handlers.onRowEdit(sanitizedRow, event);
+                }
+              }
+            }), handlers.onRowCopy && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "copy",
+              "aria-label": texts.table.copy,
+              tooltip: texts.table.copy,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                event.persist();
+                row.setActive();
+                handlers.onRowCopy(sanitizedRow, event);
+              }
+            }), handlers.onRowDelete && React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "delete",
+              "aria-label": texts.table.del,
+              tooltip: texts.table.del,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                event.persist();
+                row.setActive();
+                handlers.onRowDelete(sanitizedRow, event);
+              }
+            }), primaryActions.map(function (action, index) {
+              return 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 ? React__default.createElement(Menu, null, React__default.createElement(Menu.Trigger, null, React__default.createElement(IconButton, {
+              appearance: "discrete",
+              icon: "ellipsis-vertical",
+              "aria-label": texts.table.actions,
+              tooltip: texts.table.actions,
+              disabled: inlineEditing && !row.canEdit,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+                row.setActive();
+              }
+            })), React__default.createElement(Menu.Content, null, secondaryActions.map(function (action, index) {
+              return 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 React__default.createElement("div", {
+                className: actionGroupClassName
+              }, output);
+            }
+
+            return React__default.createElement(InView, {
+              rootMargin: "100px 0px"
+            }, function (_ref2) {
+              var inView = _ref2.inView,
+                  ref = _ref2.ref;
+              return 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/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 keycode from 'keycode';\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);\n\n        if (row) {\n            visibleActions = visibleActions.filter((action: RowAction<any>) => {\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: RowAction<any>) => {\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.keyCode === keycode('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                                                >\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","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,133 @@
+import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Icon } from '../../../Icon/Icon.js';
+import { actions } from 'react-table';
+import { sanitizeRowProps } from '../../util.js';
+
+var pluginName = 'useRowDraggable';
+actions.resetRowDragging = 'resetRowDragging';
+actions.toggleRowDragging = 'toggleRowDragging';
+
+function reducer(state, action) {
+  if (action.type === actions.init) {
+    return _extends({
+      draggingRowIndexPath: null
+    }, state);
+  }
+
+  if (action.type === actions.resetRowDragging) {
+    return _extends({}, state, {
+      draggingRowIndexPath: null
+    });
+  }
+
+  if (action.type === actions.toggleRowDragging) {
+    var indexPath = action.indexPath;
+    return _extends({}, state, {
+      draggingRowIndexPath: indexPath
+    });
+  }
+
+  return state;
+}
+
+var prepareRow = function prepareRow(row, _ref) {
+  var instance = _ref.instance;
+
+  row.toggleRowDragging = function () {
+    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;
+  }
+};
+
+var visibleColumns = function visibleColumns(columns) {
+  return [{
+    id: 'draggable',
+    className: 'yt-table__cell--draggable flex-col px-0',
+    Cell: function Cell() {
+      return React__default.createElement(Icon, {
+        name: "drag",
+        className: "text-grey-darkest invisible w-[20px] cursor-grab"
+      });
+    },
+    flex: '0 0 20px'
+  }].concat(columns);
+};
+
+var getRowProps = function getRowProps(onRowDrag) {
+  return function (props, _ref2) {
+    var instance = _ref2.instance,
+        row = _ref2.row;
+
+    var onDragStart = function onDragStart(event) {
+      event.persist();
+      row.toggleRowDragging();
+      var indexPaths = [row.id].concat(Object.keys(instance.state.selectedRowIds));
+      var data = instance.rows.filter(function (r) {
+        return indexPaths.includes(r.id);
+      }).map(sanitizeRowProps);
+
+      var showPlaceholder = function showPlaceholder(placeholder) {
+        var 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);
+    };
+
+    var onDragEnd = function onDragEnd() {
+      var element = document.getElementById('yt-table__drag__placeholder');
+
+      if (element && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+
+      row.toggleRowDragging();
+    };
+
+    return [props, {
+      draggable: true,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd
+    }];
+  };
+};
+
+var useRowDraggable = function useRowDraggable(onRowDrag) {
+  var plugin = function 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';\nimport { actions, PluginHook } from 'react-table';\nimport { Icon } from '../../../Icon/Icon';\nimport { RowDragHandler } from '../../types';\nimport { sanitizeRowProps } from '../../util';\n\nconst pluginName = 'useRowDraggable';\n\nactions.resetRowDragging = 'resetRowDragging';\nactions.toggleRowDragging = 'toggleRowDragging';\n\nfunction reducer(state: any, action: any): object {\n    if (action.type === actions.init) {\n        return {\n            draggingRowIndexPath: null,\n            ...state,\n        };\n    }\n\n    if (action.type === actions.resetRowDragging) {\n        return {\n            ...state,\n            draggingRowIndexPath: null,\n        };\n    }\n\n    if (action.type === actions.toggleRowDragging) {\n        const { indexPath } = action;\n        return {\n            ...state,\n            draggingRowIndexPath: indexPath,\n        };\n    }\n\n    return state;\n}\n\nconst prepareRow = (row: any, { instance }: any): void => {\n    row.toggleRowDragging = () => {\n        if (instance.state.draggingRowIndexPath === row.id) {\n            instance.dispatch({ type: actions.resetRowDragging });\n        } else {\n            instance.dispatch({ type: actions.toggleRowDragging, indexPath: row.id });\n        }\n    };\n\n    if (instance.state.draggingRowIndexPath) {\n        row.isDragging = instance.state.draggingRowIndexPath === row.id || !!instance.state.selectedRowIds?.[row.id];\n    } else {\n        row.isDragging = false;\n    }\n};\n\nconst visibleColumns = (columns: any) => {\n    return [\n        {\n            id: 'draggable',\n            className: 'yt-table__cell--draggable flex-col px-0',\n            Cell: () => <Icon name=\"drag\" className=\"text-grey-darkest invisible w-[20px] cursor-grab\" />,\n            flex: '0 0 20px',\n        },\n        ...columns,\n    ];\n};\n\nconst getRowProps =\n    (onRowDrag: RowDragHandler<any>) =>\n    (props: any, { instance, row }: any) => {\n        const onDragStart = (event: React.DragEvent): void => {\n            event.persist();\n            row.toggleRowDragging();\n\n            const indexPaths = [row.id, ...Object.keys(instance.state.selectedRowIds)];\n            const data = instance.rows.filter((r: any) => indexPaths.includes(r.id)).map(sanitizeRowProps);\n\n            const showPlaceholder = (placeholder: string) => {\n                const element = window.document.createElement('div');\n                element.id = 'yt-table__drag__placeholder';\n                element.innerText = placeholder;\n                window.document.body.appendChild(element);\n\n                if (typeof DataTransfer.prototype.setDragImage === 'function') {\n                    event.dataTransfer.setDragImage(element, 0, 20);\n                }\n            };\n\n            onRowDrag(data, showPlaceholder, event);\n        };\n\n        const onDragEnd = (): void => {\n            const element: HTMLElement | null = document.getElementById('yt-table__drag__placeholder');\n\n            if (element && element.parentNode) {\n                element.parentNode.removeChild(element);\n            }\n\n            row.toggleRowDragging();\n        };\n\n        return [\n            props,\n            {\n                draggable: true,\n                onDragStart,\n                onDragEnd,\n            },\n        ];\n    };\n\nexport const useRowDraggable = (onRowDrag: RowDragHandler<any> | undefined): PluginHook<{}> => {\n    const plugin = (hooks: any): void => {\n        if (onRowDrag) {\n            hooks.stateReducers.push(reducer);\n            hooks.prepareRow.push(prepareRow);\n            hooks.visibleColumns.push(visibleColumns);\n            hooks.getRowProps.push(getRowProps(onRowDrag));\n        }\n    };\n    plugin.pluginName = pluginName;\n\n    return plugin;\n};\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,97 @@
+import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { actions } from 'react-table';
+
+var pluginName = 'useRowEditing';
+actions.resetRowEditing = 'resetRowEditing';
+actions.toggleRowEditing = 'toggleRowEditing';
+actions.toggleEditing = 'toggleEditing';
+
+function reducer(state, action) {
+  if (action.type === actions.init) {
+    return _extends({
+      allowEditing: true,
+      editingRowUniqueId: null
+    }, state);
+  }
+
+  if (action.type === actions.resetRowEditing || action.type === actions.resetPage || action.type === actions.gotoPage) {
+    return _extends({}, state, {
+      editingRowUniqueId: null
+    });
+  }
+
+  if (action.type === actions.toggleRowEditing) {
+    var id = action.id;
+    return _extends({}, state, {
+      editingRowUniqueId: id
+    });
+  }
+
+  if (action.type === actions.toggleEditing) {
+    return _extends({}, state, {
+      allowEditing: !state.allowEditing
+    });
+  }
+
+  return state;
+}
+
+function useInstance(instance) {
+  var dispatch = instance.dispatch;
+  var resetRowEditing = React__default.useCallback(function () {
+    dispatch({
+      type: actions.resetRowEditing
+    });
+  }, [dispatch]);
+  var toggleRowEditing = React__default.useCallback(function (id) {
+    dispatch({
+      type: actions.toggleRowEditing,
+      id: id
+    });
+  }, [dispatch]);
+  var toggleEditing = React__default.useCallback(function () {
+    dispatch({
+      type: actions.toggleEditing
+    });
+  }, [dispatch]);
+  Object.assign(instance, {
+    resetRowEditing: resetRowEditing,
+    toggleRowEditing: toggleRowEditing,
+    toggleEditing: toggleEditing
+  });
+}
+
+var prepareRow = function prepareRow(uniqueId) {
+  return function (row, _ref) {
+    var instance = _ref.instance;
+    var id = row.original[uniqueId];
+
+    row.toggleRowEditing = function () {
+      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);
+  };
+};
+
+var useRowEditing = function useRowEditing(uniqueId) {
+  var plugin = function 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';\nimport { actions, PluginHook } from 'react-table';\n\nconst pluginName = 'useRowEditing';\n\nactions.resetRowEditing = 'resetRowEditing';\nactions.toggleRowEditing = 'toggleRowEditing';\nactions.toggleEditing = 'toggleEditing';\n\nfunction reducer(state: any, action: any): object {\n    if (action.type === actions.init) {\n        return {\n            allowEditing: true,\n            editingRowUniqueId: null,\n            ...state,\n        };\n    }\n\n    if (action.type === actions.resetRowEditing || action.type === actions.resetPage || action.type === actions.gotoPage) {\n        return {\n            ...state,\n            editingRowUniqueId: null,\n        };\n    }\n\n    if (action.type === actions.toggleRowEditing) {\n        const { id } = action;\n        return {\n            ...state,\n            editingRowUniqueId: id,\n        };\n    }\n\n    if (action.type === actions.toggleEditing) {\n        return {\n            ...state,\n            allowEditing: !state.allowEditing,\n        };\n    }\n\n    return state;\n}\n\nfunction useInstance(instance: any): void {\n    const { dispatch } = instance;\n\n    const resetRowEditing = React.useCallback(() => {\n        dispatch({ type: actions.resetRowEditing });\n    }, [dispatch]);\n\n    const toggleRowEditing = React.useCallback(\n        id => {\n            dispatch({ type: actions.toggleRowEditing, id });\n        },\n        [dispatch]\n    );\n\n    const toggleEditing = React.useCallback(() => {\n        dispatch({ type: actions.toggleEditing });\n    }, [dispatch]);\n\n    Object.assign(instance, {\n        resetRowEditing,\n        toggleRowEditing,\n        toggleEditing,\n    });\n}\n\nconst prepareRow =\n    <T extends {}>(uniqueId: keyof T) =>\n    (row: any, { instance }: any): void => {\n        const id = row.original[uniqueId];\n\n        row.toggleRowEditing = () => {\n            if (instance.state.editingRowUniqueId === id) {\n                instance.resetRowEditing();\n            } else {\n                instance.toggleRowEditing(id);\n            }\n        };\n\n        row.isEditing = row.original._createKey\n            ? instance.state.editingRowUniqueId === row.original._createKey\n            : instance.state.editingRowUniqueId === id;\n        row.canEdit = instance.state.allowEditing && (row.isEditing || !instance.state.editingRowUniqueId);\n    };\n\nexport const useRowEditing = <T extends {}>(uniqueId: keyof T | undefined): PluginHook<{}> => {\n    const plugin = (hooks: any): void => {\n        if (uniqueId) {\n            hooks.stateReducers.push(reducer);\n            hooks.useInstance.push(useInstance);\n            hooks.prepareRow.push(prepareRow<T>(uniqueId));\n        }\n    };\n    plugin.pluginName = pluginName;\n\n    return plugin;\n};\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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"}