@commercetools-uikit/collapsible-panel 12.2.1 → 12.2.5

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-require('react');
 require('prop-types');
-require('lodash/isNil');
+require('react');
+var isNil = require('lodash/isNil');
 var uniqueId = require('lodash/uniqueId');
 var utils = require('@commercetools-uikit/utils');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
@@ -17,17 +16,20 @@ var Constraints = require('@commercetools-uikit/constraints');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var icons = require('@commercetools-uikit/icons');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 var uniqueId__default = /*#__PURE__*/_interopDefault(uniqueId);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
 var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 
 var sizeIconContainer = '22px';
 var sizeIconContainerSmall = '14px';
@@ -42,35 +44,36 @@ var getArrowColor = function getArrowColor(_ref) {
 
 var HeaderIcon = function HeaderIcon(props) {
   var backgroundColor = props.tone === 'urgent' ? designSystem.customProperties.colorWarning : designSystem.customProperties.colorSurface;
-  return react.jsx("div", {
-    css: [/*#__PURE__*/react.css("display:flex;align-items:center;justify-content:center;height:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";width:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";border-radius:50%;flex-shrink:0;box-shadow:", designSystem.customProperties.shadow7, ";background-color:", backgroundColor, ";border:1px solid ", backgroundColor, ";" + ("" )), props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:1px solid ", designSystem.customProperties.colorNeutral, ";background-color:", designSystem.customProperties.colorAccent98, ";" + ("" )), "" ]
-  }, props.isClosed ? react.jsx(icons.AngleRightIcon, {
-    color: getArrowColor({
-      tone: props.tone,
-      isDisabled: props.isDisabled
-    }),
-    size: props.size
-  }) : react.jsx(icons.AngleDownIcon, {
-    color: getArrowColor({
-      tone: props.tone,
-      isDisabled: props.isDisabled
-    }),
-    size: props.size
-  }));
+  return jsxRuntime.jsx("div", {
+    css: [/*#__PURE__*/react.css("display:flex;align-items:center;justify-content:center;height:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";width:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";border-radius:50%;flex-shrink:0;box-shadow:", designSystem.customProperties.shadow7, ";background-color:", backgroundColor, ";border:1px solid ", backgroundColor, ";" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:1px solid ", designSystem.customProperties.colorNeutral, ";background-color:", designSystem.customProperties.colorAccent98, ";" + ("" ), "" ), "" , "" ],
+    children: props.isClosed ? jsxRuntime.jsx(icons.AngleRightIcon, {
+      color: getArrowColor({
+        tone: props.tone,
+        isDisabled: props.isDisabled
+      }),
+      size: props.size
+    }) : jsxRuntime.jsx(icons.AngleDownIcon, {
+      color: getArrowColor({
+        tone: props.tone,
+        isDisabled: props.isDisabled
+      }),
+      size: props.size
+    })
+  });
 };
 
 HeaderIcon.displayName = 'HeaderIcon';
-HeaderIcon.propTypes = {};
 HeaderIcon.defaultProps = {
   tone: 'primary'
 };
+var HeaderIcon$1 = HeaderIcon;
 
 function getThemeStyle(theme) {
   if (theme === 'light') {
-    return /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorSurface, ";" + ("" ));
+    return /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorSurface, ";" + ("" ), "" );
   }
 
-  return /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorNeutral95, ";" + ("" ));
+  return /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorNeutral95, ";" + ("" ), "" );
 }
 
 var _ref = {
@@ -81,139 +84,161 @@ var _ref = {
 var getHeaderContainerStyles = function getHeaderContainerStyles(props, isOpen) {
   var _context, _context2;
 
-  var baseStyles = /*#__PURE__*/react.css("position:relative;border-top-left-radius:", designSystem.customProperties.borderRadius6, ";border-top-right-radius:", designSystem.customProperties.borderRadius6, ";display:flex;flex:1;align-items:center;list-style-type:none;justify-content:", props.headerControlsAlignment === 'left' ? 'flex-start' : 'space-between', ";padding:", props.condensed ? _concatInstanceProperty__default['default'](_context = "".concat(designSystem.customProperties.spacingXs, " ")).call(_context, designSystem.customProperties.spacingS) : _concatInstanceProperty__default['default'](_context2 = "".concat(designSystem.customProperties.spacingS, " ")).call(_context2, designSystem.customProperties.spacingM), ";" + ("" ));
-  return [baseStyles, props.isDisabled && _ref, props.isSticky && isOpen && /*#__PURE__*/react.css("z-index:1;position:sticky;top:0;border-top-right-radius:", designSystem.customProperties.borderRadius6, ";border-top-left-radius:", designSystem.customProperties.borderRadius6, ";" + ("" )), !props.condensed &&
+  var baseStyles = /*#__PURE__*/react.css("position:relative;border-top-left-radius:", designSystem.customProperties.borderRadius6, ";border-top-right-radius:", designSystem.customProperties.borderRadius6, ";display:flex;flex:1;align-items:center;list-style-type:none;justify-content:", props.headerControlsAlignment === 'left' ? 'flex-start' : 'space-between', ";padding:", props.condensed ? _concatInstanceProperty__default["default"](_context = "".concat(designSystem.customProperties.spacingXs, " ")).call(_context, designSystem.customProperties.spacingS) : _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.customProperties.spacingS, " ")).call(_context2, designSystem.customProperties.spacingM), ";" + ("" ), "" );
+  return [baseStyles, props.isDisabled && _ref, props.isSticky && isOpen && /*#__PURE__*/react.css("z-index:1;position:sticky;top:0;border-top-right-radius:", designSystem.customProperties.borderRadius6, ";border-top-left-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ), "" ), !props.condensed &&
   /*#__PURE__*/
   // To understand why this min-height see: https://github.com/commercetools/ui-kit/pull/616
-  react.css("min-height:", designSystem.customProperties.bigButtonHeight, ";box-sizing:content-box;" + ("" ))];
+  react.css("min-height:", designSystem.customProperties.bigButtonHeight, ";box-sizing:content-box;" + ("" ), "" )];
 };
 
-var baseContainerStyles = /*#__PURE__*/react.css("position:relative;min-width:", designSystem.customProperties.constraint6, ";padding:0;display:flex;flex-direction:column;box-shadow:", designSystem.customProperties.shadow1, ";border-radius:", designSystem.customProperties.borderRadius6, ";color:", designSystem.customProperties.colorSolid, ";font-family:inherit;font-size:", designSystem.customProperties.fontSizeDefault, ";" + ("" ));
+var baseContainerStyles = /*#__PURE__*/react.css("position:relative;min-width:", designSystem.customProperties.constraint6, ";padding:0;display:flex;flex-direction:column;box-shadow:", designSystem.customProperties.shadow1, ";border-radius:", designSystem.customProperties.borderRadius6, ";color:", designSystem.customProperties.colorSolid, ";font-family:inherit;font-size:", designSystem.customProperties.fontSizeDefault, ";" + ("" ), "" );
 
-var HeaderControlsWrapper = _styled__default['default']("div", {
-  target: "erh4hih2"
-} )("margin-left:", designSystem.customProperties.spacingM, ";display:flex;align-items:center;cursor:auto;");
+var HeaderControlsWrapper = _styled__default["default"]("div", {
+  target: "em5v1nl2"
+} )("margin-left:", designSystem.customProperties.spacingM, ";display:flex;align-items:center;cursor:auto;" + ("" ));
 
-var SectionContent = _styled__default['default']("div", {
-  target: "erh4hih1"
+var SectionContent = _styled__default["default"]("div", {
+  target: "em5v1nl1"
 } )({
   name: "esy9f9",
   styles: "width:100%;display:flex;flex-wrap:wrap;align-items:flex-start"
 } );
 
-var SectionWrapper = _styled__default['default']("div", {
-  target: "erh4hih0"
-} )("border-top:1px solid ", designSystem.customProperties.colorNeutral60, ";");
+var SectionWrapper = _styled__default["default"]("div", {
+  target: "em5v1nl0"
+} )("border-top:1px solid ", designSystem.customProperties.colorNeutral60, ";" + ("" ));
 
-var HeaderContainer = /*#__PURE__*/_styled__default['default'](AccessibleButton__default['default'], {
-  target: "etpmm8q0"
-} )();
+var CollapsiblePanelHeader = function CollapsiblePanelHeader(props) {
+  return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+    as: "h4",
+    isBold: true,
+    truncate: true,
+    children: props.children
+  });
+};
+
+CollapsiblePanelHeader.propTypes = {};
+CollapsiblePanelHeader.displayName = 'CollapsiblePanelHeader';
+var CollapsiblePanelHeader$1 = CollapsiblePanelHeader;
+
+var HeaderContainer = /*#__PURE__*/_styled__default["default"](AccessibleButton__default["default"], {
+  target: "e1923bli0"
+} )("" );
 
 var panelContentIdPrefix = 'panel-content-';
 
 var getPanelContentId = function getPanelContentId(id) {
   return panelContentIdPrefix + id;
+};
+
+var defaultProps = {
+  id: uniqueId__default["default"](),
+  theme: 'dark',
+  condensed: false,
+  isDisabled: false,
+  headerControlsAlignment: 'right',
+  horizontalConstraint: 'scale'
 }; // When `isClosed` is provided the component behaves as a controlled component,
 // otherwise it will behave like an uncontrolled component.
 
-
 var CollapsiblePanel = function CollapsiblePanel(props) {
   var panelContentId = getPanelContentId(props.id); // Pass only `data-*` props
 
   var dataProps = utils.filterDataAttributes(props);
   var scale = props.condensed ? 's' : 'm';
-  return react.jsx(CollapsibleMotion__default['default'], {
+  !isNil__default["default"](props.isClosed) && !isNil__default["default"](props.isDefaultClosed);
+  !isNil__default["default"](props.onToggle);
+  !isNil__default["default"](props.isClosed); // controlled
+
+  return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
     isClosed: props.isClosed,
     onToggle: props.onToggle,
-    isDefaultClosed: props.isDefaultClosed
-  }, function (_ref) {
-    var isOpen = _ref.isOpen,
-        toggle = _ref.toggle,
-        containerStyles = _ref.containerStyles,
-        registerContentNode = _ref.registerContentNode;
-    return react.jsx(Constraints__default['default'].Horizontal, {
-      max: props.horizontalConstraint
-    }, react.jsx("div", {
-      css: [baseContainerStyles, getThemeStyle(props.theme), "" ] // 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
-    }, react.jsx(HeaderContainer, {
-      as: "div",
-      css: [getHeaderContainerStyles(props, isOpen), getThemeStyle(props.theme), "" ],
-      id: props.id,
-      label: "",
-      onClick: props.isDisabled ? undefined : toggle,
-      isDisabled: props.isDisabled,
-      buttonAttributes: dataProps,
-      "aria-controls": panelContentId,
-      "aria-expanded": isOpen ? 'true' : 'false'
-    }, react.jsx(Spacings__default['default'].Inline, {
-      alignItems: "center",
-      scale: "s"
-    }, !props.hideExpansionControls && react.jsx(HeaderIcon, {
-      isClosed: !isOpen,
-      isDisabled: props.isDisabled,
-      tone: props.tone,
-      size: props.condensed ? 'small' : 'medium'
-    }), react.jsx(Spacings__default['default'].Inline, {
-      alignItems: "center",
-      scale: scale
-    }, props.condensed ? react.jsx(Text__default['default'].Detail, {
-      isInline: true,
-      isBold: true,
-      truncate: true
-    }, props.header) : props.header, props.secondaryHeader && react.jsx(Text__default['default'].Detail, {
-      tone: "secondary",
-      truncate: true
-    }, props.secondaryHeader))), props.headerControls && react.jsx(HeaderControlsWrapper, {
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    }, props.headerControls)), react.jsx("div", {
-      style: containerStyles
-    }, react.jsx(SectionWrapper, {
-      isOpen: isOpen,
-      ref: registerContentNode
-    }, props.description && react.jsx(Spacings__default['default'].Inset, {
-      scale: scale
-    }, react.jsx(Text__default['default'].Detail, null, props.description)), react.jsx(Spacings__default['default'].Inset, {
-      scale: scale
-    }, react.jsx(SectionContent, {
-      id: panelContentId,
-      "aria-hidden": isOpen ? 'false' : 'true'
-    }, props.children))))));
+    isDefaultClosed: props.isDefaultClosed,
+    children: function children(_ref) {
+      var isOpen = _ref.isOpen,
+          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(props.theme), "" , "" ] // 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(props, isOpen), getThemeStyle(props.theme), "" , "" ],
+            id: props.id,
+            label: "",
+            onClick: props.isDisabled ? undefined : toggle,
+            isDisabled: props.isDisabled,
+            buttonAttributes: dataProps,
+            "aria-controls": panelContentId,
+            "aria-expanded": isOpen ? 'true' : 'false',
+            children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+              alignItems: "center",
+              scale: "s",
+              children: [!props.hideExpansionControls && jsxRuntime.jsx(HeaderIcon$1, {
+                isClosed: !isOpen,
+                isDisabled: props.isDisabled || false,
+                tone: props.tone,
+                size: props.condensed ? 'small' : 'medium'
+              }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+                alignItems: "center",
+                scale: scale,
+                children: [props.condensed ? jsxRuntime.jsx(Text__default["default"].Detail, {
+                  as: "span",
+                  isBold: true,
+                  truncate: true,
+                  children: props.header
+                }) : props.header, props.secondaryHeader && jsxRuntime.jsx(Text__default["default"].Detail, {
+                  tone: "secondary",
+                  truncate: true,
+                  children: props.secondaryHeader
+                })]
+              })]
+            }), props.headerControls && jsxRuntime.jsx(HeaderControlsWrapper, {
+              onClick: function onClick(event) {
+                return event.stopPropagation();
+              },
+              children: props.headerControls
+            })]
+          }), jsxRuntime.jsx("div", {
+            style: containerStyles,
+            children: jsxRuntime.jsxs(SectionWrapper, {
+              ref: registerContentNode,
+              children: [props.description && jsxRuntime.jsx(Spacings__default["default"].Inset, {
+                scale: scale,
+                children: jsxRuntime.jsx(Text__default["default"].Detail, {
+                  children: props.description
+                })
+              }), jsxRuntime.jsx(Spacings__default["default"].Inset, {
+                scale: scale,
+                children: jsxRuntime.jsx(SectionContent, {
+                  id: panelContentId,
+                  "aria-hidden": isOpen ? 'false' : 'true',
+                  children: props.children
+                })
+              })]
+            })
+          })]
+        })
+      });
+    }
   });
 };
 
+CollapsiblePanel.propTypes = {};
 CollapsiblePanel.getPanelContentId = getPanelContentId;
 CollapsiblePanel.displayName = 'CollapsiblePanel';
-CollapsiblePanel.propTypes = {};
-CollapsiblePanel.defaultProps = {
-  id: uniqueId__default['default'](),
-  theme: 'dark',
-  condensed: false,
-  isDisabled: false,
-  headerControlsAlignment: 'right',
-  horizontalConstraint: 'scale'
-};
-
-var CollapsiblePanelHeader = function CollapsiblePanelHeader(props) {
-  return react.jsx(Text__default['default'].Subheadline, {
-    as: "h4",
-    isBold: true,
-    truncate: true
-  }, props.children);
-};
-
-CollapsiblePanelHeader.displayName = 'CollapsiblePanelHeader';
-CollapsiblePanelHeader.propTypes = {};
-
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.1';
+CollapsiblePanel.defaultProps = defaultProps;
+CollapsiblePanel.Header = CollapsiblePanelHeader$1;
+var CollapsiblePanel$1 = CollapsiblePanel;
 
-CollapsiblePanel.Header = CollapsiblePanelHeader;
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
-exports.default = CollapsiblePanel;
+exports["default"] = CollapsiblePanel$1;
 exports.version = version;