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

package/dist/{data-table-manager-provider-3f60b85b.esm.js → data-table-manager-provider-32eb58dd.esm.js}

@@ -1,22 +1,26 @@
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$entries from '@babel/runtime-corejs3/core-js-stable/object/entries';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
 import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
-import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
-import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
-import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
-import { useContext, useMemo, createContext } from 'react';
+import { useContext, useState, useMemo, createContext } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const DataTableManagerContext = /*#__PURE__*/createContext({
   columns: [],
   displaySettings: undefined,
-  isCondensed: true
+  isCondensed: true,
+  debug: false,
+  additionalSettings: {}
 });
 const useDataTableManagerContext = () => {
   const dataTableManagerContext = useContext(DataTableManagerContext);
@@ -31,10 +35,30 @@ const DataTableManagerProvider = _ref => {
     displaySettings = _ref.displaySettings,
     topBar = _ref.topBar,
     onSettingsChange = _ref.onSettingsChange,
-    columnManager = _ref.columnManager;
+    columnManager = _ref.columnManager,
+    customSettings = _ref.customSettings,
+    selectedColumns = _ref.selectedColumns,
+    customColumnManager = _ref.customColumnManager,
+    customColumns = _ref.customColumns,
+    debug = _ref.debug;
+  const _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    additionalSettings = _useState2[0],
+    setAdditionalSettings = _useState2[1];
+  const updateCustomSettings = additionalCustomSettings => {
+    setAdditionalSettings(additionalCustomSettings);
+  };
   const decoupledDataTableManagerContext = useMemo(() => {
+    var _context;
     const areDisplaySettingsEnabled = Boolean(displaySettings && !displaySettings.disableDisplaySettings);
     const isWrappingText = areDisplaySettingsEnabled && displaySettings.isWrappingText;
+    const customSettingsPayload = {};
+    customSettings && _forEachInstanceProperty(_context = _Object$entries(customSettings)).call(_context, _ref2 => {
+      let _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        settingsPayload = _ref3[1];
+      customSettingsPayload[key] = settingsPayload;
+    });
     return {
       columns: _mapInstanceProperty(columns).call(columns, column => _objectSpread(_objectSpread({}, column), {}, {
         isTruncated: areDisplaySettingsEnabled ? isWrappingText : column.isTruncated
@@ -43,9 +67,17 @@ const DataTableManagerProvider = _ref => {
       topBar,
       onSettingsChange,
       columnManager,
-      isCondensed: areDisplaySettingsEnabled && displaySettings.isCondensed
+      customSettings,
+      customSettingsPayload,
+      isCondensed: areDisplaySettingsEnabled && displaySettings.isCondensed,
+      updateCustomSettings: settings => updateCustomSettings(settings),
+      additionalSettings,
+      selectedColumns,
+      customColumnManager,
+      customColumns,
+      debug // TODO - remove when nested rows are implemented
     };
-  }, [columns, displaySettings, topBar, onSettingsChange, columnManager]);
+  }, [displaySettings, customSettings, columns, topBar, onSettingsChange, columnManager, additionalSettings, selectedColumns, customColumnManager, customColumns, debug]);
   return jsx(DataTableManagerContext.Provider, {
     value: decoupledDataTableManagerContext,
     children: children

package/dist/{data-table-manager-provider-6c690fc1.cjs.dev.js → data-table-manager-provider-c64c81aa.cjs.prod.js}

@@ -1,36 +1,41 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+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');
 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 _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var react = require('react');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+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);
 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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const DataTableManagerContext = /*#__PURE__*/react.createContext({
   columns: [],
   displaySettings: undefined,
-  isCondensed: true
+  isCondensed: true,
+  debug: false,
+  additionalSettings: {}
 });
 const useDataTableManagerContext = () => {
   const dataTableManagerContext = react.useContext(DataTableManagerContext);
@@ -45,10 +50,30 @@ const DataTableManagerProvider = _ref => {
     displaySettings = _ref.displaySettings,
     topBar = _ref.topBar,
     onSettingsChange = _ref.onSettingsChange,
-    columnManager = _ref.columnManager;
+    columnManager = _ref.columnManager,
+    customSettings = _ref.customSettings,
+    selectedColumns = _ref.selectedColumns,
+    customColumnManager = _ref.customColumnManager,
+    customColumns = _ref.customColumns,
+    debug = _ref.debug;
+  const _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    additionalSettings = _useState2[0],
+    setAdditionalSettings = _useState2[1];
+  const updateCustomSettings = additionalCustomSettings => {
+    setAdditionalSettings(additionalCustomSettings);
+  };
   const decoupledDataTableManagerContext = react.useMemo(() => {
+    var _context;
     const areDisplaySettingsEnabled = Boolean(displaySettings && !displaySettings.disableDisplaySettings);
     const isWrappingText = areDisplaySettingsEnabled && displaySettings.isWrappingText;
+    const customSettingsPayload = {};
+    customSettings && _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](customSettings)).call(_context, _ref2 => {
+      let _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        settingsPayload = _ref3[1];
+      customSettingsPayload[key] = settingsPayload;
+    });
     return {
       columns: _mapInstanceProperty__default["default"](columns).call(columns, column => _objectSpread(_objectSpread({}, column), {}, {
         isTruncated: areDisplaySettingsEnabled ? isWrappingText : column.isTruncated
@@ -57,9 +82,17 @@ const DataTableManagerProvider = _ref => {
       topBar,
       onSettingsChange,
       columnManager,
-      isCondensed: areDisplaySettingsEnabled && displaySettings.isCondensed
+      customSettings,
+      customSettingsPayload,
+      isCondensed: areDisplaySettingsEnabled && displaySettings.isCondensed,
+      updateCustomSettings: settings => updateCustomSettings(settings),
+      additionalSettings,
+      selectedColumns,
+      customColumnManager,
+      customColumns,
+      debug // TODO - remove when nested rows are implemented
     };
-  }, [columns, displaySettings, topBar, onSettingsChange, columnManager]);
+  }, [displaySettings, customSettings, columns, topBar, onSettingsChange, columnManager, additionalSettings, selectedColumns, customColumnManager, customColumns, debug]);
   return jsxRuntime.jsx(DataTableManagerContext.Provider, {
     value: decoupledDataTableManagerContext,
     children: children

package/dist/{data-table-manager-provider-ddf7fb63.cjs.prod.js → data-table-manager-provider-fc238633.cjs.dev.js}

@@ -1,36 +1,41 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+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');
 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 _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var react = require('react');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+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);
 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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const DataTableManagerContext = /*#__PURE__*/react.createContext({
   columns: [],
   displaySettings: undefined,
-  isCondensed: true
+  isCondensed: true,
+  debug: false,
+  additionalSettings: {}
 });
 const useDataTableManagerContext = () => {
   const dataTableManagerContext = react.useContext(DataTableManagerContext);
@@ -45,10 +50,30 @@ const DataTableManagerProvider = _ref => {
     displaySettings = _ref.displaySettings,
     topBar = _ref.topBar,
     onSettingsChange = _ref.onSettingsChange,
-    columnManager = _ref.columnManager;
+    columnManager = _ref.columnManager,
+    customSettings = _ref.customSettings,
+    selectedColumns = _ref.selectedColumns,
+    customColumnManager = _ref.customColumnManager,
+    customColumns = _ref.customColumns,
+    debug = _ref.debug;
+  const _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    additionalSettings = _useState2[0],
+    setAdditionalSettings = _useState2[1];
+  const updateCustomSettings = additionalCustomSettings => {
+    setAdditionalSettings(additionalCustomSettings);
+  };
   const decoupledDataTableManagerContext = react.useMemo(() => {
+    var _context;
     const areDisplaySettingsEnabled = Boolean(displaySettings && !displaySettings.disableDisplaySettings);
     const isWrappingText = areDisplaySettingsEnabled && displaySettings.isWrappingText;
+    const customSettingsPayload = {};
+    customSettings && _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](customSettings)).call(_context, _ref2 => {
+      let _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        settingsPayload = _ref3[1];
+      customSettingsPayload[key] = settingsPayload;
+    });
     return {
       columns: _mapInstanceProperty__default["default"](columns).call(columns, column => _objectSpread(_objectSpread({}, column), {}, {
         isTruncated: areDisplaySettingsEnabled ? isWrappingText : column.isTruncated
@@ -57,9 +82,17 @@ const DataTableManagerProvider = _ref => {
       topBar,
       onSettingsChange,
       columnManager,
-      isCondensed: areDisplaySettingsEnabled && displaySettings.isCondensed
+      customSettings,
+      customSettingsPayload,
+      isCondensed: areDisplaySettingsEnabled && displaySettings.isCondensed,
+      updateCustomSettings: settings => updateCustomSettings(settings),
+      additionalSettings,
+      selectedColumns,
+      customColumnManager,
+      customColumns,
+      debug // TODO - remove when nested rows are implemented
     };
-  }, [columns, displaySettings, topBar, onSettingsChange, columnManager]);
+  }, [displaySettings, customSettings, columns, topBar, onSettingsChange, columnManager, additionalSettings, selectedColumns, customColumnManager, customColumns, debug]);
   return jsxRuntime.jsx(DataTableManagerContext.Provider, {
     value: decoupledDataTableManagerContext,
     children: children

package/dist/declarations/src/column-settings-manager/column-settings-manager.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement, type ReactNode, type MouseEvent, type KeyboardEvent, type Dispatch } from 'react';
+import { type DropResult } from 'react-beautiful-dnd';
+export type TColumnData = {
+    key: string;
+    label: ReactNode;
+};
+export type TColumnSettingsManagerProps = {
+    title?: string;
+    availableColumns: TColumnData[];
+    selectedColumns: TColumnData[];
+    onUpdateColumns: (updatedColums: TColumnData[]) => void;
+    areHiddenColumnsSearchable?: boolean;
+    searchHiddenColumns?: (searchTerm: string) => Promise<void> | void;
+    searchHiddenColumnsPlaceholder?: string;
+    onClose: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    primaryButton?: ReactElement;
+    secondaryButton?: ReactElement;
+    managerTheme?: 'light' | 'dark';
+};
+export declare const handleColumnsUpdate: (dragResult: DropResult, onUpdateColumns: TColumnSettingsManagerProps["onUpdateColumns"], selectedColumns: TColumnSettingsManagerProps["selectedColumns"], availableColumns: TColumnSettingsManagerProps["availableColumns"], setIsDragging: Dispatch<boolean>) => void;
+export declare const ColumnSettingsManager: {
+    (props: TColumnSettingsManagerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TColumnSettingsManagerProps, "availableColumns">;
+};
+export default ColumnSettingsManager;

package/dist/declarations/src/column-settings-manager/export-types.d.ts

@@ -0,0 +1,3 @@
+import type { TColumnSettingsManagerProps as ColumnSettingsManagerProps, TColumnData as ColumnData } from "./column-settings-manager.js";
+export type TColumnSettingsManagerProps = ColumnSettingsManagerProps;
+export type TColumnData = ColumnData;

package/dist/declarations/src/column-settings-manager/index.d.ts

@@ -0,0 +1,2 @@
+export { ColumnSettingsManager } from "./column-settings-manager.js";
+export * from "./export-types.js";

package/dist/declarations/src/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const UPDATE_ACTIONS: {
     COLUMNS_UPDATE: string;
+    CUSTOM_SETTINGS_UPDATE: string;
+    CUSTOM_COLUMNS_UPDATE: string;
     IS_TABLE_CONDENSED_UPDATE: string;
     IS_TABLE_WRAPPING_TEXT_UPDATE: string;
 };

package/dist/declarations/src/data-table-manager-provider/data-table-manager-provider.d.ts

@@ -1,15 +1,24 @@
-import type { TDataTableSettingsProps, TColumnManagerProps } from "../types.js";
+import type { TDataTableSettingsProps, TColumnManagerProps, TCustomSettingsProps } from "../types.js";
 import type { TDataTableManagerColumnProps, TRow } from "./types.js";
+import { TColumnData } from "../column-settings-manager/index.js";
 export type TDataTableManagerContext<Row extends TRow = TRow> = TDataTableSettingsProps & {
     columns: TDataTableManagerColumnProps<Row>[];
     isCondensed?: boolean;
+    customSettingsPayload?: Record<string, unknown>;
+    customColumns?: TColumnData[];
+    debug: boolean;
 };
 export declare const useDataTableManagerContext: () => TDataTableManagerContext<TRow>;
-export declare const DataTableManagerProvider: ({ children, columns, displaySettings, topBar, onSettingsChange, columnManager, }: {
+export declare const DataTableManagerProvider: ({ children, columns, displaySettings, topBar, onSettingsChange, columnManager, customSettings, selectedColumns, customColumnManager, customColumns, debug, }: {
     children: React.ReactNode;
     columns: TDataTableManagerColumnProps[];
     displaySettings: TDataTableSettingsProps["displaySettings"];
     topBar: string;
     onSettingsChange: () => void;
     columnManager: TColumnManagerProps;
+    customSettings?: TCustomSettingsProps[];
+    selectedColumns?: TColumnData[];
+    customColumnManager?: TColumnManagerProps;
+    customColumns?: TColumnData[];
+    debug: boolean;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/declarations/src/data-table-manager-provider/types.d.ts

@@ -3,15 +3,77 @@ export interface TRow {
     id: string;
 }
 export type TDataTableManagerColumnProps<Row extends TRow = TRow> = {
+    /**
+     * The unique key of the column that is used to identify your data type.
+     * You can use this value to determine which value from a row item should be rendered.
+     * <br>
+     * For example, if the data is a list of users, where each user has a `firstName` property,
+     * the column key should be `firstName`, which renders the correct value by default.
+     * The key can also be some custom or computed value, in which case you need to provide
+     * an explicit mapping of the value by implementing either the `itemRendered` function or
+     * the column-specific `renderItem` function.
+     */
     key: string;
+    /**
+     * The label of the column that will be shown on the column header.
+     */
     label: ReactNode;
+    /**
+     * Sets a width for this column. Accepts the same values as the ones specified for
+     * individual [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
+     * <br>
+     * For example, using `minmax` pairs (e.g. `minmax(200px, 400px)`), a combinations of
+     * fraction values (`1fr`/`2fr`/etc), or fixed values such as `200px`.
+     * By default, the column grows according to the content and respecting the total table available width.
+     */
     width?: string;
+    /**
+     * Use this to override the table's own `horizontalCellAlignment` prop for this specific column.
+     */
     align?: 'left' | 'center' | 'right';
+    /**
+     * A callback function, called when the header cell is clicked.
+     */
     onClick?: (event: MouseEventHandler) => void;
+    /**
+     * A callback function to render the content of cells under this column, overriding
+     * the default `itemRenderer` prop of the table.
+     */
     renderItem?: (row: Row, isRowCollapsed: boolean) => ReactNode;
+    /**
+     * Use this prop to place an `Icon` or `IconButton` on the left of the column label.
+     * It is advised to place these types of components through this prop instead of `label`,
+     * in order to properly position and align the elements.
+     * This is particularly useful for medium-sized icons which require more vertical space than the typography.
+     */
     headerIcon?: ReactNode;
+    /**
+     * Set this to `true` to allow text content of this cell to be truncated with an ellipsis,
+     * instead of breaking into multiple lines.
+     * <br>
+     * NOTE: when using this option, it is recommended to specify a `width` for the column, because
+     * if the table doesn't have enough space for all columns, it will start clipping the columns
+     * with _truncated_ content, and if no `width` is set (or the value is set `auto` -- the default)
+     * it can shrink until the column disappears completely.
+     * By enforcing a minimum width for these columns, the table will respect them and grow horizontally,
+     * adding scrollbars if needed.
+     */
     isTruncated?: boolean;
+    /**
+     * Set this to `true` to show a sorting button, which calls `onSortChange` upon being clicked.
+     * You should enable this flag for every column you want to be able to sort.
+     * When at least one column is sortable, the table props `sortBy`, `sortDirection` and `onSortChange` should be provided.
+     */
     isSortable?: boolean;
+    /**
+     * Set this to `true` to prevent this column from being manually resized by dragging
+     * the edge of the header with a mouse.
+     */
     disableResizing?: boolean;
+    /**
+     * Set this to `true` to prevent click event propagation for this cell.
+     * You might want this if you need the column to have its own call-to-action or input while
+     * the row also has a defined `onRowClick`.
+     */
     shouldIgnoreRowClick?: boolean;
 };

package/dist/declarations/src/export-types.d.ts

@@ -1,2 +1,4 @@
 export type { TRow, TColumnProps, TDataTableManagerProps, TColumnData, TDataTableSettingsProps, } from "./types.js";
+export type { TColumnSettingsManagerProps } from "./column-settings-manager/index.js";
 export type { TDataTableManagerContext } from "./data-table-manager-provider/index.js";
+export type { TIntlMessage } from "./settings-container/index.js";

package/dist/declarations/src/index.d.ts

@@ -2,5 +2,6 @@ export { default } from "./data-table-manager.js";
 export { DataTableManagerProvider, useDataTableManagerContext, } from "./data-table-manager-provider/index.js";
 export { UPDATE_ACTIONS } from "./constants.js";
 export { default as version } from "./version.js";
+export { ColumnSettingsManager } from "./column-settings-manager/index.js";
 export * from "./export-types.js";
 export { useRowSelection, useSorting } from '@commercetools-uikit/hooks';

package/dist/declarations/src/settings-container/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./settings-container.js";
+export type { TIntlMessage } from "./settings-container.js";

package/dist/declarations/src/settings-container/settings-container.d.ts

@@ -0,0 +1,23 @@
+import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+import { type MessageDescriptor } from 'react-intl';
+export type TIntlMessage = MessageDescriptor & {
+    values?: Record<string, React.ReactNode>;
+};
+type TSettingsContainerProps = {
+    title?: TIntlMessage;
+    closeButtonLabel: MessageDescriptor & {
+        values?: Record<string, React.ReactNode>;
+    };
+    onClose: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    primaryButton?: ReactElement;
+    secondaryButton?: ReactElement;
+    children: ReactNode;
+    containerTheme?: 'light' | 'dark';
+    customSettingsTitle?: string | TIntlMessage;
+};
+declare const SettingsContainer: {
+    (props: TSettingsContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TSettingsContainerProps, "containerTheme">;
+};
+export default SettingsContainer;