@commercetools-uikit/primary-action-dropdown 12.2.2 → 12.2.6

package/dist/commercetools-uikit-primary-action-dropdown.cjs.prod.js

@@ -5,36 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
 var _styled = require('@emotion/styled/base');
+require('prop-types');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
-var React = require('react');
-var PropTypes = require('prop-types');
-var react = require('@emotion/react');
+var react = require('react');
+var react$1 = require('@emotion/react');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
 var designSystem = require('@commercetools-uikit/design-system');
 var Text = require('@commercetools-uikit/text');
 require('@commercetools-uikit/utils');
 var icons = require('@commercetools-uikit/icons');
 var hooks = require('@commercetools-uikit/hooks');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
 
 var getButtonStyles = function getButtonStyles(isDisabled) {
-  var baseButtonStyles = /*#__PURE__*/react.css("display:flex;align-items:center;height:", designSystem.customProperties.bigButtonHeight, ";" + ("" ));
+  var baseButtonStyles = /*#__PURE__*/react$1.css("display:flex;align-items:center;height:", designSystem.customProperties.bigButtonHeight, ";" + ("" ), "" );
 
   if (isDisabled) {
-    return [baseButtonStyles, /*#__PURE__*/react.css("box-shadow:none;background-color:", designSystem.customProperties.colorAccent98, ";" + ("" ))];
+    return [baseButtonStyles, /*#__PURE__*/react$1.css("box-shadow:none;background-color:", designSystem.customProperties.colorAccent98, ";" + ("" ), "" )];
   }
 
-  return [baseButtonStyles, /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow7, ";&:hover{box-shadow:", designSystem.customProperties.shadow8, ";}&:active{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" ))];
+  return [baseButtonStyles, /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow7, ";&:hover{box-shadow:", designSystem.customProperties.shadow8, ";}&:active{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" ), "" )];
 };
 
 var _ref3 = {
@@ -45,75 +44,62 @@ var _ref3 = {
 var DropdownHead = function DropdownHead(props) {
   var _context;
 
-  return react.jsx("div", {
-    css: _ref3
-  }, react.jsx(AccessibleButton__default['default'], {
-    label: props.children,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled,
-    css: _concatInstanceProperty__default['default'](_context = []).call(_context, _toConsumableArray(getButtonStyles(props.isDisabled)), [/*#__PURE__*/react.css("padding:0 ", designSystem.customProperties.spacingS, ";border-radius:", designSystem.customProperties.borderRadius6, " 0 0 ", designSystem.customProperties.borderRadius6, ";" + ("" ))])
-  }, react.jsx("span", {
-    css: /*#__PURE__*/react.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ))
-  }, /*#__PURE__*/React__default['default'].cloneElement(props.iconLeft, {
-    size: 'big',
-    color: props.isDisabled ? 'neutral60' : 'solid'
-  })), react.jsx("span", {
-    css: /*#__PURE__*/react.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ))
-  }, react.jsx(Text__default['default'].Detail, {
-    tone: props.isDisabled ? 'secondary' : undefined
-  }, props.children))), props.chevron);
+  return jsxRuntime.jsxs("div", {
+    css: _ref3,
+    children: [jsxRuntime.jsxs(AccessibleButton__default["default"], {
+      label: props.children,
+      onClick: props.onClick,
+      isDisabled: props.isDisabled,
+      css: _concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(getButtonStyles(props.isDisabled)), [/*#__PURE__*/react$1.css("padding:0 ", designSystem.customProperties.spacingS, ";border-radius:", designSystem.customProperties.borderRadius6, " 0 0 ", designSystem.customProperties.borderRadius6, ";" + ("" ), "" ), "" ]),
+      children: [jsxRuntime.jsx("span", {
+        css: /*#__PURE__*/react$1.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
+        children: /*#__PURE__*/react.cloneElement(props.iconLeft, {
+          size: 'big',
+          color: props.isDisabled ? 'neutral60' : 'solid'
+        })
+      }), jsxRuntime.jsx("span", {
+        css: /*#__PURE__*/react$1.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
+        children: jsxRuntime.jsx(Text__default["default"].Detail, {
+          tone: props.isDisabled ? 'secondary' : undefined,
+          children: props.children
+        })
+      })]
+    }), props.chevron]
+  });
 };
 
-DropdownHead.displayName = 'DropdownHead';
 DropdownHead.propTypes = {};
+DropdownHead.displayName = 'DropdownHead';
 
 var _ref2 = {
   name: "1jklb6q",
   styles: "pointer-events:none;margin-top:3px"
 } ;
 
-var DropdownChevron = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
+var DropdownChevron = /*#__PURE__*/react.forwardRef(function (props, ref) {
   var _context2;
 
-  return react.jsx(AccessibleButton__default['default'], {
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
     ref: ref,
     label: "Open Dropdown",
     onClick: props.onClick,
     isDisabled: props.isDisabled,
-    isOpen: props.isOpen,
-    css: _concatInstanceProperty__default['default'](_context2 = []).call(_context2, _toConsumableArray(getButtonStyles(props.isDisabled)), [/*#__PURE__*/react.css("padding:0 ", designSystem.customProperties.spacingXs, ";border-left:1px solid ", designSystem.customProperties.colorNeutral, ";border-radius:0 ", designSystem.customProperties.borderRadius6, " ", designSystem.customProperties.borderRadius6, " 0;" + ("" ))])
-  }, react.jsx("div", {
-    // The margin-top is to center the icon as the caret visually looks too high otherwise
-    css: _ref2
-  }, /*#__PURE__*/React__default['default'].cloneElement(props.isOpen && !props.isDisabled ? react.jsx(icons.CaretUpIcon, null) : react.jsx(icons.CaretDownIcon, null), {
-    color: props.isDisabled ? 'neutral60' : 'solid',
-    size: 'small'
-  })));
+    css: _concatInstanceProperty__default["default"](_context2 = []).call(_context2, _toConsumableArray(getButtonStyles(props.isDisabled)), [/*#__PURE__*/react$1.css("padding:0 ", designSystem.customProperties.spacingXs, ";border-left:1px solid ", designSystem.customProperties.colorNeutral, ";border-radius:0 ", designSystem.customProperties.borderRadius6, " ", designSystem.customProperties.borderRadius6, " 0;" + ("" ), "" ), "" ]),
+    children: jsxRuntime.jsx("div", {
+      // The margin-top is to center the icon as the caret visually looks too high otherwise
+      css: _ref2,
+      children: /*#__PURE__*/react.cloneElement(props.isOpen && !props.isDisabled ? jsxRuntime.jsx(icons.CaretUpIcon, {}) : jsxRuntime.jsx(icons.CaretDownIcon, {}), {
+        color: props.isDisabled ? 'neutral60' : 'solid',
+        size: 'small'
+      })
+    })
+  });
 });
 DropdownChevron.displayName = 'DropdownChevron';
-DropdownChevron.propTypes = {
-  onClick: PropTypes__default['default'].func.isRequired,
-  isDisabled: PropTypes__default['default'].bool.isRequired,
-  isOpen: PropTypes__default['default'].bool.isRequired
-};
 
-var Options = _styled__default['default']("div", {
-  target: "e102bf7i0"
-} )("position:absolute;z-index:5;width:100%;top:calc(", designSystem.customProperties.spacingS, " + ", designSystem.customProperties.bigButtonHeight, ");left:0;border:1px solid ", designSystem.customProperties.colorNeutral, ";border-radius:", designSystem.customProperties.borderRadius6, ";box-shadow:", designSystem.customProperties.shadow1, ";");
-
-var Option = function Option(props) {
-  return react.jsx(AccessibleButton__default['default'], {
-    label: props.children,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled,
-    css: [/*#__PURE__*/react.css("display:block;text-align:left;width:100%;padding:", designSystem.customProperties.spacingS, ";background-color:", designSystem.customProperties.colorSurface, ";&:first-of-type{border-radius:", designSystem.customProperties.borderRadius6, " ", designSystem.customProperties.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.customProperties.borderRadius6, " ", designSystem.customProperties.borderRadius6, ";}&:hover{background-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" )), props.isDisabled && /*#__PURE__*/react.css("color:", designSystem.customProperties.colorNeutral, ";" + ("" )), "" ]
-  }, props.children);
-};
-Option.displayName = 'Option';
-Option.propTypes = {};
-Option.defaultProps = {
-  isDisabled: false
-};
+var Options = _styled__default["default"]("div", {
+  target: "eb24b7r0"
+} )("position:absolute;z-index:5;width:100%;top:calc(", designSystem.customProperties.spacingS, " + ", designSystem.customProperties.bigButtonHeight, ");left:0;border:1px solid ", designSystem.customProperties.colorNeutral, ";border-radius:", designSystem.customProperties.borderRadius6, ";box-shadow:", designSystem.customProperties.shadow1, ";" + ("" ));
 /*
   This component registers a global click event listener to close the dropdown.
   It uses this global listener to close when:
@@ -125,69 +111,91 @@ Option.defaultProps = {
   immediately.
  */
 
+
 var _ref = {
   name: "47yzp9",
   styles: "position:relative;display:inline-flex;align-items:column"
 } ;
 
 var PrimaryActionDropdown = function PrimaryActionDropdown(props) {
-  var ref = React__default['default'].useRef();
+  var ref = react.useRef();
 
   var _useToggleState = hooks.useToggleState(false),
       _useToggleState2 = _slicedToArray(_useToggleState, 2),
       isOpen = _useToggleState2[0],
       toggle = _useToggleState2[1];
 
-  var handleGlobalClick = React__default['default'].useCallback(function (event) {
+  var handleGlobalClick = react.useCallback(function (event) {
     var dropdownButton = ref.current;
 
     if (dropdownButton && event.target !== dropdownButton && !dropdownButton.contains(event.target)) {
       toggle(false);
     }
   }, [ref, toggle]);
-  React__default['default'].useEffect(function () {
+  react.useEffect(function () {
     window.addEventListener('click', handleGlobalClick);
     return function () {
       window.removeEventListener('click', handleGlobalClick);
     };
   }, [handleGlobalClick]);
-  var childrenAsArray = React__default['default'].Children.toArray(props.children);
-  var primaryOption = _findInstanceProperty__default['default'](childrenAsArray).call(childrenAsArray, function (option) {
-    return !option.props.isDisabled;
+  var childrenAsArray = react.Children.toArray(props.children);
+  var primaryOption = _findInstanceProperty__default["default"](childrenAsArray).call(childrenAsArray, function (option) {
+    return /*#__PURE__*/react.isValidElement(option) && !option.props.isDisabled;
   }) || childrenAsArray[0];
   var onClick = primaryOption.props.onClick;
-  var handleClickOnHead = React__default['default'].useCallback(function (event) {
+  var handleClickOnHead = react.useCallback(function (event) {
     if (isOpen) {
       toggle(true);
     } else {
       onClick(event);
     }
   }, [isOpen, onClick, toggle]);
-  var handleClickOnChevron = React__default['default'].useCallback(function () {
+  var handleClickOnChevron = react.useCallback(function () {
     toggle();
   }, [toggle]);
-  return react.jsx("div", {
-    css: _ref
-  }, react.jsx(DropdownHead, {
-    iconLeft: primaryOption.props.iconLeft,
-    isDisabled: primaryOption.props.isDisabled,
-    onClick: handleClickOnHead,
-    chevron: react.jsx(DropdownChevron, {
-      ref: ref,
-      onClick: handleClickOnChevron,
+  return jsxRuntime.jsxs("div", {
+    css: _ref,
+    children: [jsxRuntime.jsx(DropdownHead, {
+      iconLeft: primaryOption.props.iconLeft,
       isDisabled: primaryOption.props.isDisabled,
-      isOpen: isOpen
-    })
-  }, primaryOption.props.children), isOpen && !primaryOption.props.isDisabled && react.jsx(Options, null, childrenAsArray));
+      onClick: handleClickOnHead,
+      chevron: jsxRuntime.jsx(DropdownChevron, {
+        ref: ref,
+        onClick: handleClickOnChevron,
+        isDisabled: primaryOption.props.isDisabled,
+        isOpen: isOpen
+      }),
+      children: primaryOption.props.children
+    }), isOpen && !primaryOption.props.isDisabled && jsxRuntime.jsx(Options, {
+      children: childrenAsArray
+    })]
+  });
 };
 
-PrimaryActionDropdown.displayName = 'PrimaryActionDropdown';
 PrimaryActionDropdown.propTypes = {};
+PrimaryActionDropdown.displayName = 'PrimaryActionDropdown';
 var PrimaryActionDropdown$1 = PrimaryActionDropdown;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.2';
+var Option = function Option(props) {
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
+    label: props.children,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    css: [/*#__PURE__*/react$1.css("display:block;text-align:left;width:100%;padding:", designSystem.customProperties.spacingS, ";background-color:", designSystem.customProperties.colorSurface, ";&:first-of-type{border-radius:", designSystem.customProperties.borderRadius6, " ", designSystem.customProperties.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.customProperties.borderRadius6, " ", designSystem.customProperties.borderRadius6, ";}&:hover{background-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorNeutral, ";" + ("" ), "" ), "" , "" ],
+    children: props.children
+  });
+};
+
+Option.propTypes = {};
+Option.displayName = 'Option';
+Option.defaultProps = {
+  isDisabled: false
+};
+var Option$1 = Option;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.6";
 
-exports.Option = Option;
-exports['default'] = PrimaryActionDropdown$1;
+exports.Option = Option$1;
+exports["default"] = PrimaryActionDropdown$1;
 exports.version = version;