@mailstep/design-system 0.5.1-beta.1 → 0.6.0

package/ui/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ onPageChange, itemPerPage, itemCount, page }: import("../Pagination").Props) => JSX.Element;
+    component: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: import("../Pagination").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Pagination/styled.js

@@ -3,9 +3,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import { Icon } from '../Icon';
-export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 4px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 4px;\n  }\n"])));
+import { th } from '@xstyled/system';
+import Icon from '../Icon';
+export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"])));
 export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"], ["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
@@ -13,14 +13,14 @@ export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTem
     var disabled = _a.disabled;
     return (disabled ? 0 : 1);
 });
-export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: gray1;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: gray1;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
-export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 11px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 11px;\n  & > svg {\n    width: 10px;\n  }\n"])));
+export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
+export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"])));
 export var DotsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: gray1;\n"], ["\n  color: gray1;\n"])));
 export var PageBtn = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"])), function (_a) {
     var isCurrent = _a.isCurrent;
     return (isCurrent ? th.color('red1') : th.color('gray1'));
 }, function (_a) {
     var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('medium'));
+    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('normal'));
 }, th('fonts.primary'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/Select/Select.d.ts

@@ -0,0 +1,3 @@
+import { SelectProps } from './types';
+declare const Select: ({ label, name, value, options, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions, showSelectAllButton, showResetGridButton, style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, resetGrid, ...passTroughProps }: SelectProps) => JSX.Element;
+export default Select;

package/ui/Elements/Select/Select.js

@@ -0,0 +1,69 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Wrapper, StyledReactSelect, StyledAsyncSelect } from './styles';
+import { useStylesAndComponents } from './themes';
+import { useTheme } from '@xstyled/styled-components';
+import SpaceAroundWrap from '../SpaceAround';
+import { FieldLabel } from '../Label';
+import { ErrorMessage } from '../ErrorMessage';
+import { i18n } from '@lingui/core';
+var emptyOptions = [];
+var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
+var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
+var Select = function (_a) {
+    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, 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", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid"]);
+    var isAsync = !!loadOptions;
+    if (showSelectAllButton && (loadOptions || !isMulti)) {
+        console.error('CheckboxSelect incompatible props');
+    }
+    var setAllOptions = useCallback(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
+    }, [onChange, options]);
+    var unsetAllOptions = useCallback(function () {
+        if (typeof onChange === 'function') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
+        }
+    }, [onChange]);
+    var icon = containerVariant === 'search' ? 'search' : placeholderIcon ? placeholderIcon : undefined;
+    var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
+    var _h = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _h[0], customTheme = _h[1], customStyles = _h[2];
+    var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
+    var selectedOption;
+    var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
+    if (Array.isArray(value)) {
+        selectedOption = (defaultOptions || options).filter(function (option) { return value.includes(localGetOptionValue(option)); });
+        selectedOption = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) ? selectedOption : null;
+    }
+    else if (value !== undefined) {
+        selectedOption = (defaultOptions || options).find(function (option) { return localGetOptionValue(option) === value; }) || null;
+    }
+    var theme = useTheme();
+    // strip extra params
+    var handleLoadOptions = useMemo(function () {
+        return loadOptions ? function (fulltext) { return loadOptions(fulltext); } : undefined;
+    }, [loadOptions]);
+    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 }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage }))] }), error && _jsx(ErrorMessage, { children: error })] }));
+};
+export default Select;

package/ui/Elements/Select/index.d.ts

@@ -0,0 +1,2 @@
+import Select from './Select';
+export default Select;

package/ui/Elements/Select/index.js

@@ -0,0 +1,2 @@
+import Select from './Select';
+export default Select;

package/ui/Elements/Select/styles.d.ts

@@ -0,0 +1,5 @@
+import ReactSelect from 'react-select';
+import AsyncSelect from 'react-select/async';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledReactSelect: import("styled-components").StyledComponent<ReactSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const StyledAsyncSelect: import("styled-components").StyledComponent<AsyncSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;

package/ui/Elements/Select/styles.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+import ReactSelect from 'react-select';
+import AsyncSelect from 'react-select/async';
+import { system } from '@xstyled/system';
+export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+export var StyledReactSelect = styled(ReactSelect)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
+export var StyledAsyncSelect = styled(AsyncSelect)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Select/themes/CustomComponents.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const SimplifiedOption: React.MemoExoticComponent<(props: any) => any>;
+export declare const IconValueContainer: (props: any) => any;
+export declare const CountMultiValue: (props: any) => any;
+export declare const ChevronOption: (props: any) => any;
+export declare const ConnectedMenu: (props: any) => any;
+export declare const CustomInput: (props: any) => any;
+export declare const DropdownIndicator: (props: any) => any;

package/ui/Elements/Select/themes/CustomComponents.js

@@ -0,0 +1,125 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, memo, useState, useEffect, useRef } from 'react';
+import { components } from 'react-select';
+import styled, { th } from '@xstyled/styled-components';
+import { components as selectComponents } from 'react-select';
+import { Trans } from '@lingui/react';
+import Icon from '../../Icon/Icon';
+import { Paragraph3 } from '../../Typography/Typography';
+import Checkbox from '../../../Forms/Checkbox/Checkbox';
+import Toggle from '../../Toggle/Toggle';
+// Option for big lists
+var SimplifiedOptionInner = function (props) {
+    var styles = props.getStyles('option', props);
+    var data = props.data, selectOption = props.selectOption, innerProps = props.innerProps;
+    var handleClick = useCallback(function () { return selectOption(data); }, [data, selectOption]);
+    return (_jsx("div", { style: styles, onClick: handleClick, onMouseOver: innerProps.onMouseOver, onMouseMove: innerProps.onMouseMove, children: props.label }));
+};
+export var SimplifiedOption = memo(SimplifiedOptionInner, function (prevProps, nextProps) { var _a, _b; return prevProps.isFocused === nextProps.isFocused && ((_a = prevProps.data) === null || _a === void 0 ? void 0 : _a.label) === ((_b = nextProps.data) === null || _b === void 0 ? void 0 : _b.label); });
+// Value container with icon
+var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 12px;\n  align-self: center;\n"], ["\n  padding-left: 12px;\n  align-self: center;\n"])));
+export var IconValueContainer = function (props) {
+    var _a;
+    // eslint-disable-next-line react/prop-types
+    var children = props.children, rest = __rest(props, ["children"]);
+    var icon = (_a = rest.selectProps) === null || _a === void 0 ? void 0 : _a.icon;
+    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
+};
+// MultiValue container replacement with count of selected options
+export var CountMultiValue = function (props) {
+    var _a, _b;
+    var selectVal = props.selectProps.value;
+    var inputVal = props.selectProps.inputValue;
+    var transValues = useMemo(function () { return ({ count: selectVal.length }); }, [selectVal.length]);
+    if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
+        return (_jsx(selectComponents.SingleValue, __assign({}, props, { children: selectVal.length > 1 ? (_jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options', values: transValues })) : (props.children) })));
+    }
+    else {
+        return null;
+    }
+};
+// Option with chevron form new design
+var ChevronDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
+var SelectedIndicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
+export var ChevronOption = function (props) {
+    var theme = props.theme, isSelected = props.isSelected, selectOption = props.selectOption, children = props.children, data = props.data;
+    var showCheckbox = !!(theme.optionVariant == 'checkbox');
+    var showToggle = !!(theme.optionVariant == 'toggle');
+    return (_jsxs(selectComponents.Option, __assign({}, props, { children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children })] })));
+};
+// menu with check all and reset config button
+var SelectAll = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"])), function (_a) {
+    var additionalPadding = _a.additionalPadding;
+    return (additionalPadding ? '8px 27px 8px 10px' : '8px 10px');
+}, function (_a) {
+    var isSelected = _a.isSelected;
+    return (isSelected ? th.color('red20') : 'transparent');
+});
+var ConfigWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
+export var ConnectedMenu = function (props) {
+    var theme = props.theme;
+    var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight;
+    var showCheckbox = !!(theme.optionVariant === 'checkbox');
+    var showToggle = !!(theme.optionVariant === 'toggle');
+    var _b = useState(false), isSelected = _b[0], setIsSelected = _b[1];
+    var _c = useState(false), additionalPadding = _c[0], setAdditionalPadding = _c[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        var _a;
+        // if the height of all options is higher than maxMenuHeight and the slider is displayed => the indentation needs to be increased
+        ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && setAdditionalPadding(ref.current.offsetHeight * options.length > maxMenuHeight);
+        if (value) {
+            options.length === value.length && setIsSelected(true);
+            options.length !== value.length && setIsSelected(false);
+        }
+        else
+            return;
+    }, [additionalPadding, maxMenuHeight, options.length, value]);
+    var selectAll = useCallback(function () {
+        if (!isSelected) {
+            setIsSelected(true);
+            onCustomSelectAll();
+        }
+        else if (isSelected) {
+            setIsSelected(false);
+            onCustomDeselectAll();
+        }
+    }, [isSelected, onCustomDeselectAll, onCustomSelectAll]);
+    return (_jsxs(selectComponents.Menu, __assign({}, props, { children: [selectAllButton && (_jsxs(SelectAll, { isSelected: isSelected, onClick: selectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' })] })), props.children, resetGridButton && (_jsx(ConfigWrap, { onClick: resetGrid, children: _jsx(Paragraph3, { variant: "semiBold", children: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }) }) }))] })));
+};
+export var CustomInput = function (props) {
+    var name = props.selectProps.name;
+    var value = !!name ? "".concat(name, "Inp") : props.id;
+    return _jsx(selectComponents.Input, __assign({}, props, { "data-cy": value }));
+};
+export var DropdownIndicator = function (props) {
+    var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
+    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: _jsx(Icon, { icon: menuIsOpen ? 'goUp' : 'goDown', size: '100%' }) }) })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Elements/Select/themes/baseStyles.d.ts

@@ -0,0 +1,28 @@
+import { SelectProps } from '../types';
+import { ControlProps, CSSObjectWithLabel } from 'react-select';
+export type BaseStylesTheme = {
+    colors: {
+        primary: string;
+        primary50: string;
+        primary25: string;
+        optionTextColor: string;
+        inputDisabledColor: string;
+        inputBackgroundColor: string;
+        inputBorderColor: string;
+        menuBackgroundColor: string;
+        inputTextColor: string;
+        placeholderTextColor: string;
+    };
+    height: string | number;
+    focusBoxShadow?: string;
+};
+export type BaseState<ThemeType = BaseStylesTheme> = {
+    theme: ThemeType;
+    isSelected: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isMulti: boolean;
+    selectProps: SelectProps;
+} & ControlProps;
+export type StylesConfig<T = BaseState> = Record<string, (styles: CSSObjectWithLabel, state: T) => CSSObjectWithLabel>;
+export declare const baseStylesConfig: StylesConfig;

package/ui/Elements/Select/themes/baseStyles.js

@@ -0,0 +1,87 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import createRgba from '../../../utils/CreateRgba/createRgba';
+// style object https://react-select.com/styles
+export var baseStylesConfig = {
+    control: function (styles, _a) {
+        var _b;
+        var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
+        var colors = theme.colors;
+        return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid || isFocused ? colors.primary : colors.inputBorderColor, backgroundColor: isDisabled ? colors.inputDisabledColor : colors.inputBackgroundColor, boxShadow: isFocused ? theme.focusBoxShadow : undefined, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: undefined }), minHeight: theme.height, minWidth: selectProps.isMulti ? 'min-content' : 'max-content' });
+    },
+    option: function (styles, _a) {
+        var isSelected = _a.isSelected, theme = _a.theme, isFocused = _a.isFocused;
+        return __assign(__assign({}, styles), { color: isSelected ? 'white' : theme.colors.optionTextColor, backgroundColor: isSelected ? theme.colors.primary : isFocused ? theme.colors.primary25 : 'transparent', ':active': __assign(__assign({}, styles[':active']), { backgroundColor: isSelected ? undefined : theme.colors.primary50 }) });
+    },
+    menu: function (styles, _a) {
+        var theme = _a.theme;
+        return __assign(__assign({}, styles), { minWidth: 'max-content', backgroundColor: theme.colors.menuBackgroundColor });
+    },
+    dropdownIndicator: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: createRgba(theme.colors.inputTextColor, 0.25) }));
+    },
+    clearIndicator: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: createRgba(theme.colors.inputTextColor, 0.25) }));
+    },
+    loadingIndicator: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: createRgba(theme.colors.inputTextColor, 0.25) }));
+    },
+    indicatorSeparator: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { backgroundColor: createRgba(theme.colors.inputTextColor, 0.25) }));
+    },
+    input: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { color: theme.colors.inputTextColor }));
+    },
+    singleValue: function (styles, _a) {
+        var selectProps = _a.selectProps, theme = _a.theme;
+        return (__assign(__assign({}, styles), { color: selectProps.isInvalid ? theme.colors.primary : theme.colors.inputTextColor }));
+    },
+    multiValue: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { color: theme.colors.inputTextColor, backgroundColor: theme.colors.menuBackgroundColor }));
+    },
+    multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
+    placeholder: function (styles, _a) {
+        var selectProps = _a.selectProps, theme = _a.theme;
+        return (__assign(__assign({}, styles), { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', maxWidth: 'calc(100% - 8px)', color: selectProps.isDarkPlaceholderText ? theme.colors.inputTextColor : theme.colors.placeholderTextColor }));
+    },
+    loadingMessage: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { color: theme.colors.optionTextColor }));
+    },
+    noOptionsMessage: function (styles, _a) {
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { color: theme.colors.optionTextColor }));
+    },
+    menuList: function (styles, _a) {
+        var theme = _a.theme;
+        return __assign(__assign({}, styles), { margin: '8px 4px 8px 8px', '::-webkit-scrollbar-thumb': {
+                border: 'none',
+                borderRadius: '4px',
+                height: '47px',
+                backgroundColor: theme.colors.scrollbarThumbColor,
+                '&:hover': {
+                    backgroundColor: theme.colors.dropdownIndicatorColor,
+                },
+            }, '::-webkit-scrollbar': {
+                width: '10px',
+            }, '::-webkit-scrollbar-track': {
+                backgroundColor: theme.colors.scrollbarTrackColor,
+                borderRadius: '6px',
+            } });
+    },
+};

package/ui/Elements/Select/themes/formStyles.d.ts

@@ -0,0 +1,24 @@
+import { SelectProps } from '../types';
+import { BaseStylesTheme, BaseState, StylesConfig } from './baseStyles';
+type CustomTheme = Omit<BaseStylesTheme, 'colors'> & {
+    colors: Omit<BaseStylesTheme['colors'], 'primary50' | 'primary25'> & {
+        activeOptionBackground: string;
+        valueTextColor: string;
+        inputTextColor: string;
+        inputBorderHoverColor: string;
+        menuHoverBackgroundColor: string;
+        dropdownIndicatorColor: string;
+    };
+    textWeightRegular: string;
+    textWeightSemiBold: string;
+    textWeightBold: string;
+    optionVariant: Required<SelectProps>['optionVariant'];
+    borderRadius: string;
+    font: string;
+    narrowIndicators: boolean;
+};
+type State = BaseState<CustomTheme>;
+export declare const CustomStyles: StylesConfig<State>;
+type ThemeGetter = (theme: any) => CustomTheme;
+export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>['optionVariant'], useFilterSubvariant: boolean) => ThemeGetter;
+export {};

package/ui/Elements/Select/themes/formStyles.js

@@ -0,0 +1,102 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { baseStylesConfig } from './baseStyles';
+import { th } from '@xstyled/system';
+// style object https://react-select.com/styles
+export var CustomStyles = __assign(__assign({}, baseStylesConfig), { control: function (styles, _a) {
+        var _b;
+        var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
+        var colors = theme.colors;
+        return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.inputDisabledColor : colors.inputBackgroundColor, boxShadow: isFocused ? theme.focusBoxShadow : undefined, borderRadius: theme.borderRadius, '& input': {
+                fontWeight: theme.textWeightBold,
+                fontFamily: theme.font,
+            }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth: selectProps.isMulti ? 'min-content' : 'max-content', '.inputIcon': {
+                color: isDisabled ? colors.valueTextColor : !!selectProps.value ? colors.inputTextColor : colors.valueTextColor,
+            } });
+    }, singleValue: function (styles, _a) {
+        var selectProps = _a.selectProps, theme = _a.theme, isDisabled = _a.isDisabled;
+        return (__assign(__assign({}, styles), { color: selectProps.isInvalid ? theme.colors.primary : isDisabled ? theme.colors.valueTextColor : theme.colors.inputTextColor, fontSize: '14px', fontWeight: selectProps.isDarkPlaceholderText ? '400' : theme.textWeightSemiBold }));
+    }, multiValue: function (styles, state) {
+        var _a;
+        var theme = state.theme;
+        var base = (_a = baseStylesConfig.multiValue) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
+        return __assign(__assign({}, base), { fontSize: '9px', fontWeight: theme.textWeightSemiBold });
+    }, multiValueRemove: function (styles, _a) {
+        var _b;
+        var theme = _a.theme;
+        return (__assign(__assign({}, styles), { color: theme.colors.inputBorderColor, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { backgroundColor: theme.colors.inputTextColor }) }));
+    }, placeholder: function (styles, state) {
+        var _a;
+        var theme = state.theme;
+        var base = (_a = baseStylesConfig.placeholder) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
+        return __assign(__assign({}, base), { fontSize: '14px', fontWeight: theme.textWeightSemiBold });
+    }, option: function (styles, _a) {
+        var isSelected = _a.isSelected, theme = _a.theme, isDisabled = _a.isDisabled, selectProps = _a.selectProps;
+        var defaultColor = theme.colors.optionTextColor;
+        var disabledColor = theme.colors.placeholderTextColor;
+        return {
+            color: isSelected ? theme.colors.primary : defaultColor,
+            backgroundColor: isSelected ? theme.colors.activeOptionBackground : undefined,
+            fontWeight: 400,
+            fontSize: '14px',
+            cursor: !isDisabled ? 'pointer' : 'default',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: '7px 10px',
+            height: '36px',
+            marginRight: '4px',
+            marginBottom: '2px',
+            lineHeight: '22px',
+            borderRadius: th.radius('ml')({ theme: selectProps === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
+            '&:hover': { backgroundColor: !isDisabled ? theme.colors.menuHoverBackgroundColor : undefined },
+        };
+    }, menu: function (styles, state) {
+        var _a;
+        var base = (_a = baseStylesConfig.menu) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
+        return __assign(__assign({}, base), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '-0', paddingTop: '0', borderRadius: '10px', zIndex: 3 });
+    }, dropdownIndicator: function (styles, state) {
+        var _a;
+        var base = (_a = baseStylesConfig.dropdownIndicator) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
+        var theme = state.theme, isFocused = state.isFocused;
+        return __assign(__assign({}, base), { color: isFocused ? theme.colors.inputTextColor : theme.colors.dropdownIndicatorColor, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
+                padding: '0px 5px 0px 1px',
+            } });
+    }, clearIndicator: function (styles, state) {
+        var _a;
+        var base = (_a = baseStylesConfig.clearIndicator) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
+        var theme = state.theme;
+        return __assign(__assign({}, base), { padding: theme.narrowIndicators ? '0px 0px 0px 2px' : '0px 4px' });
+    }, 
+    // invisible indicator separator
+    indicatorSeparator: function () { return ({ display: 'none' }); } });
+export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
+    var inputTextColor = th.color('blue2')({ theme: theme });
+    var customColors = {
+        primary: th.color('red1')({ theme: theme }),
+        inputTextColor: inputTextColor,
+        valueTextColor: th.color('gray')({ theme: theme }),
+        placeholderTextColor: th.color('lightGray3')({ theme: theme }),
+        optionTextColor: th.color('blue2')({ theme: theme }),
+        inputDisabledColor: th.color('lightGray1')({ theme: theme }),
+        inputBackgroundColor: "white",
+        inputBorderColor: th.color('lightGray3')({ theme: theme }),
+        inputBorderHoverColor: th.color('gray5')({ theme: theme }),
+        activeOptionBackground: th.color('red20')({ theme: theme }),
+        menuBackgroundColor: th.color('white')({ theme: theme }),
+        menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),
+        dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
+    };
+    return function (reactSelectTheme) {
+        return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: useFilterSubvariant ? '32px' : '38px', textWeightRegular: th.fontWeight('regular')({ theme: theme }), textWeightSemiBold: th.fontWeight('semiBold')({ theme: theme }), textWeightBold: th.fontWeight('bold')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
+    };
+};

package/ui/Elements/Select/themes/index.d.ts

@@ -0,0 +1,3 @@
+import { StylesConfig, SelectComponentsConfig } from 'react-select';
+import { SelectProps } from '../types';
+export declare const useStylesAndComponents: (style: SelectProps['style'], optionVariant: SelectProps['optionVariant'], multiLabelVariant: SelectProps['multiLabelVariant'], containerVariant: SelectProps['containerVariant'], useSimplifiedOptions: SelectProps['useSimplifiedOptions'], showSelectAllButton: SelectProps['showSelectAllButton'], showResetGridButton: SelectProps['showResetGridButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

package/ui/Elements/Select/themes/index.js

@@ -0,0 +1,43 @@
+import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents';
+import { getCustomTheme as getFormCustomTheme, CustomStyles as FormCustomStyles } from './formStyles';
+import { useTheme } from '@xstyled/styled-components';
+import { useMemo } from 'react';
+export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
+    if (style === void 0) { style = 'form'; }
+    if (optionVariant === void 0) { optionVariant = 'default'; }
+    if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
+    if (containerVariant === void 0) { containerVariant = 'default'; }
+    var systemTheme = useTheme();
+    return useMemo(function () {
+        var components = {
+            ValueContainer: IconValueContainer,
+        };
+        if (multiLabelVariant === 'count') {
+            components.MultiValue = CountMultiValue;
+        }
+        if (containerVariant === 'search') {
+            components.DropdownIndicator = null;
+        }
+        if (showResetGridButton || showSelectAllButton) {
+            components.Menu = ConnectedMenu;
+        }
+        components.Input = CustomInput;
+        var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
+        var styles = FormCustomStyles;
+        components.Option = ChevronOption;
+        components.DropdownIndicator = DropdownIndicator;
+        // performance reasons
+        if (useSimplifiedOptions)
+            components.Option = SimplifiedOption;
+        return [components, themes, styles];
+    }, [
+        multiLabelVariant,
+        containerVariant,
+        showResetGridButton,
+        showSelectAllButton,
+        style,
+        useSimplifiedOptions,
+        systemTheme,
+        optionVariant,
+    ]);
+};