@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,167 +1,90 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+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 { 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(), function(param) {
-    var additionalPadding = param.additionalPadding;
-    return additionalPadding ? "8px 27px 8px 10px" : "10px 10px";
-}, function(param) {
-    var isSelected = param.isSelected;
-    return isSelected ? th.color("red20") : "transparent";
-}, function(param) {
-    var isSelected = param.isSelected;
-    return isSelected ? th.color("red1") : th.color("textPrimary");
-}, function(param) {
-    var isSelected = param.isSelected;
-    return isSelected ? th.color("red30") : th.color("bgLightGray1");
-});
-var SelectAll = function SelectAll(param) {
-    var onCustomSelectAll = param.onCustomSelectAll, onCustomDeselectAll = param.onCustomDeselectAll, value = param.value, options = param.options, maxMenuHeight = param.maxMenuHeight, theme = param.theme;
-    var showCheckbox = !!(theme.optionVariant === "checkbox");
-    var showToggle = !!(theme.optionVariant === "toggle");
-    var ref = useRef(null);
-    var _useState = _sliced_to_array(useState(false), 2), additionalPadding = _useState[0], setAdditionalPadding = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), isSelected = _useState1[0], setIsSelected = _useState1[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 _ref_current;
-        (ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.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 /* @__PURE__ */ jsxs(SelectAllWrap, {
-        isSelected: isSelected,
-        onClick: handleSelectAll,
-        ref: ref,
-        additionalPadding: additionalPadding,
-        children: [
-            (showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, {
-                children: [
-                    showCheckbox && /* @__PURE__ */ jsx(Checkbox, {
-                        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 === null || options === void 0 ? void 0 : options.length,
-            ")"
-        ]
-    });
+//#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,
+			")"
+		]
+	});
 };
-var SelectAll_default = SelectAll;
-export { SelectAll_default as default };
+//#endregion
+export { SelectAll as default };

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

@@ -1,23 +1,7 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  padding-right: 12px;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-var SelectedIndicator = styled.div(_templateObject());
-var SelectedIndicator_default = SelectedIndicator;
-export { SelectedIndicator_default as default };
+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.js

@@ -1,25 +1,17 @@
+import { memo, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, memo } from "react";
-var SimplifiedOptionInner = function SimplifiedOptionInner(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 /* @__PURE__ */ jsx("div", {
-        style: styles,
-        onClick: handleClick,
-        onMouseOver: innerProps.onMouseOver,
-        onMouseMove: innerProps.onMouseMove,
-        children: props.label
-    });
+//#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 _prevProps_data, _nextProps_data;
-    return prevProps.isFocused === nextProps.isFocused && ((_prevProps_data = prevProps.data) === null || _prevProps_data === void 0 ? void 0 : _prevProps_data.label) === ((_nextProps_data = nextProps.data) === null || _nextProps_data === void 0 ? void 0 : _nextProps_data.label);
-});
-var SimplifiedOption_default = SimplifiedOption;
-export { SimplifiedOption_default as default };
+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.js

@@ -1,3 +1,5 @@
-import Select from "./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/styles.js

@@ -1,47 +1,19 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  font-size: 14px;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  font-size: 14px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
+import styled$1 from "@xstyled/styled-components";
+import { system as system$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
 import ReactSelect from "react-select";
 import AsyncSelect from "react-select/async";
-import { system } from "@xstyled/system";
-var Wrapper = styled.div(_templateObject());
-var StyledReactSelect = styled(ReactSelect)(_templateObject1(), system);
-var StyledAsyncSelect = styled(AsyncSelect)(_templateObject2(), system);
+//#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.js

@@ -1,48 +1,41 @@
+import { ChevronOption } from "../components/ChevronOption.js";
+import ConnectedMenu from "../components/ConnectedMenu.js";
+import CountMultiValue from "../components/CountMultiValue.js";
+import { CustomInput } from "../components/CustomInput.js";
+import { DropdownIndicator } from "../components/DropdownIndicator.js";
+import IconValueContainer from "../components/IconValueContainer.js";
+import SimplifiedOption from "../components/SimplifiedOption.js";
+import { CustomStyles, getCustomTheme } from "./selectStyles.js";
 import { useMemo } from "react";
-import ChevronOption from "../components/ChevronOption";
-import ConnectedMenu from "../components/ConnectedMenu";
-import CountMultiValue from "../components/CountMultiValue";
-import CustomInput from "../components/CustomInput";
-import DropdownIndicator from "../components/DropdownIndicator";
-import IconValueContainer from "../components/IconValueContainer";
-import SimplifiedOption from "../components/SimplifiedOption";
 import { useTheme } from "@xstyled/styled-components";
-import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from "./selectStyles";
-var useStylesAndComponents = function useStylesAndComponents() {
-    var style = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "form", optionVariant = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default", multiLabelVariant = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "default", containerVariant = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default", useSimplifiedOptions = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false, showSelectAllButton = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;
-    var systemTheme = useTheme();
-    return useMemo(function() {
-        var components = {
-            ValueContainer: IconValueContainer
-        };
-        components.DropdownIndicator = DropdownIndicator;
-        if (multiLabelVariant === "count") {
-            components.MultiValue = CountMultiValue;
-        }
-        if (containerVariant === "search") {
-            components.DropdownIndicator = null;
-        }
-        if (showSelectAllButton) {
-            components.MenuList = ConnectedMenu;
-        }
-        components.Input = CustomInput;
-        var themes = getFormCustomTheme(systemTheme, optionVariant, style === "gridFilter");
-        var styles = SelectCustomStyles;
-        components.Option = ChevronOption;
-        if (useSimplifiedOptions) components.Option = SimplifiedOption;
-        return [
-            components,
-            themes,
-            styles
-        ];
-    }, [
-        multiLabelVariant,
-        containerVariant,
-        showSelectAllButton,
-        style,
-        useSimplifiedOptions,
-        systemTheme,
-        optionVariant
-    ]);
+//#region packages/ui/Elements/Select/themes/index.ts
+const useStylesAndComponents = (style = "form", optionVariant = "default", multiLabelVariant = "default", containerVariant = "default", useSimplifiedOptions = false, showSelectAllButton = false) => {
+	const systemTheme = useTheme();
+	return useMemo(() => {
+		const components = { ValueContainer: IconValueContainer };
+		components.DropdownIndicator = DropdownIndicator;
+		if (multiLabelVariant === "count") components.MultiValue = CountMultiValue;
+		if (containerVariant === "search") components.DropdownIndicator = null;
+		if (showSelectAllButton) components.MenuList = ConnectedMenu;
+		components.Input = CustomInput;
+		const themes = getCustomTheme(systemTheme, optionVariant, style === "gridFilter");
+		const styles = CustomStyles;
+		components.Option = ChevronOption;
+		if (useSimplifiedOptions) components.Option = SimplifiedOption;
+		return [
+			components,
+			themes,
+			styles
+		];
+	}, [
+		multiLabelVariant,
+		containerVariant,
+		showSelectAllButton,
+		style,
+		useSimplifiedOptions,
+		systemTheme,
+		optionVariant
+	]);
 };
+//#endregion
 export { useStylesAndComponents };