@commercetools-uikit/collapsible-panel 12.2.3 → 12.2.7

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

@@ -3,9 +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('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 +17,19 @@ 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';
@@ -61,7 +63,6 @@ var HeaderIcon = function HeaderIcon(props) {
 };
 
 HeaderIcon.displayName = 'HeaderIcon';
-HeaderIcon.propTypes = {};
 HeaderIcon.defaultProps = {
   tone: 'primary'
 };
@@ -83,7 +84,7 @@ 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), ";" + ("" ), "" );
+  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
@@ -92,39 +93,64 @@ var getHeaderContainerStyles = function getHeaderContainerStyles(props, isOpen)
 
 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"
+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"
+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 jsxRuntime.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,
@@ -133,7 +159,7 @@ var CollapsiblePanel = function CollapsiblePanel(props) {
           toggle = _ref.toggle,
           containerStyles = _ref.containerStyles,
           registerContentNode = _ref.registerContentNode;
-      return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+      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.
@@ -151,23 +177,23 @@ var CollapsiblePanel = function CollapsiblePanel(props) {
             buttonAttributes: dataProps,
             "aria-controls": panelContentId,
             "aria-expanded": isOpen ? 'true' : 'false',
-            children: [jsxRuntime.jsxs(Spacings__default['default'].Inline, {
+            children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
               alignItems: "center",
               scale: "s",
               children: [!props.hideExpansionControls && jsxRuntime.jsx(HeaderIcon$1, {
                 isClosed: !isOpen,
-                isDisabled: props.isDisabled,
+                isDisabled: props.isDisabled || false,
                 tone: props.tone,
                 size: props.condensed ? 'small' : 'medium'
-              }), jsxRuntime.jsxs(Spacings__default['default'].Inline, {
+              }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
                 alignItems: "center",
                 scale: scale,
-                children: [props.condensed ? jsxRuntime.jsx(Text__default['default'].Detail, {
-                  isInline: true,
+                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, {
+                }) : props.header, props.secondaryHeader && jsxRuntime.jsx(Text__default["default"].Detail, {
                   tone: "secondary",
                   truncate: true,
                   children: props.secondaryHeader
@@ -182,14 +208,13 @@ var CollapsiblePanel = function CollapsiblePanel(props) {
           }), jsxRuntime.jsx("div", {
             style: containerStyles,
             children: jsxRuntime.jsxs(SectionWrapper, {
-              isOpen: isOpen,
               ref: registerContentNode,
-              children: [props.description && jsxRuntime.jsx(Spacings__default['default'].Inset, {
+              children: [props.description && jsxRuntime.jsx(Spacings__default["default"].Inset, {
                 scale: scale,
-                children: jsxRuntime.jsx(Text__default['default'].Detail, {
+                children: jsxRuntime.jsx(Text__default["default"].Detail, {
                   children: props.description
                 })
-              }), jsxRuntime.jsx(Spacings__default['default'].Inset, {
+              }), jsxRuntime.jsx(Spacings__default["default"].Inset, {
                 scale: scale,
                 children: jsxRuntime.jsx(SectionContent, {
                   id: panelContentId,
@@ -205,36 +230,15 @@ var CollapsiblePanel = function CollapsiblePanel(props) {
   });
 };
 
+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'
-};
+CollapsiblePanel.defaultProps = defaultProps;
+CollapsiblePanel.Header = CollapsiblePanelHeader$1;
 var CollapsiblePanel$1 = CollapsiblePanel;
 
-var CollapsiblePanelHeader = function CollapsiblePanelHeader(props) {
-  return jsxRuntime.jsx(Text__default['default'].Subheadline, {
-    as: "h4",
-    isBold: true,
-    truncate: true,
-    children: props.children
-  });
-};
-
-CollapsiblePanelHeader.displayName = 'CollapsiblePanelHeader';
-CollapsiblePanelHeader.propTypes = {};
-var CollapsiblePanelHeader$1 = CollapsiblePanelHeader;
-
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.3';
-
-CollapsiblePanel$1.Header = CollapsiblePanelHeader$1;
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.7";
 
-exports['default'] = CollapsiblePanel$1;
+exports["default"] = CollapsiblePanel$1;
 exports.version = version;