@salutejs/plasma-new-hope 0.231.1-canary.1669.12470399037.0 → 0.231.2-canary.1603.12471850782.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. package/cjs/components/Tree/Tree.css +7 -0
  2. package/cjs/components/Tree/Tree.js +99 -0
  3. package/cjs/components/Tree/Tree.js.map +1 -0
  4. package/cjs/components/Tree/Tree.styles.js +43 -0
  5. package/cjs/components/Tree/Tree.styles.js.map +1 -0
  6. package/cjs/components/Tree/Tree.styles_1mwgczn.css +5 -0
  7. package/cjs/components/Tree/Tree.tokens.js +43 -0
  8. package/cjs/components/Tree/Tree.tokens.js.map +1 -0
  9. package/cjs/components/Tree/utils/sizeToIconSize.js +11 -0
  10. package/cjs/components/Tree/utils/sizeToIconSize.js.map +1 -0
  11. package/cjs/components/_Icon/Icon.assets/Folder.js +25 -0
  12. package/cjs/components/_Icon/Icon.assets/Folder.js.map +1 -0
  13. package/cjs/components/_Icon/Icons/IconFolder.js +23 -0
  14. package/cjs/components/_Icon/Icons/IconFolder.js.map +1 -0
  15. package/cjs/index.css +6 -0
  16. package/cjs/index.js +4 -0
  17. package/cjs/index.js.map +1 -1
  18. package/emotion/cjs/components/Tree/Tree.js +100 -0
  19. package/emotion/cjs/components/Tree/Tree.styles.js +38 -0
  20. package/emotion/cjs/components/Tree/Tree.template-doc.mdx +102 -0
  21. package/emotion/cjs/components/Tree/Tree.tokens.js +41 -0
  22. package/emotion/cjs/components/Tree/Tree.types.js +5 -0
  23. package/emotion/cjs/components/Tree/index.js +19 -0
  24. package/emotion/cjs/components/Tree/utils/index.js +12 -0
  25. package/emotion/cjs/components/Tree/utils/sizeToIconSize.js +10 -0
  26. package/emotion/cjs/components/_Icon/Icon.assets/Folder.js +24 -0
  27. package/emotion/cjs/components/_Icon/Icons/IconFolder.js +22 -0
  28. package/emotion/cjs/components/_Icon/index.js +8 -1
  29. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +25 -0
  30. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.js +11 -0
  31. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +117 -0
  32. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.config.js +25 -0
  33. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.js +11 -0
  34. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +117 -0
  35. package/emotion/cjs/index.js +11 -0
  36. package/emotion/es/components/Tree/Tree.js +91 -0
  37. package/emotion/es/components/Tree/Tree.styles.js +31 -0
  38. package/emotion/es/components/Tree/Tree.template-doc.mdx +102 -0
  39. package/emotion/es/components/Tree/Tree.tokens.js +35 -0
  40. package/emotion/es/components/Tree/Tree.types.js +1 -0
  41. package/emotion/es/components/Tree/index.js +2 -0
  42. package/emotion/es/components/Tree/utils/index.js +1 -0
  43. package/emotion/es/components/Tree/utils/sizeToIconSize.js +4 -0
  44. package/emotion/es/components/_Icon/Icon.assets/Folder.js +17 -0
  45. package/emotion/es/components/_Icon/Icons/IconFolder.js +15 -0
  46. package/emotion/es/components/_Icon/index.js +2 -1
  47. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.config.js +19 -0
  48. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.js +5 -0
  49. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +117 -0
  50. package/emotion/es/examples/plasma_web/components/Tree/Tree.config.js +19 -0
  51. package/emotion/es/examples/plasma_web/components/Tree/Tree.js +5 -0
  52. package/emotion/es/examples/plasma_web/components/Tree/Tree.stories.tsx +117 -0
  53. package/emotion/es/index.js +1 -0
  54. package/es/components/Tree/Tree.css +7 -0
  55. package/es/components/Tree/Tree.js +94 -0
  56. package/es/components/Tree/Tree.js.map +1 -0
  57. package/es/components/Tree/Tree.styles.js +35 -0
  58. package/es/components/Tree/Tree.styles.js.map +1 -0
  59. package/es/components/Tree/Tree.styles_1mwgczn.css +5 -0
  60. package/es/components/Tree/Tree.tokens.js +38 -0
  61. package/es/components/Tree/Tree.tokens.js.map +1 -0
  62. package/es/components/Tree/utils/sizeToIconSize.js +7 -0
  63. package/es/components/Tree/utils/sizeToIconSize.js.map +1 -0
  64. package/es/components/_Icon/Icon.assets/Folder.js +21 -0
  65. package/es/components/_Icon/Icon.assets/Folder.js.map +1 -0
  66. package/es/components/_Icon/Icons/IconFolder.js +19 -0
  67. package/es/components/_Icon/Icons/IconFolder.js.map +1 -0
  68. package/es/index.css +6 -0
  69. package/es/index.js +2 -0
  70. package/es/index.js.map +1 -1
  71. package/package.json +3 -2
  72. package/styled-components/cjs/components/Tree/Tree.js +100 -0
  73. package/styled-components/cjs/components/Tree/Tree.styles.js +26 -0
  74. package/styled-components/cjs/components/Tree/Tree.template-doc.mdx +102 -0
  75. package/styled-components/cjs/components/Tree/Tree.tokens.js +41 -0
  76. package/styled-components/cjs/components/Tree/Tree.types.js +5 -0
  77. package/styled-components/cjs/components/Tree/index.js +19 -0
  78. package/styled-components/cjs/components/Tree/utils/index.js +12 -0
  79. package/styled-components/cjs/components/Tree/utils/sizeToIconSize.js +10 -0
  80. package/styled-components/cjs/components/_Icon/Icon.assets/Folder.js +24 -0
  81. package/styled-components/cjs/components/_Icon/Icons/IconFolder.js +22 -0
  82. package/styled-components/cjs/components/_Icon/index.js +8 -1
  83. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +25 -0
  84. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.js +11 -0
  85. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +117 -0
  86. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.config.js +25 -0
  87. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.js +11 -0
  88. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +117 -0
  89. package/styled-components/cjs/index.js +11 -0
  90. package/styled-components/es/components/Tree/Tree.js +91 -0
  91. package/styled-components/es/components/Tree/Tree.styles.js +18 -0
  92. package/styled-components/es/components/Tree/Tree.template-doc.mdx +102 -0
  93. package/styled-components/es/components/Tree/Tree.tokens.js +35 -0
  94. package/styled-components/es/components/Tree/Tree.types.js +1 -0
  95. package/styled-components/es/components/Tree/index.js +2 -0
  96. package/styled-components/es/components/Tree/utils/index.js +1 -0
  97. package/styled-components/es/components/Tree/utils/sizeToIconSize.js +4 -0
  98. package/styled-components/es/components/_Icon/Icon.assets/Folder.js +17 -0
  99. package/styled-components/es/components/_Icon/Icons/IconFolder.js +15 -0
  100. package/styled-components/es/components/_Icon/index.js +2 -1
  101. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.config.js +19 -0
  102. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.js +5 -0
  103. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +117 -0
  104. package/styled-components/es/examples/plasma_web/components/Tree/Tree.config.js +19 -0
  105. package/styled-components/es/examples/plasma_web/components/Tree/Tree.js +5 -0
  106. package/styled-components/es/examples/plasma_web/components/Tree/Tree.stories.tsx +117 -0
  107. package/styled-components/es/index.js +1 -0
  108. package/types/components/Tree/Tree.d.ts +20 -0
  109. package/types/components/Tree/Tree.d.ts.map +1 -0
  110. package/types/components/Tree/Tree.styles.d.ts +7 -0
  111. package/types/components/Tree/Tree.styles.d.ts.map +1 -0
  112. package/types/components/Tree/Tree.tokens.d.ts +36 -0
  113. package/types/components/Tree/Tree.tokens.d.ts.map +1 -0
  114. package/types/components/Tree/Tree.types.d.ts +154 -0
  115. package/types/components/Tree/Tree.types.d.ts.map +1 -0
  116. package/types/components/Tree/index.d.ts +3 -0
  117. package/types/components/Tree/index.d.ts.map +1 -0
  118. package/types/components/Tree/utils/index.d.ts +2 -0
  119. package/types/components/Tree/utils/index.d.ts.map +1 -0
  120. package/types/components/Tree/utils/sizeToIconSize.d.ts +2 -0
  121. package/types/components/Tree/utils/sizeToIconSize.d.ts.map +1 -0
  122. package/types/components/_Icon/Icon.assets/Folder.d.ts +4 -0
  123. package/types/components/_Icon/Icon.assets/Folder.d.ts.map +1 -0
  124. package/types/components/_Icon/Icons/IconFolder.d.ts +4 -0
  125. package/types/components/_Icon/Icons/IconFolder.d.ts.map +1 -0
  126. package/types/components/_Icon/index.d.ts +1 -0
  127. package/types/components/_Icon/index.d.ts.map +1 -1
  128. package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts +18 -0
  129. package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts.map +1 -0
  130. package/types/examples/plasma_b2c/components/Tree/Tree.d.ts +13 -0
  131. package/types/examples/plasma_b2c/components/Tree/Tree.d.ts.map +1 -0
  132. package/types/examples/plasma_web/components/Tree/Tree.config.d.ts +18 -0
  133. package/types/examples/plasma_web/components/Tree/Tree.config.d.ts.map +1 -0
  134. package/types/examples/plasma_web/components/Tree/Tree.d.ts +13 -0
  135. package/types/examples/plasma_web/components/Tree/Tree.d.ts.map +1 -0
  136. package/types/index.d.ts +1 -0
  137. package/types/index.d.ts.map +1 -1
@@ -0,0 +1,100 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.treeRoot = exports.treeConfig = void 0;
8
+ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
+ var _rcTree = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("rc-tree"));
10
+ require("rc-tree/assets/index.css");
11
+ var _utils = /*#__PURE__*/require("../../utils");
12
+ var _Tree = /*#__PURE__*/require("./Tree.styles");
13
+ var _utils2 = /*#__PURE__*/require("./utils");
14
+ var _Tree2 = /*#__PURE__*/require("./Tree.tokens");
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
18
+ /**
19
+ * Многоуровневый раскрывающийся список в виде дерева.
20
+ */
21
+ var treeRoot = exports.treeRoot = function treeRoot(Root) {
22
+ return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
23
+ var items = _ref.items,
24
+ _ref$arrowPlacement = _ref.arrowPlacement,
25
+ arrowPlacement = _ref$arrowPlacement === void 0 ? 'left' : _ref$arrowPlacement,
26
+ _ref$virtual = _ref.virtual,
27
+ virtual = _ref$virtual === void 0 ? false : _ref$virtual,
28
+ height = _ref.height,
29
+ size = _ref.size,
30
+ view = _ref.view,
31
+ _ref$fullWidthItemSel = _ref.fullWidthItemSelection,
32
+ fullWidthItemSelection = _ref$fullWidthItemSel === void 0 ? false : _ref$fullWidthItemSel,
33
+ _ref$multiple = _ref.multiple,
34
+ multiple = _ref$multiple === void 0 ? false : _ref$multiple,
35
+ _ref$defaultExpandAll = _ref.defaultExpandAll,
36
+ defaultExpandAll = _ref$defaultExpandAll === void 0 ? false : _ref$defaultExpandAll,
37
+ _ref$checkable = _ref.checkable,
38
+ checkable = _ref$checkable === void 0 ? false : _ref$checkable,
39
+ defaultCheckedKeys = _ref.defaultCheckedKeys,
40
+ defaultExpandedKeys = _ref.defaultExpandedKeys,
41
+ defaultSelectedKeys = _ref.defaultSelectedKeys,
42
+ className = _ref.className,
43
+ onTreeSelect = _ref.onTreeSelect,
44
+ onTreeCheck = _ref.onTreeCheck,
45
+ onTreeExpand = _ref.onTreeExpand,
46
+ _ref$hasIcon = _ref.hasIcon,
47
+ hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
48
+ icon = _ref.icon;
49
+ var invertedClass = arrowPlacement === 'right' ? _Tree2.classes.treeInverted : undefined;
50
+ var itemFilledClass = fullWidthItemSelection ? _Tree2.classes.treeItemFilled : undefined;
51
+ return /*#__PURE__*/_react["default"].createElement(Root, {
52
+ view: view,
53
+ size: size,
54
+ ref: ref,
55
+ items: items
56
+ }, /*#__PURE__*/_react["default"].createElement(_rcTree["default"], {
57
+ height: height,
58
+ virtual: virtual,
59
+ multiple: multiple,
60
+ checkable: checkable,
61
+ className: (0, _utils.cx)(className, invertedClass, itemFilledClass),
62
+ defaultExpandAll: defaultExpandAll,
63
+ style: {
64
+ border: '1px solid #000'
65
+ },
66
+ treeData: items,
67
+ defaultCheckedKeys: defaultCheckedKeys,
68
+ defaultExpandedKeys: defaultExpandedKeys,
69
+ defaultSelectedKeys: defaultSelectedKeys,
70
+ onSelect: onTreeSelect,
71
+ onCheck: onTreeCheck,
72
+ onExpand: onTreeExpand,
73
+ switcherIcon: function switcherIcon(node) {
74
+ if (node.isLeaf) {
75
+ return null;
76
+ }
77
+ return /*#__PURE__*/_react["default"].createElement(_Tree.IconArrowWrapper, null, /*#__PURE__*/_react["default"].createElement(_Tree.StyledArrow, {
78
+ size: (0, _utils2.sizeToIconSize)(size),
79
+ color: "inherit",
80
+ className: "arrow"
81
+ }));
82
+ },
83
+ icon: hasIcon && (icon || /*#__PURE__*/_react["default"].createElement(_Tree.IconFolderWrapper, null, /*#__PURE__*/_react["default"].createElement(_Tree.StyledFolder, {
84
+ size: (0, _utils2.sizeToIconSize)(size),
85
+ color: "inherit"
86
+ })))
87
+ }));
88
+ });
89
+ };
90
+ var treeConfig = exports.treeConfig = {
91
+ name: 'Tree',
92
+ tag: 'div',
93
+ layout: treeRoot,
94
+ base: _Tree.base,
95
+ variations: {},
96
+ defaults: {
97
+ view: 'default',
98
+ size: 'm'
99
+ }
100
+ };
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.base = exports.StyledFolder = exports.StyledArrow = exports.IconFolderWrapper = exports.IconArrowWrapper = void 0;
8
+ var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
9
+ var _mixins = /*#__PURE__*/require("../../mixins");
10
+ var _Icon = /*#__PURE__*/require("../_Icon");
11
+ var _Tree = /*#__PURE__*/require("./Tree.tokens");
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
14
+ var IconArrowWrapper = exports.IconArrowWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
15
+ componentId: "plasma-new-hope__sc-ians6n-0"
16
+ })(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], _Tree.treeTokens.arrowColor, _Tree.treeTokens.arrowColorHover, _Tree.treeTokens.arrowColorActive);
17
+ var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureRightCentered).withConfig({
18
+ componentId: "plasma-new-hope__sc-ians6n-1"
19
+ })(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);
20
+ var IconFolderWrapper = exports.IconFolderWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
21
+ componentId: "plasma-new-hope__sc-ians6n-2"
22
+ })(["line-height:0;color:var(", ");margin:var(", ");"], _Tree.treeTokens.arrowColor, _Tree.treeTokens.iconFolderMargin);
23
+ var StyledFolder = exports.StyledFolder = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconFolder).withConfig({
24
+ componentId: "plasma-new-hope__sc-ians6n-3"
25
+ })([""]);
26
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".rc-tree,.rc-tree-list{border:none !important;}.rc-tree .rc-tree-treenode{position:relative;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:0.25rem;bottom:0.25rem;left:var(", ");right:0;background:transparent;border-radius:var(", ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled{opacity:var(", ");}.rc-tree.", " .rc-tree-treenode::before{inset:0;border-radius:0;}.rc-tree .rc-tree-treenode.rc-tree-treenode-selected::before{background:var(", ") !important;}.rc-tree .rc-tree-treenode:not(.rc-tree-treenode-disabled):hover::before{background:var(", ");}.rc-tree .rc-tree-treenode:not(.rc-tree-treenode-disabled):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;width:1px;}.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.", " .rc-tree-treenode span.rc-tree-switcher{margin:0;}.rc-tree .rc-tree-treenode span.rc-tree-iconEle{width:auto;height:auto;margin-right:0;vertical-align:0;background:transparent;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open .arrow{transform:rotate(90deg);}.rc-tree.", " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close .arrow{transform:rotate(90deg);}.rc-tree.", " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open .arrow{transform:rotate(0);}.rc-tree .rc-tree-treenode span.rc-tree-checkbox{display:flex;align-items:center;justify-content:center;line-height:0;vertical-align:0;width:var(", ");height:var(", ");margin:var(", ");background-image:none;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox::before{content:'';display:block;width:var(", ");height:var(", ");border:0.125rem solid var(", ");border-radius:var(", ");box-sizing:border-box;background-size:contain;background-repeat:no-repeat;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked::before{background-color:var(", ");border-color:var(", ");background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill='white' d='m5.70711,8.15582c-0.39053,-0.39052 -1.02369,-0.39052 -1.41422,0c-0.39052,0.39053 -0.39052,1.02369 0,1.41422l3.70666,3.70666l6.71095,-6.70248c0.3908,-0.39027 0.3912,-1.02344 0.0009,-1.41421c-0.3903,-0.39077 -1.02344,-0.39117 -1.41421,-0.00089l-5.29674,5.29004l-2.29334,-2.29334z' /%3E%3C/svg%3E\");}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate::before{background-color:var(", ");border-color:var(", ");background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8a1 1 0 011-1h10a1 1 0 110 2H3a1 1 0 01-1-1z' fill='white'/%3E%3C/svg%3E\");}.rc-tree-title{color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}.rc-tree.tree-inverted .rc-tree-treenode span.rc-tree-switcher{order:1;}.rc-tree.tree-inverted .rc-tree-treenode::before{left:0;}.rc-tree-node-selected{opacity:1;box-shadow:none;background:none;}.rc-tree-node-selected .rc-tree-title{color:var(", ");}.rc-tree-node-selected ", "{color:var(", ");}.rc-tree-indent-unit{width:var(", ");}"], _Tree.treeTokens.itemHeight, _Tree.classes.treeItemFilled, _Tree.treeTokens.itemPadding, _Tree.classes.treeInverted, _Tree.classes.treeItemFilled, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.switcherSize, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.itemDisabledOpacity, _Tree.classes.treeItemFilled, _Tree.treeTokens.itemBackgroundColor, _Tree.treeTokens.itemBackgroundColorHover, _Tree.treeTokens.itemBackgroundColorActive, _Tree.treeTokens.switcherSize, _Tree.treeTokens.switcherSize, _Tree.treeTokens.switcherMargin, _Tree.classes.treeInverted, _Tree.classes.treeInverted, _Tree.classes.treeInverted, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderColor, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.checkboxBackgroundColor, _Tree.treeTokens.checkboxBackgroundColor, _Tree.treeTokens.checkboxBackgroundColor, _Tree.treeTokens.checkboxBackgroundColor, _Tree.treeTokens.color, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight, /*#__PURE__*/(0, _mixins.applyEllipsis)(), _Tree.treeTokens.colorSelected, IconFolderWrapper, _Tree.treeTokens.colorSelected, _Tree.treeTokens.itemIndent);
@@ -0,0 +1,102 @@
1
+ ---
2
+ id: tree
3
+ title: Tree
4
+ ---
5
+
6
+ import { PropsTable } from '@site/src/components';
7
+
8
+ # Tree
9
+ Многоуровневый раскрывающийся список в виде дерева с возможностью выбора (selection) и выделения (checkbox).
10
+
11
+ <PropsTable name="Tree" />
12
+
13
+ Обязательным параметром является только массив `items`. Формат следующий:
14
+
15
+ ```tsx
16
+ type TreeItem = {
17
+ /**
18
+ * Уникальный идентификатор элемента.
19
+ */
20
+ key: React.Key;
21
+ /**
22
+ * Заголовок элемента.
23
+ */
24
+ title?: React.ReactNode | ((data: TreeItem) => React.ReactNode);
25
+ /**
26
+ * Classname для текущего элемента.
27
+ */
28
+ className?: string;
29
+ /**
30
+ * Стиль для текущего элемента.
31
+ */
32
+ style?: React.CSSProperties;
33
+ /**
34
+ * Флаг выключения элемента.
35
+ * @default false
36
+ */
37
+ disabled?: boolean;
38
+ };
39
+ ```
40
+
41
+ ## Пример использования
42
+ ```tsx live
43
+ import React from 'react';
44
+ import { Tree } from '@salutejs/{{ package }}';
45
+
46
+ export function App() {
47
+ const treeData = [
48
+ {
49
+ title: 'Parent 1',
50
+ key: '0-0',
51
+ children: [
52
+ {
53
+ title: 'Parent 1-0',
54
+ key: '0-0-0',
55
+ children: [
56
+ {
57
+ title: 'Leaf',
58
+ key: '0-0-0-0',
59
+ disabled: true,
60
+ },
61
+ {
62
+ title: 'Leaf',
63
+ key: '0-0-0-1',
64
+ children: [
65
+ {
66
+ title: 'Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf',
67
+ key: '0-0-0-0-0',
68
+ },
69
+ {
70
+ title: 'Leaf',
71
+ key: '0-0-0-0-1',
72
+ },
73
+ ],
74
+ },
75
+ ],
76
+ },
77
+ {
78
+ title: 'Parent 1-1',
79
+ key: '0-0-1',
80
+ children: [{ title: 'Leaf', key: '0-0-1-0' }],
81
+ },
82
+ ],
83
+ },
84
+ {
85
+ title: 'Parent 2',
86
+ key: '0-1',
87
+ children: [
88
+ {
89
+ title: 'Parent 2-0',
90
+ key: '0-1-0',
91
+ },
92
+ ],
93
+ },
94
+ ];
95
+
96
+ return (
97
+ <div style={{ display: 'block' }}>
98
+ <Tree items={treeData} defaultExpandAll />
99
+ </div>
100
+ );
101
+ }
102
+ ```
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.treeTokens = exports.classes = void 0;
7
+ var classes = exports.classes = {
8
+ treeInverted: 'tree-inverted',
9
+ treeItemFilled: 'tree-item-filled'
10
+ };
11
+ var treeTokens = exports.treeTokens = {
12
+ arrowColor: '--plasma-tree-arrow-color',
13
+ arrowColorHover: '--plasma-tree-arrow-color-hover',
14
+ arrowColorActive: '--plasma-tree-arrow-color-active',
15
+ color: '--plasma-tree-color',
16
+ colorSelected: '--plasma-tree-color-selected',
17
+ fontFamily: '--plasma-tree-font-family',
18
+ fontSize: '--plasma-tree-font-size',
19
+ fontStyle: '--plasma-tree-font-style',
20
+ fontWeight: '--plasma-tree-font-weight',
21
+ letterSpacing: '--plasma-tree-letter-spacing',
22
+ lineHeight: '--plasma-tree-line-height',
23
+ itemHeight: '--plasma-tree-item-height',
24
+ itemPadding: '--plasma-tree-item-padding',
25
+ itemPaddingTight: '--plasma-tree-item-padding-tight',
26
+ itemIndent: '--plasma-tree-item-indent',
27
+ itemBorderRadius: '--plasma-tree-item-border-radius',
28
+ iconFolderMargin: '--plasma-tree-icon-folder-margin',
29
+ switcherMargin: '--plasma-tree-switcher-margin',
30
+ switcherSize: '--plasma-tree-switcher-size',
31
+ checkboxSize: '--plasma-tree-checkbox-size',
32
+ checkboxInnerSize: '--plasma-tree-checkbox-inner-size',
33
+ checkboxBorderRadius: '--plasma-tree-checkbox-border-radius',
34
+ checkboxMargin: '--plasma-tree-checkbox-margin',
35
+ checkboxBorderColor: '--plasma-tree-checkbox-border-color',
36
+ checkboxBackgroundColor: '--plasma-tree-checkbox-background-color',
37
+ itemBackgroundColor: '--plasma-tree-item-background-color',
38
+ itemBackgroundColorHover: '--plasma-tree-item-background-color-hover',
39
+ itemBackgroundColorActive: '--plasma-tree-item-background-color-active',
40
+ itemDisabledOpacity: '--plasma-tree-item-disabled-opacity'
41
+ };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "treeConfig", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Tree.treeConfig;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "treeTokens", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Tree2.treeTokens;
16
+ }
17
+ });
18
+ var _Tree = /*#__PURE__*/require("./Tree");
19
+ var _Tree2 = /*#__PURE__*/require("./Tree.tokens");
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "sizeToIconSize", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _sizeToIconSize.sizeToIconSize;
10
+ }
11
+ });
12
+ var _sizeToIconSize = /*#__PURE__*/require("./sizeToIconSize");
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.sizeToIconSize = void 0;
7
+ var sizeToIconSize = exports.sizeToIconSize = function sizeToIconSize(size) {
8
+ if (size === 'xs') return 'xs';
9
+ return 's';
10
+ };
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Folder = void 0;
7
+ var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
+ var _path;
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
11
+ var Folder = exports.Folder = function Folder(props) {
12
+ return /*#__PURE__*/_react["default"].createElement("svg", _extends({
13
+ width: "100%",
14
+ height: "100%",
15
+ viewBox: "0 0 24 24",
16
+ fill: "none",
17
+ xmlns: "http://www.w3.org/2000/svg"
18
+ }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
19
+ fillRule: "evenodd",
20
+ clipRule: "evenodd",
21
+ d: "M2.02752 9.75007H2V7.3191C1.99999 6.71538 1.99998 6.2171 2.03315 5.8112C2.06759 5.38963 2.14151 5.0021 2.32698 4.6381C2.6146 4.07361 3.07354 3.61467 3.63803 3.32705C4.00203 3.14158 4.38956 3.06766 4.81113 3.03322C5.21703 3.00005 5.7153 3.00006 6.31903 3.00007L9.10319 3.00004C9.69972 2.99971 10.1427 2.99947 10.5265 3.10229C11.5617 3.3797 12.3704 4.18834 12.6478 5.22362C12.7096 5.45422 12.7341 5.70621 12.7438 6.00007L16.4821 6.00007C17.2949 6.00006 17.9506 6.00006 18.4815 6.04344C19.0281 6.0881 19.5082 6.18246 19.9525 6.4088C20.6581 6.76832 21.2317 7.342 21.5913 8.04761C21.8176 8.49183 21.912 8.97197 21.9566 9.5186C22 10.0495 22 10.7051 22 11.5179V14.4822C22 15.295 22 15.9506 21.9566 16.4815C21.912 17.0282 21.8176 17.5083 21.5913 17.9525C21.2317 18.6581 20.6581 19.2318 19.9525 19.5913C19.5082 19.8177 19.0281 19.912 18.4815 19.9567C17.9506 20.0001 17.2949 20.0001 16.4821 20.0001H7.51793C6.70507 20.0001 6.04945 20.0001 5.51853 19.9567C4.9719 19.912 4.49176 19.8177 4.04754 19.5913C3.34193 19.2318 2.76825 18.6581 2.40873 17.9525C2.18239 17.5083 2.08803 17.0282 2.04336 16.4815C1.99999 15.9506 1.99999 15.295 2 14.4822V11.518C1.99999 10.8194 1.99999 10.237 2.02752 9.75007ZM9 4.50007C9.74577 4.50007 9.97152 4.50651 10.1382 4.55118C10.6559 4.68988 11.0602 5.09421 11.1989 5.61184C11.2228 5.70094 11.2357 5.80689 11.2426 6.00007L7.5179 6.00007C6.70506 6.00006 6.04944 6.00006 5.51853 6.04344C4.9719 6.0881 4.49176 6.18246 4.04754 6.4088C3.8551 6.50685 3.67247 6.62083 3.50133 6.74907C3.50368 6.4154 3.51019 6.15332 3.52816 5.93335C3.55503 5.60454 3.60372 5.43639 3.66349 5.31909C3.8073 5.03684 4.03677 4.80737 4.31902 4.66356C4.43631 4.6038 4.60447 4.5551 4.93328 4.52824C5.27085 4.50066 5.70757 4.50007 6.35 4.50007H9ZM4.72852 7.74531C4.92604 7.64467 5.18681 7.57554 5.64068 7.53845C6.10331 7.50066 6.69755 7.50007 7.55 7.50007H16.45C17.3025 7.50007 17.8967 7.50066 18.3593 7.53845C18.8132 7.57554 19.074 7.64467 19.2715 7.74531C19.6948 7.96102 20.039 8.30523 20.2548 8.72859C20.3554 8.92611 20.4245 9.18688 20.4616 9.64075C20.4994 10.1034 20.5 10.6976 20.5 11.5501V14.4501C20.5 15.3025 20.4994 15.8968 20.4616 16.3594C20.4245 16.8133 20.3554 17.074 20.2548 17.2716C20.039 17.6949 19.6948 18.0391 19.2715 18.2548C19.074 18.3555 18.8132 18.4246 18.3593 18.4617C17.8967 18.4995 17.3025 18.5001 16.45 18.5001H7.55C6.69755 18.5001 6.10331 18.4995 5.64068 18.4617C5.18681 18.4246 4.92604 18.3555 4.72852 18.2548C4.30516 18.0391 3.96095 17.6949 3.74524 17.2716C3.6446 17.074 3.57547 16.8133 3.53838 16.3594C3.50058 15.8968 3.5 15.3025 3.5 14.4501V11.5501C3.5 10.6976 3.50058 10.1034 3.53838 9.64075C3.57547 9.18688 3.6446 8.92611 3.74524 8.72859C3.96095 8.30523 4.30516 7.96102 4.72852 7.74531Z",
22
+ fill: "currentColor"
23
+ })));
24
+ };
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IconFolder = void 0;
7
+ var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
+ var _Folder = /*#__PURE__*/require("../Icon.assets/Folder");
9
+ var _IconRoot = /*#__PURE__*/require("../IconRoot");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+ var IconFolder = exports.IconFolder = function IconFolder(_ref) {
12
+ var _ref$size = _ref.size,
13
+ size = _ref$size === void 0 ? 'xs' : _ref$size,
14
+ color = _ref.color,
15
+ className = _ref.className;
16
+ return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
17
+ className: className,
18
+ size: size,
19
+ color: color,
20
+ icon: _Folder.Folder
21
+ });
22
+ };
@@ -147,6 +147,12 @@ Object.defineProperty(exports, "IconDone", {
147
147
  return _IconDone.IconDone;
148
148
  }
149
149
  });
150
+ Object.defineProperty(exports, "IconFolder", {
151
+ enumerable: true,
152
+ get: function get() {
153
+ return _IconFolder.IconFolder;
154
+ }
155
+ });
150
156
  Object.defineProperty(exports, "IconInfoCircleOutline", {
151
157
  enumerable: true,
152
158
  get: function get() {
@@ -261,4 +267,5 @@ var _IconStarHalfFill2 = /*#__PURE__*/require("./Icons/Icon.24/IconStarHalfFill"
261
267
  var _IconStarOutline2 = /*#__PURE__*/require("./Icons/Icon.24/IconStarOutline");
262
268
  var _IconStarFill3 = /*#__PURE__*/require("./Icons/Icon.36/IconStarFill");
263
269
  var _IconStarHalfFill3 = /*#__PURE__*/require("./Icons/Icon.36/IconStarHalfFill");
264
- var _IconStarOutline3 = /*#__PURE__*/require("./Icons/Icon.36/IconStarOutline");
270
+ var _IconStarOutline3 = /*#__PURE__*/require("./Icons/Icon.36/IconStarOutline");
271
+ var _IconFolder = /*#__PURE__*/require("./Icons/IconFolder");
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Tree = /*#__PURE__*/require("../../../../components/Tree/Tree.tokens");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ size: 'm'
13
+ },
14
+ variations: {
15
+ view: {
16
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-accent);", ":0.4;"], _Tree.treeTokens.arrowColor, _Tree.treeTokens.arrowColorHover, _Tree.treeTokens.arrowColorActive, _Tree.treeTokens.color, _Tree.treeTokens.colorSelected, _Tree.treeTokens.itemBackgroundColor, _Tree.treeTokens.itemBackgroundColorHover, _Tree.treeTokens.itemBackgroundColorActive, _Tree.treeTokens.checkboxBorderColor, _Tree.treeTokens.checkboxBackgroundColor, _Tree.treeTokens.itemDisabledOpacity)
17
+ },
18
+ size: {
19
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1rem;", ":0.375rem;", ":2rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight),
20
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem;", ":0.375rem;", ":2rem;", ":0.625rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight),
21
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.25rem;", ":1.875rem;", ":0.5rem;", ":0 0.375rem 0 0;", ":0 0.375rem 0 0;", ":1.5rem;", ":0 0.25rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight),
22
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5rem;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0 0.25rem 0 0;", ":0 0.25rem 0 0;", ":1rem;", ":0 0.25rem 0 0;", ":1rem;", ":0.875rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight)
23
+ }
24
+ }
25
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Tree = void 0;
7
+ var _Tree = /*#__PURE__*/require("../../../../components/Tree");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _Tree2 = /*#__PURE__*/require("./Tree.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tree.treeConfig, _Tree2.config);
11
+ var Tree = exports.Tree = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,117 @@
1
+ import * as React from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { StoryObj, Meta } from '@storybook/react';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+
7
+ import { Tree } from './Tree';
8
+
9
+ const treeData: any[] = [
10
+ {
11
+ title: 'Parent 1',
12
+ key: '0-0',
13
+ children: [
14
+ {
15
+ title: 'Parent 1-0',
16
+ key: '0-0-0',
17
+ children: [
18
+ {
19
+ title: 'Leaf',
20
+ key: '0-0-0-0',
21
+ disabled: true,
22
+ },
23
+ {
24
+ title: 'Leaf',
25
+ key: '0-0-0-1',
26
+ children: [
27
+ {
28
+ title: 'Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf Leaf',
29
+ key: '0-0-0-0-0',
30
+ },
31
+ {
32
+ title: 'Leaf',
33
+ key: '0-0-0-0-1',
34
+ },
35
+ ],
36
+ },
37
+ ],
38
+ },
39
+ {
40
+ title: 'Parent 1-1',
41
+ key: '0-0-1',
42
+ children: [{ title: 'Leaf', key: '0-0-1-0' }],
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ title: 'Parent 2',
48
+ key: '0-1',
49
+ children: [
50
+ {
51
+ title: 'Parent 2-0',
52
+ key: '0-1-0',
53
+ },
54
+ ],
55
+ },
56
+ ];
57
+
58
+ type StoryTreeProps = ComponentProps<typeof Tree>;
59
+
60
+ const size = ['xs', 's', 'm', 'l'];
61
+ const arrowPlacements = ['left', 'right'];
62
+
63
+ const meta: Meta<StoryTreeProps> = {
64
+ title: 'b2c/Data Entry/Tree',
65
+ decorators: [WithTheme],
66
+ component: Tree,
67
+ argTypes: {
68
+ size: {
69
+ control: 'select',
70
+ options: size,
71
+ },
72
+ checkable: {
73
+ control: 'boolean',
74
+ },
75
+ multiple: {
76
+ control: 'boolean',
77
+ },
78
+ arrowPlacement: {
79
+ options: arrowPlacements,
80
+ control: {
81
+ type: 'inline-radio',
82
+ },
83
+ },
84
+ defaultExpandAll: {
85
+ control: 'boolean',
86
+ },
87
+ fullWidthItemSelection: {
88
+ control: 'boolean',
89
+ },
90
+ height: {
91
+ control: 'number',
92
+ },
93
+ hasIcon: {
94
+ control: 'boolean',
95
+ },
96
+ },
97
+ args: {
98
+ size: 'm',
99
+ fullWidthItemSelection: false,
100
+ checkable: false,
101
+ multiple: false,
102
+ arrowPlacement: 'left',
103
+ defaultExpandAll: true,
104
+ height: undefined,
105
+ hasIcon: true,
106
+ },
107
+ };
108
+
109
+ export default meta;
110
+
111
+ const StoryDefault = (args: StoryTreeProps) => {
112
+ return <Tree {...args} items={treeData} />;
113
+ };
114
+
115
+ export const Default: StoryObj<StoryTreeProps> = {
116
+ render: (args) => <StoryDefault {...args} />,
117
+ };
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Tree = /*#__PURE__*/require("../../../../components/Tree/Tree.tokens");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ size: 'm'
13
+ },
14
+ variations: {
15
+ view: {
16
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-accent);", ":0.4;"], _Tree.treeTokens.arrowColor, _Tree.treeTokens.arrowColorHover, _Tree.treeTokens.arrowColorActive, _Tree.treeTokens.color, _Tree.treeTokens.colorSelected, _Tree.treeTokens.itemBackgroundColor, _Tree.treeTokens.itemBackgroundColorHover, _Tree.treeTokens.itemBackgroundColorActive, _Tree.treeTokens.checkboxBorderColor, _Tree.treeTokens.checkboxBackgroundColor, _Tree.treeTokens.itemDisabledOpacity)
17
+ },
18
+ size: {
19
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1rem;", ":0.375rem;", ":2rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight),
20
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem;", ":0.375rem;", ":2rem;", ":0.625rem;", ":0 0.5rem 0 0;", ":0 0.5rem 0 0;", ":1.5rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight),
21
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.25rem;", ":1.875rem;", ":0.5rem;", ":0 0.375rem 0 0;", ":0 0.375rem 0 0;", ":1.5rem;", ":0 0.25rem 0 0;", ":1.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight),
22
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5rem;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0 0.25rem 0 0;", ":0 0.25rem 0 0;", ":1rem;", ":0 0.25rem 0 0;", ":1rem;", ":0.875rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tree.treeTokens.itemHeight, _Tree.treeTokens.itemPadding, _Tree.treeTokens.itemPaddingTight, _Tree.treeTokens.itemIndent, _Tree.treeTokens.itemBorderRadius, _Tree.treeTokens.iconFolderMargin, _Tree.treeTokens.switcherMargin, _Tree.treeTokens.switcherSize, _Tree.treeTokens.checkboxMargin, _Tree.treeTokens.checkboxSize, _Tree.treeTokens.checkboxInnerSize, _Tree.treeTokens.checkboxBorderRadius, _Tree.treeTokens.fontFamily, _Tree.treeTokens.fontSize, _Tree.treeTokens.fontStyle, _Tree.treeTokens.fontWeight, _Tree.treeTokens.letterSpacing, _Tree.treeTokens.lineHeight)
23
+ }
24
+ }
25
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Tree = void 0;
7
+ var _Tree = /*#__PURE__*/require("../../../../components/Tree");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _Tree2 = /*#__PURE__*/require("./Tree.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tree.treeConfig, _Tree2.config);
11
+ var Tree = exports.Tree = /*#__PURE__*/(0, _engines.component)(mergedConfig);