@salutejs/plasma-new-hope 0.337.0-canary.2262.18095422153.0 → 0.337.0-canary.2262.18127312179.0

package/styled-components/cjs/hooks/useOutsideClick.js

@@ -9,24 +9,24 @@ Object.defineProperty(exports, "useOutsideClick", {
     }
 });
 var _react = require("react");
-var useOutsideClick = function(callback, secondaryRef) {
-    var ref = (0, _react.useRef)(null);
+function useOutsideClick(callback, refs) {
     (0, _react.useEffect)(function() {
-        var handleClickOutside = function(event) {
-            if (ref.current && !ref.current.contains(event.target)) {
-                if (!(secondaryRef === null || secondaryRef === void 0 ? void 0 : secondaryRef.current) || secondaryRef.current && !secondaryRef.current.contains(event.target)) {
-                    callback(event);
-                }
+        var handleClick = function handleClick(event) {
+            var isInside = refs.some(function(ref) {
+                var el = ref.current;
+                return el && el.contains(event.target);
+            });
+            if (!isInside) {
+                callback(event);
             }
         };
-        document.addEventListener('mouseup', handleClickOutside);
-        document.addEventListener('touchend', handleClickOutside);
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('touchstart', handleClick);
         return function() {
-            document.removeEventListener('mouseup', handleClickOutside);
-            document.removeEventListener('touchend', handleClickOutside);
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('touchstart', handleClick);
         };
     }, [
         callback
     ]);
-    return ref;
-};
+}

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

@@ -157,9 +157,13 @@ import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
         var value = outerValue !== null && outerValue !== void 0 ? outerValue : innerValue;
         var helperTextId = safeUseId();
         var floatingPopoverRef = useRef(null);
-        var targetRef = useOutsideClick(function() {
+        var listWrapperRef = useRef(null);
+        /* Логика работы при клике за пределами выпадающего списка */ useOutsideClick(function() {
             setIsOpen(false);
-        }, floatingPopoverRef);
+        }, [
+            floatingPopoverRef,
+            listWrapperRef
+        ]);
         var handleFocus = function() {
             if (value.toString().length >= threshold) {
                 setIsOpen(true);
@@ -261,8 +265,9 @@ import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
             labelPlacement: labelPlacement,
             disabled: disabled,
             readOnly: readOnly
-        }, /*#__PURE__*/ React.createElement(ListWrapper, null, /*#__PURE__*/ React.createElement(Ul, {
-            ref: targetRef,
+        }, /*#__PURE__*/ React.createElement(ListWrapper, {
+            ref: listWrapperRef
+        }, /*#__PURE__*/ React.createElement(Ul, {
             id: listId,
             role: "listbox",
             "aria-label": label,

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

@@ -214,8 +214,8 @@ import { Context } from "./Combobox.context";
         var inputRef = useRef(null);
         var floatingPopoverRef = useRef(null);
         var inputForkRef = useForkRef(inputRef, ref);
-        var treeId = safeUseId();
         var listWrapperRef = useRef(null);
+        var treeId = safeUseId();
         var filteredItems = useMemo(function() {
             return filterItems(transformedItems, textValue, getTextValue(multiple, value, valueToItemMap, renderValue), filter);
         }, [
@@ -240,15 +240,17 @@ import { Context } from "./Combobox.context";
         var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value) || '';
         var withArrowInverse = isCurrentListOpen ? classes.arrowInverse : undefined;
         var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !multiple;
-        // Логика работы при клике за пределами выпадающего списка
-        var targetRef = useOutsideClick(function() {
+        /* Логика работы при клике за пределами выпадающего списка */ useOutsideClick(function() {
             if (!isCurrentListOpen || alwaysOpened) {
                 return;
             }
             handleListToggle(false);
             // Возвращаем актуальное значение поля ввода после закрытия выпадающего списка.
             setTextValue(getTextValue(multiple, value, valueToItemMap, renderValue));
-        }, floatingPopoverRef);
+        }, [
+            floatingPopoverRef,
+            listWrapperRef
+        ]);
         // Эта функция срабатывает при изменении Combobox и
         // при изменении нативного Select для формы (срабатывает только после изменения internalValue и рендера).
         var onChange = function(newValue, item) {
@@ -630,7 +632,6 @@ import { Context } from "./Combobox.context";
             id: "".concat(treeId, "_tree_level_1"),
             "aria-multiselectable": Boolean(multiple),
             listMaxHeight: listMaxHeight || listHeight,
-            ref: targetRef,
             virtual: virtual,
             onScroll: virtual ? undefined : onScroll
         }, beforeList, isEmpty(filteredItems) ? /*#__PURE__*/ React.createElement(StyledEmptyState, {

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

@@ -160,8 +160,7 @@ import { Context } from "./Dropdown.context";
         var floatingPopoverRef = useRef(null);
         var listWrapperRef = useRef(null);
         var treeId = safeUseId();
-        // Логика работы при клике за пределами выпадающего списка
-        var targetRef = useOutsideClick(function(event) {
+        /* Логика работы при клике за пределами выпадающего списка */ useOutsideClick(function(event) {
             if (!isCurrentListOpen || !closeOnOverlayClick || alwaysOpened) {
                 return;
             }
@@ -174,7 +173,10 @@ import { Context } from "./Dropdown.context";
             if (onToggle) {
                 onToggle(false, event);
             }
-        }, floatingPopoverRef);
+        }, [
+            floatingPopoverRef,
+            listWrapperRef
+        ]);
         var handleGlobalToggle = function(opened, event) {
             if (alwaysOpened || opened) {
                 dispatchPath({
@@ -257,7 +259,6 @@ import { Context } from "./Dropdown.context";
             ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ React.createElement(Ul, {
-            ref: targetRef,
             id: "".concat(treeId, "_tree_level_1"),
             role: "tree",
             listMaxHeight: listMaxHeight || listHeight

package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -50,7 +50,7 @@ var DropdownInner = function(param) {
             id: listId,
             role: "group",
             listMaxHeight: item.listMaxHeight
-        }, item.items.map(function(innerItem, innerIndex) {
+        }, item.beforeList, item.items.map(function(innerItem, innerIndex) {
             return /*#__PURE__*/ React.createElement(DropdownInner, {
                 key: "".concat(innerIndex, "/").concat(currentLevel),
                 item: innerItem,

package/styled-components/es/components/InformationWrapper/ui/Label/Label.js

@@ -59,7 +59,6 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { useRef, useState } from "react";
 import cx from "classnames";
-import { useForkRef } from "@salutejs/plasma-core";
 import { useOutsideClick } from "../../../../hooks";
 import { HintWrapper, Indicator, IndicatorWrapper, Label, OptionalText } from "../../InformationWrapper.styles";
 import { HintComponent } from "../Hint/Hint";
@@ -67,11 +66,12 @@ import { classes } from "../../InformationWrapper.tokens";
 export var LabelComponent = function(param) {
     var size = param.size, hasRequiredIndicator = param.hasRequiredIndicator, requiredIndicatorPlacement = param.requiredIndicatorPlacement, optional = param.optional, optionalText = param.optionalText, label = param.label, labelHtmlFor = param.labelHtmlFor, titleCaption = param.titleCaption, hintText = param.hintText, hintTrigger = param.hintTrigger, hintTargetIcon = param.hintTargetIcon, hintPlacement = param.hintPlacement, hintHasArrow = param.hintHasArrow, hintOffset = param.hintOffset, hintWidth = param.hintWidth, hintContentLeft = param.hintContentLeft, disabled = param.disabled;
     var _useState = _sliced_to_array(useState(false), 2), isHintVisible = _useState[0], setIsHintVisible = _useState[1];
-    var hintRef = useOutsideClick(function() {
+    var hintRef = useRef(null);
+    useOutsideClick(function() {
         setIsHintVisible(false);
-    });
-    var hintInnerRef = useRef(null);
-    var hintForkRef = useForkRef(hintRef, hintInnerRef);
+    }, [
+        hintRef
+    ]);
     var innerOptional = Boolean(hasRequiredIndicator ? false : optional);
     var requiredPlacementClass = requiredIndicatorPlacement === 'left' ? classes.requiredAlignLeft : undefined;
     var handleHintShow = function() {
@@ -84,13 +84,13 @@ export var LabelComponent = function(param) {
         return setIsHintVisible(false);
     };
     var handleHintClick = function(event) {
-        var _hintInnerRef_current;
+        var _hintRef_current;
         if (!hintText || hintTrigger !== 'click' || disabled) {
             return;
         }
         event.stopPropagation();
-        var targetIsPopover = event.target === hintInnerRef.current;
-        var rootHasTarget = (_hintInnerRef_current = hintInnerRef.current) === null || _hintInnerRef_current === void 0 ? void 0 : _hintInnerRef_current.contains(event.target);
+        var targetIsPopover = event.target === hintRef.current;
+        var rootHasTarget = (_hintRef_current = hintRef.current) === null || _hintRef_current === void 0 ? void 0 : _hintRef_current.contains(event.target);
         if (!targetIsPopover && !rootHasTarget) {
             setIsHintVisible(true);
         }
@@ -103,7 +103,7 @@ export var LabelComponent = function(param) {
         className: cx(_define_property({}, classes.withoutLabel, !label)),
         hasCaption: Boolean(titleCaption)
     }, /*#__PURE__*/ React.createElement(HintComponent, {
-        ref: hintForkRef,
+        ref: hintRef,
         size: size,
         hintText: hintText,
         hintTrigger: hintTrigger,

package/styled-components/es/components/Pagination/utils/index.js

@@ -6,6 +6,36 @@ var generateSection = function(length, add) {
 var dType = 'default';
 var dDlots = 9;
 var sections = {
+    1: [
+        1,
+        0,
+        0
+    ],
+    2: [
+        2,
+        0,
+        0
+    ],
+    3: [
+        3,
+        0,
+        0
+    ],
+    4: [
+        4,
+        0,
+        0
+    ],
+    5: [
+        5,
+        0,
+        0
+    ],
+    6: [
+        6,
+        0,
+        0
+    ],
     7: [
         1,
         3,
@@ -80,12 +110,17 @@ export var getSections = function(value, pages, slots) {
     var pageArray = [
         generateSection(pages, 1)
     ];
-    if (slots >= pages || slots < 5) {
+    if (slots >= pages) {
         return pageArray;
     }
     if (!sections[slots]) {
         return pageArray;
     }
+    if (slots < 7) {
+        return [
+            generateSection(slots, value)
+        ];
+    }
     var smallSection = Math.min(Math.floor((slots - 1) / 2), 6);
     var bigSection = Math.min(Math.floor(slots / 2), 6);
     var defaultSection = sections[slots][1];

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

@@ -232,12 +232,15 @@ import { Context } from "./Select.context";
             hintWidth: hintWidth,
             hintHasArrow: hintHasArrow
         };
-        var targetRef = useOutsideClick(function() {
+        /* Логика работы при клике за пределами выпадающего списка */ useOutsideClick(function() {
             if (!isCurrentListOpen) {
                 return;
             }
             handleListToggle(false);
-        }, floatingPopoverRef);
+        }, [
+            floatingPopoverRef,
+            listWrapperRef
+        ]);
         var onChange = function(newValue, item) {
             if (props.onChange) {
                 // Условие для отправки если компонент используется без формы.
@@ -527,7 +530,6 @@ import { Context } from "./Select.context";
             "aria-multiselectable": Boolean(props.multiselect),
             listMaxHeight: listMaxHeight || listHeight,
             onScroll: virtual ? undefined : handleScroll,
-            ref: targetRef,
             virtual: virtual
         }, beforeList, props.multiselect && props.selectAllOptions && // TODO: #2004
         /*#__PURE__*/ React.createElement(SelectAll, {

package/styled-components/es/components/Table/ui/EditableCell/EditableCell.js

@@ -44,11 +44,11 @@ function _unsupported_iterable_to_array(o, minLen) {
     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, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { flexRender } from "@tanstack/react-table";
+import { useOutsideClick } from "../../../../hooks";
 import { Resizer } from "../../Table.styles";
 import { SELECT_COLUMN_ID } from "../../Table";
-import { useOutsideClick } from "../../../../hooks";
 import { IconEditOutline, IconResetOutline, IconDoneCircleOutline } from "../../../_Icon";
 import { getIconSize } from "../HeadCell/HeadCell";
 import { classes } from "../../Table.tokens";
@@ -64,9 +64,12 @@ export var EditableCell = function(param) {
     var _useState = _sliced_to_array(useState(cell.getValue()), 2), value = _useState[0], setValue = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), editingMode = _useState1[0], setEditingMode = _useState1[1];
     var updateData = (_table_options_meta = table.options.meta) === null || _table_options_meta === void 0 ? void 0 : _table_options_meta.updateData;
-    var ref = useOutsideClick(function() {
+    var ref = useRef(null);
+    useOutsideClick(function() {
         setEditingMode(false);
-    });
+    }, [
+        ref
+    ]);
     var handleEditClick = function(e) {
         e.stopPropagation();
         setEditingMode(true);

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

@@ -113,7 +113,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { forwardRef, useState, createRef, useCallback, useRef, useLayoutEffect } from "react";
 import { css } from "styled-components";
-import { useForkRef, useResizeObserver } from "@salutejs/plasma-core";
+import { useResizeObserver } from "@salutejs/plasma-core";
 import { cx, mergeRefs } from "../../utils";
 import { useOutsideClick } from "../../hooks";
 import { applyDynamicLabel } from "./mixins";
@@ -217,11 +217,12 @@ export var textAreaRoot = function(Root) {
         var _useState3 = _sliced_to_array(useState(), 2), uncontrolledValue = _useState3[0], setUncontrolledValue = _useState3[1];
         var outerRef = /*#__PURE__*/ createRef();
         var hiddenRef = useRef(null);
-        var hintRef = useOutsideClick(function() {
+        var hintRef = useRef(null);
+        useOutsideClick(function() {
             setIsHintVisible(false);
-        });
-        var hintInnerRef = useRef(null);
-        var hintForkRef = useForkRef(hintRef, hintInnerRef);
+        }, [
+            hintRef
+        ]);
         var isInnerLeftHelperPlacement = leftHelperPlacement === 'inner';
         var leftHelperText = leftHelper || helperText;
         var innerOptional = required ? false : optional;
@@ -249,13 +250,13 @@ export var textAreaRoot = function(Root) {
             return setIsHintVisible(false);
         };
         var handleHintClick = function(event) {
-            var _hintInnerRef_current;
+            var _hintRef_current;
             if (!hintText || hintTrigger !== 'click') {
                 return;
             }
             event.stopPropagation();
-            var targetIsPopover = event.target === hintInnerRef.current;
-            var rootHasTarget = (_hintInnerRef_current = hintInnerRef.current) === null || _hintInnerRef_current === void 0 ? void 0 : _hintInnerRef_current.contains(event.target);
+            var targetIsPopover = event.target === hintRef.current;
+            var rootHasTarget = (_hintRef_current = hintRef.current) === null || _hintRef_current === void 0 ? void 0 : _hintRef_current.contains(event.target);
             if (!targetIsPopover && !rootHasTarget) {
                 setIsHintVisible(true);
             }
@@ -329,7 +330,7 @@ export var textAreaRoot = function(Root) {
         }, hasOuterLabel && /*#__PURE__*/ React.createElement(StyledIndicatorWrapper, null, /*#__PURE__*/ React.createElement(StyledLabel, {
             "aria-hidden": labelAriaHidden
         }, label), hintText && /*#__PURE__*/ React.createElement(StyledHintWrapper, null, /*#__PURE__*/ React.createElement(HintComponent, {
-            ref: hintForkRef,
+            ref: hintRef,
             hintText: hintText,
             hintTrigger: hintTrigger,
             isHintVisible: isHintVisible,
@@ -356,7 +357,7 @@ export var textAreaRoot = function(Root) {
         }), hintText && /*#__PURE__*/ React.createElement(StyledHintWrapper, {
             className: classes.innerLabelPlacement
         }, /*#__PURE__*/ React.createElement(HintComponent, {
-            ref: hintForkRef,
+            ref: hintRef,
             hintText: hintText,
             hintTrigger: hintTrigger,
             isHintVisible: isHintVisible,

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

@@ -198,6 +198,7 @@ export var textFieldRoot = function(Root) {
         var inputRef = useRef(null);
         var inputForkRef = useForkRef(inputRef, ref);
         var chipsRefs = useRef([]);
+        var hintRef = useRef(null);
         var controlledRefs = {
             contentRef: contentRef,
             inputRef: inputRef,
@@ -244,9 +245,11 @@ export var textFieldRoot = function(Root) {
         var wrapperWithoutLeftContent = !contentLeft && isChipsVisible && chipType === 'default' ? classes.hasEmptyContentLeft : undefined;
         var wrapperWithoutRightContent = !contentRight && isChipsVisible && chipType === 'default' ? classes.hasEmptyContentRight : undefined;
         var contentRightCompensationMargin = !hasOuterLabel && hintText && hintTargetPlacement === 'inner' ? classes.contentRightCompensationMargin : undefined;
-        var hintRef = useOutsideClick(function() {
+        useOutsideClick(function() {
             setIsHintVisible(false);
-        });
+        }, [
+            hintRef
+        ]);
         var hintInnerRef = useRef(null);
         var hintForkRef = useForkRef(hintRef, hintInnerRef);
         var handleInput = function(event) {

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

@@ -98,7 +98,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { forwardRef, useState, useMemo } from "react";
 import Tree from "rc-tree";
-import { cx } from "../../utils";
+import cls from "classnames";
 import { IconArrowWrapper, StyledArrow, base, StyledFolder, TitleWrapper, Title, ContentRight, Line } from "./Tree.styles";
 import { sizeToIconSize, traverseTree } from "./utils";
 import { classes } from "./Tree.tokens";
@@ -106,7 +106,7 @@ import { classes } from "./Tree.tokens";
  * Многоуровневый раскрывающийся список в виде дерева.
  */ export var treeRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(param, ref) {
-        var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode, _param_draggable = param.draggable, draggable = _param_draggable === void 0 ? false : _param_draggable, onDragStart = param.onDragStart, onDragEnter = param.onDragEnter, onDragOver = param.onDragOver, onDragLeave = param.onDragLeave, onDragEnd = param.onDragEnd, onDrop = param.onDrop, allowDrop = param.allowDrop;
+        var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, variant = param.variant, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_singleLine = param.singleLine, singleLine = _param_singleLine === void 0 ? true : _param_singleLine, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode, _param_draggable = param.draggable, draggable = _param_draggable === void 0 ? false : _param_draggable, onDragStart = param.onDragStart, onDragEnter = param.onDragEnter, onDragOver = param.onDragOver, onDragLeave = param.onDragLeave, onDragEnd = param.onDragEnd, onDrop = param.onDrop, allowDrop = param.allowDrop;
         var _useState = _sliced_to_array(useState(defaultSelectedKeys || []), 2), selected = _useState[0], setSelected = _useState[1];
         var selectedKeys = outerSelectedKeys !== null && outerSelectedKeys !== void 0 ? outerSelectedKeys : selected;
         var isRadioMode = mode === 'radio' && !multiple;
@@ -122,6 +122,7 @@ import { classes } from "./Tree.tokens";
         var invertedClass = arrowPlacement === 'right' ? classes.treeInverted : undefined;
         var itemFilledClass = fullWidthItemSelection ? classes.treeItemFilled : undefined;
         var radioModeClass = isRadioMode ? classes.treeRadioMode : undefined;
+        var tightVariantClass = variant === 'tight' ? classes.treeTightVariant : undefined;
         // Проходимся по дереву и устанавливаем соответствующие классы для узлов дерева,
         // чтобы соблюсти иерархию вложенности в UI.
         var treeData = useMemo(function() {
@@ -133,6 +134,7 @@ import { classes } from "./Tree.tokens";
         return /*#__PURE__*/ React.createElement(Root, {
             view: view,
             size: size,
+            variant: variant,
             ref: ref,
             items: items
         }, /*#__PURE__*/ React.createElement(Tree, _object_spread_props(_object_spread({
@@ -141,7 +143,7 @@ import { classes } from "./Tree.tokens";
             virtual: virtual,
             multiple: multiple,
             checkable: checkable,
-            className: cx(className, invertedClass, itemFilledClass, radioModeClass),
+            className: cls(className, invertedClass, itemFilledClass, radioModeClass, tightVariantClass),
             defaultExpandAll: defaultExpandAll,
             autoExpandParent: autoExpandParent,
             style: {
@@ -165,20 +167,23 @@ import { classes } from "./Tree.tokens";
                     return null;
                 }
                 return /*#__PURE__*/ React.createElement(IconArrowWrapper, null, /*#__PURE__*/ React.createElement(StyledArrow, {
-                    size: sizeToIconSize(size),
+                    size: sizeToIconSize(size, variant),
                     color: "inherit",
                     className: "arrow"
                 }));
             },
             icon: hasIcon && (icon || /*#__PURE__*/ React.createElement(StyledFolder, {
-                size: sizeToIconSize(size),
+                size: sizeToIconSize(size, variant),
                 color: "inherit"
             })),
             titleRender: function(item) {
                 return /*#__PURE__*/ React.createElement(TitleWrapper, {
                     fullWidthItemSelection: fullWidthItemSelection,
-                    arrowPlacement: arrowPlacement
-                }, /*#__PURE__*/ React.createElement(Title, null, renderTitle ? renderTitle(item) : typeof item.title === 'function' ? item.title(item) : item.title), item.contentRight && /*#__PURE__*/ React.createElement(ContentRight, null, item.contentRight));
+                    arrowPlacement: arrowPlacement,
+                    singleLine: singleLine
+                }, /*#__PURE__*/ React.createElement(Title, {
+                    singleLine: singleLine
+                }, renderTitle ? renderTitle(item) : typeof item.title === 'function' ? item.title(item) : item.title), item.contentRight && /*#__PURE__*/ React.createElement(ContentRight, null, item.contentRight));
             },
             draggable: draggable,
             onDragStart: onDragStart,

package/styled-components/es/components/Tree/Tree.styles.js

@@ -1,11 +1,10 @@
 import styled from "styled-components";
 import { css } from "styled-components";
-import { applyEllipsis } from "../../mixins";
 import { IconDisclosureRightCentered, IconFolder } from "../_Icon";
 import { treeTokens as tokens, classes } from "./Tree.tokens";
 export var IconArrowWrapper = styled.div.withConfig({
     displayName: "Tree.styles__IconArrowWrapper",
-    componentId: "sc-8ac26406-0"
+    componentId: "sc-42c76870-0"
 })([
     "line-height:0;color:var(",
     ");&:hover{color:var(",
@@ -14,44 +13,58 @@ export var IconArrowWrapper = styled.div.withConfig({
 ], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
 export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
     displayName: "Tree.styles__StyledArrow",
-    componentId: "sc-8ac26406-1"
+    componentId: "sc-42c76870-1"
 })([
     "transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"
 ]);
 export var StyledFolder = styled(IconFolder).withConfig({
     displayName: "Tree.styles__StyledFolder",
-    componentId: "sc-8ac26406-2"
+    componentId: "sc-42c76870-2"
 })([
     ""
 ]);
 export var TitleWrapper = styled.div.withConfig({
     displayName: "Tree.styles__TitleWrapper",
-    componentId: "sc-8ac26406-3"
+    componentId: "sc-42c76870-3"
 })([
     "display:flex;align-items:center;justify-content:space-between;margin:",
-    ";",
+    ";overflow:",
     ";"
 ], function(param) {
     var arrowPlacement = param.arrowPlacement, fullWidthItemSelection = param.fullWidthItemSelection;
     return arrowPlacement === 'left' && !fullWidthItemSelection ? "var(".concat(tokens.iconFolderMargin, ")") : 0;
-}, applyEllipsis());
+}, function(param) {
+    var singleLine = param.singleLine;
+    return singleLine ? 'hidden' : 'visible';
+});
 export var Title = styled.span.withConfig({
     displayName: "Tree.styles__Title",
-    componentId: "sc-8ac26406-4"
+    componentId: "sc-42c76870-4"
 })([
     "margin:var(",
-    ");",
+    ");overflow:",
+    ";text-overflow:",
+    ";white-space:",
     ";"
-], tokens.iconFolderMargin, applyEllipsis());
+], tokens.iconFolderMargin, function(param) {
+    var singleLine = param.singleLine;
+    return singleLine ? 'hidden' : 'visible';
+}, function(param) {
+    var singleLine = param.singleLine;
+    return singleLine ? 'ellipsis' : 'unset';
+}, function(param) {
+    var singleLine = param.singleLine;
+    return singleLine ? 'nowrap' : 'normal';
+});
 export var ContentRight = styled.div.withConfig({
     displayName: "Tree.styles__ContentRight",
-    componentId: "sc-8ac26406-5"
+    componentId: "sc-42c76870-5"
 })([
     "line-height:0;"
 ]);
 export var Line = styled.div.withConfig({
     displayName: "Tree.styles__Line",
-    componentId: "sc-8ac26406-6"
+    componentId: "sc-42c76870-6"
 })([
     "left:",
     "px;right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
@@ -61,23 +74,21 @@ export var Line = styled.div.withConfig({
     return left;
 }, tokens.itemDraggableLineColor);
 export var base = css([
-    ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{opacity:0.28;}.rc-tree .rc-tree-treenode.drop-container::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.",
+    ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{display:flex;align-items:center;box-sizing:border-box;margin:0;padding:var(",
+    ");position:relative;z-index:0;width:100%;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree.",
+    " .rc-tree-treenode{padding:var(",
+    ");}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{opacity:0.28;}.rc-tree .rc-tree-treenode.drop-container::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.",
     "::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.drag-over::before{box-shadow:inset 0 0 0 1px var(",
-    ");}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
-    ");}.rc-tree.",
+    ");}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
+    ");display:flex;align-items:center;width:100%;}.rc-tree.",
     " .rc-tree-treenode.rc-tree-treenode-selected .rc-tree-node-content-wrapper{cursor:default;}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-node-content-wrapper,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-switcher,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-checkbox,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-iconEle{cursor:default;}.rc-tree .rc-tree-treenode span.rc-tree-switcher,.rc-tree .rc-tree-treenode span.rc-tree-checkbox,.rc-tree .rc-tree-treenode span.rc-tree-iconEle{cursor:pointer;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize{background-image:none;}.rc-tree .rc-tree-treenode span.rc-tree-icon_loading{margin-right:2px;vertical-align:top;background:url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7') no-repeat scroll 0 0 transparent;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{flex:none;}.rc-tree.",
     " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{display:none;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open{background-position:-93px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close{background-position:-75px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox{width:13px;height:13px;margin:0 3px;background-position:0 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked{background-position:-14px 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-indeterminate{background-position:-14px -28px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-disabled{background-position:0 -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled{background-position:-14px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled{position:relative;background:#ccc;border-radius:3px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled::after{position:absolute;top:5px;left:3px;width:5px;height:0;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:scale(1);transform:scale(1);content:' ';}.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop{background:none;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > ul{background:url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > .rc-tree-switcher-noop{background-position:-56px -18px;}.rc-tree.rc-tree-show-line .rc-tree-treenode:last-child > .rc-tree-switcher-noop{background-position:-56px -36px;}.rc-tree-child-tree{display:none;}.rc-tree-child-tree-open{display:block;}.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),.rc-tree-treenode-disabled > a,.rc-tree-treenode-disabled > a span{color:#767676;cursor:not-allowed;}.rc-tree-treenode-active{background:rgba(0,0,0,0.1);}.rc-tree-node-selected{background-color:#ffe6b0;box-shadow:0 0 0 1px #ffb951;opacity:0.8;}.rc-tree-icon__open{margin-right:0;vertical-align:top;background-position:-110px -16px;}.rc-tree-icon__close{margin-right:0;vertical-align:top;background-position:-110px 0;}.rc-tree-icon__docu{margin-right:0;vertical-align:top;background-position:-110px -32px;}.rc-tree-icon__customize{display:block;line-height:0;color:var(",
     ");margin:var(",
-    ");}.rc-tree-title{display:inline-block;width:100%;}.rc-tree-indent{display:inline-flex;height:0;vertical-align:bottom;}.rc-tree-indent-unit{display:inline-block;width:16px;}.rc-tree-draggable-icon{display:inline-flex;justify-content:center;width:16px;}.rc-tree,.rc-tree-list{border:none !important;}.rc-tree .rc-tree-list-holder{overflow:hidden auto;}.rc-tree .rc-tree-treenode{position:relative;z-index:0;display:flex;align-items:center;min-height:var(",
-    ");padding:0;}.rc-tree.",
-    " .rc-tree-treenode{padding:0 var(",
-    ") !important;}.rc-tree.",
-    ":not(",
-    ") .rc-tree-treenode{padding:0 var(",
-    ");}.rc-tree .rc-tree-treenode::before{content:'';position:absolute;z-index:-1;top:var(",
+    ");}.rc-tree-title{display:grid;width:100%;}.rc-tree-indent{display:inline-flex;height:0;vertical-align:bottom;}.rc-tree-indent-unit{display:inline-block;width:16px;}.rc-tree-draggable-icon{display:inline-flex;justify-content:center;width:16px;}.rc-tree,.rc-tree-list{border:none !important;}.rc-tree .rc-tree-list-holder{overflow:hidden auto;}.rc-tree .rc-tree-treenode::before{content:'';position:absolute;z-index:-1;top:var(",
     ");bottom:var(",
-    ");left:var(",
-    ");right:0;background:transparent;border-radius:var(",
+    ");left:calc(var(",
+    ") + var(",
+    "));right:0;background:transparent;border-radius:var(",
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-node-content-wrapper,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-switcher,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-checkbox{opacity:var(",
     ");}.rc-tree.",
     " .rc-tree-treenode::before{inset:0;border-radius:0;}.rc-tree .rc-tree-treenode.",
@@ -91,7 +102,7 @@ export var base = css([
     " .rc-tree-treenode.rc-tree-treenode-selected):hover::before{background:var(",
     ");}.rc-tree .rc-tree-treenode:not(.rc-tree-treenode-disabled):not(.rc-tree.",
     " .rc-tree-treenode.rc-tree-treenode-selected):active::before{background:var(",
-    ");}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{display:flex;align-items:center;align-self:stretch;height:auto;flex:1;min-width:max-content;}.rc-tree .rc-tree-treenode span.rc-tree-switcher{width:var(",
+    ");}.rc-tree .rc-tree-treenode span.rc-tree-switcher{width:var(",
     ");height:var(",
     ");margin:var(",
     ");line-height:0;vertical-align:0;background:transparent;}.rc-tree.",
@@ -123,6 +134,6 @@ export var base = css([
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-title{color:var(",
     ");}.rc-tree-node-selected .rc-tree-icon__customize{color:var(",
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-icon__customize{color:var(",
-    ");;}.rc-tree-indent-unit{width:var(",
+    ");}.rc-tree-indent-unit{width:var(",
     ");}"
-], classes.treeLeafNode, tokens.itemDraggableBorderColor, tokens.color, classes.treeRadioMode, classes.treeInverted, tokens.iconFolderColor, tokens.iconFolderMargin, tokens.itemHeight, classes.treeItemFilled, tokens.itemPadding, classes.treeInverted, classes.treeItemFilled, tokens.itemPaddingTight, tokens.itemTop, tokens.itemBottom, tokens.switcherSize, tokens.itemBorderRadius, tokens.itemDisabledOpacity, classes.treeItemFilled, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemPrimaryBackground, tokens.itemBackgroundColorPrimary, tokens.itemBackgroundColorSelected, classes.treeRadioMode, tokens.itemBackgroundColorHover, classes.treeRadioMode, tokens.itemBackgroundColorActive, tokens.switcherSize, tokens.switcherSize, tokens.switcherMargin, classes.treeInverted, tokens.switcherMarginInverted, classes.treeInverted, classes.treeInverted, tokens.checkboxSize, tokens.checkboxSize, tokens.checkboxMargin, tokens.checkboxInnerSize, tokens.checkboxInnerSize, tokens.checkboxBorderColor, tokens.checkboxBorderRadius, tokens.itemDisabledBorderColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.color, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, classes.treeInverted, classes.treeInverted, tokens.colorSelected, tokens.itemDisabledColor, tokens.colorSelected, tokens.itemDisabledColor, tokens.itemIndent);
+], tokens.itemPadding, classes.treeTightVariant, tokens.itemPaddingTight, classes.treeLeafNode, tokens.itemDraggableBorderColor, tokens.color, classes.treeRadioMode, classes.treeInverted, tokens.iconFolderColor, tokens.iconFolderMargin, tokens.itemTop, tokens.itemBottom, tokens.switcherSize, tokens.itemBackgroundExtraOffset, tokens.itemBorderRadius, tokens.itemDisabledOpacity, classes.treeItemFilled, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemPrimaryBackground, tokens.itemBackgroundColorPrimary, tokens.itemBackgroundColorSelected, classes.treeRadioMode, tokens.itemBackgroundColorHover, classes.treeRadioMode, tokens.itemBackgroundColorActive, tokens.switcherSize, tokens.switcherSize, tokens.switcherMargin, classes.treeInverted, tokens.switcherMarginInverted, classes.treeInverted, classes.treeInverted, tokens.checkboxSize, tokens.checkboxSize, tokens.checkboxMargin, tokens.checkboxInnerSize, tokens.checkboxInnerSize, tokens.checkboxBorderColor, tokens.checkboxBorderRadius, tokens.itemDisabledBorderColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.color, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, classes.treeInverted, classes.treeInverted, tokens.colorSelected, tokens.itemDisabledColor, tokens.colorSelected, tokens.itemDisabledColor, tokens.itemIndent);

package/styled-components/es/components/Tree/Tree.tokens.js

@@ -4,7 +4,8 @@ export var classes = {
     treeItemPrimaryBackground: 'tree-item-primary-background',
     treeItemHasSelectedChildren: 'tree-item-has-selected-children',
     treeRadioMode: 'tree-radio-mode',
-    treeLeafNode: 'tree-leaf-node'
+    treeLeafNode: 'tree-leaf-node',
+    treeTightVariant: 'tree-tight-variant'
 };
 export var treeTokens = {
     arrowColor: '--plasma-tree-arrow-color',
@@ -36,6 +37,7 @@ export var treeTokens = {
     checkboxMargin: '--plasma-tree-checkbox-margin',
     checkboxBorderColor: '--plasma-tree-checkbox-border-color',
     checkboxBackgroundColor: '--plasma-tree-checkbox-background-color',
+    itemBackgroundExtraOffset: '--plasma-tree-item-background-extra-offset',
     itemBackgroundColorSelected: '--plasma-tree-item-background-color-selected',
     itemBackgroundColorPrimary: '--plasma-tree-item-background-color-primary',
     itemBackgroundColorHover: '--plasma-tree-item-background-color-hover',