@commercetools-uikit/data-table-manager 20.2.3 → 20.3.1

package/dist/commercetools-uikit-data-table-manager.esm.js

@@ -16,7 +16,6 @@ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import _styled from '@emotion/styled/base';
 import _Object$entries from '@babel/runtime-corejs3/core-js-stable/object/entries';
 import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
-import _bindInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/bind';
 import { warning } from '@commercetools-uikit/utils';
 import { defineMessages, useIntl } from 'react-intl';
 import { ColumnsIcon } from '@commercetools-uikit/icons';
@@ -29,8 +28,8 @@ import Grid from '@commercetools-uikit/grid';
 import RadioInput from '@commercetools-uikit/radio-input';
 import AccessibleHidden from '@commercetools-uikit/accessible-hidden';
 import { designTokens } from '@commercetools-uikit/design-system';
-import { S as SettingsContainer, C as ColumnSettingsManager } from './column-settings-manager-144dfa13.esm.js';
-export { C as ColumnSettingsManager } from './column-settings-manager-144dfa13.esm.js';
+import { S as SettingsContainer, C as ColumnSettingsManager } from './column-settings-manager-b4e2fd60.esm.js';
+export { C as ColumnSettingsManager } from './column-settings-manager-b4e2fd60.esm.js';
 export { useRowSelection, useSorting } from '@commercetools-uikit/hooks';
 export { D as DataTableManagerProvider, u as useDataTableManagerContext } from './data-table-manager-provider-32eb58dd.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/promise';
@@ -44,6 +43,7 @@ import '@commercetools-uikit/accessible-button';
 import '@commercetools-uikit/collapsible-motion';
 import '@commercetools-uikit/card';
 import '@commercetools-uikit/text';
+import '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import '@commercetools-uikit/tag';
 
 const UPDATE_ACTIONS = {
@@ -58,44 +58,60 @@ const DISPLAY_SETTINGS = 'displaySettings';
 
 var messages$2 = defineMessages({
   title: {
-    id: 'UIKit.DataTableManager.DensityManager.title',
-    description: 'Title for the density manager component.',
-    defaultMessage: 'Display settings'
+    id: "UIKit.DataTableManager.DensityManager.title",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Display settings"
+    }]
   },
   textWrappingSubtitle: {
-    id: 'UIKit.DataTableManager.DensityManager.textWrappingSubtitle',
-    description: 'Subtitle for the text wrapping options.',
-    defaultMessage: 'Text wrapping'
+    id: "UIKit.DataTableManager.DensityManager.textWrappingSubtitle",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Text wrapping"
+    }]
   },
   densityDisplaySubtitle: {
-    id: 'UIKit.DataTableManager.DensityManager.densityDisplaySubtitle',
-    description: 'Subtitle for the density display options.',
-    defaultMessage: 'Density display'
+    id: "UIKit.DataTableManager.DensityManager.densityDisplaySubtitle",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Density display"
+    }]
   },
   textWrappingAllWrapVisibleOption: {
-    id: 'UIKit.DataTableManager.DensityManager.textWrappingAllWrapVisibleOption',
-    description: 'All wrapped texts visible option.',
-    defaultMessage: 'Make all wrapped texts visible'
+    id: "UIKit.DataTableManager.DensityManager.textWrappingAllWrapVisibleOption",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Make all wrapped texts visible"
+    }]
   },
   textWrappingShowHideOnDemandOption: {
-    id: 'UIKit.DataTableManager.DensityManager.textWrappingShowHideOnDemandOption',
-    description: 'Show or hide texts on demand option.',
-    defaultMessage: 'Show / hide texts by row on demand'
+    id: "UIKit.DataTableManager.DensityManager.textWrappingShowHideOnDemandOption",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Show / hide texts by row on demand"
+    }]
   },
   densityDisplayComfortableOption: {
-    id: 'UIKit.DataTableManager.DensityManager.densityDisplayComfortableOption',
-    description: 'Density display default option.',
-    defaultMessage: 'Comfortable'
+    id: "UIKit.DataTableManager.DensityManager.densityDisplayComfortableOption",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Comfortable"
+    }]
   },
   densityDisplayCompactOption: {
-    id: 'UIKit.DataTableManager.DensityManager.densityDisplayCompactOption',
-    description: 'Density display compact option.',
-    defaultMessage: 'Compact'
+    id: "UIKit.DataTableManager.DensityManager.densityDisplayCompactOption",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Compact"
+    }]
   },
   closeButtonLabel: {
-    id: 'UIKit.DataTableManager.DensityManager.closeButtonLabel',
-    description: 'Label for density manager close button.',
-    defaultMessage: 'Close'
+    id: "UIKit.DataTableManager.DensityManager.closeButtonLabel",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Close"
+    }]
   }
 });
 
@@ -188,9 +204,11 @@ var DisplaySettingsManager = DensityManager;
 
 var messages$1 = defineMessages({
   closeButtonLabel: {
-    id: 'UIKit.DataTableManager.CustomSettingsManager.closeButtonLabel',
-    description: 'Label for custom settings manager close button.',
-    defaultMessage: 'Close'
+    id: "UIKit.DataTableManager.CustomSettingsManager.closeButtonLabel",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Close"
+    }]
   }
 });
 
@@ -210,24 +228,30 @@ var CustomSettingsManager$1 = CustomSettingsManager;
 
 var messages = defineMessages({
   placeholder: {
-    id: 'UIKit.DataTableManager.TableSettings.placeholder',
-    description: 'Placeholder for the table settings select component.',
-    defaultMessage: 'Table settings'
+    id: "UIKit.DataTableManager.TableSettings.placeholder",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Table settings"
+    }]
   },
   displaySettingsOption: {
-    id: 'UIKit.DataTableManager.TableSettings.displaySettingsOption',
-    description: 'Display settings dropdown option label.',
-    defaultMessage: 'Display settings'
+    id: "UIKit.DataTableManager.TableSettings.displaySettingsOption",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Display settings"
+    }]
   },
   columnManagerOption: {
-    id: 'UIKit.DataTableManager.TableSettings.columnManagerOption',
-    description: 'Column manager dropdown option label.',
-    defaultMessage: 'Column manager'
+    id: "UIKit.DataTableManager.TableSettings.columnManagerOption",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Column manager"
+    }]
   }
 });
 
 function ownKeys$1(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys$1(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys$1(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys$1(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys$1(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const TopBarContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e3i1gnv0"
@@ -284,7 +308,7 @@ const getSelectedColumns = function (mappedColumns) {
   return _mapInstanceProperty(visibleColumnsKeys).call(visibleColumnsKeys, columnKey => mappedColumns[columnKey]);
 };
 const DataTableSettings = props => {
-  var _context3, _context4, _context5;
+  var _props$customColumnMa, _props$columnManager, _props$displaySetting, _props$displaySetting2, _props$columnManager2, _props$columnManager$, _props$columnManager3, _context3;
   const getEnabledDisplaySettings = () => {
     if (!props.displaySettings || _Object$keys(props.displaySettings).length < 0) return undefined;
     return Boolean(props.displaySettings && !props.displaySettings.disableDisplaySettings);
@@ -295,8 +319,8 @@ const DataTableSettings = props => {
   };
   const areDisplaySettingsEnabled = getEnabledDisplaySettings();
   const areColumnSettingsEnabled = getEnabledColumnSettings();
-  const areCustomColumnSettingsEnabled = Boolean(props.customColumnManager && !props.customColumnManager?.disableCustomColumnManager);
-  process.env.NODE_ENV !== "production" ? warning(areDisplaySettingsEnabled || areColumnSettingsEnabled ? typeof props.onSettingsChange === 'function' : true, `ui-kit/DataTableManager: the prop "onSettingsChange" is required when either the display settings or the column settings are enabled.`) : void 0;
+  const areCustomColumnSettingsEnabled = Boolean(props.customColumnManager && !((_props$customColumnMa = props.customColumnManager) !== null && _props$customColumnMa !== void 0 && _props$customColumnMa.disableCustomColumnManager));
+  process.env.NODE_ENV !== "production" ? warning(areDisplaySettingsEnabled || areColumnSettingsEnabled ? typeof props.onSettingsChange === 'function' : true, "ui-kit/DataTableManager: the prop \"onSettingsChange\" is required when either the display settings or the column settings are enabled.") : void 0;
   const intl = useIntl();
   const _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -307,8 +331,8 @@ const DataTableSettings = props => {
     areDisplaySettingsEnabled,
     areColumnSettingsEnabled,
     customSettings: props.customSettings,
-    columnManagerLabel: props.columnManager?.columnManagerLabel,
-    displaySettingsLabel: props.displaySettings?.displaySettingsLabel,
+    columnManagerLabel: (_props$columnManager = props.columnManager) === null || _props$columnManager === void 0 ? void 0 : _props$columnManager.columnManagerLabel,
+    displaySettingsLabel: (_props$displaySetting = props.displaySettings) === null || _props$displaySetting === void 0 ? void 0 : _props$displaySetting.displaySettingsLabel,
     formatMessage: intl.formatMessage
   });
   const mappedColumns = getMappedColumns(areColumnSettingsEnabled ? props.columnManager.hideableColumns : undefined);
@@ -332,36 +356,40 @@ const DataTableSettings = props => {
           menuHorizontalConstraint: 'auto',
           menuPosition: "right",
           menuType: "list",
-          children: ((_context3 = dropdownOptions) == null ? void 0 : _bindInstanceProperty(_context4 = Function.call).call(_context4, _mapInstanceProperty(_context3), _context3))?.(option => jsx(DropdownMenu.ListMenuItem, {
+          children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : _mapInstanceProperty(dropdownOptions).call(dropdownOptions, option => jsx(DropdownMenu.ListMenuItem, {
             onClick: () => {
-              setOpenedPanelId(option?.value);
+              setOpenedPanelId(option === null || option === void 0 ? void 0 : option.value);
             },
-            isDisabled: option?.isDisabled,
-            children: option?.label
-          }, option?.label))
+            isDisabled: option === null || option === void 0 ? void 0 : option.isDisabled,
+            children: option === null || option === void 0 ? void 0 : option.label
+          }, option === null || option === void 0 ? void 0 : option.label))
         })
       })]
     }), openedPanelId === DISPLAY_SETTINGS && jsx(DisplaySettingsManager, _objectSpread$1(_objectSpread$1({}, props.displaySettings || {}), {}, {
-      title: props.displaySettings?.displaySettingsLabel,
+      title: (_props$displaySetting2 = props.displaySettings) === null || _props$displaySetting2 === void 0 ? void 0 : _props$displaySetting2.displaySettingsLabel,
       onClose: handleSettingsPanelChange,
       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 || _props$onSettingsChan.call(props, UPDATE_ACTIONS.IS_TABLE_CONDENSED_UPDATE, event.target.value === DENSITY_COMPACT);
       },
       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 || _props$onSettingsChan2.call(props, UPDATE_ACTIONS.IS_TABLE_WRAPPING_TEXT_UPDATE, event.target.value === SHOW_HIDE_ON_DEMAND);
       },
       managerTheme: props.managerTheme
     })), openedPanelId === COLUMN_MANAGER && jsx(ColumnSettingsManager, _objectSpread$1(_objectSpread$1({}, props.columnManager || {}), {}, {
-      title: props.columnManager?.columnManagerLabel,
-      availableColumns: props.columnManager?.hideableColumns ?? [],
+      title: (_props$columnManager2 = props.columnManager) === null || _props$columnManager2 === void 0 ? void 0 : _props$columnManager2.columnManagerLabel,
+      availableColumns: (_props$columnManager$ = (_props$columnManager3 = props.columnManager) === null || _props$columnManager3 === void 0 ? void 0 : _props$columnManager3.hideableColumns) !== null && _props$columnManager$ !== void 0 ? _props$columnManager$ : [],
       selectedColumns: selectedColumns,
       onClose: handleSettingsPanelChange,
       onUpdateColumns: nextVisibleColumns => {
+        var _props$onSettingsChan3;
         const keysOfVisibleColumns = _mapInstanceProperty(nextVisibleColumns).call(nextVisibleColumns, visibleColumn => visibleColumn.key);
-        props.onSettingsChange?.(UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
+        (_props$onSettingsChan3 = props.onSettingsChange) === null || _props$onSettingsChan3 === void 0 || _props$onSettingsChan3.call(props, UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
       },
       managerTheme: props.managerTheme
-    })), props.customSettings && _mapInstanceProperty(_context5 = _Object$entries(props.customSettings)).call(_context5, _ref4 => {
+    })), props.customSettings && _mapInstanceProperty(_context3 = _Object$entries(props.customSettings)).call(_context3, _ref4 => {
+      var _props$customColumnMa2;
       let _ref5 = _slicedToArray(_ref4, 2),
         key = _ref5[0],
         customSetting = _ref5[1];
@@ -375,17 +403,19 @@ const DataTableSettings = props => {
           onClose: handleSettingsPanelChange,
           managerTheme: props.managerTheme,
           selectedColumns: props.selectedColumns,
-          availableColumns: props.customColumnManager ?? undefined,
+          availableColumns: (_props$customColumnMa2 = props.customColumnManager) !== null && _props$customColumnMa2 !== void 0 ? _props$customColumnMa2 : undefined,
           onUpdateColumns: (nextVisibleColumns, key) => {
+            var _props$onSettingsChan4;
             const keysOfVisibleColumns = _mapInstanceProperty(nextVisibleColumns).call(nextVisibleColumns, visibleColumn => visibleColumn.key);
-            props.onSettingsChange?.(UPDATE_ACTIONS.CUSTOM_COLUMNS_UPDATE, keysOfVisibleColumns, key);
+            (_props$onSettingsChan4 = props.onSettingsChange) === null || _props$onSettingsChan4 === void 0 || _props$onSettingsChan4.call(props, UPDATE_ACTIONS.CUSTOM_COLUMNS_UPDATE, keysOfVisibleColumns, key);
           }
         })) : jsx(CustomSettingsManager$1, _objectSpread$1(_objectSpread$1({}, customSetting || {}), {}, {
           onClose: handleSettingsPanelChange,
           managerTheme: props.managerTheme,
           children: CustomComponent && jsx(CustomComponent, {
             updateCustomSettings: settings => {
-              props.onSettingsChange?.(UPDATE_ACTIONS.CUSTOM_SETTINGS_UPDATE, settings);
+              var _props$onSettingsChan5;
+              (_props$onSettingsChan5 = props.onSettingsChange) === null || _props$onSettingsChan5 === void 0 || _props$onSettingsChan5.call(props, UPDATE_ACTIONS.CUSTOM_SETTINGS_UPDATE, settings);
             },
             additionalSettings: _objectSpread$1(_objectSpread$1({}, customSetting), props.additionalSettings)
           })
@@ -439,8 +469,8 @@ const DataTableManager = props => {
       managerTheme: "light",
       additionalSettings: additionalCustomSetting,
       updateCustomSettings: settings => updateCustomSettings(settings),
-      selectedColumns: selectedColumns ?? [],
-      customColumnManager: customColumnManager ?? undefined
+      selectedColumns: selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : [],
+      customColumnManager: customColumnManager !== null && customColumnManager !== void 0 ? customColumnManager : undefined
     }), props.children ? /*#__PURE__*/cloneElement(props.children, {
       columns,
       customColumns,
@@ -452,6 +482,6 @@ DataTableManager.displayName = 'DataTableManager';
 var DataTableManager$1 = DataTableManager;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.2.3";
+var version = "20.3.1";
 
 export { UPDATE_ACTIONS, DataTableManager$1 as default, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/data-table-manager",
   "description": "This component enhances the DataTable component and additionally provides a UI and state management to handle configuration of the table such as column manager.",
-  "version": "20.2.3",
+  "version": "20.3.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -28,39 +28,39 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "20.2.3",
-    "@commercetools-uikit/accessible-hidden": "20.2.3",
-    "@commercetools-uikit/async-select-input": "20.2.3",
-    "@commercetools-uikit/card": "20.2.3",
-    "@commercetools-uikit/collapsible-motion": "20.2.3",
-    "@commercetools-uikit/design-system": "20.2.3",
-    "@commercetools-uikit/dropdown-menu": "20.2.3",
-    "@commercetools-uikit/field-label": "20.2.3",
-    "@commercetools-uikit/grid": "20.2.3",
-    "@commercetools-uikit/hooks": "20.2.3",
-    "@commercetools-uikit/icon-button": "20.2.3",
-    "@commercetools-uikit/icons": "20.2.3",
-    "@commercetools-uikit/primary-button": "20.2.3",
-    "@commercetools-uikit/radio-input": "20.2.3",
-    "@commercetools-uikit/secondary-button": "20.2.3",
-    "@commercetools-uikit/secondary-icon-button": "20.2.3",
-    "@commercetools-uikit/select-input": "20.2.3",
-    "@commercetools-uikit/spacings": "20.2.3",
-    "@commercetools-uikit/tag": "20.2.3",
-    "@commercetools-uikit/text": "20.2.3",
-    "@commercetools-uikit/tooltip": "20.2.3",
-    "@commercetools-uikit/utils": "20.2.3",
+    "@commercetools-uikit/accessible-button": "20.3.1",
+    "@commercetools-uikit/accessible-hidden": "20.3.1",
+    "@commercetools-uikit/async-select-input": "20.3.1",
+    "@commercetools-uikit/card": "20.3.1",
+    "@commercetools-uikit/collapsible-motion": "20.3.1",
+    "@commercetools-uikit/design-system": "20.3.1",
+    "@commercetools-uikit/dropdown-menu": "20.3.1",
+    "@commercetools-uikit/field-label": "20.3.1",
+    "@commercetools-uikit/grid": "20.3.1",
+    "@commercetools-uikit/hooks": "20.3.1",
+    "@commercetools-uikit/icon-button": "20.3.1",
+    "@commercetools-uikit/icons": "20.3.1",
+    "@commercetools-uikit/primary-button": "20.3.1",
+    "@commercetools-uikit/radio-input": "20.3.1",
+    "@commercetools-uikit/secondary-button": "20.3.1",
+    "@commercetools-uikit/secondary-icon-button": "20.3.1",
+    "@commercetools-uikit/select-input": "20.3.1",
+    "@commercetools-uikit/spacings": "20.3.1",
+    "@commercetools-uikit/tag": "20.3.1",
+    "@commercetools-uikit/text": "20.3.1",
+    "@commercetools-uikit/tooltip": "20.3.1",
+    "@commercetools-uikit/utils": "20.3.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@hello-pangea/dnd": "^17.0.0",
+    "@hello-pangea/dnd": "^18.0.0",
     "@types/debounce-promise": "^3.1.6",
     "debounce-promise": "^3.1.2",
-    "lodash": "4.17.21"
+    "lodash": "4.17.23"
   },
   "devDependencies": {
     "formik": "^2.4.6",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-intl": "^7.1.4"
   },
   "peerDependencies": {