@commercetools-uikit/collapsible-panel 12.2.4 → 12.2.5

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'
 };
@@ -93,37 +94,62 @@ 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"
+  target: "em5v1nl2"
 } )("margin-left:", designSystem.customProperties.spacingM, ";display:flex;align-items:center;cursor:auto;" + ("" ));
 
 var SectionContent = _styled__default["default"]("div", {
-  target: "erh4hih1"
+  target: "em5v1nl1"
 } )({
   name: "esy9f9",
   styles: "width:100%;display:flex;flex-wrap:wrap;align-items:flex-start"
 } );
 
 var SectionWrapper = _styled__default["default"]("div", {
-  target: "erh4hih0"
+  target: "em5v1nl0"
 } )("border-top:1px solid ", designSystem.customProperties.colorNeutral60, ";" + ("" ));
 
+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: "etpmm8q0"
+  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';
+  !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,
@@ -156,14 +182,14 @@ var CollapsiblePanel = function CollapsiblePanel(props) {
               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, {
                 alignItems: "center",
                 scale: scale,
                 children: [props.condensed ? jsxRuntime.jsx(Text__default["default"].Detail, {
-                  isInline: true,
+                  as: "span",
                   isBold: true,
                   truncate: true,
                   children: props.header
@@ -182,7 +208,6 @@ 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, {
                 scale: scale,
@@ -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.4';
-
-CollapsiblePanel$1.Header = CollapsiblePanelHeader$1;
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
 exports["default"] = CollapsiblePanel$1;
 exports.version = version;