@mailstep/design-system 0.8.31-beta.4 → 0.8.31

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

@@ -1,27 +1,26 @@
-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 SelectAll from "./SelectAll.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/ConnectedMenu.tsx
+const ConnectedMenu = (props) => {
+	const { theme } = props;
+	const { onCustomSelectAll, onCustomDeselectAll, value, selectAllButton, maxMenuHeight, isLoading } = props.selectProps;
+	const filteredOptions = useMemo(() => props.children?.map?.(({ props: { value, label } }) => ({
+		label,
+		value
+	})), [props.children]);
+	return /* @__PURE__ */ jsxs(components.MenuList, {
+		...props,
+		children: [selectAllButton && !isLoading && /* @__PURE__ */ jsx(SelectAll, {
+			theme,
+			onCustomSelectAll,
+			onCustomDeselectAll,
+			value,
+			options: filteredOptions,
+			maxMenuHeight
+		}), props.children]
+	});
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { components as selectComponents } from 'react-select';
-import SelectAll from '../components/SelectAll';
-var ConnectedMenu = function (props) {
-    var theme = props.theme;
-    var _a = props.selectProps, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
-    // because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
-    // we need to specify them here by children
-    var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
-        var _b = _a.props, value = _b.value, label = _b.label;
-        return ({ label: label, value: value });
-    }); }, [props.children]);
-    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children] })));
-};
-export default ConnectedMenu;
+//#endregion
+export { ConnectedMenu as default };

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

@@ -1,5 +1,4 @@
-import { MultiValueProps } from 'react-select';
-
+import { type MultiValueProps } from 'react-select';
 type CountMultiValueProps = MultiValueProps & {
     data: unknown;
     selectProps: MultiValueProps<unknown, boolean, any>['selectProps'] & {

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

@@ -1,46 +1,42 @@
-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$1, { th } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/CountMultiValue.tsx
+const StyledNumber = styled$1.div`
+  background-color: ${th.color("lightGray7")};
+  height: 25px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: md;
+  padding: 2px 6px;
+`;
+const JoinedMultiValue = styled$1.div`
+  white-space: nowrap;
+  position: absolute;
+  color: gray;
+  padding-left: ${({ isFocused }) => isFocused ? "8px" : "0"};
+`;
+const CountMultiValue = (props) => {
+	const shortValues = props.selectProps.shortValues;
+	const selectVal = props.selectProps.value;
+	const inputVal = props.selectProps.inputValue;
+	const shortVariant = props.selectProps.shortVariant;
+	const isFirst = props.data?.value === selectVal[0]?.value;
+	const menuIsOpen = props.selectProps.menuIsOpen;
+	if (!shortValues) return /* @__PURE__ */ jsx(components.MultiValue, {
+		...props,
+		children: props.children
+	});
+	if (!isFirst || inputVal) return null;
+	if (shortVariant === "join") return /* @__PURE__ */ jsxs(JoinedMultiValue, {
+		isFocused: menuIsOpen,
+		children: [selectVal.length > 1 ? `(${Number(selectVal.length)}) ` : "", selectVal.map((option) => option.label).join(", ")]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(components.MultiValue, {
+		...props,
+		children: props.children
+	}), selectVal.length > 1 ? /* @__PURE__ */ jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] });
 };
-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-color: ", ";\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-color: ", ";\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 JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  position: absolute;\n  color: gray;\n  padding-left: ", ";\n"], ["\n  white-space: nowrap;\n  position: absolute;\n  color: gray;\n  padding-left: ", ";\n"])), function (_a) {
-    var isFocused = _a.isFocused;
-    return (isFocused ? '8px' : '0');
-});
-var CountMultiValue = function (props) {
-    var _a;
-    var shortValues = props.selectProps.shortValues;
-    var selectVal = props.selectProps.value;
-    var inputVal = props.selectProps.inputValue;
-    var shortVariant = props.selectProps.shortVariant;
-    var data = props.data;
-    var isFirst = (data === null || data === void 0 ? void 0 : data.value) === ((_a = selectVal[0]) === null || _a === void 0 ? void 0 : _a.value);
-    var menuIsOpen = props.selectProps.menuIsOpen;
-    if (!shortValues) {
-        return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
-    }
-    if (!isFirst || inputVal) {
-        return null;
-    }
-    if (shortVariant === 'join') {
-        return (_jsxs(JoinedMultiValue, { isFocused: menuIsOpen, children: [selectVal.length > 1 ? "(".concat(Number(selectVal.length), ") ") : '', selectVal.map(function (option) { return option.label; }).join(', ')] }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
-};
-export default CountMultiValue;
-var templateObject_1, templateObject_2;
+//#endregion
+export { CountMultiValue as default };

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

@@ -1,19 +1,13 @@
-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 } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/CustomInput.tsx
+const CustomInput = (props) => {
+	const { name } = props.selectProps;
+	const value = !!name ? `${name}Inp` : props.id;
+	return /* @__PURE__ */ jsx(components.Input, {
+		...props,
+		"data-cy": value
+	});
 };
-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;
+//#endregion
+export { CustomInput, CustomInput as default };

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

@@ -1,5 +1,4 @@
-import { DropdownIndicatorProps } from 'react-select';
-
+import { type DropdownIndicatorProps } from 'react-select';
 type DropdownIndicatorCustomProps = DropdownIndicatorProps & {
     theme: any;
 };

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

@@ -1,29 +1,30 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { ArrowDown } from "../../Icon/icons/ArrowDown.js";
+import { ArrowUp } from "../../Icon/icons/ArrowUp.js";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/DropdownIndicator.tsx
+const ChevronDiv = styled$1.div`
+  align-self: center;
+  display: flex;
+`;
+const DropdownIndicator = (props) => {
+	const { menuIsOpen, name } = props.selectProps;
+	const iconColor = props.theme.colors.placeholderTextColor;
+	return /* @__PURE__ */ jsx(components.DropdownIndicator, {
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDiv, {
+			className: "chevron",
+			"data-cy": `${name || ""}ChevronBtn`,
+			children: menuIsOpen ? /* @__PURE__ */ jsx(ArrowUp, {
+				width: "16px",
+				stroke: iconColor
+			}) : /* @__PURE__ */ jsx(ArrowDown, {
+				width: "16px",
+				stroke: iconColor
+			})
+		})
+	});
 };
-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 { ArrowDown } from '../../Icon/icons/ArrowDown';
-import { ArrowUp } from '../../Icon/icons/ArrowUp';
-import styled from '@xstyled/styled-components';
-// 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;
-    var iconColor = props.theme.colors.placeholderTextColor;
-    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name || '', "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px", stroke: iconColor }) : _jsx(ArrowDown, { width: "16px", stroke: iconColor }) }) })));
-};
-export default DropdownIndicator;
-var templateObject_1;
+//#endregion
+export { DropdownIndicator, DropdownIndicator as default };

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

@@ -1,46 +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;
+import Icon from "../../Icon/Icon.js";
+import styled$1 from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/IconValueContainer.tsx
+const IconDiv = styled$1.div`
+  padding-left: 7px;
+  margin-right: -3px;
+  align-self: center;
+  & > * {
+    color: ${({ hasValue }) => hasValue ? "black" : "#a3b3c1"};
+  }
+`;
+const IconValueContainer = (props) => {
+	const { children, ...rest } = props;
+	const icon = rest.selectProps?.icon;
+	const hasValue = rest.hasValue;
+	const onIconClick = rest.selectProps?.onIconClick;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx(IconDiv, {
+		className: "inputIcon",
+		hasValue,
+		onMouseDown: onIconClick,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon,
+			fill: "gray"
+		})
+	}), /* @__PURE__ */ jsx(components.ValueContainer, {
+		...rest,
+		children
+	})] });
 };
-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: 7px;\n  margin-right: -3px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"], ["\n  padding-left: 7px;\n  margin-right: -3px;\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, _b;
-    // 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;
-    var onIconClick = (_b = rest.selectProps) === null || _b === void 0 ? void 0 : _b.onIconClick;
-    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onMouseDown: onIconClick, children: _jsx(Icon, { icon: icon, fill: "gray" }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
-};
-export default IconValueContainer;
-var templateObject_1;
+//#endregion
+export { IconValueContainer as default };

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

@@ -1,5 +1,5 @@
-import { SelectProps, CustomTheme, Option } from '../types';
-
+import { SelectProps, CustomTheme } from '../types';
+import { Option } from '../types';
 type Props = {
     onCustomSelectAll: ({ options }: {
         options?: Option[];

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

@@ -1,59 +1,90 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import Checkbox_default from "../../../Forms/Checkbox/Checkbox.js";
+import Toggle from "../../Toggle/Toggle.js";
+import SelectedIndicator from "./SelectedIndicator.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styled$1, { th } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Elements/Select/components/SelectAll.tsx
+const SelectAllWrap = styled$1.div`
+  display: flex;
+  margin: 0px 2px 1px 0px;
+  padding: ${({ additionalPadding }) => additionalPadding ? "8px 27px 8px 10px" : "10px 10px"};
+  font-weight: 400;
+  background-color: ${({ isSelected }) => isSelected ? th.color("red20") : "transparent"};
+  color: ${({ isSelected }) => isSelected ? th.color("red1") : th.color("textPrimary")};
+  border-radius: 6px;
+  height: 36px;
+  cursor: pointer;
+
+  :hover {
+    background-color: ${({ isSelected }) => isSelected ? th.color("red30") : th.color("bgLightGray1")};
+  }
+`;
+const SelectAll = ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }) => {
+	const showCheckbox = !!(theme.optionVariant === "checkbox");
+	const showToggle = !!(theme.optionVariant === "toggle");
+	const ref = useRef(null);
+	const [additionalPadding, setAdditionalPadding] = useState(false);
+	const [isSelected, setIsSelected] = useState(false);
+	const handleSelectAll = useCallback(() => {
+		if (!isSelected) {
+			setIsSelected(true);
+			onCustomSelectAll({ options });
+		} else if (isSelected) {
+			setIsSelected(false);
+			onCustomDeselectAll();
+		}
+	}, [
+		isSelected,
+		onCustomDeselectAll,
+		onCustomSelectAll,
+		options
+	]);
+	useEffect(() => {
+		ref?.current?.offsetHeight && setAdditionalPadding(ref.current.offsetHeight * (options?.length || 0) > maxMenuHeight);
+	}, [
+		additionalPadding,
+		maxMenuHeight,
+		options?.length,
+		value
+	]);
+	useEffect(() => {
+		if (value && Array.isArray(value)) {
+			options?.length === value.length && setIsSelected(true);
+			options?.length !== value.length && setIsSelected(false);
+		}
+	}, [
+		maxMenuHeight,
+		options?.length,
+		value
+	]);
+	if (!options?.length) return null;
+	return /* @__PURE__ */ jsxs(SelectAllWrap, {
+		isSelected,
+		onClick: handleSelectAll,
+		ref,
+		additionalPadding,
+		children: [
+			(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: isSelected,
+				size: 2,
+				readOnly: true
+			}), showToggle && /* @__PURE__ */ jsx(Toggle, {
+				name: "",
+				checked: isSelected,
+				spaceAround: false,
+				variant: "grid"
+			})] }),
+			/* @__PURE__ */ jsx(Trans, {
+				id: "datagrid.filterCell.selectAllLabel",
+				message: "select all"
+			}),
+			" (",
+			options?.length,
+			")"
+		]
+	});
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useRef } from 'react';
-import Checkbox from '../../../Forms/Checkbox/Checkbox';
-import Toggle from '../../Toggle/Toggle';
-import SelectedIndicator from '../components/SelectedIndicator';
-import { Trans } from '@lingui/react';
-import styled, { th } from '@xstyled/styled-components';
-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({ options: options });
-        }
-        else if (isSelected) {
-            setIsSelected(false);
-            onCustomDeselectAll();
-        }
-    }, [isSelected, onCustomDeselectAll, onCustomSelectAll, options]);
-    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]);
-    if (!(options === null || options === void 0 ? void 0 : options.length)) {
-        return null;
-    }
-    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' }), " (", options === null || options === void 0 ? void 0 : options.length, ")"] }));
-};
-export default SelectAll;
-var templateObject_1;
+//#endregion
+export { SelectAll as default };

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

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

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

@@ -1,8 +1,7 @@
-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;
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Elements/Select/components/SelectedIndicator.tsx
+const SelectedIndicator = styled$1.div`
+  padding-right: 12px;
+`;
+//#endregion
+export { SelectedIndicator as default };

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

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

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

@@ -1,11 +1,17 @@
-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 }));
+import { memo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Select/components/SimplifiedOption.tsx
+const SimplifiedOptionInner = (props) => {
+	const styles = props.getStyles("option", props);
+	const { data, selectOption, innerProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		style: styles,
+		onClick: useCallback(() => selectOption(data), [data, selectOption]),
+		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;
+const SimplifiedOption = memo(SimplifiedOptionInner, (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.data?.label === nextProps.data?.label);
+//#endregion
+export { SimplifiedOption as default };

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

@@ -1,3 +1,2 @@
-import { default as Select } from './Select';
-
+import Select from './Select';
 export default Select;

package/ui/Elements/Select/index.js

@@ -1,2 +1,5 @@
-import Select from './Select';
-export default Select;
+import Select from "./Select.js";
+//#region packages/ui/Elements/Select/index.ts
+var Select_default = Select;
+//#endregion
+export { Select_default as default };

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

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 declare const meta: {
     title: string;
-    component: FC<import('../types').SelectProps>;
+    component: FC<import("../types").SelectProps>;
     argTypes: {};
 };
 export default meta;

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

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

package/ui/Elements/Select/styles.js

@@ -1,12 +1,19 @@
-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;
+import styled$1 from "@xstyled/styled-components";
+import { system as system$1 } from "@xstyled/system";
+import ReactSelect from "react-select";
+import AsyncSelect from "react-select/async";
+//#region packages/ui/Elements/Select/styles.ts
+const Wrapper = styled$1.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledReactSelect = styled$1(ReactSelect)`
+  ${system$1};
+  font-size: 14px;
+`;
+const StyledAsyncSelect = styled$1(AsyncSelect)`
+  ${system$1};
+  font-size: 14px;
+`;
+//#endregion
+export { StyledAsyncSelect, StyledReactSelect, Wrapper };

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

@@ -1,4 +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']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
+import { type StylesConfig, type SelectComponentsConfig } from 'react-select';
+import { type 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"]) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];