@commercetools-uikit/primary-action-dropdown 12.2.3 → 12.2.7

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

@@ -5,11 +5,11 @@ 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$1 = 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');
@@ -23,18 +23,17 @@ 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 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 = {
@@ -47,20 +46,20 @@ var DropdownHead = function DropdownHead(props) {
 
   return jsxRuntime.jsxs("div", {
     css: _ref3,
-    children: [jsxRuntime.jsxs(AccessibleButton__default['default'], {
+    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.css("padding:0 ", designSystem.customProperties.spacingS, ";border-radius:", designSystem.customProperties.borderRadius6, " 0 0 ", designSystem.customProperties.borderRadius6, ";" + ("" ), "" ), "" ]),
+      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.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
-        children: /*#__PURE__*/react$1.cloneElement(props.iconLeft, {
+        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.css("margin:0 ", designSystem.customProperties.spacingXs, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
-        children: jsxRuntime.jsx(Text__default['default'].Detail, {
+        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
         })
@@ -69,28 +68,27 @@ var DropdownHead = function DropdownHead(props) {
   });
 };
 
-DropdownHead.displayName = 'DropdownHead';
 DropdownHead.propTypes = {};
+DropdownHead.displayName = 'DropdownHead';
 
 var _ref2 = {
   name: "1jklb6q",
   styles: "pointer-events:none;margin-top:3px"
 } ;
 
-var DropdownChevron = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+var DropdownChevron = /*#__PURE__*/react.forwardRef(function (props, ref) {
   var _context2;
 
-  return jsxRuntime.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;" + ("" ), "" ), "" ]),
+    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$1.cloneElement(props.isOpen && !props.isDisabled ? jsxRuntime.jsx(icons.CaretUpIcon, {}) : jsxRuntime.jsx(icons.CaretDownIcon, {}), {
+      children: /*#__PURE__*/react.cloneElement(props.isOpen && !props.isDisabled ? jsxRuntime.jsx(icons.CaretUpIcon, {}) : jsxRuntime.jsx(icons.CaretDownIcon, {}), {
         color: props.isDisabled ? 'neutral60' : 'solid',
         size: 'small'
       })
@@ -98,30 +96,10 @@ var DropdownChevron = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   });
 });
 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"
+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, ";" + ("" ));
-
-var Option = function Option(props) {
-  return jsxRuntime.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, ";" + ("" ), "" ), "" , "" ],
-    children: props.children
-  });
-};
-Option.displayName = 'Option';
-Option.propTypes = {};
-Option.defaultProps = {
-  isDisabled: false
-};
 /*
   This component registers a global click event listener to close the dropdown.
   It uses this global listener to close when:
@@ -133,45 +111,46 @@ Option.defaultProps = {
   immediately.
  */
 
+
 var _ref = {
   name: "47yzp9",
   styles: "position:relative;display:inline-flex;align-items:column"
 } ;
 
 var PrimaryActionDropdown = function PrimaryActionDropdown(props) {
-  var ref = react$1.useRef();
+  var ref = react.useRef();
 
   var _useToggleState = hooks.useToggleState(false),
       _useToggleState2 = _slicedToArray(_useToggleState, 2),
       isOpen = _useToggleState2[0],
       toggle = _useToggleState2[1];
 
-  var handleGlobalClick = react$1.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$1.useEffect(function () {
+  react.useEffect(function () {
     window.addEventListener('click', handleGlobalClick);
     return function () {
       window.removeEventListener('click', handleGlobalClick);
     };
   }, [handleGlobalClick]);
-  var childrenAsArray = react$1.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$1.useCallback(function (event) {
+  var handleClickOnHead = react.useCallback(function (event) {
     if (isOpen) {
       toggle(true);
     } else {
       onClick(event);
     }
   }, [isOpen, onClick, toggle]);
-  var handleClickOnChevron = react$1.useCallback(function () {
+  var handleClickOnChevron = react.useCallback(function () {
     toggle();
   }, [toggle]);
   return jsxRuntime.jsxs("div", {
@@ -193,13 +172,30 @@ var PrimaryActionDropdown = function PrimaryActionDropdown(props) {
   });
 };
 
-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.3';
+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.7";
 
-exports.Option = Option;
-exports['default'] = PrimaryActionDropdown$1;
+exports.Option = Option$1;
+exports["default"] = PrimaryActionDropdown$1;
 exports.version = version;