@mailstep/design-system 0.8.2 → 0.8.4-beta.2

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 (46) hide show
  1. package/package.json +8 -14
  2. package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js +21 -1
  3. package/ui/Blocks/CornerDialog/stories/CornerDialog.stories.d.ts +1 -1
  4. package/ui/Blocks/ImageList/stories/ImageList.stories.d.ts +1 -1
  5. package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts +1 -1
  6. package/ui/Blocks/LightBox/stories/LightBox.stories.d.ts +1 -1
  7. package/ui/Blocks/Modal/stories/Modal.stories.d.ts +1 -1
  8. package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts +1 -1
  9. package/ui/Elements/Alert/stories/Alert.stories.d.ts +1 -1
  10. package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.d.ts +1 -1
  11. package/ui/Elements/Avatar/stories/Avatar.stories.d.ts +1 -1
  12. package/ui/Elements/Badge/stories/Badge.stories.d.ts +1 -1
  13. package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.d.ts +1 -1
  14. package/ui/Elements/BorderedBox/stories/BorderedBox.stories.d.ts +1 -1
  15. package/ui/Elements/Button/stories/Button.stories.d.ts +1 -1
  16. package/ui/Elements/Card/stories/Card.stories.d.ts +1 -1
  17. package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts +1 -1
  18. package/ui/Elements/Dropdown/stories/Dropdown.stories.d.ts +1 -1
  19. package/ui/Elements/ErrorMessage/stories/ErrorMessage.stories.d.ts +1 -1
  20. package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts +2 -2
  21. package/ui/Elements/Icon/stories/Icon.stories.d.ts +1 -1
  22. package/ui/Elements/Image/stories/Image.stories.d.ts +1 -1
  23. package/ui/Elements/Label/stories/Label.stories.d.ts +1 -1
  24. package/ui/Elements/Line/stories/Line.stories.d.ts +1 -1
  25. package/ui/Elements/Link/stories/Link.stories.d.ts +1 -1
  26. package/ui/Elements/Logo/stories/Logo.stories.d.ts +1 -1
  27. package/ui/Elements/Pagination/stories/Pagination.stories.d.ts +1 -1
  28. package/ui/Elements/ProgressBar/stories/ProgressBar.stories.d.ts +1 -1
  29. package/ui/Elements/Select/Select.js +3 -3
  30. package/ui/Elements/Select/components/IconValueContainer.js +3 -2
  31. package/ui/Elements/Select/types.d.ts +2 -0
  32. package/ui/Elements/SpaceAround/stories/SpaceAround.stories.d.ts +1 -1
  33. package/ui/Elements/Spinner/stories/Spinner.stories.d.ts +1 -1
  34. package/ui/Elements/Tag/stories/Tag.stories.d.ts +1 -1
  35. package/ui/Elements/Text/stories/Text.stories.d.ts +1 -1
  36. package/ui/Elements/Toast/stories/Toast.stories.d.ts +1 -1
  37. package/ui/Elements/Toggle/stories/Toggle.stories.d.ts +1 -1
  38. package/ui/Elements/Tooltip/stories/Tooltip.stories.d.ts +1 -1
  39. package/ui/Elements/Typography/stories/Typography.stories.d.ts +1 -1
  40. package/ui/Forms/Checkbox/stories/Checkbox.stories.d.ts +1 -1
  41. package/ui/Forms/Checkbox/styles.d.ts +1 -1
  42. package/ui/Forms/Input/stories/Input.stories.d.ts +1 -1
  43. package/ui/Forms/RadioButton/stories/RadioButton.stories.d.ts +1 -1
  44. package/ui/index.es.js +7085 -7063
  45. package/ui/index.umd.js +224 -224
  46. package/ui/utils/KeyPress/KeyPress.stories.d.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.2",
3
+ "version": "0.8.4-beta.2",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -39,16 +39,9 @@
39
39
  "@lingui/core": "3.17.2",
40
40
  "@lingui/react": "3.17.2",
41
41
  "@popperjs/core": "^2.11.8",
42
- "@storybook/addon-controls": "^8.4.7",
43
- "@storybook/addon-designs": "^8.0.4",
44
- "@storybook/addon-essentials": "^8.4.7",
45
- "@storybook/addon-interactions": "^8.4.7",
46
- "@storybook/addon-links": "^8.4.7",
47
- "@storybook/blocks": "^8.4.7",
48
- "@storybook/react": "^8.4.7",
49
- "@storybook/react-webpack5": "^8.4.7",
50
- "@storybook/test": "^8.4.7",
51
- "@storybook/types": "^8.4.7",
42
+ "@storybook/addon-designs": "^11.1.2",
43
+ "@storybook/addon-links": "10.2.8",
44
+ "@storybook/react-webpack5": "10.2.8",
52
45
  "@svgr/rollup": "^8.0.1",
53
46
  "@trivago/prettier-plugin-sort-imports": "^4.3.0",
54
47
  "@types/faker": "^4.1.11",
@@ -79,7 +72,7 @@
79
72
  "eslint-plugin-react": "^7.35.0",
80
73
  "eslint-plugin-react-hooks": "^4.6.2",
81
74
  "eslint-plugin-react-perf": "^3.3.2",
82
- "eslint-plugin-storybook": "^0.11.1",
75
+ "eslint-plugin-storybook": "10.2.8",
83
76
  "faker": "^5.1.0",
84
77
  "immer": "9.0.7",
85
78
  "lodash": "^4.17.21",
@@ -100,7 +93,7 @@
100
93
  "react-use-draggable-scroll": "^0.4.7",
101
94
  "redux": ">=4.0.5",
102
95
  "reselect": "5.0.0-alpha.2",
103
- "storybook": "^8.4.7",
96
+ "storybook": "10.2.8",
104
97
  "string-width": "6.1.0",
105
98
  "styled-components": "^5.3.10",
106
99
  "swiper": "^11.0.3",
@@ -109,7 +102,8 @@
109
102
  "vite": "^5.0.10",
110
103
  "vite-plugin-dts": "^3.6.4",
111
104
  "vite-plugin-static-copy": "^1.0.0",
112
- "webpack": "^5.82.1"
105
+ "webpack": "^5.82.1",
106
+ "@storybook/addon-docs": "10.2.8"
113
107
  },
114
108
  "peerDependencies": {
115
109
  "@dnd-kit/core": "^6.3.1",
@@ -1,3 +1,14 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
1
12
  var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
13
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
14
  return new (P || (P = Promise))(function (resolve, reject) {
@@ -58,6 +69,7 @@ var SelectFilter = function (_a) {
58
69
  onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options);
59
70
  }, [onChange]);
60
71
  var isAsync = !!asyncLoadKey;
72
+ var isNotEq = useMemo(function () { return isOptionArray(value) ? value.some(function (option) { return option.isNotEq; }) : false; }, [value]);
61
73
  var handleLoadOptions = useCallback(function (fulltext) { return __awaiter(void 0, void 0, void 0, function () {
62
74
  var data;
63
75
  return __generator(this, function (_a) {
@@ -75,9 +87,17 @@ var SelectFilter = function (_a) {
75
87
  }
76
88
  });
77
89
  }); }, [asyncLoadKey, onAsyncLoadFilterOptions]);
90
+ var handleIconClick = useCallback(function (event) {
91
+ event.preventDefault();
92
+ event.stopPropagation();
93
+ if (!value || !isOptionArray(value))
94
+ return;
95
+ var newOptions = value === null || value === void 0 ? void 0 : value.map(function (option) { return (__assign(__assign({}, option), { isNotEq: !isNotEq })); });
96
+ onChange(newOptions);
97
+ }, [value, isNotEq, onChange]);
78
98
  var defaultOptions = useMemo(function () { return (isMulti && isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined); }, [isAsync, value, loadedOptions]);
79
99
  if (isMulti) {
80
- return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true }));
100
+ return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: isNotEq ? 'notEqual' : 'equals', onIconClick: handleIconClick, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true }));
81
101
  }
82
102
  return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, isClearable: isClearable }));
83
103
  };
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,6 +1,6 @@
1
1
  declare const meta: {
2
2
  title: string;
3
- component: import('react').FC<import('../AsyncSelect').AsyncSelectProps>;
3
+ component: import('react').FC<import('..').AsyncSelectProps>;
4
4
  tags: string[];
5
5
  argTypes: {};
6
6
  };
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,11 +1,11 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
5
  component: import('react').FC<{
6
6
  badge: "warning";
7
7
  } & import('..').IconProps>;
8
- decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
+ decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
9
9
  badge: "warning";
10
10
  icon: string;
11
11
  style?: "normal" | "light" | "solid" | undefined;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
  import { PaginationProps } from '../';
3
3
 
4
4
  declare const meta: {
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -69,7 +69,7 @@ var emptyOptions = [];
69
69
  var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
70
70
  var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
71
71
  var Select = function (_a) {
72
- var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, _h = _a.shortValues, shortValues = _h === void 0 ? true : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, resetGrid = _a.resetGrid, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "shortValues", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid"]);
72
+ var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, _h = _a.shortValues, shortValues = _h === void 0 ? true : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, resetGrid = _a.resetGrid, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "shortValues", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid", "onIconClick"]);
73
73
  var isAsync = !!loadOptions;
74
74
  if (showSelectAllButton && !isMulti) {
75
75
  console.error('CheckboxSelect incompatible props');
@@ -83,7 +83,7 @@ var Select = function (_a) {
83
83
  onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
84
84
  }
85
85
  }, [onChange]);
86
- var icon = containerVariant === 'search' ? 'search' : placeholderIcon || undefined;
86
+ var icon = containerVariant === 'search' && !placeholderIcon ? 'search' : placeholderIcon || undefined;
87
87
  var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
88
88
  var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
89
89
  var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
@@ -106,6 +106,6 @@ var Select = function (_a) {
106
106
  }
107
107
  }); }); } : undefined;
108
108
  }, [loadOptions]);
109
- return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
109
+ return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
110
110
  };
111
111
  export default Select;
@@ -34,12 +34,13 @@ var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateO
34
34
  return (hasValue ? 'black' : '#a3b3c1');
35
35
  });
36
36
  var IconValueContainer = function (props) {
37
- var _a;
37
+ var _a, _b;
38
38
  // eslint-disable-next-line react/prop-types
39
39
  var children = props.children, rest = __rest(props, ["children"]);
40
40
  var icon = (_a = rest.selectProps) === null || _a === void 0 ? void 0 : _a.icon;
41
41
  var hasValue = rest.hasValue;
42
- return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
42
+ var onIconClick = (_b = rest.selectProps) === null || _b === void 0 ? void 0 : _b.onIconClick;
43
+ return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onMouseDown: onIconClick, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
43
44
  };
44
45
  export default IconValueContainer;
45
46
  var templateObject_1;
@@ -7,6 +7,7 @@ export type Option<Value = string | number> = {
7
7
  label: string | number;
8
8
  isDisabled?: boolean;
9
9
  isFixed?: boolean;
10
+ isNotEq?: boolean;
10
11
  color?: string;
11
12
  index?: number;
12
13
  inputValue?: string;
@@ -54,6 +55,7 @@ export type SelectProps = {
54
55
  getOptionValue?: Function;
55
56
  systemTheme?: Theme;
56
57
  menuPlacement?: string;
58
+ onIconClick?: Function;
57
59
  };
58
60
  export type BaseColors = {
59
61
  primary: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
@@ -1,7 +1,7 @@
1
1
  export declare const FakeInput: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
2
2
  size: string | number;
3
3
  }, never>;
4
- export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../../Elements/Icon').IconProps>, import('@xstyled/system').Theme, {
4
+ export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
5
5
  size: string | number;
6
6
  }, never>;
7
7
  export declare const CheckboxWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
  import { default as React } from 'react';
3
3
 
4
4
  declare const meta: {
@@ -1,4 +1,4 @@
1
- import { StoryObj } from '@storybook/react';
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;