@commercetools-uikit/primary-action-dropdown 16.0.0 → 16.1.1

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

@@ -23,28 +23,24 @@ var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceP
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
 
-const getButtonStyles = (isDisabled, isNewTheme) => {
+const getButtonStyles = isDisabled => {
   const baseButtonStyles = /*#__PURE__*/react$1.css("display:flex;align-items:center;height:", designSystem.designTokens.bigButtonHeight, ";" + ("" ), "" );
-
   if (isDisabled) {
-    return [baseButtonStyles, /*#__PURE__*/react$1.css("box-shadow:none;background-color:", designSystem.designTokens.backgroundColorForPrimaryActionDropdownWhenDisabled, ";border:", isNewTheme && "1px solid ".concat(designSystem.designTokens.colorNeutral), ";" + ("" ), "" )];
+    return [baseButtonStyles, /*#__PURE__*/react$1.css("box-shadow:none;background-color:", designSystem.designTokens.backgroundColorForPrimaryActionDropdownWhenDisabled, ";border:", "1px solid ".concat(designSystem.designTokens.colorNeutral), ";" + ("" ), "" )];
   }
-
-  return [baseButtonStyles, /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdown, ";border:", isNewTheme && "1px solid ".concat(designSystem.designTokens.colorNeutral), ";&:hover{box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdownWhenHovered, ";background-color:", isNewTheme && designSystem.designTokens.colorNeutral95, ";}&:active{box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdownWhenActive, ";background-color:", designSystem.designTokens.backgroundColorForPrimaryActionDropdownWhenActive, ";}" + ("" ), "" )];
+  return [baseButtonStyles, /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdown, ";border:", "1px solid ".concat(designSystem.designTokens.colorNeutral), ";&:hover{box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdownWhenHovered, ";background-color:", designSystem.designTokens.colorNeutral95, ";}&:active{box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdownWhenActive, ";background-color:", designSystem.designTokens.backgroundColorForPrimaryActionDropdownWhenActive, ";}" + ("" ), "" )];
 };
-
 var _ref2 = {
   name: "s5xdrg",
   styles: "display:flex;align-items:center"
 } ;
-
 const DropdownHead = props => jsxRuntime.jsxs("div", {
   css: _ref2,
   children: [jsxRuntime.jsxs(AccessibleButton__default["default"], {
     label: props.children,
     onClick: props.onClick,
     isDisabled: props.isDisabled,
-    css: [...getButtonStyles(props.isDisabled, props.isNewTheme), /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.paddingForPrimaryActionDropdown, ";border-radius:", designSystem.designTokens.borderRadiusForPrimaryActionDropdown, ";" + ("" ), "" ), "" ],
+    css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.paddingForPrimaryActionDropdown, ";border-radius:", designSystem.designTokens.borderRadiusForPrimaryActionDropdown, ";" + ("" ), "" ), "" ],
     children: [jsxRuntime.jsx("span", {
       css: /*#__PURE__*/react$1.css("margin-right:", designSystem.designTokens.marginRightForPrimaryActionDropdown, ";display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
       children: /*#__PURE__*/react.cloneElement(props.iconLeft, {
@@ -60,35 +56,32 @@ const DropdownHead = props => jsxRuntime.jsxs("div", {
     })]
   }), props.chevron]
 });
-
 DropdownHead.propTypes = {};
 DropdownHead.displayName = 'DropdownHead';
-
 var _ref = {
   name: "1jklb6q",
   styles: "pointer-events:none;margin-top:3px"
 } ;
-
 const DropdownChevron = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime.jsx(AccessibleButton__default["default"], {
   ref: ref,
   label: "Open Dropdown",
   onClick: props.onClick,
   isDisabled: props.isDisabled,
-  css: [...getButtonStyles(props.isDisabled, props.isNewTheme), /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.paddingForPrimaryActionDropdownIcon, ";border-radius:", designSystem.designTokens.borderRadiusForPrimaryActionDropdownIcon, ";border-color:", designSystem.designTokens.colorNeutral, ";border-width:", designSystem.designTokens.borderForPrimaryActionDropdownIcon, ";border-style:solid;" + ("" ), "" ), "" ],
+  css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.paddingForPrimaryActionDropdownIcon, ";border-radius:", designSystem.designTokens.borderRadiusForPrimaryActionDropdownIcon, ";border-color:", designSystem.designTokens.colorNeutral, ";border-width:", designSystem.designTokens.borderForPrimaryActionDropdownIcon, ";border-style:solid;" + ("" ), "" ), "" ],
   children: jsxRuntime.jsx("div", {
     // The margin-top is to center the icon as the caret visually looks too high otherwise
     css: _ref,
     children: /*#__PURE__*/react.cloneElement(props.isOpen && !props.isDisabled ? jsxRuntime.jsx(icons.CaretUpIcon, {}) : jsxRuntime.jsx(icons.CaretDownIcon, {}), {
-      color: props.isDisabled || props.isNewTheme ? 'neutral60' : 'solid',
+      color: 'neutral60',
       size: 'small'
     })
   })
 }));
 DropdownChevron.displayName = 'DropdownChevron';
-
 const Options = /*#__PURE__*/_styled__default["default"]("div", {
   target: "eb24b7r0"
-} )("position:absolute;z-index:5;width:100%;top:calc(", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.bigButtonHeight, ");border:1px solid ", designSystem.designTokens.borderColorForPrimaryActionDropdownMenu, ";border-radius:", designSystem.designTokens.borderRadiusForPrimaryActionDropdownMenu, ";box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdownMenu, ";margin-top:", designSystem.designTokens.marginTopForPrimaryActionDropdown, ";>button{padding-left:", props => props.isNewTheme && designSystem.designTokens.spacing30, ";white-space:normal;&:active{background-color:", props => props.isNewTheme && designSystem.designTokens.colorInfo95, ";}}" + ("" ));
+} )("position:absolute;z-index:5;width:100%;top:calc(", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.bigButtonHeight, ");border:1px solid ", designSystem.designTokens.borderColorForPrimaryActionDropdownMenu, ";border-radius:", designSystem.designTokens.borderRadiusForPrimaryActionDropdownMenu, ";box-shadow:", designSystem.designTokens.shadowForPrimaryActionDropdownMenu, ";margin-top:", designSystem.designTokens.marginTopForPrimaryActionDropdown, ";>button{padding-left:", designSystem.designTokens.spacing30, ";white-space:normal;&:active{background-color:", designSystem.designTokens.colorInfo95, ";}}" + ("" ));
+
 /*
   This component registers a global click event listener to close the dropdown.
   It uses this global listener to close when:
@@ -100,21 +93,14 @@ const Options = /*#__PURE__*/_styled__default["default"]("div", {
   immediately.
  */
 
-
 const PrimaryActionDropdown = props => {
   const ref = react.useRef();
-
   const _useToggleState = hooks.useToggleState(false),
-        _useToggleState2 = _slicedToArray(_useToggleState, 2),
-        isOpen = _useToggleState2[0],
-        toggle = _useToggleState2[1];
-
-  const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
+    _useToggleState2 = _slicedToArray(_useToggleState, 2),
+    isOpen = _useToggleState2[0],
+    toggle = _useToggleState2[1];
   const handleGlobalClick = react.useCallback(event => {
     const dropdownButton = ref.current;
-
     if (dropdownButton && event.target !== dropdownButton && !dropdownButton.contains(event.target)) {
       toggle(false);
     }
@@ -143,23 +129,19 @@ const PrimaryActionDropdown = props => {
     children: [jsxRuntime.jsx(DropdownHead, {
       iconLeft: primaryOption.props.iconLeft,
       isDisabled: primaryOption.props.isDisabled,
-      isNewTheme: isNewTheme,
       onClick: handleClickOnHead,
       chevron: jsxRuntime.jsx(DropdownChevron, {
         ref: ref,
         onClick: handleClickOnChevron,
         isDisabled: primaryOption.props.isDisabled,
-        isNewTheme: isNewTheme,
         isOpen: isOpen
       }),
       children: primaryOption.props.children
     }), isOpen && !primaryOption.props.isDisabled && jsxRuntime.jsx(Options, {
-      isNewTheme: isNewTheme,
       children: childrenAsArray
     })]
   });
 };
-
 PrimaryActionDropdown.propTypes = {};
 PrimaryActionDropdown.displayName = 'PrimaryActionDropdown';
 var PrimaryActionDropdown$1 = PrimaryActionDropdown;
@@ -171,7 +153,6 @@ const Option = props => jsxRuntime.jsx(AccessibleButton__default["default"], {
   css: [/*#__PURE__*/react$1.css("display:block;text-align:left;width:100%;padding:", designSystem.designTokens.spacing20, ";background-color:", designSystem.designTokens.colorSurface, ";&:first-of-type{border-radius:", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, ";}&:hover{background-color:", designSystem.designTokens.colorNeutral95, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral, ";" + ("" ), "" ), "" , "" ],
   children: props.children
 });
-
 Option.propTypes = {};
 Option.displayName = 'Option';
 Option.defaultProps = {
@@ -180,7 +161,7 @@ Option.defaultProps = {
 var Option$1 = Option;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 exports.Option = Option$1;
 exports["default"] = PrimaryActionDropdown$1;