@commercetools-uikit/data-table-manager 19.8.0 → 19.10.0

package/dist/column-settings-manager-b08669e8.cjs.prod.js

@@ -0,0 +1,407 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _styled = require('@emotion/styled/base');
+require('prop-types');
+var _Promise = require('@babel/runtime-corejs3/core-js-stable/promise');
+var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react = require('react');
+var reactIntl = require('react-intl');
+var reactBeautifulDnd = require('react-beautiful-dnd');
+var debounce = require('debounce-promise');
+var differenceWith = require('lodash/differenceWith');
+var designSystem = require('@commercetools-uikit/design-system');
+var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
+var FieldLabel = require('@commercetools-uikit/field-label');
+var Spacings = require('@commercetools-uikit/spacings');
+var icons = require('@commercetools-uikit/icons');
+require('@commercetools-uikit/utils');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var CollapsibleMotion = require('@commercetools-uikit/collapsible-motion');
+var Card = require('@commercetools-uikit/card');
+var Text = require('@commercetools-uikit/text');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var Tag = require('@commercetools-uikit/tag');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _Promise__default = /*#__PURE__*/_interopDefault(_Promise);
+var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+var differenceWith__default = /*#__PURE__*/_interopDefault(differenceWith);
+var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
+var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
+var Card__default = /*#__PURE__*/_interopDefault(Card);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var Tag__default = /*#__PURE__*/_interopDefault(Tag);
+
+const HeaderContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e6ezr101"
+} )({
+  name: "1bhm8h2",
+  styles: "display:flex;flex:1;justify-content:space-between"
+} );
+const CardContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e6ezr100"
+} )("padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing50, ";" + ("" ));
+const SettingsContainer = props => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
+    isDefaultClosed: false,
+    children: _ref => {
+      let registerContentNode = _ref.registerContentNode,
+        containerStyles = _ref.containerStyles;
+      return jsxRuntime.jsx(Card__default["default"], {
+        type: "raised",
+        insetScale: "none",
+        theme: props.containerTheme,
+        children: jsxRuntime.jsx(CardContentWrapper, {
+          children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: "xl",
+            children: [jsxRuntime.jsxs(HeaderContainer, {
+              children: [props.customSettingsTitle ? jsxRuntime.jsx(Text__default["default"].Headline, {
+                as: "h2",
+                children: props.customSettingsTitle
+              }) : jsxRuntime.jsx(Text__default["default"].Headline, {
+                as: "h2",
+                intlMessage: props.title
+              }), jsxRuntime.jsx(AccessibleButton__default["default"], {
+                onClick: props.onClose,
+                label: intl.formatMessage(props.closeButtonLabel),
+                children: jsxRuntime.jsx(icons.CloseIcon, {
+                  size: "medium"
+                })
+              })]
+            }), jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+              scale: "l",
+              children: [jsxRuntime.jsx(Spacings__default["default"].Inset, {
+                scale: "s",
+                children: jsxRuntime.jsx("div", {
+                  style: containerStyles,
+                  children: jsxRuntime.jsx("div", {
+                    ref: registerContentNode,
+                    children: props.children
+                  })
+                })
+              }), (props.secondaryButton || props.primaryButton) && jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+                justifyContent: "flex-end",
+                children: [props.secondaryButton, props.primaryButton]
+              })]
+            })]
+          })
+        })
+      });
+    }
+  });
+};
+SettingsContainer.propTypes = {};
+SettingsContainer.displayName = 'SettingsContainer';
+const defaultProps$1 = {
+  containerTheme: 'dark'
+};
+SettingsContainer.defaultProps = defaultProps$1;
+var SettingsContainer$1 = SettingsContainer;
+
+const DraggingSmall = /*#__PURE__*/_styled__default["default"]("small", {
+  target: "e1mp438g1"
+} )({
+  name: "1fhyj3b",
+  styles: "&:hover{cursor:grab;}"
+} );
+const DraggingContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1mp438g0"
+} )(DraggingSmall, ";" + ("" ));
+var DraggingContainer$1 = DraggingContainer;
+
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const DraggableTagWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "emzjy4n0"
+} )("padding:", designSystem.designTokens.spacing10, " 0;" + ("" ));
+const DraggableTag = props => {
+  const handleRemoveColumn = () => {
+    var _props$onRemove;
+    return (_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 ? void 0 : _props$onRemove.call(props, props.index);
+  };
+  return jsxRuntime.jsx(reactBeautifulDnd.Draggable, {
+    draggableId: props.column.key,
+    index: props.index,
+    isDragDisabled: props.isDisabled,
+    children: provided => {
+      return jsxRuntime.jsx(DraggableTagWrapper, {
+        children: jsxRuntime.jsx(DraggingContainer$1, _objectSpread$1(_objectSpread$1(_objectSpread$1({
+          ref: provided.innerRef
+        }, provided.draggableProps), provided.dragHandleProps), {}, {
+          children: jsxRuntime.jsx(Tag__default["default"], {
+            onRemove: props.onRemove ? handleRemoveColumn : undefined,
+            isDisabled: props.isDisabled,
+            isDraggable: true,
+            children: props.column.label
+          })
+        }))
+      });
+    }
+  });
+};
+DraggableTag.propTypes = {};
+DraggableTag.displayName = 'DraggableTag';
+var DraggableTag$1 = DraggableTag;
+
+const TagContainerEditable = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e7rakq0"
+} )("background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";border-radius:", designSystem.designTokens.borderRadius4, ";padding:", designSystem.designTokens.spacing30, ";height:", designSystem.designTokens.constraint7, ";overflow:auto;" + ("" ));
+var TagContainerEditable$1 = TagContainerEditable;
+
+var messages$1 = reactIntl.defineMessages({
+  loadMoreAttributesHint: {
+    id: 'UIKit.DataTableManager.ColumnManager.DroppablePanel.loadMoreAttributesHint',
+    description: 'Indicate that the user can use the search input to load more attributes',
+    defaultMessage: 'Load more attributes by using the search input above'
+  }
+});
+
+const DroppablePanel = props => {
+  return jsxRuntime.jsx(reactBeautifulDnd.Droppable, {
+    droppableId: props.droppableId,
+    children: provided => {
+      var _context;
+      return jsxRuntime.jsxs(TagContainerEditable$1, {
+        "data-testid": props.droppableId,
+        ref: provided.innerRef,
+        children: [props.columns.length === 0 ? jsxRuntime.jsx(Spacings__default["default"].Inset, {
+          scale: "s",
+          children: jsxRuntime.jsx(Text__default["default"].Detail, {
+            tone: "secondary",
+            children: props.noColumnsText
+          })
+        }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [_mapInstanceProperty__default["default"](_context = props.columns).call(_context, (column, index) => {
+            var _context2;
+            return jsxRuntime.jsx(DraggableTag$1, {
+              column: column,
+              index: index,
+              onRemove: props.onRemove ? () => {
+                var _context3, _context4;
+                return props.onRemove([..._sliceInstanceProperty__default["default"](_context3 = props.columns).call(_context3, 0, index), ..._sliceInstanceProperty__default["default"](_context4 = props.columns).call(_context4, index + 1)]);
+              } : undefined,
+              isDisabled: props.isDisabled
+            }, _concatInstanceProperty__default["default"](_context2 = "".concat(column.key, "-")).call(_context2, index));
+          }), props.isSearchable && jsxRuntime.jsx(Spacings__default["default"].Inset, {
+            scale: "xs",
+            children: jsxRuntime.jsx(Text__default["default"].Detail, {
+              tone: "secondary",
+              intlMessage: messages$1.loadMoreAttributesHint
+            })
+          })]
+        }), provided.placeholder]
+      });
+    }
+  });
+};
+DroppablePanel.propTypes = {};
+DroppablePanel.displayName = 'DroppablePanel';
+var DroppablePanel$1 = DroppablePanel;
+
+var messages = reactIntl.defineMessages({
+  title: {
+    id: 'UIKit.DataTableManager.ColumnManager.title',
+    description: 'Title for the column manager component.',
+    defaultMessage: 'Column Manager'
+  },
+  visibleColumns: {
+    id: 'UIKit.DataTableManager.ColumnSelectorGroups.visible',
+    description: 'Message for the visible columns section.',
+    defaultMessage: 'Visible columns'
+  },
+  hiddenColumns: {
+    id: 'UIKit.DataTableManager.ColumnManager.hiddenColumns',
+    description: 'Message for the hidden columns section',
+    defaultMessage: 'Hidden columns'
+  },
+  noSelectedColumnsToShow: {
+    id: 'UIKit.DataTableManager.ColumnManager.noSelectedColumnsToShow',
+    description: 'Label when there are no selected columns to show',
+    defaultMessage: 'There are no selected columns to show.'
+  },
+  noHiddenColumnsToShow: {
+    id: 'UIKit.DataTableManager.ColumnManager.noHiddenColumnsToShow',
+    description: 'Label when there are no hidden columns to show',
+    defaultMessage: 'There are no hidden columns to show.'
+  },
+  closeButtonLabel: {
+    id: 'UIKit.DataTableManager.ColumnManager.closeButtonLabel',
+    description: 'Label for density manager close button.',
+    defaultMessage: 'Close'
+  }
+});
+
+const HIDDEN_COLUMNS_PANEL = 'hidden-columns-panel';
+const SELECTED_COLUMNS_PANEL = 'selected-columns-panel';
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const noSearch = () => _Promise__default["default"].resolve([]);
+// 'onChange' prop in AsyncSelectInput is required but not needed here
+const voidChangeHandler = () => undefined;
+const DroppableContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "en01od20"
+} )("width:100%;position:relative;max-width:", designSystem.designTokens.constraint10, ";cursor:", props => props.isDragging ? 'grabbing' : 'auto', ";" + ("" ));
+const handleColumnsUpdate = (dragResult, onUpdateColumns, selectedColumns, availableColumns, setIsDragging) => {
+  setIsDragging(false);
+  // Invalid drop destination, do nothing
+  if (!dragResult.destination) return;
+  if (dragResult.destination.droppableId === HIDDEN_COLUMNS_PANEL) {
+    if (dragResult.source.droppableId === HIDDEN_COLUMNS_PANEL) return;
+    onUpdateColumns([..._sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, 0, dragResult.source.index), ..._sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, dragResult.source.index + 1)]);
+  } else {
+    // the destination is the selected columns panel
+
+    // it's a swap when the source and the destination are the same
+    const isSwap = dragResult.source.droppableId === SELECTED_COLUMNS_PANEL;
+    const items = isSwap ?
+    // remove the dragged item from its position if it is not coming from
+    // the hidden section (it is a swap)
+    [..._sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, 0, dragResult.source.index), ..._sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, dragResult.source.index + 1)] : selectedColumns;
+    const columns = isSwap ? selectedColumns : availableColumns;
+    const draggedColumn = _findInstanceProperty__default["default"](columns).call(columns, col => col.key === dragResult.draggableId);
+
+    // push the column in the new position if draggedColumn is found
+    if (draggedColumn) {
+      onUpdateColumns([..._sliceInstanceProperty__default["default"](items).call(items, 0, dragResult.destination.index), draggedColumn, ..._sliceInstanceProperty__default["default"](items).call(items, dragResult.destination.index)]);
+    }
+  }
+};
+const DropdownIndicator = () => jsxRuntime.jsx(Spacings__default["default"].Inline, {
+  alignItems: "center",
+  children: jsxRuntime.jsx(icons.SearchIcon, {
+    size: "medium",
+    color: "primary"
+  })
+});
+DropdownIndicator.displayName = 'DropdownIndicator';
+const Nothing = () => null;
+const selectInputComponents = {
+  Option: Nothing,
+  Menu: Nothing,
+  DropdownIndicator
+};
+const ColumnSettingsManager = props => {
+  if (props.areHiddenColumnsSearchable) ;
+  const intl = reactIntl.useIntl();
+  const _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  const searchHiddenColumns = props.searchHiddenColumns;
+  const handleDragStart = () => {
+    setIsDragging(true);
+  };
+  const hiddenColumns = react.useMemo(() => differenceWith__default["default"](props.availableColumns, props.selectedColumns, (a, b) => a.key === b.key), [props.availableColumns, props.selectedColumns]);
+  const handleDragEnd = react.useCallback(dragResult => handleColumnsUpdate(dragResult, props.onUpdateColumns, props.selectedColumns, props.availableColumns, setIsDragging), [props.onUpdateColumns, props.selectedColumns, props.availableColumns]);
+  const debouncedSearchHiddenColumns = react.useMemo(() => debounce__default["default"](searchHiddenColumns !== null && searchHiddenColumns !== void 0 ? searchHiddenColumns : noSearch, 300), [searchHiddenColumns]);
+  const handleInputChange = react.useCallback(inputValue => debouncedSearchHiddenColumns(inputValue), [debouncedSearchHiddenColumns]);
+  return jsxRuntime.jsx(SettingsContainer$1, {
+    customSettingsTitle: props.title,
+    title: messages.title,
+    closeButtonLabel: messages.closeButtonLabel,
+    onClose: props.onClose,
+    primaryButton: props.primaryButton,
+    secondaryButton: props.secondaryButton,
+    containerTheme: props.managerTheme,
+    children: jsxRuntime.jsx(reactBeautifulDnd.DragDropContext, {
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+        scale: "l",
+        children: [jsxRuntime.jsx(DroppableContainer, {
+          isDragging: isDragging,
+          "aria-labelledby": "hidden-columns",
+          children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: "m",
+            children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+              scale: "s",
+              alignItems: "center",
+              children: [jsxRuntime.jsx(icons.EyeCrossedIcon, {
+                size: "big"
+              }), jsxRuntime.jsx(FieldLabel__default["default"], {
+                id: "hidden-columns",
+                title: intl.formatMessage(messages.hiddenColumns)
+              })]
+            }), props.areHiddenColumnsSearchable && jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread(_objectSpread({}, props.searchHiddenColumnsPlaceholder ? {
+              placeholder: props.searchHiddenColumnsPlaceholder
+            } : undefined), {}, {
+              onChange: voidChangeHandler,
+              loadOptions: noSearch,
+              onInputChange: handleInputChange,
+              components: selectInputComponents
+            })), jsxRuntime.jsx(DroppablePanel$1, {
+              droppableId: HIDDEN_COLUMNS_PANEL,
+              "data-testid": HIDDEN_COLUMNS_PANEL,
+              noColumnsText: intl.formatMessage(messages.noHiddenColumnsToShow),
+              columns: hiddenColumns,
+              isSearchable: props.areHiddenColumnsSearchable
+            })]
+          })
+        }), jsxRuntime.jsx(DroppableContainer, {
+          isDragging: isDragging,
+          "aria-labelledby": "visible-columns",
+          children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: "m",
+            children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+              scale: "xs",
+              alignItems: "center",
+              children: [jsxRuntime.jsx(icons.EyeIcon, {
+                size: "medium"
+              }), jsxRuntime.jsx(FieldLabel__default["default"], {
+                id: "visible-columns",
+                title: intl.formatMessage(messages.visibleColumns)
+              })]
+            }), jsxRuntime.jsx(DroppablePanel$1, {
+              droppableId: SELECTED_COLUMNS_PANEL,
+              "data-testid": SELECTED_COLUMNS_PANEL,
+              noColumnsText: intl.formatMessage(messages.noSelectedColumnsToShow),
+              columns: props.selectedColumns,
+              onRemove: props.onUpdateColumns
+            })]
+          })
+        })]
+      })
+    })
+  });
+};
+ColumnSettingsManager.propTypes = {};
+ColumnSettingsManager.displayName = 'ColumnSettingsManager';
+const defaultProps = {
+  availableColumns: []
+};
+ColumnSettingsManager.defaultProps = defaultProps;
+
+exports.ColumnSettingsManager = ColumnSettingsManager;
+exports.SettingsContainer = SettingsContainer$1;