@salutejs/plasma-new-hope 0.339.0-canary.2286.18557548158.0 → 0.339.0-canary.2286.18687473889.0

package/es/components/Select/ui/TreeList/ui/Item/Item.js

@@ -1,27 +1,41 @@
 import React, { useContext } from 'react';
+import { classes } from '../../../../Select.tokens.js';
 import { keyExists } from '../../../../reducers/treePathReducer.js';
 import { Context } from '../../../../Select.context.js';
-import { ItemArrowLeft } from './ui/ItemArrowLeft/ItemArrowLeft.js';
-import { ItemArrowRight } from './ui/ItemArrowRight/ItemArrowRight.js';
-import { ItemWrapper, ChildItems } from './Item.styles.js';
+import { ItemWrapper, Wrapper, Offset, DisclosureIconWrapper, StyledArrowLeft, IconWrapper, StyledCheckboxWrapper, StyledCheckbox, StyledIndicator, StyledIconDone, StyledText, StyledWrapper, StyledCell, StyledArrowRight, ChildItems } from './Item.styles.js';
+import { sizeToIconSize } from '../../../../utils/sizeToIconSize.js';
 
+var _StyledIndicator, _StyledIndicator2;
 var Item = function Item(_ref) {
-  var _item$items;
+  var _valueToPathMap$get, _item$items;
   var item = _ref.item,
     index = _ref.index;
-  var value = item.value,
+  var label = item.label,
+    value = item.value,
     disabled = item.disabled,
-    isDisabled = item.isDisabled;
+    isDisabled = item.isDisabled,
+    contentLeft = item.contentLeft,
+    contentRight = item.contentRight;
   var isLeaf = !(item !== null && item !== void 0 && item.items);
   var _useContext = useContext(Context),
+    checked = _useContext.checked,
+    multiselect = _useContext.multiselect,
+    size = _useContext.size,
+    variant = _useContext.variant,
+    renderItem = _useContext.renderItem,
+    _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 isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);
   var itemDisabled = Boolean(disabled || isDisabled);
+  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 = currentItemDepth === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentItemDepth]) ? classes.dropdownItemIsFocused : undefined;
   var handleClick = function handleClick(e) {
     if (!isLeaf) {
       dispatchTreePath({
@@ -38,19 +52,64 @@ var Item = function Item(_ref) {
     e.stopPropagation();
     handleCheckboxChange(item);
   };
-  return /*#__PURE__*/React.createElement(ItemWrapper, null, arrowPlacement === 'left' ? /*#__PURE__*/React.createElement(ItemArrowLeft, {
-    item: item,
-    onClick: handleClick,
-    onChange: handleChange,
-    isCurrentLevelOpened: isCurrentLevelOpened,
-    index: index
-  }) : /*#__PURE__*/React.createElement(ItemArrowRight, {
-    item: item,
+  return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Wrapper, {
+    className: focusedClass,
     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
+  })), multiselect && /*#__PURE__*/React.createElement(IconWrapper, {
+    variant: variant
+  }, /*#__PURE__*/React.createElement(StyledCheckboxWrapper, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(StyledCheckbox, {
+    disabled: itemDisabled,
+    checked: Boolean(checked.get(item.value)),
+    indeterminate: checked.get(item.value) === 'indeterminate',
     onChange: handleChange,
-    isCurrentLevelOpened: isCurrentLevelOpened,
-    index: index
-  }), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/React.createElement(ChildItems, null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (item, index) {
+    appearance: _checkboxAppearance !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
+  }))), !multiselect && arrowPlacement === 'right' && /*#__PURE__*/React.createElement(IconWrapper, {
+    variant: variant
+  }, checked.get(item.value) === 'dot' && (_StyledIndicator || (_StyledIndicator = /*#__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, {
+    disabled: itemDisabled
+  }, /*#__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)
+  })), !multiselect && arrowPlacement === 'left' && /*#__PURE__*/React.createElement(IconWrapper, {
+    variant: variant
+  }, checked.get(item.value) === 'dot' && (_StyledIndicator2 || (_StyledIndicator2 = /*#__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,
       index: index,

package/es/components/Select/ui/TreeList/ui/Item/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../../../src/components/Select/ui/TreeList/ui/Item/Item.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { keyExists } from '../../../../reducers/treePathReducer';\nimport { Context } from '../../../../Select.context';\n\nimport { ItemArrowLeft } from './ui/ItemArrowLeft/ItemArrowLeft';\nimport { ItemArrowRight } from './ui/ItemArrowRight/ItemArrowRight';\nimport { Props } from './Item.types';\nimport { ItemWrapper, ChildItems } from './Item.styles';\n\nexport const Item: React.FC<Props> = ({ item, index }) => {\n    const { value, disabled, isDisabled } = item;\n\n    const isLeaf = !item?.items;\n\n    const {\n        treePath,\n        dispatchTreePath,\n        arrowPlacement,\n        handleItemClick,\n        handleCheckboxChange,\n        valueToPathMap,\n    } = useContext(Context);\n\n    const isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);\n    const itemDisabled = Boolean(disabled || isDisabled);\n\n    const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!isLeaf) {\n            dispatchTreePath({ type: 'toggled_level', value: valueToPathMap.get(value.toString()) || [] });\n        }\n\n        if (handleItemClick) {\n            handleItemClick(item, e);\n        }\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (itemDisabled) return;\n\n        e.stopPropagation();\n\n        handleCheckboxChange(item);\n    };\n\n    return (\n        <ItemWrapper>\n            {arrowPlacement === 'left' ? (\n                <ItemArrowLeft\n                    item={item}\n                    onClick={handleClick}\n                    onChange={handleChange}\n                    isCurrentLevelOpened={isCurrentLevelOpened}\n                    index={index}\n                />\n            ) : (\n                <ItemArrowRight\n                    item={item}\n                    onClick={handleClick}\n                    onChange={handleChange}\n                    isCurrentLevelOpened={isCurrentLevelOpened}\n                    index={index}\n                />\n            )}\n\n            {!isLeaf && isCurrentLevelOpened && (\n                <ChildItems>\n                    {item.items?.map((item, index) => {\n                        return <Item item={item} index={index} key={index} />;\n                    })}\n                </ChildItems>\n            )}\n        </ItemWrapper>\n    );\n};\n"],"names":["Item","_ref","_item$items","item","index","value","disabled","isDisabled","isLeaf","items","_useContext","useContext","Context","treePath","dispatchTreePath","arrowPlacement","handleItemClick","handleCheckboxChange","valueToPathMap","isCurrentLevelOpened","keyExists","get","toString","itemDisabled","Boolean","handleClick","e","type","handleChange","stopPropagation","React","createElement","ItemWrapper","ItemArrowLeft","onClick","onChange","ItemArrowRight","ChildItems","map","key"],"mappings":"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"}
+{"version":3,"file":"Item.js","sources":["../../../../../../../src/components/Select/ui/TreeList/ui/Item/Item.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { classes } from 'src/components/Select/Select.tokens';\nimport { sizeToIconSize } from 'src/components/Select/utils';\n\nimport { keyExists } from '../../../../reducers/treePathReducer';\nimport { Context } from '../../../../Select.context';\n\nimport { Props } from './Item.types';\nimport {\n    ItemWrapper,\n    ChildItems,\n    Offset,\n    IconWrapper,\n    StyledCheckboxWrapper,\n    StyledCheckbox,\n    StyledIndicator,\n    StyledIconDone,\n    StyledText,\n    StyledWrapper,\n    StyledCell,\n    DisclosureIconWrapper,\n    StyledArrowRight,\n    Wrapper,\n    StyledArrowLeft,\n} from './Item.styles';\n\nexport const Item: React.FC<Props> = ({ item, index }) => {\n    const { label, value, disabled, isDisabled, contentLeft, contentRight } = item;\n\n    const isLeaf = !item?.items;\n\n    const {\n        checked,\n        multiselect,\n        size,\n        variant,\n        renderItem,\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        _checkboxAppearance,\n        focusedPath,\n        treePath,\n        dispatchTreePath,\n        arrowPlacement,\n        handleItemClick,\n        handleCheckboxChange,\n        valueToPathMap,\n    } = useContext(Context);\n\n    const itemDisabled = Boolean(disabled || isDisabled);\n\n    const currentItemDepth = (valueToPathMap.get(item.value.toString())?.length || 0) - 1;\n\n    const isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);\n\n    const withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;\n\n    const focusedClass =\n        currentItemDepth === focusedPath.length - 1 && index === focusedPath?.[currentItemDepth]\n            ? classes.dropdownItemIsFocused\n            : undefined;\n\n    const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!isLeaf) {\n            dispatchTreePath({ type: 'toggled_level', value: valueToPathMap.get(value.toString()) || [] });\n        }\n\n        if (handleItemClick) {\n            handleItemClick(item, e);\n        }\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (itemDisabled) return;\n\n        e.stopPropagation();\n\n        handleCheckboxChange(item);\n    };\n\n    return (\n        <ItemWrapper>\n            <Wrapper className={focusedClass} onClick={handleClick} variant={variant} role=\"treeitem\">\n                <Offset depth={currentItemDepth} />\n\n                {arrowPlacement === 'left' && (\n                    <DisclosureIconWrapper visibility={isLeaf ? 'hidden' : 'visible'}>\n                        <StyledArrowLeft\n                            size={sizeToIconSize(size, variant)}\n                            color=\"inherit\"\n                            className={withArrowInverse}\n                        />\n                    </DisclosureIconWrapper>\n                )}\n\n                {multiselect && (\n                    <IconWrapper variant={variant}>\n                        <StyledCheckboxWrapper onClick={(e) => e.stopPropagation()}>\n                            <StyledCheckbox\n                                disabled={itemDisabled}\n                                checked={Boolean(checked.get(item.value))}\n                                indeterminate={checked.get(item.value) === 'indeterminate'}\n                                onChange={handleChange}\n                                appearance={_checkboxAppearance ?? 'default'}\n                            />\n                        </StyledCheckboxWrapper>\n                    </IconWrapper>\n                )}\n\n                {!multiselect && arrowPlacement === 'right' && (\n                    <IconWrapper variant={variant}>\n                        {checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n                        {checked.get(item.value) === 'done' && (\n                            <StyledIconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n                        )}\n                    </IconWrapper>\n                )}\n\n                {renderItem ? (\n                    <StyledText>{renderItem(item)}</StyledText>\n                ) : (\n                    <StyledWrapper disabled={itemDisabled}>\n                        <StyledCell\n                            contentLeft={contentLeft}\n                            contentRight={contentRight}\n                            // TODO: #1548\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            title={<span>{label}</span>}\n                        />\n                    </StyledWrapper>\n                )}\n\n                {!multiselect && arrowPlacement === 'left' && (\n                    <IconWrapper variant={variant}>\n                        {checked.get(item.value) === 'dot' && <StyledIndicator size=\"s\" view=\"default\" />}\n\n                        {checked.get(item.value) === 'done' && (\n                            <StyledIconDone size={sizeToIconSize(size, variant)} color=\"inherit\" />\n                        )}\n                    </IconWrapper>\n                )}\n\n                {arrowPlacement === 'right' && (\n                    <DisclosureIconWrapper visibility={isLeaf ? 'hidden' : 'visible'}>\n                        <StyledArrowRight\n                            size={sizeToIconSize(size, variant)}\n                            color=\"inherit\"\n                            className={withArrowInverse}\n                        />\n                    </DisclosureIconWrapper>\n                )}\n            </Wrapper>\n\n            {!isLeaf && isCurrentLevelOpened && (\n                <ChildItems>\n                    {item.items?.map((item, index) => {\n                        return <Item item={item} index={index} key={index} />;\n                    })}\n                </ChildItems>\n            )}\n        </ItemWrapper>\n    );\n};\n"],"names":["Item","_ref","_valueToPathMap$get","_item$items","item","index","label","value","disabled","isDisabled","contentLeft","contentRight","isLeaf","items","_useContext","useContext","Context","checked","multiselect","size","variant","renderItem","_checkboxAppearance","focusedPath","treePath","dispatchTreePath","arrowPlacement","handleItemClick","handleCheckboxChange","valueToPathMap","itemDisabled","Boolean","currentItemDepth","get","toString","length","isCurrentLevelOpened","keyExists","withArrowInverse","classes","arrowInverse","undefined","focusedClass","dropdownItemIsFocused","handleClick","e","type","handleChange","stopPropagation","React","createElement","ItemWrapper","Wrapper","className","onClick","role","Offset","depth","DisclosureIconWrapper","visibility","StyledArrowLeft","sizeToIconSize","color","IconWrapper","StyledCheckboxWrapper","StyledCheckbox","indeterminate","onChange","appearance","_StyledIndicator","StyledIndicator","view","StyledIconDone","StyledText","StyledWrapper","StyledCell","title","_StyledIndicator2","StyledArrowRight","ChildItems","map","key"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.339.0-canary.2286.18557548158.0",
+  "version": "0.339.0-canary.2286.18687473889.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -79,7 +79,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.208.0",
+    "@salutejs/plasma-sb-utils": "0.209.0-canary.2286.18687473889.0",
     "@salutejs/plasma-themes": "0.38.0",
     "@storybook/addon-docs": "8.6.12",
     "@storybook/addon-essentials": "8.6.12",
@@ -117,7 +117,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.208.0",
+    "@salutejs/plasma-core": "1.209.0-canary.2286.18687473889.0",
     "@salutejs/react-maskinput": "3.2.6",
     "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.13.2",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "adaf2607e11194e027cf540f719c61830ec8f688"
+  "gitHead": "cc491fd76eef2ea23fa71c2f22257ed4c7a8ada6"
 }

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

@@ -603,7 +603,9 @@ var selectRoot = function(Root) {
             items: items,
             listMaxHeight: listMaxHeight,
             onScroll: virtual ? undefined : handleScroll,
-            virtual: virtual
+            virtual: virtual,
+            beforeList: beforeList,
+            afterList: afterList
         }) : /*#__PURE__*/ _react.default.createElement(_Selectstyles.ListWrapper, {
             ref: listWrapperRef,
             listWidth: listWidth

package/styled-components/cjs/components/Select/ui/TreeList/TreeList.js

@@ -55,27 +55,29 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 var TreeList = function(param) {
-    var items = param.items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, virtual = param.virtual;
+    var items = param.items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, virtual = param.virtual, beforeList = param.beforeList, afterList = param.afterList;
     if (virtual) {
         return /*#__PURE__*/ _react.default.createElement(VirtualTreeList, {
             items: items,
             listMaxHeight: listMaxHeight,
-            onScroll: onScroll
+            onScroll: onScroll,
+            beforeList: beforeList,
+            afterList: afterList
         });
     }
     return /*#__PURE__*/ _react.default.createElement(_TreeListstyles.ListWrapper, null, /*#__PURE__*/ _react.default.createElement(_TreeListstyles.ScrollContainer, {
         listMaxHeight: listMaxHeight,
         onScroll: onScroll
-    }, items === null || items === void 0 ? void 0 : items.map(function(item, index) {
+    }, beforeList, items === null || items === void 0 ? void 0 : items.map(function(item, index) {
         return /*#__PURE__*/ _react.default.createElement(_Item.Item, {
             key: index,
             index: index,
             item: item
         });
-    })));
+    }), afterList));
 };
 var VirtualTreeList = function(param) {
-    var _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll;
+    var _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, beforeList = param.beforeList, afterList = param.afterList;
     var _virtualItems_;
     var parentRef = (0, _react.useRef)(null);
     var virtualizer = (0, _reactvirtual.useVirtualizer)({
@@ -89,7 +91,7 @@ var VirtualTreeList = function(param) {
     });
     var virtualItems = virtualizer.getVirtualItems();
     var _virtualItems__start;
-    return /*#__PURE__*/ _react.default.createElement(_TreeListstyles.ListWrapper, null, /*#__PURE__*/ _react.default.createElement("div", {
+    return /*#__PURE__*/ _react.default.createElement(_TreeListstyles.ListWrapper, null, beforeList, /*#__PURE__*/ _react.default.createElement("div", {
         ref: parentRef,
         style: {
             height: 'auto',
@@ -120,5 +122,5 @@ var VirtualTreeList = function(param) {
             item: items[virtualRow.index],
             index: virtualRow.index
         }));
-    })))));
+    })))), afterList);
 };

package/styled-components/cjs/components/Select/ui/TreeList/ui/Item/Item.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "Item", {
     }
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _Selecttokens = require("../../../../Select.tokens");
+var _utils = require("../../../../utils");
 var _treePathReducer = require("../../../../reducers/treePathReducer");
 var _Selectcontext = require("../../../../Select.context");
-var _ItemArrowLeft = require("./ui/ItemArrowLeft/ItemArrowLeft");
-var _ItemArrowRight = require("./ui/ItemArrowRight/ItemArrowRight");
 var _Itemstyles = require("./Item.styles");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -57,12 +57,17 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var Item = function(param) {
     var item = param.item, index = param.index;
-    var _item_items;
-    var value = item.value, disabled = item.disabled, isDisabled = item.isDisabled;
+    var _valueToPathMap_get, _item_items;
+    var label = item.label, value = item.value, disabled = item.disabled, isDisabled = item.isDisabled, contentLeft = item.contentLeft, contentRight = item.contentRight;
     var isLeaf = !(item === null || item === void 0 ? void 0 : item.items);
-    var _useContext = (0, _react.useContext)(_Selectcontext.Context), treePath = _useContext.treePath, dispatchTreePath = _useContext.dispatchTreePath, arrowPlacement = _useContext.arrowPlacement, handleItemClick = _useContext.handleItemClick, handleCheckboxChange = _useContext.handleCheckboxChange, valueToPathMap = _useContext.valueToPathMap;
-    var isCurrentLevelOpened = (0, _treePathReducer.keyExists)(treePath, valueToPathMap.get(value.toString()) || []);
+    var _useContext = (0, _react.useContext)(_Selectcontext.Context), checked = _useContext.checked, multiselect = _useContext.multiselect, 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 itemDisabled = Boolean(disabled || isDisabled);
+    var currentItemDepth = (((_valueToPathMap_get = valueToPathMap.get(item.value.toString())) === null || _valueToPathMap_get === void 0 ? void 0 : _valueToPathMap_get.length) || 0) - 1;
+    var isCurrentLevelOpened = (0, _treePathReducer.keyExists)(treePath, valueToPathMap.get(value.toString()) || []);
+    var withArrowInverse = isCurrentLevelOpened ? _Selecttokens.classes.arrowInverse : undefined;
+    var focusedClass = currentItemDepth === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentItemDepth]) ? _Selecttokens.classes.dropdownItemIsFocused : undefined;
     var handleClick = function(e) {
         if (!isLeaf) {
             dispatchTreePath({
@@ -79,19 +84,63 @@ var Item = function(param) {
         e.stopPropagation();
         handleCheckboxChange(item);
     };
-    return /*#__PURE__*/ _react.default.createElement(_Itemstyles.ItemWrapper, null, arrowPlacement === 'left' ? /*#__PURE__*/ _react.default.createElement(_ItemArrowLeft.ItemArrowLeft, {
-        item: item,
-        onClick: handleClick,
-        onChange: handleChange,
-        isCurrentLevelOpened: isCurrentLevelOpened,
-        index: index
-    }) : /*#__PURE__*/ _react.default.createElement(_ItemArrowRight.ItemArrowRight, {
-        item: item,
+    return /*#__PURE__*/ _react.default.createElement(_Itemstyles.ItemWrapper, null, /*#__PURE__*/ _react.default.createElement(_Itemstyles.Wrapper, {
+        className: focusedClass,
         onClick: handleClick,
+        variant: variant,
+        role: "treeitem"
+    }, /*#__PURE__*/ _react.default.createElement(_Itemstyles.Offset, {
+        depth: currentItemDepth
+    }), arrowPlacement === 'left' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.DisclosureIconWrapper, {
+        visibility: isLeaf ? 'hidden' : 'visible'
+    }, /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledArrowLeft, {
+        size: (0, _utils.sizeToIconSize)(size, variant),
+        color: "inherit",
+        className: withArrowInverse
+    })), multiselect && /*#__PURE__*/ _react.default.createElement(_Itemstyles.IconWrapper, {
+        variant: variant
+    }, /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledCheckboxWrapper, {
+        onClick: function(e) {
+            return e.stopPropagation();
+        }
+    }, /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledCheckbox, {
+        disabled: itemDisabled,
+        checked: Boolean(checked.get(item.value)),
+        indeterminate: checked.get(item.value) === 'indeterminate',
         onChange: handleChange,
-        isCurrentLevelOpened: isCurrentLevelOpened,
-        index: index
-    }), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ _react.default.createElement(_Itemstyles.ChildItems, null, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(item, index) {
+        appearance: _checkboxAppearance !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
+    }))), !multiselect && arrowPlacement === 'right' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.IconWrapper, {
+        variant: variant
+    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledIndicator, {
+        size: "s",
+        view: "default"
+    }), checked.get(item.value) === 'done' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledIconDone, {
+        size: (0, _utils.sizeToIconSize)(size, variant),
+        color: "inherit"
+    })), renderItem ? /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledText, null, renderItem(item)) : /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledWrapper, {
+        disabled: itemDisabled
+    }, /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledCell, {
+        contentLeft: contentLeft,
+        contentRight: contentRight,
+        // TODO: #1548
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        title: /*#__PURE__*/ _react.default.createElement("span", null, label)
+    })), !multiselect && arrowPlacement === 'left' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.IconWrapper, {
+        variant: variant
+    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledIndicator, {
+        size: "s",
+        view: "default"
+    }), checked.get(item.value) === 'done' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledIconDone, {
+        size: (0, _utils.sizeToIconSize)(size, variant),
+        color: "inherit"
+    })), arrowPlacement === 'right' && /*#__PURE__*/ _react.default.createElement(_Itemstyles.DisclosureIconWrapper, {
+        visibility: isLeaf ? 'hidden' : 'visible'
+    }, /*#__PURE__*/ _react.default.createElement(_Itemstyles.StyledArrowRight, {
+        size: (0, _utils.sizeToIconSize)(size, variant),
+        color: "inherit",
+        className: withArrowInverse
+    }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ _react.default.createElement(_Itemstyles.ChildItems, null, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(item, index) {
         return /*#__PURE__*/ _react.default.createElement(Item, {
             item: item,
             index: index,

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

@@ -546,7 +546,9 @@ import { Context } from "./Select.context";
             items: items,
             listMaxHeight: listMaxHeight,
             onScroll: virtual ? undefined : handleScroll,
-            virtual: virtual
+            virtual: virtual,
+            beforeList: beforeList,
+            afterList: afterList
         }) : /*#__PURE__*/ React.createElement(ListWrapper, {
             ref: listWrapperRef,
             listWidth: listWidth

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

@@ -4,27 +4,29 @@ import { getHeightAsNumber } from "../../../../utils";
 import { Item } from "./ui/Item/Item";
 import { ListWrapper, ScrollContainer } from "./TreeList.styles";
 export var TreeList = function(param) {
-    var items = param.items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, virtual = param.virtual;
+    var items = param.items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, virtual = param.virtual, beforeList = param.beforeList, afterList = param.afterList;
     if (virtual) {
         return /*#__PURE__*/ React.createElement(VirtualTreeList, {
             items: items,
             listMaxHeight: listMaxHeight,
-            onScroll: onScroll
+            onScroll: onScroll,
+            beforeList: beforeList,
+            afterList: afterList
         });
     }
     return /*#__PURE__*/ React.createElement(ListWrapper, null, /*#__PURE__*/ React.createElement(ScrollContainer, {
         listMaxHeight: listMaxHeight,
         onScroll: onScroll
-    }, items === null || items === void 0 ? void 0 : items.map(function(item, index) {
+    }, beforeList, items === null || items === void 0 ? void 0 : items.map(function(item, index) {
         return /*#__PURE__*/ React.createElement(Item, {
             key: index,
             index: index,
             item: item
         });
-    })));
+    }), afterList));
 };
 var VirtualTreeList = function(param) {
-    var _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll;
+    var _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, listMaxHeight = param.listMaxHeight, onScroll = param.onScroll, beforeList = param.beforeList, afterList = param.afterList;
     var _virtualItems_;
     var parentRef = useRef(null);
     var virtualizer = useVirtualizer({
@@ -38,7 +40,7 @@ var VirtualTreeList = function(param) {
     });
     var virtualItems = virtualizer.getVirtualItems();
     var _virtualItems__start;
-    return /*#__PURE__*/ React.createElement(ListWrapper, null, /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(ListWrapper, null, beforeList, /*#__PURE__*/ React.createElement("div", {
         ref: parentRef,
         style: {
             height: 'auto',
@@ -69,5 +71,5 @@ var VirtualTreeList = function(param) {
             item: items[virtualRow.index],
             index: virtualRow.index
         }));
-    })))));
+    })))), afterList);
 };

package/styled-components/es/components/Select/ui/TreeList/ui/Item/Item.js

@@ -1,17 +1,22 @@
 import React, { useContext } from "react";
+import { classes } from "../../../../Select.tokens";
+import { sizeToIconSize } from "../../../../utils";
 import { keyExists } from "../../../../reducers/treePathReducer";
 import { Context } from "../../../../Select.context";
-import { ItemArrowLeft } from "./ui/ItemArrowLeft/ItemArrowLeft";
-import { ItemArrowRight } from "./ui/ItemArrowRight/ItemArrowRight";
-import { ItemWrapper, ChildItems } from "./Item.styles";
+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, index = param.index;
-    var _item_items;
-    var value = item.value, disabled = item.disabled, isDisabled = item.isDisabled;
+    var _valueToPathMap_get, _item_items;
+    var label = item.label, value = item.value, disabled = item.disabled, isDisabled = item.isDisabled, contentLeft = item.contentLeft, contentRight = item.contentRight;
     var isLeaf = !(item === null || item === void 0 ? void 0 : item.items);
-    var _useContext = useContext(Context), treePath = _useContext.treePath, dispatchTreePath = _useContext.dispatchTreePath, arrowPlacement = _useContext.arrowPlacement, handleItemClick = _useContext.handleItemClick, handleCheckboxChange = _useContext.handleCheckboxChange, valueToPathMap = _useContext.valueToPathMap;
-    var isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);
+    var _useContext = useContext(Context), checked = _useContext.checked, multiselect = _useContext.multiselect, 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 itemDisabled = Boolean(disabled || isDisabled);
+    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 = currentItemDepth === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentItemDepth]) ? classes.dropdownItemIsFocused : undefined;
     var handleClick = function(e) {
         if (!isLeaf) {
             dispatchTreePath({
@@ -28,19 +33,63 @@ export var Item = function(param) {
         e.stopPropagation();
         handleCheckboxChange(item);
     };
-    return /*#__PURE__*/ React.createElement(ItemWrapper, null, arrowPlacement === 'left' ? /*#__PURE__*/ React.createElement(ItemArrowLeft, {
-        item: item,
-        onClick: handleClick,
-        onChange: handleChange,
-        isCurrentLevelOpened: isCurrentLevelOpened,
-        index: index
-    }) : /*#__PURE__*/ React.createElement(ItemArrowRight, {
-        item: item,
+    return /*#__PURE__*/ React.createElement(ItemWrapper, null, /*#__PURE__*/ React.createElement(Wrapper, {
+        className: focusedClass,
         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
+    })), multiselect && /*#__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,
-        isCurrentLevelOpened: isCurrentLevelOpened,
-        index: index
-    }), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ React.createElement(ChildItems, null, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(item, index) {
+        appearance: _checkboxAppearance !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
+    }))), !multiselect && 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, {
+        disabled: itemDisabled
+    }, /*#__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)
+    })), !multiselect && 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,
             index: index,

package/types/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,gBAAgB,CAAC;AAMvE;;GAEG;AACH,eAAO,MAAM,UAAU,SAAU,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,gGAkgBzF,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBApgBQ,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;;;;;;;;;CAghB9F,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,gBAAgB,CAAC;AAMvE;;GAEG;AACH,eAAO,MAAM,UAAU,SAAU,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,gGAogBzF,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAtgBQ,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;;;;;;;;;CAkhB9F,CAAC"}

package/types/components/Select/ui/TreeList/TreeList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/TreeList/TreeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAIzC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAcpC,CAAC"}
+{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/TreeList/TreeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAIzC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0BpC,CAAC"}

package/types/components/Select/ui/TreeList/TreeList.types.d.ts

@@ -1,9 +1,11 @@
-import type { UIEvent } from 'react';
+import type { UIEvent, ReactNode } from 'react';
 import { MergedSelectProps } from '../../Select.types';
 export interface Props {
     items: MergedSelectProps['items'];
     listMaxHeight: MergedSelectProps['listMaxHeight'];
     onScroll?: (e: UIEvent<HTMLElement>) => void;
     virtual?: boolean;
+    beforeList?: ReactNode;
+    afterList?: ReactNode;
 }
 //# sourceMappingURL=TreeList.types.d.ts.map

package/types/components/Select/ui/TreeList/TreeList.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeList.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/TreeList/TreeList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,KAAK;IAClB,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,aAAa,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"TreeList.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/TreeList/TreeList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,KAAK;IAClB,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,aAAa,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;CACzB"}

package/types/components/Select/ui/TreeList/ui/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Select/ui/TreeList/ui/Item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAGrC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgEhC,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Select/ui/TreeList/ui/Item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAmBrC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0IhC,CAAC"}