@salutejs/plasma-new-hope 0.340.0-canary.2305.18873573377.0 → 0.340.0-canary.2314.19038910206.0

package/styled-components/es/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.js

@@ -0,0 +1,141 @@
+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_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+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);
+}
+import React, { useContext, useRef } from "react";
+import { classes } from "../../../../../../Select/Select.tokens";
+import { sizeToIconSize } from "../../../../../../Select/utils";
+import { useDidMountEffect } from "../../../../../../../hooks";
+import { isArraysEqual, cx } from "../../../../../../../utils";
+import { keyExists } from "../../../../reducers/treePathReducer";
+import { Context } from "../../../../Combobox.context";
+import { ItemWrapper, ChildItems, Offset, IconWrapper, StyledCheckboxWrapper, StyledCheckbox, StyledIndicator, StyledIconDone, StyledText, StyledWrapper, StyledCell, DisclosureIconWrapper, StyledArrowRight, Wrapper, StyledArrowLeft } from "./Item.styles";
+export var Item = function(param) {
+    var item = param.item, pathToItem = param.pathToItem;
+    var _valueToPathMap_get, _item_items;
+    var label = item.label, value = item.value, disabled = item.disabled, contentLeft = item.contentLeft, contentRight = item.contentRight;
+    var isLeaf = !(item === null || item === void 0 ? void 0 : item.items);
+    var _useContext = useContext(Context), checked = _useContext.checked, multiple = _useContext.multiple, size = _useContext.size, variant = _useContext.variant, renderItem = _useContext.renderItem, // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    _checkboxAppearance = _useContext._checkboxAppearance, focusedPath = _useContext.focusedPath, treePath = _useContext.treePath, dispatchTreePath = _useContext.dispatchTreePath, arrowPlacement = _useContext.arrowPlacement, handleItemClick = _useContext.handleItemClick, handleCheckboxChange = _useContext.handleCheckboxChange, valueToPathMap = _useContext.valueToPathMap;
+    var ref = useRef(null);
+    var itemDisabled = disabled;
+    var disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;
+    var currentItemDepth = (((_valueToPathMap_get = valueToPathMap.get(item.value.toString())) === null || _valueToPathMap_get === void 0 ? void 0 : _valueToPathMap_get.length) || 0) - 1;
+    var isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);
+    var withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;
+    var focusedClass = isArraysEqual(pathToItem, focusedPath) ? classes.dropdownItemIsFocused : undefined;
+    var handleClick = function(e) {
+        if (itemDisabled) return;
+        if (!isLeaf) {
+            dispatchTreePath({
+                type: 'toggled_level',
+                value: valueToPathMap.get(value.toString()) || []
+            });
+        }
+        if (handleItemClick) {
+            handleItemClick(item, e);
+        }
+    };
+    var handleChange = function(e) {
+        if (itemDisabled) return;
+        e.stopPropagation();
+        handleCheckboxChange(item);
+    };
+    useDidMountEffect(function() {
+        if (focusedClass && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+            ref.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'center'
+            });
+        }
+    }, [
+        focusedClass
+    ]);
+    return /*#__PURE__*/ React.createElement(ItemWrapper, null, /*#__PURE__*/ React.createElement(Wrapper, {
+        ref: ref,
+        className: cx(focusedClass, disabledClassName),
+        onClick: handleClick,
+        variant: variant,
+        role: "treeitem"
+    }, /*#__PURE__*/ React.createElement(Offset, {
+        depth: currentItemDepth
+    }), arrowPlacement === 'left' && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, {
+        visibility: isLeaf ? 'hidden' : 'visible'
+    }, /*#__PURE__*/ React.createElement(StyledArrowLeft, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit",
+        className: withArrowInverse
+    })), multiple && /*#__PURE__*/ React.createElement(IconWrapper, {
+        variant: variant
+    }, /*#__PURE__*/ React.createElement(StyledCheckboxWrapper, {
+        onClick: function(e) {
+            return e.stopPropagation();
+        }
+    }, /*#__PURE__*/ React.createElement(StyledCheckbox, {
+        disabled: itemDisabled,
+        checked: Boolean(checked.get(item.value)),
+        indeterminate: checked.get(item.value) === 'indeterminate',
+        onChange: handleChange,
+        appearance: _checkboxAppearance !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
+    }))), !multiple && arrowPlacement === 'right' && /*#__PURE__*/ React.createElement(IconWrapper, {
+        variant: variant
+    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ React.createElement(StyledIndicator, {
+        size: "s",
+        view: "default"
+    }), checked.get(item.value) === 'done' && /*#__PURE__*/ React.createElement(StyledIconDone, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit"
+    })), renderItem ? /*#__PURE__*/ React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/ React.createElement(StyledWrapper, null, /*#__PURE__*/ React.createElement(StyledCell, {
+        contentLeft: contentLeft,
+        contentRight: contentRight,
+        // TODO: #1548
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        title: /*#__PURE__*/ React.createElement("span", null, label)
+    })), !multiple && arrowPlacement === 'left' && /*#__PURE__*/ React.createElement(IconWrapper, {
+        variant: variant
+    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ React.createElement(StyledIndicator, {
+        size: "s",
+        view: "default"
+    }), checked.get(item.value) === 'done' && /*#__PURE__*/ React.createElement(StyledIconDone, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit"
+    })), arrowPlacement === 'right' && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, {
+        visibility: isLeaf ? 'hidden' : 'visible'
+    }, /*#__PURE__*/ React.createElement(StyledArrowRight, {
+        size: sizeToIconSize(size, variant),
+        color: "inherit",
+        className: withArrowInverse
+    }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ React.createElement(ChildItems, null, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement(Item, {
+            item: item,
+            key: item.value,
+            pathToItem: _to_consumable_array(pathToItem).concat([
+                index
+            ])
+        });
+    })));
+};

package/styled-components/es/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.styles.js

@@ -0,0 +1,232 @@
+import styled from "styled-components";
+import { addFocus, applyEllipsis } from "../../../../../../../mixins";
+import { component, mergeConfig } from "../../../../../../../engines";
+import { checkboxConfig, checkboxTokens } from "../../../../../../Checkbox";
+import { cellConfig, cellTokens } from "../../../../../../Cell";
+import { indicatorConfig, indicatorTokens } from "../../../../../../Indicator";
+import { IconDisclosureRightCentered, IconDone } from "../../../../../../_Icon";
+import { classes, tokens, constants } from "../../../../Combobox.tokens";
+export var ItemWrapper = styled.div.withConfig({
+    displayName: "Item.styles__ItemWrapper",
+    componentId: "sc-21354cd4-0"
+})([
+    ""
+]);
+var mergedCheckboxConfig = mergeConfig(checkboxConfig);
+var Checkbox = component(mergedCheckboxConfig);
+var mergedCellConfig = mergeConfig(cellConfig);
+var Cell = component(mergedCellConfig);
+var mergedIndicatorConfig = mergeConfig(indicatorConfig);
+var Indicator = component(mergedIndicatorConfig);
+export var StyledWrapper = styled.div.withConfig({
+    displayName: "Item.styles__StyledWrapper",
+    componentId: "sc-21354cd4-1"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");width:100%;"
+], cellTokens.cellTitleColor, constants.cellTitleColor, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
+export var StyledCell = styled(Cell).withConfig({
+    displayName: "Item.styles__StyledCell",
+    componentId: "sc-21354cd4-2"
+})([
+    ""
+]);
+export var StyledCheckbox = styled(Checkbox).withConfig({
+    displayName: "Item.styles__StyledCheckbox",
+    componentId: "sc-21354cd4-3"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth);
+export var StyledIndicator = styled(Indicator).withConfig({
+    displayName: "Item.styles__StyledIndicator",
+    componentId: "sc-21354cd4-4"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.itemIconColor);
+// TODO: Удалить после поддержки JS переменных в конфиге компонент
+export var sizeMap = {
+    xs: '1rem',
+    s: '1.5rem'
+};
+export var StyledArrowLeft = styled(IconDisclosureRightCentered).withConfig({
+    displayName: "Item.styles__StyledArrowLeft",
+    componentId: "sc-21354cd4-5"
+})([
+    "width:",
+    ";height:",
+    ";&.",
+    "{transform:rotate(90deg);}"
+], function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, classes.arrowInverse);
+export var StyledArrowRight = styled(IconDisclosureRightCentered).withConfig({
+    displayName: "Item.styles__StyledArrowRight",
+    componentId: "sc-21354cd4-6"
+})([
+    "width:",
+    ";height:",
+    ";transform:rotate(90deg);&.",
+    "{transform:rotate(-90deg);}"
+], function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, classes.arrowInverse);
+export var StyledIconDone = styled(IconDone).withConfig({
+    displayName: "Item.styles__StyledIconDone",
+    componentId: "sc-21354cd4-7"
+})([
+    "width:",
+    ";height:",
+    ";"
+], function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
+    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+});
+export var DisclosureIconWrapper = styled.div.withConfig({
+    displayName: "Item.styles__DisclosureIconWrapper",
+    componentId: "sc-21354cd4-8"
+})([
+    "line-height:0;color:var(",
+    ");visibility:",
+    ";&:hover{color:var(",
+    ");}"
+], tokens.disclosureIconColor, function(param) {
+    var visibility = param.visibility;
+    return visibility || 'visible';
+}, tokens.disclosureIconColorHover);
+export var IconWrapper = styled.div.withConfig({
+    displayName: "Item.styles__IconWrapper",
+    componentId: "sc-21354cd4-9"
+})([
+    "display:flex;align-items:center;justify-content:center;flex:none;width:",
+    ";height:",
+    ";line-height:0;color:var(",
+    ");"
+], function(param) {
+    var variant = param.variant;
+    return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
+}, function(param) {
+    var variant = param.variant;
+    return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
+}, tokens.itemIconColor);
+export var StyledText = styled.div.withConfig({
+    displayName: "Item.styles__StyledText",
+    componentId: "sc-21354cd4-10"
+})([
+    "",
+    ";flex:1;"
+], applyEllipsis());
+export var Wrapper = styled.div.withConfig({
+    displayName: "Item.styles__Wrapper",
+    componentId: "sc-21354cd4-11"
+})([
+    "display:flex;align-items:center;gap:var(",
+    ");min-height:var(",
+    ");margin:0;box-sizing:content-box;padding:",
+    ";font-family:var(",
+    ");font-size:var(",
+    ");font-style:var(",
+    ");font-weight:var(",
+    ");letter-spacing:var(",
+    ");line-height:var(",
+    ");background-color:var(",
+    ");color:var(--text-primary);border-radius:calc(var(",
+    ") - 0.125rem - var(",
+    ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.",
+    "){cursor:pointer;background-color:var(",
+    ");}&.",
+    "{background-color:var(",
+    ");}&.",
+    "{opacity:",
+    ";cursor:not-allowed;}:focus{outline:none;}",
+    ";"
+], tokens.itemGap, tokens.itemHeight, function(param) {
+    var variant = param.variant;
+    return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, addFocus({
+    outlineSize: '0',
+    outlineOffset: '0',
+    outlineColor: "var(".concat(constants.focusColor, ")"),
+    outlineRadius: "calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.dropdownBorderWidth, ", 0rem))"),
+    hasTransition: false,
+    customFocusRules: "\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: inset 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
+}));
+export var StyledCheckboxWrapper = styled.span.withConfig({
+    displayName: "Item.styles__StyledCheckboxWrapper",
+    componentId: "sc-21354cd4-12"
+})([
+    ""
+]);
+export var ChildItems = styled.div.withConfig({
+    displayName: "Item.styles__ChildItems",
+    componentId: "sc-21354cd4-13"
+})([
+    ""
+]);
+export var Offset = styled.div.withConfig({
+    displayName: "Item.styles__Offset",
+    componentId: "sc-21354cd4-14"
+})([
+    "width:calc(",
+    " * var(",
+    "));flex:none;margin-right:calc(var(",
+    ") * -1);"
+], function(param) {
+    var depth = param.depth;
+    return depth || 0;
+}, tokens.itemTreeOffsetWidth, tokens.itemGap);

package/styled-components/es/components/Combobox/ComboboxNew/ui/TreeList/ui/Item/Item.types.js

@@ -0,0 +1 @@
+export { };

package/styled-components/es/components/Combobox/ComboboxNew/ui/index.js

@@ -2,3 +2,4 @@ export * from "./Inner/Inner";
 export * from "./Target/Target";
 export * from "./VirtualList/VirtualList";
 export * from "./SelectAll/SelectAll";
+export * from "./TreeList/TreeList";

package/styled-components/es/components/Select/Select.js

@@ -414,7 +414,8 @@ import { Context } from "./Select.context";
             treePath: treePath,
             dispatchTreePath: dispatchTreePath,
             treeView: treeView,
-            valueToPathMap: valueToPathMap
+            valueToPathMap: valueToPathMap,
+            items: transformedItems
         }).onKeyDown;
         // В данном эффекте мы следим за изменениями value снаружи и вносим коррективы в дерево чекбоксов.
         // Пример: когда юзер очистил value извне, тогда нужно пройтись по элементам и выключить все чекбоксы.