@mailstep/design-system 0.6.39 → 0.6.41

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

@@ -1,8 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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, 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';
-import { ArrowDown } from '../../Icon/icons/ArrowDown';
-import { ArrowUp } from '../../Icon/icons/ArrowUp';
-// 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    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');
-});
-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;
-    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 }))] }));
-};
-// MultiValue container with count of selected options
-var StyledNumber = styled.div(templateObject_2 || (templateObject_2 = __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'));
-export 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;
-    }
-};
-// Option with chevron form new design
-var ChevronDiv = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
-var SelectedIndicator = styled.div(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\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');
-}, 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 ConfigWrap = styled.div(templateObject_6 || (templateObject_6 = __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: menuIsOpen ? _jsx(ArrowUp, { width: "16px" }) : _jsx(ArrowDown, { width: "16px" }) }) })));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;