@mailstep/design-system 0.6.39 → 0.6.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.39",
+  "version": "0.6.40",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -1,12 +1,3 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 export var oversizedArrayColumns = 25;
@@ -28,7 +19,8 @@ export var enumColumn = {
     name: 'enumColumn',
     title: 'Enum Column',
     flexBasis: 160,
-    filterOptions: __spreadArray([{ value: '', label: 'all' }], enumValues.map(function (v) { return ({ value: v, label: v }); }), true),
+    filterOptions: enumValues.map(function (v) { return ({ value: v, label: v }); }),
+    filterExtraProps: { isMulti: true, checkAllButton: true },
     filtering: true,
     sorting: false,
 };

package/ui/Blocks/CommonGrid/types.d.ts

@@ -113,6 +113,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
         isBigInt?: boolean;
         isUuid?: boolean;
         defaultComparator?: string;
+        checkAllButton?: boolean;
     };
     getFilterCriteria?: (value: string) => {
         [column: string]: any;

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

@@ -0,0 +1,2 @@
+export declare const ChevronOption: (props: any) => any;
+export default ChevronOption;

package/ui/Elements/Select/components/ChevronOption.js

@@ -0,0 +1,23 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+import Checkbox from '../../../Forms/Checkbox/Checkbox';
+import Toggle from '../../Toggle/Toggle';
+import SelectedIndicator from '../components/SelectedIndicator';
+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 })] })));
+};
+export default ChevronOption;

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

@@ -0,0 +1,2 @@
+declare const ConnectedMenu: (props: any) => any;
+export default ConnectedMenu;

package/ui/Elements/Select/components/ConnectedMenu.js

@@ -0,0 +1,21 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+import SelectAll from '../components/SelectAll';
+import ResetAll from '../components/ResetAll';
+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;
+    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: options, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
+};
+export default ConnectedMenu;

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

@@ -0,0 +1,2 @@
+declare const CountMultiValue: (props: any) => any;
+export default CountMultiValue;

package/ui/Elements/Select/components/CountMultiValue.js

@@ -0,0 +1,33 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+import styled, { th } from '@xstyled/styled-components';
+// MultiValue container with count of selected options
+var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
+var CountMultiValue = function (props) {
+    var _a, _b;
+    var selectVal = props.selectProps.value;
+    var inputVal = props.selectProps.inputValue;
+    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 (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
+    }
+    else {
+        return null;
+    }
+};
+export default CountMultiValue;
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+export declare const CustomInput: (props: any) => any;
+export default CustomInput;

package/ui/Elements/Select/components/CustomInput.js

@@ -0,0 +1,19 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+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 default CustomInput;

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

@@ -0,0 +1,2 @@
+export declare const DropdownIndicator: (props: any) => any;
+export default DropdownIndicator;

package/ui/Elements/Select/components/DropdownIndicator.js

@@ -0,0 +1,28 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+import styled from '@xstyled/styled-components';
+import { ArrowDown } from '../../Icon/icons/ArrowDown';
+import { ArrowUp } from '../../Icon/icons/ArrowUp';
+// Option with chevron form new design
+var ChevronDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
+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: menuIsOpen ? _jsx(ArrowUp, { width: "16px" }) : _jsx(ArrowDown, { width: "16px" }) }) })));
+};
+export default DropdownIndicator;
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+declare const IconValueContainer: (props: any) => any;
+export default IconValueContainer;

package/ui/Elements/Select/components/IconValueContainer.js

@@ -0,0 +1,45 @@
+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 { components } from 'react-select';
+import Icon from '../../Icon/Icon';
+import styled from '@xstyled/styled-components';
+// Value container with icon
+var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 12px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"], ["\n  padding-left: 12px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"])), function (_a) {
+    var hasValue = _a.hasValue;
+    return (hasValue ? 'black' : '#a3b3c1');
+});
+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;
+    var hasValue = rest.hasValue;
+    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
+};
+export default IconValueContainer;
+var templateObject_1;

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

@@ -0,0 +1,5 @@
+type ResetAllProps = {
+    onReset: () => void;
+};
+declare const ResetAll: ({ onReset }: ResetAllProps) => import("react/jsx-runtime").JSX.Element;
+export default ResetAll;

package/ui/Elements/Select/components/ResetAll.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Paragraph3 } from '../../Typography/Typography';
+import styled from '@xstyled/styled-components';
+import { Trans } from '@lingui/react';
+var ResetWrap = styled.div(templateObject_1 || (templateObject_1 = __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"])));
+var ResetAll = function (_a) {
+    var onReset = _a.onReset;
+    return (_jsx(ResetWrap, { onClick: onReset, children: _jsx(Paragraph3, { variant: "semiBold", children: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }) }) }));
+};
+export default ResetAll;
+var templateObject_1;

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

@@ -0,0 +1,11 @@
+import { SelectProps, CustomTheme } from '../types';
+type Props = {
+    onCustomSelectAll: () => void;
+    onCustomDeselectAll: () => void;
+    value: SelectProps['value'];
+    options: SelectProps['options'];
+    maxMenuHeight: number;
+    theme: CustomTheme;
+};
+declare const SelectAll: ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SelectAll;

package/ui/Elements/Select/components/SelectAll.js

@@ -0,0 +1,56 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, useRef } from 'react';
+import styled, { th } from '@xstyled/styled-components';
+import { Trans } from '@lingui/react';
+import Checkbox from '../../../Forms/Checkbox/Checkbox';
+import Toggle from '../../Toggle/Toggle';
+import SelectedIndicator from '../components/SelectedIndicator';
+var SelectAllWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: 0px 2px 1px 0px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  margin: 0px 2px 1px 0px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var additionalPadding = _a.additionalPadding;
+    return (additionalPadding ? '8px 27px 8px 10px' : '10px 10px');
+}, function (_a) {
+    var isSelected = _a.isSelected;
+    return (isSelected ? th.color('red20') : 'transparent');
+}, function (_a) {
+    var isSelected = _a.isSelected;
+    return (isSelected ? th.color('red1') : th.color('textPrimary'));
+}, function (_a) {
+    var isSelected = _a.isSelected;
+    return (isSelected ? th.color('red30') : th.color('bgLightGray1'));
+});
+var SelectAll = function (_a) {
+    var onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, maxMenuHeight = _a.maxMenuHeight, theme = _a.theme;
+    var showCheckbox = !!(theme.optionVariant === 'checkbox');
+    var showToggle = !!(theme.optionVariant === 'toggle');
+    var ref = useRef(null);
+    var _b = useState(false), additionalPadding = _b[0], setAdditionalPadding = _b[1];
+    var _c = useState(false), isSelected = _c[0], setIsSelected = _c[1];
+    var handleSelectAll = useCallback(function () {
+        if (!isSelected) {
+            setIsSelected(true);
+            onCustomSelectAll();
+        }
+        else if (isSelected) {
+            setIsSelected(false);
+            onCustomDeselectAll();
+        }
+    }, [isSelected, onCustomDeselectAll, onCustomSelectAll]);
+    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 === null || options === void 0 ? void 0 : options.length) || 0) > maxMenuHeight);
+    }, [additionalPadding, maxMenuHeight, options === null || options === void 0 ? void 0 : options.length, value]);
+    useEffect(function () {
+        if (value && Array.isArray(value)) {
+            (options === null || options === void 0 ? void 0 : options.length) === value.length && setIsSelected(true);
+            (options === null || options === void 0 ? void 0 : options.length) !== value.length && setIsSelected(false);
+        }
+    }, [maxMenuHeight, options === null || options === void 0 ? void 0 : options.length, value]);
+    return (_jsxs(SelectAllWrap, { isSelected: isSelected, onClick: handleSelectAll, 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' })] }));
+};
+export default SelectAll;
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+declare const SelectedIndicator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export default SelectedIndicator;

package/ui/Elements/Select/components/SelectedIndicator.js

@@ -0,0 +1,8 @@
+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';
+var SelectedIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
+export default SelectedIndicator;
+var templateObject_1;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SimplifiedOption: import("react").MemoExoticComponent<(props: any) => any>;
+export default SimplifiedOption;

package/ui/Elements/Select/components/SimplifiedOption.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, memo } from 'react';
+// 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 }));
+};
+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); });
+export default SimplifiedOption;

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

@@ -1,4 +1,10 @@
-import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents';
+import ConnectedMenu from '../components/ConnectedMenu';
+import IconValueContainer from '../components/IconValueContainer';
+import SimplifiedOption from '../components/SimplifiedOption';
+import CountMultiValue from '../components/CountMultiValue';
+import ChevronOption from '../components/ChevronOption';
+import DropdownIndicator from '../components/DropdownIndicator';
+import CustomInput from '../components/CustomInput';
 import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
 import { useTheme } from '@xstyled/styled-components';
 import { useMemo } from 'react';
@@ -19,7 +25,7 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
             components.DropdownIndicator = null;
         }
         if (showResetGridButton || showSelectAllButton) {
-            components.Menu = ConnectedMenu;
+            components.MenuList = ConnectedMenu;
         }
         components.Input = CustomInput;
         var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');

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

@@ -1,42 +1,4 @@
-import { SelectProps } from '../types';
-import { ControlProps, CSSObjectWithLabel } from 'react-select';
-type BaseColors = {
-    primary: string;
-    optionTextColor: string;
-    inputDisabledColor: string;
-    inputBorderColor: string;
-    whiteBackgroundColor: string;
-    inputTextColor: string;
-    placeholderTextColor: string;
-    activeOptionBackground: string;
-    disabledTextColor: string;
-    inputBorderHoverColor: string;
-    menuHoverBackgroundColor: string;
-    dropdownIndicatorColor: string;
-    hoverToActiveOptionBackground: string;
-    defaultControlColor: string;
-};
-type BaseState<ThemeType = BaseColors> = {
-    theme: ThemeType;
-    isSelected: boolean;
-    isFocused: boolean;
-    isDisabled: boolean;
-    isMulti: boolean;
-    selectProps: SelectProps;
-} & ControlProps;
-type StylesConfig<T = BaseState> = Record<string, (styles: CSSObjectWithLabel, state: T) => CSSObjectWithLabel>;
-type CustomTheme = {
-    colors: BaseColors;
-    height: string | number;
-    focusBoxShadow?: string;
-    textWeightNormal: string;
-    optionVariant: Required<SelectProps>['optionVariant'];
-    borderRadius: string;
-    font: string;
-    narrowIndicators: boolean;
-    flexWrap: 'wrap' | 'nowrap';
-};
-type State = BaseState<CustomTheme>;
+import { SelectProps, StylesConfig, CustomTheme } from '../types';
 export declare const CustomStyles: StylesConfig<State>;
 type ThemeGetter = (theme: any) => CustomTheme;
 export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>['optionVariant'], useFilterSubvariant: boolean) => ThemeGetter;

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

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { SpaceAround } from '../SpaceAround/types';
-import { Theme } from 'react-select';
+import { Theme, ControlProps, CSSObjectWithLabel } from 'react-select';
 export type Option<Value = string | number> = {
     value: Value;
     label: string | number;
@@ -53,3 +53,40 @@ export type SelectProps = {
     systemTheme?: Theme;
     menuPlacement?: string;
 };
+export type BaseColors = {
+    primary: string;
+    optionTextColor: string;
+    inputDisabledColor: string;
+    inputBorderColor: string;
+    whiteBackgroundColor: string;
+    inputTextColor: string;
+    placeholderTextColor: string;
+    activeOptionBackground: string;
+    disabledTextColor: string;
+    inputBorderHoverColor: string;
+    menuHoverBackgroundColor: string;
+    dropdownIndicatorColor: string;
+    hoverToActiveOptionBackground: string;
+    defaultControlColor: string;
+};
+type BaseState<ThemeType = BaseColors> = {
+    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 type CustomTheme = {
+    colors: BaseColors;
+    height: string | number;
+    focusBoxShadow?: string;
+    textWeightNormal: string;
+    optionVariant: Required<SelectProps>['optionVariant'];
+    borderRadius: string;
+    font: string;
+    narrowIndicators: boolean;
+    flexWrap: 'wrap' | 'nowrap';
+};
+export {};