@commercetools-uikit/collapsible-panel 16.0.0 → 16.1.1

package/dist/commercetools-uikit-collapsible-panel.cjs.prod.js

@@ -2,15 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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 _styled = require('@emotion/styled/base');
 require('prop-types');
 var react$1 = require('react');
@@ -29,14 +20,6 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-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 _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -45,49 +28,35 @@ var Text__default = /*#__PURE__*/_interopDefault(Text);
 var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 
-const sizeIconContainer = '24px';
-const sizeIconContainerSmall = '14px';
-
 const getArrowColor = _ref2 => {
   let tone = _ref2.tone,
-      isDisabled = _ref2.isDisabled,
-      theme = _ref2.theme;
+    isDisabled = _ref2.isDisabled;
   if (isDisabled) return 'neutral60';
-  if (tone === 'urgent') return theme === 'default' ? 'surface' : 'warning';
+  if (tone === 'urgent') return 'warning';
   return 'solid';
 };
-
 var _ref$1 = {
   name: "1wnowod",
   styles: "display:flex;align-items:center;justify-content:center"
 } ;
-
 const HeaderIcon = props => {
-  const _useTheme = designSystem.useTheme(),
-        theme = _useTheme.theme,
-        isNewTheme = _useTheme.isNewTheme;
-
-  const backgroundColor = props.tone === 'urgent' && !isNewTheme ? designSystem.designTokens.colorWarning : designSystem.designTokens.colorSurface;
   return jsxRuntime.jsx("div", {
-    css: [_ref$1, !isNewTheme && /*#__PURE__*/react.css("height:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";width:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";border-radius:50%;flex-shrink:0;box-shadow:", designSystem.designTokens.shadow7, ";background-color:", backgroundColor, ";border:", backgroundColor, ";" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:1px solid ", designSystem.designTokens.borderForCollapsiblePanelHeaderIconWhenDisabled, ";background-color:", designSystem.designTokens.backgroundColorForCollapsiblePanelHeaderIconWhenDisabled, ";" + ("" ), "" ), "" , "" ],
+    css: [_ref$1, props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:1px solid ", designSystem.designTokens.borderForCollapsiblePanelHeaderIconWhenDisabled, ";background-color:", designSystem.designTokens.backgroundColorForCollapsiblePanelHeaderIconWhenDisabled, ";" + ("" ), "" ), "" , "" ],
     children: props.isClosed ? jsxRuntime.jsx(icons.AngleRightIcon, {
       color: getArrowColor({
         tone: props.tone,
-        isDisabled: props.isDisabled,
-        theme
+        isDisabled: props.isDisabled
       }),
       size: props.size
     }) : jsxRuntime.jsx(icons.AngleDownIcon, {
       color: getArrowColor({
         tone: props.tone,
-        isDisabled: props.isDisabled,
-        theme
+        isDisabled: props.isDisabled
       }),
       size: props.size
     })
   });
 };
-
 HeaderIcon.displayName = 'HeaderIcon';
 HeaderIcon.defaultProps = {
   tone: 'primary'
@@ -98,86 +67,56 @@ function getThemeStyle(theme) {
   if (theme === 'light') {
     return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" );
   }
-
   return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorNeutral95, ";" + ("" ), "" );
 }
-
 var _ref = {
   name: "1ll9bqd",
   styles: "cursor:default"
 } ;
-
 const getHeaderContainerStyles = (props, isOpen) => {
-  const baseStyles = /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", isOpen || props.isNewTheme ? '1px solid ' + designSystem.designTokens.borderColorForCollapsiblePanelHeader : 'none', ";position:relative;border-top-left-radius:", designSystem.designTokens.borderRadius6, ";border-top-right-radius:", designSystem.designTokens.borderRadius6, ";display:flex;flex:1;align-items:center;list-style-type:none;justify-content:", props.headerControlsAlignment === 'left' ? 'flex-start' : 'space-between', ";padding:", props.condensed ? "".concat(designSystem.designTokens.paddingForCollapsiblePanelHeaderAsCondensed) : "".concat(designSystem.designTokens.paddingForCollapsiblePanelHeader), ";" + ("" ), "" );
+  const baseStyles = /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", "1px solid ".concat(designSystem.designTokens.borderColorForCollapsiblePanelHeader), ";position:relative;border-top-left-radius:", designSystem.designTokens.borderRadius6, ";border-top-right-radius:", designSystem.designTokens.borderRadius6, ";display:flex;flex:1;align-items:center;list-style-type:none;justify-content:", props.headerControlsAlignment === 'left' ? 'flex-start' : 'space-between', ";padding:", props.condensed ? "".concat(designSystem.designTokens.paddingForCollapsiblePanelHeaderAsCondensed) : "".concat(designSystem.designTokens.paddingForCollapsiblePanelHeader), ";" + ("" ), "" );
   return [baseStyles, props.isDisabled && _ref, props.isSticky && isOpen && /*#__PURE__*/react.css("z-index:1;position:sticky;top:0;border-top-right-radius:", designSystem.designTokens.borderRadius6, ";border-top-left-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ), "" ), !props.condensed &&
   /*#__PURE__*/
   // To understand why this min-height see: https://github.com/commercetools/ui-kit/pull/616
   react.css("min-height:", designSystem.designTokens.bigButtonHeight, ";box-sizing:content-box;" + ("" ), "" )];
 };
-
 const baseContainerStyles = /*#__PURE__*/react.css("position:relative;min-width:", designSystem.designTokens.constraint6, ";padding:0;display:flex;flex-direction:column;color:", designSystem.designTokens.colorSolid, ";font-family:inherit;font-size:", designSystem.designTokens.fontSizeDefault, ";" + ("" ), "" );
-
-const getBaseContainerStyles = isNewTheme => !isNewTheme ? /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow1, ";border-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ), "" ) : undefined;
-
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "em5v1nl2"
 } )("margin-left:", designSystem.designTokens.spacing30, ";display:flex;align-items:center;cursor:auto;" + ("" ));
-
 const SectionContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "em5v1nl1"
 } )({
   name: "esy9f9",
   styles: "width:100%;display:flex;flex-wrap:wrap;align-items:flex-start"
 } );
-
 const SectionDescriptionWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "em5v1nl0"
 } )("padding:", _ref2 => {
   let condensed = _ref2.condensed;
   return condensed ? designSystem.designTokens.paddingForCollapsiblePanelSectionDescriptionAsCondensed : designSystem.designTokens.paddingForCollapsiblePanelSectionDescription;
 }, ";" + ("" ));
-
 const SectionWrapper = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   return jsxRuntime.jsx("div", {
     ref: ref,
-    css: ["\n          padding: ".concat(props.condensed ? designSystem.designTokens.paddingForCollapsiblePanelSectionWrapperAsCondensed : designSystem.designTokens.paddingForCollapsiblePanelSectionWrapper, ";\n        "), props.isNewTheme && props.isExpandControlHidden && 'padding-left: 0;', "" , "" ],
+    css: ["\n          padding: ".concat(props.condensed ? designSystem.designTokens.paddingForCollapsiblePanelSectionWrapperAsCondensed : designSystem.designTokens.paddingForCollapsiblePanelSectionWrapper, ";\n        "), props.isExpandControlHidden && 'padding-left: 0;', "" , "" ],
     children: props.children
   });
 });
 SectionWrapper.displayName = 'SectionWrapper';
 
-const CollapsiblePanelHeader = props => {
-  const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
-  if (isNewTheme) {
-    return jsxRuntime.jsx(Text__default["default"].Headline, {
-      as: "h2",
-      truncate: true,
-      children: props.children
-    });
-  }
-
-  return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-    as: "h4",
-    isBold: true,
-    truncate: true,
-    children: props.children
-  });
-};
-
+const CollapsiblePanelHeader = props => jsxRuntime.jsx(Text__default["default"].Headline, {
+  as: "h2",
+  truncate: true,
+  children: props.children
+});
 CollapsiblePanelHeader.propTypes = {};
 CollapsiblePanelHeader.displayName = 'CollapsiblePanelHeader';
 var CollapsiblePanelHeader$1 = CollapsiblePanelHeader;
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(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(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(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const HeaderContainer = /*#__PURE__*/_styled__default["default"](AccessibleButton__default["default"], {
   target: "e1923bli0"
 } )("" );
-
 const panelButtonSequentialId = utils.createSequentialId('collapsible-panel-button-');
 const panelContentSequentialId = utils.createSequentialId('collapsible-panel-content-');
 const defaultProps = {
@@ -187,69 +126,51 @@ const defaultProps = {
   headerControlsAlignment: 'right',
   horizontalConstraint: 'scale'
 };
-
 const HeadLineText = props => {
   if (!props.condensed) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: props.header
     });
   }
+  return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+    as: "h4",
+    truncate: true,
+    children: props.header
+  });
+};
 
-  if (props.isNewTheme) {
-    return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-      as: "h4",
-      truncate: true,
-      children: props.header
-    });
-  } else {
-    return jsxRuntime.jsx(Text__default["default"].Detail, {
-      as: "span",
-      isBold: true,
-      truncate: true,
-      children: props.header
-    });
-  }
-}; // When `isClosed` is provided the component behaves as a controlled component,
+// When `isClosed` is provided the component behaves as a controlled component,
 // otherwise it will behave like an uncontrolled component.
-
-
 const CollapsiblePanel = props => {
-  const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme,
-        themedValue = _useTheme.themedValue;
-
   const panelButtonId = hooks.useFieldId(props.id, panelButtonSequentialId);
-  const panelContentId = hooks.useFieldId(undefined, panelContentSequentialId); // Pass only `data-*` props
-
+  const panelContentId = hooks.useFieldId(undefined, panelContentSequentialId);
+  // Pass only `data-*` props
   const dataProps = utils.filterDataAttributes(props);
   const scale = props.condensed ? 's' : 'm';
-  const iconSize = themedValue(props.condensed ? 'small' : 'medium', 'medium');
   !isNil__default["default"](props.isClosed) && !isNil__default["default"](props.isDefaultClosed);
   !isNil__default["default"](props.onToggle);
-  !isNil__default["default"](props.isClosed); // controlled
-
+  !isNil__default["default"](props.isClosed);
   return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
     isClosed: props.isClosed,
     onToggle: props.onToggle,
     isDefaultClosed: props.isDefaultClosed,
     children: _ref => {
       let isOpen = _ref.isOpen,
-          toggle = _ref.toggle,
-          containerStyles = _ref.containerStyles,
-          registerContentNode = _ref.registerContentNode;
+        toggle = _ref.toggle,
+        containerStyles = _ref.containerStyles,
+        registerContentNode = _ref.registerContentNode;
       return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
         max: props.horizontalConstraint,
         children: jsxRuntime.jsxs("div", {
-          css: [baseContainerStyles, getThemeStyle(themedValue(props.theme, 'light')), getBaseContainerStyles(isNewTheme), "" , "" ] // Allow to override the styles by passing a `className` prop.
+          css: [baseContainerStyles, getThemeStyle('light'), "" , "" ]
+          // Allow to override the styles by passing a `className` prop.
           // Custom styles can also be passed using the `css` prop from emotion.
           // https://emotion.sh/docs/css-prop#style-precedence
           ,
           className: props.className,
           children: [jsxRuntime.jsxs(HeaderContainer, {
             as: "div",
-            css: [getHeaderContainerStyles(_objectSpread(_objectSpread({}, props), {}, {
-              isNewTheme
-            }), isOpen), getThemeStyle(themedValue(props.theme, 'light')), "" , "" ],
+            css: [getHeaderContainerStyles(props, isOpen), getThemeStyle('light'), "" , "" ],
             id: panelButtonId,
             label: "",
             onClick: props.isDisabled ? undefined : toggle,
@@ -259,19 +180,18 @@ const CollapsiblePanel = props => {
             "aria-expanded": isOpen ? 'true' : 'false',
             children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
               alignItems: "center",
-              scale: themedValue('s', 'xs'),
+              scale: "xs",
               children: [!props.hideExpansionControls && jsxRuntime.jsx(HeaderIcon$1, {
                 isClosed: !isOpen,
                 isDisabled: props.isDisabled || false,
                 tone: props.tone,
-                size: iconSize
+                size: 'medium'
               }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-                alignItems: themedValue('center', 'baseline'),
+                alignItems: "baseline",
                 scale: scale,
                 children: [jsxRuntime.jsx(HeadLineText, {
                   header: props.header,
-                  condensed: props.condensed,
-                  isNewTheme: isNewTheme
+                  condensed: props.condensed
                 }), props.secondaryHeader && jsxRuntime.jsx(Text__default["default"].Detail, {
                   tone: "secondary",
                   truncate: true,
@@ -284,16 +204,16 @@ const CollapsiblePanel = props => {
             })]
           }), jsxRuntime.jsx("div", {
             style: containerStyles,
-            children: jsxRuntime.jsxs(SectionWrapper // @ts-ignore
+            children: jsxRuntime.jsxs(SectionWrapper
+            // @ts-ignore
             , {
               ref: registerContentNode,
               condensed: props.condensed,
               isExpandControlHidden: props.hideExpansionControls,
-              isNewTheme: isNewTheme,
               children: [props.description && jsxRuntime.jsx(SectionDescriptionWrapper, {
                 condensed: props.condensed,
                 children: jsxRuntime.jsx(Text__default["default"].Detail, {
-                  tone: themedValue(undefined, 'secondary'),
+                  tone: "secondary",
                   children: props.description
                 })
               }), jsxRuntime.jsx(Spacings__default["default"].Stack, {
@@ -313,22 +233,19 @@ const CollapsiblePanel = props => {
     }
   });
 };
+
 /**
  * @deprecated This function is no longer supported.
  */
-
-
 CollapsiblePanel.propTypes = {};
-
 CollapsiblePanel.getPanelContentId = () => '';
-
 CollapsiblePanel.displayName = 'CollapsiblePanel';
 CollapsiblePanel.defaultProps = defaultProps;
 CollapsiblePanel.Header = CollapsiblePanelHeader$1;
 var CollapsiblePanel$1 = CollapsiblePanel;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 exports["default"] = CollapsiblePanel$1;
 exports.version = version;