@commercetools-uikit/data-table-manager 13.0.3 → 14.0.1

package/dist/commercetools-uikit-data-table-manager.cjs.prod.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 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');
@@ -10,9 +13,6 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 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 _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-require('prop-types');
 var react = require('react');
 var Spacings = require('@commercetools-uikit/spacings');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
@@ -21,6 +21,7 @@ var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArr
 var _styled = require('@emotion/styled/base');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 require('@commercetools-uikit/utils');
 var reactIntl = require('react-intl');
 var AccessibleHiden = require('@commercetools-uikit/accessible-hidden');
@@ -34,9 +35,9 @@ 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 _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');
-require('react-required-if');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var debounce = require('debounce-promise');
 var differenceWith = require('lodash/differenceWith');
@@ -46,6 +47,7 @@ var hooks = require('@commercetools-uikit/hooks');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -54,11 +56,11 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
 var AccessibleHiden__default = /*#__PURE__*/_interopDefault(AccessibleHiden);
 var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
 var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
@@ -68,6 +70,7 @@ 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 _Promise__default = /*#__PURE__*/_interopDefault(_Promise);
 var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
@@ -84,7 +87,7 @@ var COLUMN_MANAGER = 'columnManager';
 var DISPLAY_SETTINGS = 'displaySettings';
 
 var HeaderContainer = _styled__default["default"]("div", {
-  target: "e16v1mgb0"
+  target: "e6ezr100"
 } )({
   name: "1bhm8h2",
   styles: "display:flex;flex:1;justify-content:space-between"
@@ -135,11 +138,12 @@ var SettingsContainer = function SettingsContainer(props) {
   });
 };
 
-SettingsContainer.displayName = 'SettingsContainer';
 SettingsContainer.propTypes = {};
-SettingsContainer.defaultProps = {
+SettingsContainer.displayName = 'SettingsContainer';
+var defaultProps$2 = {
   containerTheme: 'dark'
 };
+SettingsContainer.defaultProps = defaultProps$2;
 var SettingsContainer$1 = SettingsContainer;
 
 var messages$3 = reactIntl.defineMessages({
@@ -263,23 +267,24 @@ var DensityManager = function DensityManager(props) {
   });
 };
 
+DensityManager.propTypes = {};
 DensityManager.displayName = 'DensityManager';
-DensityManager.defaultProps = {
+var defaultProps$1 = {
   isCondensed: false,
   isWrappingText: false
 };
-DensityManager.propTypes = {};
+DensityManager.defaultProps = defaultProps$1;
 var DisplaySettingsManager = DensityManager;
 
 var DraggingSmall = _styled__default["default"]("small", {
-  target: "ed3a5rx1"
+  target: "e1mp438g1"
 } )({
   name: "1fhyj3b",
   styles: "&:hover{cursor:grab;}"
 } );
 
 var DraggingContainer = _styled__default["default"]("div", {
-  target: "ed3a5rx0"
+  target: "e1mp438g0"
 } )(DraggingSmall, ";" + ("" ));
 
 var DraggingContainer$1 = DraggingContainer;
@@ -290,7 +295,9 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 
 var DraggableTag = function DraggableTag(props) {
   var handleRemoveColumn = function handleRemoveColumn() {
-    return props.onRemove(props.index);
+    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, {
@@ -298,9 +305,9 @@ var DraggableTag = function DraggableTag(props) {
     index: props.index,
     isDragDisabled: props.isDisabled,
     children: function children(provided) {
-      return jsxRuntime.jsxs(Spacings__default["default"].Inset, {
+      return jsxRuntime.jsx(Spacings__default["default"].Inset, {
         scale: "xs",
-        children: [jsxRuntime.jsx(DraggingContainer$1, _objectSpread$3(_objectSpread$3(_objectSpread$3({
+        children: jsxRuntime.jsx(DraggingContainer$1, _objectSpread$3(_objectSpread$3(_objectSpread$3({
           ref: provided.innerRef
         }, provided.draggableProps), provided.dragHandleProps), {}, {
           children: jsxRuntime.jsx(Tag__default["default"], {
@@ -314,18 +321,18 @@ var DraggableTag = function DraggableTag(props) {
               }), props.column.label]
             })
           })
-        })), provided.placeholder]
+        }))
       });
     }
   });
 };
 
-DraggableTag.displayName = 'DraggableTag';
 DraggableTag.propTypes = {};
+DraggableTag.displayName = 'DraggableTag';
 var DraggableTag$1 = DraggableTag;
 
 var TagContainerEditable = _styled__default["default"]("div", {
-  target: "ecy2q1d0"
+  target: "e7rakq0"
 } )("background-color:", designSystem.customProperties.backgroundColorForInput, ";border:", designSystem.customProperties.borderRadius1, " solid ", designSystem.customProperties.colorNeutral60, ";border-radius:", designSystem.customProperties.borderRadius6, ";padding:", designSystem.customProperties.spacingS, ";height:", designSystem.customProperties.constraint7, ";overflow:auto;" + ("" ));
 
 var TagContainerEditable$1 = TagContainerEditable;
@@ -380,8 +387,8 @@ var DroppablePanel = function DroppablePanel(props) {
   });
 };
 
-DroppablePanel.displayName = 'DroppablePanel';
 DroppablePanel.propTypes = {};
+DroppablePanel.displayName = 'DroppablePanel';
 var DroppablePanel$1 = DroppablePanel;
 
 var messages$1 = reactIntl.defineMessages({
@@ -424,8 +431,12 @@ function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$2(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
+var noSearch = function noSearch() {
+  return _Promise__default["default"].resolve();
+};
+
 var DroppableContainer = _styled__default["default"]("div", {
-  target: "e6ge22w0"
+  target: "en01od20"
 } )("width:100%;position:relative;max-width:", designSystem.customProperties.constraint10, ";cursor:", function (props) {
   return props.isDragging ? 'grabbing' : 'auto';
 }, ";" + ("" ));
@@ -441,7 +452,7 @@ var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColum
     if (dragResult.source.droppableId === HIDDEN_COLUMNS_PANEL) return;
     onUpdateColumns(_concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, 0, dragResult.source.index)), _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, dragResult.source.index + 1))));
   } else {
-    var _context2, _context3;
+    var _context2;
 
     // the destination is the selected columns panel
     // it's a swap when the source and the destination are the same
@@ -453,10 +464,14 @@ var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColum
 
     var draggedColumn = _findInstanceProperty__default["default"](columns).call(columns, function (col) {
       return col.key === dragResult.draggableId;
-    }); // push the column in the new position
+    }); // push the column in the new position if draggedColumn is found
 
 
-    onUpdateColumns(_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, 0, dragResult.destination.index)), [draggedColumn], _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, dragResult.destination.index))));
+    if (draggedColumn) {
+      var _context3;
+
+      onUpdateColumns(_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, 0, dragResult.destination.index)), [draggedColumn], _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, dragResult.destination.index))));
+    }
   }
 };
 
@@ -464,7 +479,7 @@ var DropdownIndicator = function DropdownIndicator() {
   return jsxRuntime.jsx(Spacings__default["default"].Inline, {
     alignItems: "center",
     children: jsxRuntime.jsx(icons.SearchIcon, {
-      scale: "medium",
+      size: "medium",
       color: "primary"
     })
   });
@@ -482,6 +497,8 @@ var selectInputComponents = {
   DropdownIndicator: DropdownIndicator
 };
 var ColumnSettingsManager = function ColumnSettingsManager(props) {
+  if (props.areHiddenColumnsSearchable) ;
+
   var intl = reactIntl.useIntl();
 
   var _useState = react.useState(false),
@@ -503,9 +520,9 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
   var handleDragEnd = react.useCallback(function (dragResult) {
     return handleColumnsUpdate(dragResult, props.onUpdateColumns, props.selectedColumns, props.availableColumns, setIsDragging);
   }, [props.onUpdateColumns, props.selectedColumns, props.availableColumns]);
-  var handleInputChange = react.useCallback(function (input) {
+  var handleInputChange = react.useCallback(function (inputValue) {
     return (// loadOptions is not invoked when input is empty
-      !input.length && searchHiddenColumns(input)
+      !inputValue.length && (searchHiddenColumns === null || searchHiddenColumns === void 0 ? void 0 : searchHiddenColumns(inputValue))
     );
   }, [searchHiddenColumns]);
   return jsxRuntime.jsx(SettingsContainer$1, {
@@ -544,7 +561,7 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
               // because the loading indicator is displayed
               // only when loadOptions is invoked
               ,
-              loadOptions: debounce__default["default"](searchHiddenColumns, 300),
+              loadOptions: debounce__default["default"](searchHiddenColumns !== null && searchHiddenColumns !== void 0 ? searchHiddenColumns : noSearch, 300),
               onInputChange: handleInputChange,
               components: selectInputComponents
             })), jsxRuntime.jsx(DroppablePanel$1, {
@@ -581,11 +598,12 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
     })
   });
 };
-ColumnSettingsManager.displayName = 'ColumnSettingsManager';
 ColumnSettingsManager.propTypes = {};
-ColumnSettingsManager.defaultProps = {
+ColumnSettingsManager.displayName = 'ColumnSettingsManager';
+var defaultProps = {
   availableColumns: []
 };
+ColumnSettingsManager.defaultProps = defaultProps;
 var ColumnSettingsManager$1 = ColumnSettingsManager;
 
 var messages = reactIntl.defineMessages({
@@ -610,12 +628,15 @@ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
+/* The horizontal constraint is set on this container instead of the SelectInput
+because the input is always empty, and therefore doesn't take any space by itself
+but we want to keep enough space for the placeholder to be readable */
 var SelectContainer = _styled__default["default"]("div", {
-  target: "eh8k7x01"
+  target: "e3i1gnv1"
 } )("width:", designSystem.customProperties.constraint4, ";" + ("" ));
 
 var TopBarContainer = _styled__default["default"]("div", {
-  target: "eh8k7x00"
+  target: "e3i1gnv0"
 } )({
   name: "1ff36h2",
   styles: "flex-grow:1"
@@ -649,6 +670,8 @@ var getSelectedColumns = function getSelectedColumns(mappedColumns) {
 };
 
 var DataTableSettings = function DataTableSettings(props) {
+  var _props$columnManager$, _props$columnManager;
+
   var areDisplaySettingsEnabled = Boolean(props.displaySettings && !props.displaySettings.disableDisplaySettings);
   var areColumnSettingsEnabled = Boolean(props.columnManager && !props.columnManager.disableColumnManager);
   var intl = reactIntl.useIntl();
@@ -665,7 +688,7 @@ var DataTableSettings = function DataTableSettings(props) {
   });
 
   var handleDropdownChange = function handleDropdownChange(event) {
-    return setOpenedPanelId(event.target.value);
+    return setOpenedPanelId(_Array$isArray__default["default"](event.target.value) ? event.target.value[0] : event.target.value);
   };
 
   var mappedColumns = getMappedColumns(areColumnSettingsEnabled ? props.columnManager.hideableColumns : undefined);
@@ -701,30 +724,36 @@ var DataTableSettings = function DataTableSettings(props) {
     }), openedPanelId === DISPLAY_SETTINGS && jsxRuntime.jsx(DisplaySettingsManager, _objectSpread$1(_objectSpread$1({}, props.displaySettings || {}), {}, {
       onClose: handleSettingsPanelChange,
       onDensityDisplayChange: function onDensityDisplayChange(event) {
-        props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_CONDENSED_UPDATE, event.target.value === DENSITY_COMPACT);
+        var _props$onSettingsChan;
+
+        (_props$onSettingsChan = props.onSettingsChange) === null || _props$onSettingsChan === void 0 ? void 0 : _props$onSettingsChan.call(props, UPDATE_ACTIONS.IS_TABLE_CONDENSED_UPDATE, event.target.value === DENSITY_COMPACT);
       },
       onTextWrappingChange: function onTextWrappingChange(event) {
-        props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_WRAPPING_TEXT_UPDATE, event.target.value === SHOW_HIDE_ON_DEMAND);
+        var _props$onSettingsChan2;
+
+        (_props$onSettingsChan2 = props.onSettingsChange) === null || _props$onSettingsChan2 === void 0 ? void 0 : _props$onSettingsChan2.call(props, UPDATE_ACTIONS.IS_TABLE_WRAPPING_TEXT_UPDATE, event.target.value === SHOW_HIDE_ON_DEMAND);
       },
       managerTheme: props.managerTheme
     })), openedPanelId === COLUMN_MANAGER && jsxRuntime.jsx(ColumnSettingsManager$1, _objectSpread$1(_objectSpread$1({}, props.columnManager || {}), {}, {
-      availableColumns: props.columnManager.hideableColumns,
+      availableColumns: (_props$columnManager$ = (_props$columnManager = props.columnManager) === null || _props$columnManager === void 0 ? void 0 : _props$columnManager.hideableColumns) !== null && _props$columnManager$ !== void 0 ? _props$columnManager$ : [],
       selectedColumns: selectedColumns,
       onClose: handleSettingsPanelChange,
       onUpdateColumns: function onUpdateColumns(nextVisibleColumns) {
+        var _props$onSettingsChan3;
+
         var keysOfVisibleColumns = _mapInstanceProperty__default["default"](nextVisibleColumns).call(nextVisibleColumns, function (visibleColumn) {
           return visibleColumn.key;
         });
 
-        props.onSettingsChange(UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
+        (_props$onSettingsChan3 = props.onSettingsChange) === null || _props$onSettingsChan3 === void 0 ? void 0 : _props$onSettingsChan3.call(props, UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
       },
       managerTheme: props.managerTheme
     }))]
   });
 };
 
-DataTableSettings.displayName = 'DataTableSettings';
 DataTableSettings.propTypes = {};
+DataTableSettings.displayName = 'DataTableSettings';
 var DataTableSettings$1 = DataTableSettings;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -762,7 +791,7 @@ DataTableManager.displayName = 'DataTableManager';
 var DataTableManager$1 = DataTableManager;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.3";
+var version = "14.0.1";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,