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

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
@@ -16,8 +17,8 @@ var react = require('react');
 var Spacings = require('@commercetools-uikit/spacings');
 var dataTableManagerProvider$1 = require('@commercetools-uikit/data-table-manager/data-table-manager-provider');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _styled = require('@emotion/styled/base');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 require('@commercetools-uikit/utils');
 var reactIntl = require('react-intl');
@@ -31,21 +32,22 @@ var Grid = require('@commercetools-uikit/grid');
 var RadioInput = require('@commercetools-uikit/radio-input');
 var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
 var designSystem = require('@commercetools-uikit/design-system');
-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');
-var reactBeautifulDnd = require('react-beautiful-dnd');
-var debounce = require('debounce-promise');
-var differenceWith = require('lodash/differenceWith');
-var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-var Tag = require('@commercetools-uikit/tag');
+var columnSettingsManager = require('./column-settings-manager-b08669e8.cjs.prod.js');
 var hooks = require('@commercetools-uikit/hooks');
-var dataTableManagerProvider = require('./data-table-manager-provider-ddf7fb63.cjs.prod.js');
+var dataTableManagerProvider = require('./data-table-manager-provider-c64c81aa.cjs.prod.js');
+require('@babel/runtime-corejs3/core-js-stable/promise');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('react-beautiful-dnd');
+require('debounce-promise');
+require('lodash/differenceWith');
+require('@commercetools-uikit/async-select-input');
+require('@commercetools-uikit/accessible-button');
+require('@commercetools-uikit/collapsible-motion');
+require('@commercetools-uikit/card');
+require('@commercetools-uikit/text');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('@commercetools-uikit/tag');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -60,6 +62,7 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
 var DropdownMenu__default = /*#__PURE__*/_interopDefault(DropdownMenu);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
@@ -68,92 +71,18 @@ var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
 var Grid__default = /*#__PURE__*/_interopDefault(Grid);
 var RadioInput__default = /*#__PURE__*/_interopDefault(RadioInput);
 var AccessibleHidden__default = /*#__PURE__*/_interopDefault(AccessibleHidden);
-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);
-var differenceWith__default = /*#__PURE__*/_interopDefault(differenceWith);
-var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
-var Tag__default = /*#__PURE__*/_interopDefault(Tag);
 
 const UPDATE_ACTIONS = {
   COLUMNS_UPDATE: 'columnsUpdate',
+  CUSTOM_SETTINGS_UPDATE: 'customSettingsUpdate',
+  CUSTOM_COLUMNS_UPDATE: 'customColumnsUpdate',
   IS_TABLE_CONDENSED_UPDATE: 'isTableCondensedUpdate',
   IS_TABLE_WRAPPING_TEXT_UPDATE: 'isTableWrappingTextUpdate'
 };
 const COLUMN_MANAGER = 'columnManager';
 const DISPLAY_SETTINGS = 'displaySettings';
 
-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: [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$2 = {
-  containerTheme: 'dark'
-};
-SettingsContainer.defaultProps = defaultProps$2;
-var SettingsContainer$1 = SettingsContainer;
-
-var messages$3 = reactIntl.defineMessages({
+var messages$2 = reactIntl.defineMessages({
   title: {
     id: 'UIKit.DataTableManager.DensityManager.title',
     description: 'Title for the density manager component.',
@@ -205,9 +134,10 @@ const DensityManager = props => {
   const intl = reactIntl.useIntl();
   const textWrappingOption = props.isWrappingText ? SHOW_HIDE_ON_DEMAND : WRAPPED_TEXT_VISIBLE;
   const densityDisplayOption = props.isCondensed ? DENSITY_COMPACT : DENSITY_COMFORTABLE;
-  return jsxRuntime.jsx(SettingsContainer$1, {
-    title: messages$3.title,
-    closeButtonLabel: messages$3.closeButtonLabel,
+  return jsxRuntime.jsx(columnSettingsManager.SettingsContainer, {
+    customSettingsTitle: props.title,
+    title: messages$2.title,
+    closeButtonLabel: messages$2.closeButtonLabel,
     onClose: props.onClose,
     primaryButton: props.primaryButton,
     secondaryButton: props.secondaryButton,
@@ -219,7 +149,7 @@ const DensityManager = props => {
         children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
           scale: 'l',
           children: [jsxRuntime.jsx(FieldLabel__default["default"], {
-            title: intl.formatMessage(messages$3.textWrappingSubtitle)
+            title: intl.formatMessage(messages$2.textWrappingSubtitle)
           }), jsxRuntime.jsxs(AccessibleHidden__default["default"], {
             children: [jsxRuntime.jsx("label", {
               htmlFor: "text-wrapping-0",
@@ -235,10 +165,10 @@ const DensityManager = props => {
             onChange: props.onTextWrappingChange,
             children: [jsxRuntime.jsx(RadioInput__default["default"].Option, {
               value: WRAPPED_TEXT_VISIBLE,
-              children: intl.formatMessage(messages$3.textWrappingAllWrapVisibleOption)
+              children: intl.formatMessage(messages$2.textWrappingAllWrapVisibleOption)
             }), jsxRuntime.jsx(RadioInput__default["default"].Option, {
               value: SHOW_HIDE_ON_DEMAND,
-              children: intl.formatMessage(messages$3.textWrappingShowHideOnDemandOption)
+              children: intl.formatMessage(messages$2.textWrappingShowHideOnDemandOption)
             })]
           })]
         })
@@ -246,7 +176,7 @@ const DensityManager = props => {
         children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
           scale: 'l',
           children: [jsxRuntime.jsx(FieldLabel__default["default"], {
-            title: intl.formatMessage(messages$3.densityDisplaySubtitle)
+            title: intl.formatMessage(messages$2.densityDisplaySubtitle)
           }), jsxRuntime.jsxs(AccessibleHidden__default["default"], {
             children: [jsxRuntime.jsx("label", {
               htmlFor: "density-display-0",
@@ -262,10 +192,10 @@ const DensityManager = props => {
             onChange: props.onDensityDisplayChange,
             children: [jsxRuntime.jsx(RadioInput__default["default"].Option, {
               value: DENSITY_COMFORTABLE,
-              children: intl.formatMessage(messages$3.densityDisplayComfortableOption)
+              children: intl.formatMessage(messages$2.densityDisplayComfortableOption)
             }), jsxRuntime.jsx(RadioInput__default["default"].Option, {
               value: DENSITY_COMPACT,
-              children: intl.formatMessage(messages$3.densityDisplayCompactOption)
+              children: intl.formatMessage(messages$2.densityDisplayCompactOption)
             })]
           })]
         })
@@ -275,286 +205,35 @@ const DensityManager = props => {
 };
 DensityManager.propTypes = {};
 DensityManager.displayName = 'DensityManager';
-const defaultProps$1 = {
+const defaultProps = {
   isCondensed: true,
   isWrappingText: false
 };
-DensityManager.defaultProps = defaultProps$1;
+DensityManager.defaultProps = defaultProps;
 var DisplaySettingsManager = DensityManager;
 
-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$3(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$3(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$3(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$3(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$3(_objectSpread$3(_objectSpread$3({
-          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$2 = 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$2.loadMoreAttributesHint
-            })
-          })]
-        }), provided.placeholder]
-      });
-    }
-  });
-};
-DroppablePanel.propTypes = {};
-DroppablePanel.displayName = 'DroppablePanel';
-var DroppablePanel$1 = DroppablePanel;
-
 var messages$1 = 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.',
+    id: 'UIKit.DataTableManager.CustomSettingsManager.closeButtonLabel',
+    description: 'Label for custom settings manager close button.',
     defaultMessage: 'Close'
   }
 });
 
-const HIDDEN_COLUMNS_PANEL = 'hidden-columns-panel';
-const SELECTED_COLUMNS_PANEL = 'selected-columns-panel';
-
-function ownKeys$2(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$2(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$2(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$2(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, {
-    title: messages$1.title,
-    closeButtonLabel: messages$1.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$1.hiddenColumns)
-              })]
-            }), props.areHiddenColumnsSearchable && jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread$2(_objectSpread$2({}, 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$1.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$1.visibleColumns)
-              })]
-            }), jsxRuntime.jsx(DroppablePanel$1, {
-              droppableId: SELECTED_COLUMNS_PANEL,
-              "data-testid": SELECTED_COLUMNS_PANEL,
-              noColumnsText: intl.formatMessage(messages$1.noSelectedColumnsToShow),
-              columns: props.selectedColumns,
-              onRemove: props.onUpdateColumns
-            })]
-          })
-        })]
-      })
+const CustomSettingsManager = props => {
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(columnSettingsManager.SettingsContainer, {
+      customSettingsTitle: props.customPanelTitle,
+      closeButtonLabel: messages$1.closeButtonLabel,
+      onClose: props.onClose,
+      containerTheme: props.managerTheme,
+      children: props.children
     })
   });
 };
-ColumnSettingsManager.propTypes = {};
-ColumnSettingsManager.displayName = 'ColumnSettingsManager';
-const defaultProps = {
-  availableColumns: []
-};
-ColumnSettingsManager.defaultProps = defaultProps;
-var ColumnSettingsManager$1 = ColumnSettingsManager;
+CustomSettingsManager.propTypes = {};
+CustomSettingsManager.displayName = 'CustomSettingsManager';
+var CustomSettingsManager$1 = CustomSettingsManager;
 
 var messages = reactIntl.defineMessages({
   placeholder: {
@@ -575,7 +254,7 @@ var messages = reactIntl.defineMessages({
 });
 
 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; }
+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__default["default"](_context4 = ownKeys$1(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$1(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const TopBarContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e3i1gnv0"
 } )({
@@ -583,16 +262,29 @@ const TopBarContainer = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "flex-grow:1"
 } );
 const getDropdownOptions = _ref => {
-  let areColumnSettingsEnabled = _ref.areColumnSettingsEnabled,
+  var _context, _context2;
+  let areCustomColumnSettingsEnabled = _ref.areCustomColumnSettingsEnabled,
+    areColumnSettingsEnabled = _ref.areColumnSettingsEnabled,
     areDisplaySettingsEnabled = _ref.areDisplaySettingsEnabled,
+    customSettings = _ref.customSettings,
+    columnManagerLabel = _ref.columnManagerLabel,
+    displaySettingsLabel = _ref.displaySettingsLabel,
     formatMessage = _ref.formatMessage;
-  return [...(areColumnSettingsEnabled ? [{
+  return _filterInstanceProperty__default["default"](_context = [...(areColumnSettingsEnabled ? [{
     value: COLUMN_MANAGER,
-    label: formatMessage(messages.columnManagerOption)
-  }] : []), ...(areDisplaySettingsEnabled ? [{
+    label: columnManagerLabel ? columnManagerLabel : formatMessage(messages.columnManagerOption)
+  }] : []), ...(customSettings ? _mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](customSettings)).call(_context2, _ref2 => {
+    let _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      customSetting = _ref3[1];
+    return customSetting.type === COLUMN_MANAGER && !areCustomColumnSettingsEnabled ? undefined : {
+      value: key,
+      label: customSetting.customPanelTitle
+    };
+  }) : []), ...(areDisplaySettingsEnabled ? [{
     value: DISPLAY_SETTINGS,
-    label: formatMessage(messages.displaySettingsOption)
-  }] : [])];
+    label: displaySettingsLabel ? displaySettingsLabel : formatMessage(messages.displaySettingsOption)
+  }] : [])]).call(_context, option => option !== undefined);
 };
 const getMappedColumns = function () {
   let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -605,17 +297,22 @@ const getSelectedColumns = function (mappedColumns) {
   return _mapInstanceProperty__default["default"](visibleColumnsKeys).call(visibleColumnsKeys, columnKey => mappedColumns[columnKey]);
 };
 const DataTableSettings = props => {
-  var _props$columnManager$, _props$columnManager;
+  var _props$customColumnMa, _props$columnManager, _props$displaySetting, _props$displaySetting2, _props$columnManager2, _props$columnManager$, _props$columnManager3, _context3;
   const areDisplaySettingsEnabled = Boolean(props.displaySettings && !props.displaySettings.disableDisplaySettings);
   const areColumnSettingsEnabled = Boolean(props.columnManager && !props.columnManager.disableColumnManager);
+  const areCustomColumnSettingsEnabled = Boolean(props.customColumnManager && !((_props$customColumnMa = props.customColumnManager) !== null && _props$customColumnMa !== void 0 && _props$customColumnMa.disableCustomColumnManager));
   const intl = reactIntl.useIntl();
   const _useState = react.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     openedPanelId = _useState2[0],
     setOpenedPanelId = _useState2[1];
   const dropdownOptions = getDropdownOptions({
+    areCustomColumnSettingsEnabled,
     areDisplaySettingsEnabled,
     areColumnSettingsEnabled,
+    customSettings: props.customSettings,
+    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);
@@ -648,6 +345,7 @@ const DataTableSettings = props => {
         })
       })]
     }), openedPanelId === DISPLAY_SETTINGS && jsxRuntime.jsx(DisplaySettingsManager, _objectSpread$1(_objectSpread$1({}, props.displaySettings || {}), {}, {
+      title: (_props$displaySetting2 = props.displaySettings) === null || _props$displaySetting2 === void 0 ? void 0 : _props$displaySetting2.displaySettingsLabel,
       onClose: handleSettingsPanelChange,
       onDensityDisplayChange: event => {
         var _props$onSettingsChan;
@@ -658,8 +356,9 @@ const DataTableSettings = props => {
         (_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 && jsxRuntime.jsx(ColumnSettingsManager$1, _objectSpread$1(_objectSpread$1({}, props.columnManager || {}), {}, {
-      availableColumns: (_props$columnManager$ = (_props$columnManager = props.columnManager) === null || _props$columnManager === void 0 ? void 0 : _props$columnManager.hideableColumns) !== null && _props$columnManager$ !== void 0 ? _props$columnManager$ : [],
+    })), openedPanelId === COLUMN_MANAGER && jsxRuntime.jsx(columnSettingsManager.ColumnSettingsManager, _objectSpread$1(_objectSpread$1({}, props.columnManager || {}), {}, {
+      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 => {
@@ -668,7 +367,40 @@ const DataTableSettings = props => {
         (_props$onSettingsChan3 = props.onSettingsChange) === null || _props$onSettingsChan3 === void 0 || _props$onSettingsChan3.call(props, UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
       },
       managerTheme: props.managerTheme
-    }))]
+    })), props.customSettings && _mapInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](props.customSettings)).call(_context3, _ref4 => {
+      var _props$customColumnMa2;
+      let _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        customSetting = _ref5[1];
+      if (!customSetting.key) {
+        throw new Error('ui-kit/DataTableManager: missing: `key` prop, `customSettings` must be a JSON in the format Record<string, Object>.');
+      }
+      const CustomComponent = customSetting.customComponent;
+      return key === openedPanelId && jsxRuntime.jsx("div", {
+        children: customSetting.type === COLUMN_MANAGER ? CustomComponent && jsxRuntime.jsx(CustomComponent, _objectSpread$1(_objectSpread$1({}, customSetting || {}), {}, {
+          additionalSettings: _objectSpread$1(_objectSpread$1({}, customSetting), props.additionalSettings),
+          onClose: handleSettingsPanelChange,
+          managerTheme: props.managerTheme,
+          selectedColumns: props.selectedColumns,
+          availableColumns: (_props$customColumnMa2 = props.customColumnManager) !== null && _props$customColumnMa2 !== void 0 ? _props$customColumnMa2 : undefined,
+          onUpdateColumns: (nextVisibleColumns, key) => {
+            var _props$onSettingsChan4;
+            const keysOfVisibleColumns = _mapInstanceProperty__default["default"](nextVisibleColumns).call(nextVisibleColumns, visibleColumn => visibleColumn.key);
+            (_props$onSettingsChan4 = props.onSettingsChange) === null || _props$onSettingsChan4 === void 0 || _props$onSettingsChan4.call(props, UPDATE_ACTIONS.CUSTOM_COLUMNS_UPDATE, keysOfVisibleColumns, key);
+          }
+        })) : jsxRuntime.jsx(CustomSettingsManager$1, _objectSpread$1(_objectSpread$1({}, customSetting || {}), {}, {
+          onClose: handleSettingsPanelChange,
+          managerTheme: props.managerTheme,
+          children: CustomComponent && jsxRuntime.jsx(CustomComponent, {
+            updateCustomSettings: 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)
+          })
+        }))
+      }, customSetting.key);
+    })]
   });
 };
 DataTableSettings.displayName = 'DataTableSettings';
@@ -683,6 +415,10 @@ const DataTableManager = props => {
   const topBar = props.topBar || dataTableManagerContext.topBar;
   const onSettingsChange = props.onSettingsChange || dataTableManagerContext.onSettingsChange;
   const columnManager = props.columnManager || dataTableManagerContext.columnManager;
+  const customSettings = props.customSettings || dataTableManagerContext.customSettings;
+  const selectedColumns = props.selectedColumns || dataTableManagerContext.selectedColumns;
+  const customColumnManager = props.customColumnManager || dataTableManagerContext.customColumnManager;
+  const customColumns = props.customColumns || dataTableManagerContext.customColumns;
   const areDisplaySettingsEnabled = Boolean(displaySettings && !displaySettings.disableDisplaySettings);
   const isWrappingText = areDisplaySettingsEnabled && displaySettings.isWrappingText;
   if (!dataTableColumns) {
@@ -691,15 +427,32 @@ const DataTableManager = props => {
   const columns = react.useMemo(() => _mapInstanceProperty__default["default"](dataTableColumns).call(dataTableColumns, column => _objectSpread(_objectSpread({}, column), {}, {
     isTruncated: areDisplaySettingsEnabled ? isWrappingText : column.isTruncated
   })), [dataTableColumns, areDisplaySettingsEnabled, isWrappingText]);
+  const _useState = react.useState({
+      key: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    additionalSettings = _useState2[0],
+    setAdditionalSettings = _useState2[1];
+  const additionalCustomSetting = dataTableManagerContext.additionalSettings || additionalSettings;
+  const updateSettings = additionalCustomSettings => {
+    setAdditionalSettings(additionalCustomSettings);
+  };
+  const updateCustomSettings = dataTableManagerContext.updateCustomSettings || updateSettings;
   return jsxRuntime.jsxs(Spacings__default["default"].Stack, {
     children: [jsxRuntime.jsx(DataTableSettings$1, {
       topBar: topBar,
       onSettingsChange: onSettingsChange,
       columnManager: columnManager,
       displaySettings: displaySettings,
-      managerTheme: "light"
+      customSettings: customSettings,
+      managerTheme: "light",
+      additionalSettings: additionalCustomSetting,
+      updateCustomSettings: settings => updateCustomSettings(settings),
+      selectedColumns: selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : [],
+      customColumnManager: customColumnManager !== null && customColumnManager !== void 0 ? customColumnManager : undefined
     }), props.children ? /*#__PURE__*/react.cloneElement(props.children, {
       columns,
+      customColumns,
       isCondensed: areDisplaySettingsEnabled && props.displaySettings.isCondensed
     }) : null]
   });
@@ -708,8 +461,9 @@ DataTableManager.displayName = 'DataTableManager';
 var DataTableManager$1 = DataTableManager;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.8.0";
+var version = "19.10.0";
 
+exports.ColumnSettingsManager = columnSettingsManager.ColumnSettingsManager;
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,
   get: function () { return hooks.useRowSelection; }