@commercetools-uikit/data-table-manager 15.7.0 → 15.8.0

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

@@ -14,6 +14,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var react = require('react');
+var designSystem = require('@commercetools-uikit/design-system');
 var Spacings = require('@commercetools-uikit/spacings');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
@@ -24,10 +25,9 @@ var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/ins
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 require('@commercetools-uikit/utils');
 var reactIntl = require('react-intl');
-var AccessibleHiden = require('@commercetools-uikit/accessible-hidden');
+var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
 var SelectInput = require('@commercetools-uikit/select-input');
 var icons = require('@commercetools-uikit/icons');
-var designSystem = require('@commercetools-uikit/design-system');
 var FieldLabel = require('@commercetools-uikit/field-label');
 var Grid = require('@commercetools-uikit/grid');
 var RadioInput = require('@commercetools-uikit/radio-input');
@@ -61,7 +61,7 @@ var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
-var AccessibleHiden__default = /*#__PURE__*/_interopDefault(AccessibleHiden);
+var AccessibleHidden__default = /*#__PURE__*/_interopDefault(AccessibleHidden);
 var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
 var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
 var Grid__default = /*#__PURE__*/_interopDefault(Grid);
@@ -87,51 +87,62 @@ var COLUMN_MANAGER = 'columnManager';
 var DISPLAY_SETTINGS = 'displaySettings';
 
 var HeaderContainer = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e6ezr100"
+  target: "e6ezr101"
 } )({
   name: "1bhm8h2",
   styles: "display:flex;flex:1;justify-content:space-between"
 } );
 
+var CardContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e6ezr100"
+} )("padding:", designSystem.designTokens.paddingForTableManagerSettingsPanel, ";" + ("" ));
+
 var SettingsContainer = function SettingsContainer(props) {
   var intl = reactIntl.useIntl();
+
+  var _useTheme = designSystem.useTheme(),
+      themedValue = _useTheme.themedValue;
+
   return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
     isDefaultClosed: false,
     children: function children(_ref) {
       var registerContentNode = _ref.registerContentNode,
           containerStyles = _ref.containerStyles;
       return jsxRuntime.jsx(Card__default["default"], {
-        type: "flat",
+        type: themedValue('flat', 'raised'),
+        insetScale: "none",
         theme: props.containerTheme,
-        children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-          scale: "xs",
-          children: [jsxRuntime.jsxs(HeaderContainer, {
-            children: [jsxRuntime.jsx(Text__default["default"].Headline, {
-              as: "h3",
-              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: "xs",
-            children: [jsxRuntime.jsx(Spacings__default["default"].Inset, {
-              scale: "s",
-              children: jsxRuntime.jsx("div", {
-                style: containerStyles,
+        children: jsxRuntime.jsx(CardContentWrapper, {
+          children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: themedValue('xs', 'xl'),
+            children: [jsxRuntime.jsxs(HeaderContainer, {
+              children: [jsxRuntime.jsx(Text__default["default"].Headline, {
+                as: themedValue('h3', '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: themedValue('xs', 'l'),
+              children: [jsxRuntime.jsx(Spacings__default["default"].Inset, {
+                scale: "s",
                 children: jsxRuntime.jsx("div", {
-                  ref: registerContentNode,
-                  children: props.children
+                  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]
+              }), (props.secondaryButton || props.primaryButton) && jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+                justifyContent: "flex-end",
+                children: [props.secondaryButton, props.primaryButton]
+              })]
             })]
-          })]
+          })
         })
       });
     }
@@ -196,8 +207,13 @@ var DENSITY_COMPACT = 'density-compact';
 
 var DensityManager = function DensityManager(props) {
   var intl = reactIntl.useIntl();
+
+  var _useTheme = designSystem.useTheme(),
+      themedValue = _useTheme.themedValue;
+
   var textWrappingOption = props.isWrappingText ? SHOW_HIDE_ON_DEMAND : WRAPPED_TEXT_VISIBLE;
   var densityDisplayOption = props.isCondensed ? DENSITY_COMPACT : DENSITY_DEFAULT;
+  var columnStackScale = themedValue('s', 'l');
   return jsxRuntime.jsx(SettingsContainer$1, {
     title: messages$3.title,
     closeButtonLabel: messages$3.closeButtonLabel,
@@ -210,10 +226,10 @@ var DensityManager = function DensityManager(props) {
       gridTemplateColumns: "repeat(2, 1fr)",
       children: [jsxRuntime.jsx(Grid__default["default"].Item, {
         children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-          scale: "s",
+          scale: columnStackScale,
           children: [jsxRuntime.jsx(FieldLabel__default["default"], {
             title: intl.formatMessage(messages$3.textWrappingSubtitle)
-          }), jsxRuntime.jsxs(AccessibleHiden__default["default"], {
+          }), jsxRuntime.jsxs(AccessibleHidden__default["default"], {
             children: [jsxRuntime.jsx("label", {
               htmlFor: "text-wrapping-0",
               children: "Select radio option: display full text"
@@ -237,10 +253,10 @@ var DensityManager = function DensityManager(props) {
         })
       }), jsxRuntime.jsx(Grid__default["default"].Item, {
         children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-          scale: "s",
+          scale: columnStackScale,
           children: [jsxRuntime.jsx(FieldLabel__default["default"], {
             title: intl.formatMessage(messages$3.densityDisplaySubtitle)
-          }), jsxRuntime.jsxs(AccessibleHiden__default["default"], {
+          }), jsxRuntime.jsxs(AccessibleHidden__default["default"], {
             children: [jsxRuntime.jsx("label", {
               htmlFor: "density-display-0",
               children: "Select radio option: density default"
@@ -293,6 +309,10 @@ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
+var DraggableTagWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "emzjy4n0"
+} )("padding:", designSystem.designTokens.paddingForTableManagerDraggableTag, ";" + ("" ));
+
 var DraggableTag = function DraggableTag(props) {
   var handleRemoveColumn = function handleRemoveColumn() {
     var _props$onRemove;
@@ -305,8 +325,7 @@ var DraggableTag = function DraggableTag(props) {
     index: props.index,
     isDragDisabled: props.isDisabled,
     children: function children(provided) {
-      return jsxRuntime.jsx(Spacings__default["default"].Inset, {
-        scale: "xs",
+      return jsxRuntime.jsx(DraggableTagWrapper, {
         children: jsxRuntime.jsx(DraggingContainer$1, _objectSpread$3(_objectSpread$3(_objectSpread$3({
           ref: provided.innerRef
         }, provided.draggableProps), provided.dragHandleProps), {}, {
@@ -333,7 +352,7 @@ var DraggableTag$1 = DraggableTag;
 
 var TagContainerEditable = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e7rakq0"
-} )("background-color:", designSystem.designTokens.backgroundColorForInput, ";border:", designSystem.designTokens.borderRadius1, " solid ", designSystem.designTokens.colorNeutral60, ";border-radius:", designSystem.designTokens.borderRadius6, ";padding:", designSystem.designTokens.spacing20, ";height:", designSystem.designTokens.constraint7, ";overflow:auto;" + ("" ));
+} )("background-color:", designSystem.designTokens.backgroundColorForInput, ";border:1px solid ", designSystem.designTokens.borderColorForTableManagerDroppableList, ";border-radius:", designSystem.designTokens.borderRadiusForTableManagerDroppableList, ";padding:", designSystem.designTokens.paddingForTableManagerDroppableList, ";height:", designSystem.designTokens.constraint7, ";overflow:auto;" + ("" ));
 
 var TagContainerEditable$1 = TagContainerEditable;
 
@@ -506,6 +525,9 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
 
   var intl = reactIntl.useIntl();
 
+  var _useTheme = designSystem.useTheme(),
+      themedValue = _useTheme.themedValue;
+
   var _useState = react.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isDragging = _useState2[0],
@@ -542,16 +564,17 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
       onDragEnd: handleDragEnd,
       onDragStart: handleDragStart,
       children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-        scale: "m",
+        scale: themedValue('m', 'l'),
         children: [jsxRuntime.jsx(DroppableContainer, {
           isDragging: isDragging,
           "aria-labelledby": "hidden-columns",
           children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: themedValue('s', 'm'),
             children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-              scale: "xs",
+              scale: themedValue('xs', 's'),
               alignItems: "center",
               children: [jsxRuntime.jsx(icons.EyeCrossedIcon, {
-                size: "medium"
+                size: themedValue('medium', 'big')
               }), jsxRuntime.jsx(FieldLabel__default["default"], {
                 id: "hidden-columns",
                 title: intl.formatMessage(messages$1.hiddenColumns)
@@ -575,6 +598,7 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
           isDragging: isDragging,
           "aria-labelledby": "visible-columns",
           children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: themedValue('s', 'm'),
             children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
               scale: "xs",
               alignItems: "center",
@@ -675,6 +699,9 @@ var DataTableSettings = function DataTableSettings(props) {
   var areColumnSettingsEnabled = Boolean(props.columnManager && !props.columnManager.disableColumnManager);
   var intl = reactIntl.useIntl();
 
+  var _useTheme = designSystem.useTheme(),
+      themedValue = _useTheme.themedValue;
+
   var _useState = react.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       openedPanelId = _useState2[0],
@@ -698,13 +725,14 @@ var DataTableSettings = function DataTableSettings(props) {
   };
 
   return jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+    scale: themedValue('s', 'xs'),
     children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       justifyContent: "space-between",
       alignItems: "center",
       children: [jsxRuntime.jsx(TopBarContainer, {
         children: props.topBar
       }), dropdownOptions.length > 0 && jsxRuntime.jsxs(SelectContainer, {
-        children: [jsxRuntime.jsx(AccessibleHiden__default["default"], {
+        children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
           children: jsxRuntime.jsx("label", {
             htmlFor: "table-settings-dropdown",
             children: "Open table manager dropdown"
@@ -717,7 +745,9 @@ var DataTableSettings = function DataTableSettings(props) {
           placeholder: intl.formatMessage(messages.placeholder),
           onChange: handleDropdownChange,
           options: dropdownOptions,
-          iconLeft: jsxRuntime.jsx(icons.TableIcon, {})
+          iconLeft: jsxRuntime.jsx(icons.TableIcon, {
+            color: themedValue(undefined, 'neutral60')
+          })
         })]
       })]
     }), openedPanelId === DISPLAY_SETTINGS && jsxRuntime.jsx(DisplaySettingsManager, _objectSpread$1(_objectSpread$1({}, props.displaySettings || {}), {}, {
@@ -760,6 +790,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var DataTableManager = function DataTableManager(props) {
+  var _useTheme = designSystem.useTheme(),
+      themedValue = _useTheme.themedValue;
+
   var areDisplaySettingsEnabled = Boolean(props.displaySettings && !props.displaySettings.disableDisplaySettings);
   var isWrappingText = areDisplaySettingsEnabled && props.displaySettings.isWrappingText;
   var columns = react.useMemo(function () {
@@ -777,7 +810,7 @@ var DataTableManager = function DataTableManager(props) {
       onSettingsChange: props.onSettingsChange,
       columnManager: props.columnManager,
       displaySettings: props.displaySettings,
-      managerTheme: props.managerTheme
+      managerTheme: themedValue(props.managerTheme, 'light')
     }), /*#__PURE__*/react.cloneElement(props.children, {
       columns: columns,
       isCondensed: areDisplaySettingsEnabled && props.displaySettings.isCondensed
@@ -790,7 +823,7 @@ DataTableManager.displayName = 'DataTableManager';
 var DataTableManager$1 = DataTableManager;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.7.0";
+var version = "15.8.0";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,