@commercetools-uikit/primary-action-dropdown 19.0.0 → 19.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-primary-action-dropdown.cjs.dev.js +26 -31
  2. package/dist/commercetools-uikit-primary-action-dropdown.cjs.prod.js +24 -29
  3. package/dist/commercetools-uikit-primary-action-dropdown.esm.js +14 -19
  4. package/package.json +8 -8
package/dist/commercetools-uikit-primary-action-dropdown.cjs.prod.js CHANGED
@@ -6,8 +6,8 @@ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
6
6
  var _styled = require('@emotion/styled/base');
7
7
  require('prop-types');
8
8
  var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
9
- var react$1 = require('react');
10
- var react = require('@emotion/react');
9
+ var react = require('react');
10
+ var react$1 = require('@emotion/react');
11
11
  var AccessibleButton = require('@commercetools-uikit/accessible-button');
12
12
  var designSystem = require('@commercetools-uikit/design-system');
13
13
  var Text = require('@commercetools-uikit/text');
@@ -24,34 +24,32 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
24
24
  var Text__default = /*#__PURE__*/_interopDefault(Text);
25
25
 
26
26
  const getButtonStyles = isDisabled => {
27
- const baseButtonStyles = /*#__PURE__*/react.css("display:flex;align-items:center;height:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
27
+ const baseButtonStyles = /*#__PURE__*/react$1.css("display:flex;align-items:center;height:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
28
28
  if (isDisabled) {
29
- return [baseButtonStyles, /*#__PURE__*/react.css("box-shadow:none;background-color:", designSystem.designTokens.colorNeutral95, ";border:", "1px solid ".concat(designSystem.designTokens.colorNeutral), ";" + ("" ), "" )];
29
+ return [baseButtonStyles, /*#__PURE__*/react$1.css("box-shadow:none;background-color:", designSystem.designTokens.colorNeutral95, ";border:", "1px solid ".concat(designSystem.designTokens.colorNeutral), ";" + ("" ), "" )];
30
30
  }
31
- return [baseButtonStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadow0, ";border:1px solid ", designSystem.designTokens.borderColorForDropdown, ";&:hover{box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.backgroundColorForDropdownWhenHovered, ";}&:active{box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.backgroundColorForDropdownWhenActive, ";}" + ("" ), "" )];
31
+ return [baseButtonStyles, /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadow0, ";border:1px solid ", designSystem.designTokens.colorPrimary85, ";&:hover{box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.colorPrimary95, ";}&:active{box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.colorPrimary90, ";}" + ("" ), "" )];
32
32
  };
33
33
  var _ref2 = {
34
34
  name: "s5xdrg",
35
35
  styles: "display:flex;align-items:center"
36
36
  } ;
37
37
  const DropdownHead = props => {
38
- const _useTheme = designSystem.useTheme(),
39
- themedValue = _useTheme.themedValue;
40
38
  return jsxRuntime.jsxs("div", {
41
39
  css: _ref2,
42
40
  children: [jsxRuntime.jsxs(AccessibleButton__default["default"], {
43
41
  label: props.children,
44
42
  onClick: props.onClick,
45
43
  isDisabled: props.isDisabled,
46
- css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react.css("padding:0 ", designSystem.designTokens.spacing30, ";border-radius:", designSystem.designTokens.borderRadius4, " 0 0 ", designSystem.designTokens.borderRadius4, ";" + ("" ), "" ), "" ],
44
+ css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:0 ", designSystem.designTokens.spacing30, ";border-radius:", designSystem.designTokens.borderRadius4, " 0 0 ", designSystem.designTokens.borderRadius4, ";" + ("" ), "" ), "" ],
47
45
  children: [jsxRuntime.jsx("span", {
48
- css: /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.spacing20, ";display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
49
- children: /*#__PURE__*/react$1.cloneElement(props.iconLeft, {
46
+ css: /*#__PURE__*/react$1.css("margin-right:", designSystem.designTokens.spacing20, ";display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
47
+ children: /*#__PURE__*/react.cloneElement(props.iconLeft, {
50
48
  size: 'big',
51
- color: props.isDisabled ? 'neutral60' : themedValue('solid', 'primary')
49
+ color: props.isDisabled ? 'neutral60' : 'primary'
52
50
  })
53
51
  }), jsxRuntime.jsx("span", {
54
- css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing10, " 0 0;display:flex;align-items:center;justify-content:center;", !props.isDisabled && /*#__PURE__*/react.css(">div{color:", designSystem.designTokens.fontColorForButtonAsSecondary, "!important;}" + ("" ), "" ), ";" + ("" ), "" ),
52
+ css: /*#__PURE__*/react$1.css("margin:0 ", designSystem.designTokens.spacing10, " 0 0;display:flex;align-items:center;justify-content:center;", !props.isDisabled && /*#__PURE__*/react$1.css(">div{color:", designSystem.designTokens.fontColorForButtonAsSecondary, "!important;}" + ("" ), "" ), ";" + ("" ), "" ),
55
53
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
56
54
  tone: props.isDisabled ? 'secondary' : undefined,
57
55
  children: props.children
@@ -66,16 +64,16 @@ var _ref = {
66
64
  name: "1jklb6q",
67
65
  styles: "pointer-events:none;margin-top:3px"
68
66
  } ;
69
- const DropdownChevron = /*#__PURE__*/react$1.forwardRef((props, ref) => jsxRuntime.jsx(AccessibleButton__default["default"], {
67
+ const DropdownChevron = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime.jsx(AccessibleButton__default["default"], {
70
68
  ref: ref,
71
69
  label: "Open Dropdown",
72
70
  onClick: props.onClick,
73
71
  isDisabled: props.isDisabled,
74
- css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react.css("padding:0 ", designSystem.designTokens.spacing20, ";border-radius:0 ", designSystem.designTokens.borderRadius4, " ", designSystem.designTokens.borderRadius4, " 0;border-color:", props.isDisabled ? designSystem.designTokens.colorNeutral : designSystem.designTokens.borderColorForDropdown, ";border-width:1px 1px 1px 0px;border-style:solid;" + ("" ), "" ), "" ],
72
+ css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:0 ", designSystem.designTokens.spacing20, ";border-radius:0 ", designSystem.designTokens.borderRadius4, " ", designSystem.designTokens.borderRadius4, " 0;border-color:", props.isDisabled ? designSystem.designTokens.colorNeutral : designSystem.designTokens.colorPrimary85, ";border-width:1px 1px 1px 0px;border-style:solid;" + ("" ), "" ), "" ],
75
73
  children: jsxRuntime.jsx("div", {
76
74
  // The margin-top is to center the icon as the caret visually looks too high otherwise
77
75
  css: _ref,
78
- children: /*#__PURE__*/react$1.cloneElement(props.isOpen && !props.isDisabled ? jsxRuntime.jsx(icons.CaretUpIcon, {}) : jsxRuntime.jsx(icons.CaretDownIcon, {}), {
76
+ children: /*#__PURE__*/react.cloneElement(props.isOpen && !props.isDisabled ? jsxRuntime.jsx(icons.CaretUpIcon, {}) : jsxRuntime.jsx(icons.CaretDownIcon, {}), {
79
77
  color: 'neutral60',
80
78
  size: 'small'
81
79
  })
@@ -84,7 +82,7 @@ const DropdownChevron = /*#__PURE__*/react$1.forwardRef((props, ref) => jsxRunti
84
82
  DropdownChevron.displayName = 'DropdownChevron';
85
83
  const Options = /*#__PURE__*/_styled__default["default"]("div", {
86
84
  target: "eb24b7r0"
87
- } )("position:absolute;z-index:5;width:100%;top:calc(\n ", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.heightForButtonAsMedium, "\n );border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);margin-top:", designSystem.designTokens.spacing20, ";>button{padding-left:", designSystem.designTokens.spacing30, ";white-space:normal;", props => props.isRecolouringTheme && /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}" + ("" ), "" ), ";&:active{background-color:", designSystem.designTokens.backgroundColorForDropdownOptionWhenActive, ";}}" + ("" ));
85
+ } )("position:absolute;z-index:5;width:100%;top:calc(\n ", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.heightForButtonAsMedium, "\n );border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);margin-top:", designSystem.designTokens.spacing20, ";>button{padding-left:", designSystem.designTokens.spacing30, ";white-space:normal;&:active{background-color:", designSystem.designTokens.colorPrimary95, ";}&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}}" + ("" ));
88
86
 
89
87
  /*
90
88
  This component registers a global click event listener to close the dropdown.
@@ -98,40 +96,38 @@ const Options = /*#__PURE__*/_styled__default["default"]("div", {
98
96
  */
99
97
 
100
98
  const PrimaryActionDropdown = props => {
101
- const ref = react$1.useRef();
99
+ const ref = react.useRef();
102
100
  const _useToggleState = hooks.useToggleState(false),
103
101
  _useToggleState2 = _slicedToArray(_useToggleState, 2),
104
102
  isOpen = _useToggleState2[0],
105
103
  toggle = _useToggleState2[1];
106
- const handleGlobalClick = react$1.useCallback(event => {
104
+ const handleGlobalClick = react.useCallback(event => {
107
105
  const dropdownButton = ref.current;
108
106
  if (dropdownButton && event.target !== dropdownButton && !dropdownButton.contains(event.target)) {
109
107
  toggle(false);
110
108
  }
111
109
  }, [ref, toggle]);
112
- const _useTheme2 = designSystem.useTheme(),
113
- isRecolouringTheme = _useTheme2.isRecolouringTheme;
114
- react$1.useEffect(() => {
110
+ react.useEffect(() => {
115
111
  window.addEventListener('click', handleGlobalClick);
116
112
  return () => {
117
113
  window.removeEventListener('click', handleGlobalClick);
118
114
  };
119
115
  }, [handleGlobalClick]);
120
- const childrenAsArray = react$1.Children.toArray(props.children);
121
- const primaryOption = _findInstanceProperty__default["default"](childrenAsArray).call(childrenAsArray, option => /*#__PURE__*/react$1.isValidElement(option) && !option.props.isDisabled) || childrenAsArray[0];
116
+ const childrenAsArray = react.Children.toArray(props.children);
117
+ const primaryOption = _findInstanceProperty__default["default"](childrenAsArray).call(childrenAsArray, option => /*#__PURE__*/react.isValidElement(option) && !option.props.isDisabled) || childrenAsArray[0];
122
118
  const onClick = primaryOption.props.onClick;
123
- const handleClickOnHead = react$1.useCallback(event => {
119
+ const handleClickOnHead = react.useCallback(event => {
124
120
  if (isOpen) {
125
121
  toggle(true);
126
122
  } else {
127
123
  onClick(event);
128
124
  }
129
125
  }, [isOpen, onClick, toggle]);
130
- const handleClickOnChevron = react$1.useCallback(() => {
126
+ const handleClickOnChevron = react.useCallback(() => {
131
127
  toggle();
132
128
  }, [toggle]);
133
129
  return jsxRuntime.jsxs("div", {
134
- css: /*#__PURE__*/react.css("position:relative;display:inline-flex;align-items:column;>:first-of-type>button{height:", designSystem.designTokens.heightForButtonAsBig, ";}" + ("" ), "" ),
130
+ css: /*#__PURE__*/react$1.css("position:relative;display:inline-flex;align-items:column;>:first-of-type>button{height:", designSystem.designTokens.heightForButtonAsBig, ";}" + ("" ), "" ),
135
131
  children: [jsxRuntime.jsx(DropdownHead, {
136
132
  iconLeft: primaryOption.props.iconLeft,
137
133
  isDisabled: primaryOption.props.isDisabled,
@@ -144,7 +140,6 @@ const PrimaryActionDropdown = props => {
144
140
  }),
145
141
  children: primaryOption.props.children
146
142
  }), isOpen && !primaryOption.props.isDisabled && jsxRuntime.jsx(Options, {
147
- isRecolouringTheme: isRecolouringTheme,
148
143
  children: childrenAsArray
149
144
  })]
150
145
  });
@@ -157,7 +152,7 @@ const Option = props => jsxRuntime.jsx(AccessibleButton__default["default"], {
157
152
  label: props.children,
158
153
  onClick: props.onClick,
159
154
  isDisabled: props.isDisabled,
160
- css: [/*#__PURE__*/react.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.css("color:", designSystem.designTokens.colorNeutral, ";" + ("" ), "" ), "" , "" ],
155
+ 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, ";" + ("" ), "" ), "" , "" ],
161
156
  children: props.children
162
157
  });
163
158
  Option.propTypes = {};
@@ -168,7 +163,7 @@ Option.defaultProps = {
168
163
  var Option$1 = Option;
169
164
 
170
165
  // NOTE: This string will be replaced on build time with the package version.
171
- var version = "19.0.0";
166
+ var version = "19.2.0";
172
167
 
173
168
  exports.Option = Option$1;
174
169
  exports["default"] = PrimaryActionDropdown$1;