@salutejs/plasma-new-hope 0.231.2-canary.1603.12471850782.0 → 0.232.0-canary.1650.12478253360.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (206) hide show
  1. package/cjs/components/Combobox/ComboboxOld/Combobox.css +6 -5
  2. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +8 -7
  3. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +8 -7
  4. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +8 -7
  5. package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +8 -7
  6. package/cjs/components/Dropdown/Dropdown.css +8 -7
  7. package/cjs/components/Dropdown/Dropdown.tokens.js +3 -0
  8. package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
  9. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.css +8 -7
  10. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +8 -7
  11. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +1 -2
  12. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  13. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +44 -13
  14. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  15. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_z6xd28.css +7 -0
  16. package/cjs/components/_Icon/IconRoot.js +6 -3
  17. package/cjs/components/_Icon/IconRoot.js.map +1 -1
  18. package/cjs/components/_Icon/Icons/IconDisclosureRight.js +6 -3
  19. package/cjs/components/_Icon/Icons/IconDisclosureRight.js.map +1 -1
  20. package/cjs/index.css +6 -11
  21. package/cjs/index.js +0 -4
  22. package/cjs/index.js.map +1 -1
  23. package/emotion/cjs/components/Dropdown/Dropdown.tokens.js +3 -0
  24. package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +1 -2
  25. package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +40 -17
  26. package/emotion/cjs/components/_Icon/IconRoot.js +9 -4
  27. package/emotion/cjs/components/_Icon/Icons/IconDisclosureRight.js +8 -3
  28. package/emotion/cjs/components/_Icon/index.js +1 -8
  29. package/emotion/cjs/index.js +0 -11
  30. package/emotion/es/components/Dropdown/Dropdown.tokens.js +3 -0
  31. package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -3
  32. package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +39 -16
  33. package/emotion/es/components/_Icon/IconRoot.js +9 -4
  34. package/emotion/es/components/_Icon/Icons/IconDisclosureRight.js +8 -3
  35. package/emotion/es/components/_Icon/index.js +1 -2
  36. package/emotion/es/index.js +0 -1
  37. package/es/components/Combobox/ComboboxOld/Combobox.css +6 -5
  38. package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +8 -7
  39. package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +8 -7
  40. package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +8 -7
  41. package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +8 -7
  42. package/es/components/Dropdown/Dropdown.css +8 -7
  43. package/es/components/Dropdown/Dropdown.tokens.js +3 -0
  44. package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
  45. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.css +8 -7
  46. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +8 -7
  47. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -3
  48. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  49. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +44 -14
  50. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  51. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_z6xd28.css +7 -0
  52. package/es/components/_Icon/IconRoot.js +6 -3
  53. package/es/components/_Icon/IconRoot.js.map +1 -1
  54. package/es/components/_Icon/Icons/IconDisclosureRight.js +6 -3
  55. package/es/components/_Icon/Icons/IconDisclosureRight.js.map +1 -1
  56. package/es/index.css +6 -11
  57. package/es/index.js +0 -2
  58. package/es/index.js.map +1 -1
  59. package/package.json +2 -3
  60. package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +3 -0
  61. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +1 -2
  62. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +33 -11
  63. package/styled-components/cjs/components/_Icon/IconRoot.js +8 -3
  64. package/styled-components/cjs/components/_Icon/Icons/IconDisclosureRight.js +8 -3
  65. package/styled-components/cjs/components/_Icon/index.js +1 -8
  66. package/styled-components/cjs/index.js +0 -11
  67. package/styled-components/es/components/Dropdown/Dropdown.tokens.js +3 -0
  68. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -3
  69. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +32 -10
  70. package/styled-components/es/components/_Icon/IconRoot.js +8 -3
  71. package/styled-components/es/components/_Icon/Icons/IconDisclosureRight.js +8 -3
  72. package/styled-components/es/components/_Icon/index.js +1 -2
  73. package/styled-components/es/index.js +0 -1
  74. package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts +1 -1
  75. package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts.map +1 -1
  76. package/types/components/Dropdown/Dropdown.tokens.d.ts +3 -0
  77. package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
  78. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +2 -0
  79. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
  80. package/types/components/_Icon/IconRoot.d.ts.map +1 -1
  81. package/types/components/_Icon/Icons/IconDisclosureRight.d.ts +2 -2
  82. package/types/components/_Icon/Icons/IconDisclosureRight.d.ts.map +1 -1
  83. package/types/components/_Icon/index.d.ts +0 -1
  84. package/types/components/_Icon/index.d.ts.map +1 -1
  85. package/types/index.d.ts +0 -1
  86. package/types/index.d.ts.map +1 -1
  87. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_14yih1y.css +0 -6
  88. package/cjs/components/Tree/Tree.css +0 -7
  89. package/cjs/components/Tree/Tree.js +0 -99
  90. package/cjs/components/Tree/Tree.js.map +0 -1
  91. package/cjs/components/Tree/Tree.styles.js +0 -43
  92. package/cjs/components/Tree/Tree.styles.js.map +0 -1
  93. package/cjs/components/Tree/Tree.styles_1mwgczn.css +0 -5
  94. package/cjs/components/Tree/Tree.tokens.js +0 -43
  95. package/cjs/components/Tree/Tree.tokens.js.map +0 -1
  96. package/cjs/components/Tree/utils/sizeToIconSize.js +0 -11
  97. package/cjs/components/Tree/utils/sizeToIconSize.js.map +0 -1
  98. package/cjs/components/_Icon/Icon.assets/Folder.js +0 -25
  99. package/cjs/components/_Icon/Icon.assets/Folder.js.map +0 -1
  100. package/cjs/components/_Icon/Icons/IconFolder.js +0 -23
  101. package/cjs/components/_Icon/Icons/IconFolder.js.map +0 -1
  102. package/emotion/cjs/components/Tree/Tree.js +0 -100
  103. package/emotion/cjs/components/Tree/Tree.styles.js +0 -38
  104. package/emotion/cjs/components/Tree/Tree.template-doc.mdx +0 -102
  105. package/emotion/cjs/components/Tree/Tree.tokens.js +0 -41
  106. package/emotion/cjs/components/Tree/Tree.types.js +0 -5
  107. package/emotion/cjs/components/Tree/index.js +0 -19
  108. package/emotion/cjs/components/Tree/utils/index.js +0 -12
  109. package/emotion/cjs/components/Tree/utils/sizeToIconSize.js +0 -10
  110. package/emotion/cjs/components/_Icon/Icon.assets/Folder.js +0 -24
  111. package/emotion/cjs/components/_Icon/Icons/IconFolder.js +0 -22
  112. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +0 -25
  113. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.js +0 -11
  114. package/emotion/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  115. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.config.js +0 -25
  116. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.js +0 -11
  117. package/emotion/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  118. package/emotion/es/components/Tree/Tree.js +0 -91
  119. package/emotion/es/components/Tree/Tree.styles.js +0 -31
  120. package/emotion/es/components/Tree/Tree.template-doc.mdx +0 -102
  121. package/emotion/es/components/Tree/Tree.tokens.js +0 -35
  122. package/emotion/es/components/Tree/Tree.types.js +0 -1
  123. package/emotion/es/components/Tree/index.js +0 -2
  124. package/emotion/es/components/Tree/utils/index.js +0 -1
  125. package/emotion/es/components/Tree/utils/sizeToIconSize.js +0 -4
  126. package/emotion/es/components/_Icon/Icon.assets/Folder.js +0 -17
  127. package/emotion/es/components/_Icon/Icons/IconFolder.js +0 -15
  128. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.config.js +0 -19
  129. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.js +0 -5
  130. package/emotion/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  131. package/emotion/es/examples/plasma_web/components/Tree/Tree.config.js +0 -19
  132. package/emotion/es/examples/plasma_web/components/Tree/Tree.js +0 -5
  133. package/emotion/es/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  134. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_14yih1y.css +0 -6
  135. package/es/components/Tree/Tree.css +0 -7
  136. package/es/components/Tree/Tree.js +0 -94
  137. package/es/components/Tree/Tree.js.map +0 -1
  138. package/es/components/Tree/Tree.styles.js +0 -35
  139. package/es/components/Tree/Tree.styles.js.map +0 -1
  140. package/es/components/Tree/Tree.styles_1mwgczn.css +0 -5
  141. package/es/components/Tree/Tree.tokens.js +0 -38
  142. package/es/components/Tree/Tree.tokens.js.map +0 -1
  143. package/es/components/Tree/utils/sizeToIconSize.js +0 -7
  144. package/es/components/Tree/utils/sizeToIconSize.js.map +0 -1
  145. package/es/components/_Icon/Icon.assets/Folder.js +0 -21
  146. package/es/components/_Icon/Icon.assets/Folder.js.map +0 -1
  147. package/es/components/_Icon/Icons/IconFolder.js +0 -19
  148. package/es/components/_Icon/Icons/IconFolder.js.map +0 -1
  149. package/styled-components/cjs/components/Tree/Tree.js +0 -100
  150. package/styled-components/cjs/components/Tree/Tree.styles.js +0 -26
  151. package/styled-components/cjs/components/Tree/Tree.template-doc.mdx +0 -102
  152. package/styled-components/cjs/components/Tree/Tree.tokens.js +0 -41
  153. package/styled-components/cjs/components/Tree/Tree.types.js +0 -5
  154. package/styled-components/cjs/components/Tree/index.js +0 -19
  155. package/styled-components/cjs/components/Tree/utils/index.js +0 -12
  156. package/styled-components/cjs/components/Tree/utils/sizeToIconSize.js +0 -10
  157. package/styled-components/cjs/components/_Icon/Icon.assets/Folder.js +0 -24
  158. package/styled-components/cjs/components/_Icon/Icons/IconFolder.js +0 -22
  159. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.config.js +0 -25
  160. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.js +0 -11
  161. package/styled-components/cjs/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  162. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.config.js +0 -25
  163. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.js +0 -11
  164. package/styled-components/cjs/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  165. package/styled-components/es/components/Tree/Tree.js +0 -91
  166. package/styled-components/es/components/Tree/Tree.styles.js +0 -18
  167. package/styled-components/es/components/Tree/Tree.template-doc.mdx +0 -102
  168. package/styled-components/es/components/Tree/Tree.tokens.js +0 -35
  169. package/styled-components/es/components/Tree/Tree.types.js +0 -1
  170. package/styled-components/es/components/Tree/index.js +0 -2
  171. package/styled-components/es/components/Tree/utils/index.js +0 -1
  172. package/styled-components/es/components/Tree/utils/sizeToIconSize.js +0 -4
  173. package/styled-components/es/components/_Icon/Icon.assets/Folder.js +0 -17
  174. package/styled-components/es/components/_Icon/Icons/IconFolder.js +0 -15
  175. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.config.js +0 -19
  176. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.js +0 -5
  177. package/styled-components/es/examples/plasma_b2c/components/Tree/Tree.stories.tsx +0 -117
  178. package/styled-components/es/examples/plasma_web/components/Tree/Tree.config.js +0 -19
  179. package/styled-components/es/examples/plasma_web/components/Tree/Tree.js +0 -5
  180. package/styled-components/es/examples/plasma_web/components/Tree/Tree.stories.tsx +0 -117
  181. package/types/components/Tree/Tree.d.ts +0 -20
  182. package/types/components/Tree/Tree.d.ts.map +0 -1
  183. package/types/components/Tree/Tree.styles.d.ts +0 -7
  184. package/types/components/Tree/Tree.styles.d.ts.map +0 -1
  185. package/types/components/Tree/Tree.tokens.d.ts +0 -36
  186. package/types/components/Tree/Tree.tokens.d.ts.map +0 -1
  187. package/types/components/Tree/Tree.types.d.ts +0 -154
  188. package/types/components/Tree/Tree.types.d.ts.map +0 -1
  189. package/types/components/Tree/index.d.ts +0 -3
  190. package/types/components/Tree/index.d.ts.map +0 -1
  191. package/types/components/Tree/utils/index.d.ts +0 -2
  192. package/types/components/Tree/utils/index.d.ts.map +0 -1
  193. package/types/components/Tree/utils/sizeToIconSize.d.ts +0 -2
  194. package/types/components/Tree/utils/sizeToIconSize.d.ts.map +0 -1
  195. package/types/components/_Icon/Icon.assets/Folder.d.ts +0 -4
  196. package/types/components/_Icon/Icon.assets/Folder.d.ts.map +0 -1
  197. package/types/components/_Icon/Icons/IconFolder.d.ts +0 -4
  198. package/types/components/_Icon/Icons/IconFolder.d.ts.map +0 -1
  199. package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts +0 -18
  200. package/types/examples/plasma_b2c/components/Tree/Tree.config.d.ts.map +0 -1
  201. package/types/examples/plasma_b2c/components/Tree/Tree.d.ts +0 -13
  202. package/types/examples/plasma_b2c/components/Tree/Tree.d.ts.map +0 -1
  203. package/types/examples/plasma_web/components/Tree/Tree.config.d.ts +0 -18
  204. package/types/examples/plasma_web/components/Tree/Tree.config.d.ts.map +0 -1
  205. package/types/examples/plasma_web/components/Tree/Tree.d.ts +0 -13
  206. package/types/examples/plasma_web/components/Tree/Tree.d.ts.map +0 -1
@@ -1,18 +0,0 @@
1
- import styled from 'styled-components';
2
- import { css } from 'styled-components';
3
- import { applyEllipsis } from '../../mixins';
4
- import { IconDisclosureRightCentered, IconFolder } from '../_Icon';
5
- import { treeTokens as tokens, classes } from './Tree.tokens';
6
- export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "plasma-new-hope__sc-ians6n-0"
8
- })(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
9
- export var StyledArrow = /*#__PURE__*/styled(IconDisclosureRightCentered).withConfig({
10
- componentId: "plasma-new-hope__sc-ians6n-1"
11
- })(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);
12
- export var IconFolderWrapper = /*#__PURE__*/styled.div.withConfig({
13
- componentId: "plasma-new-hope__sc-ians6n-2"
14
- })(["line-height:0;color:var(", ");margin:var(", ");"], tokens.arrowColor, tokens.iconFolderMargin);
15
- export var StyledFolder = /*#__PURE__*/styled(IconFolder).withConfig({
16
- componentId: "plasma-new-hope__sc-ians6n-3"
17
- })([""]);
18
- export var base = /*#__PURE__*/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(", ");}"], tokens.itemHeight, classes.treeItemFilled, tokens.itemPadding, classes.treeInverted, classes.treeItemFilled, tokens.itemPaddingTight, tokens.switcherSize, tokens.itemBorderRadius, tokens.itemDisabledOpacity, classes.treeItemFilled, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.switcherSize, tokens.switcherSize, tokens.switcherMargin, classes.treeInverted, classes.treeInverted, classes.treeInverted, tokens.checkboxSize, tokens.checkboxSize, tokens.checkboxMargin, tokens.checkboxInnerSize, tokens.checkboxInnerSize, tokens.checkboxBorderColor, tokens.checkboxBorderRadius, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.color, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, /*#__PURE__*/applyEllipsis(), tokens.colorSelected, IconFolderWrapper, tokens.colorSelected, tokens.itemIndent);
@@ -1,102 +0,0 @@
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
- ```
@@ -1,35 +0,0 @@
1
- export var classes = {
2
- treeInverted: 'tree-inverted',
3
- treeItemFilled: 'tree-item-filled'
4
- };
5
- export var treeTokens = {
6
- arrowColor: '--plasma-tree-arrow-color',
7
- arrowColorHover: '--plasma-tree-arrow-color-hover',
8
- arrowColorActive: '--plasma-tree-arrow-color-active',
9
- color: '--plasma-tree-color',
10
- colorSelected: '--plasma-tree-color-selected',
11
- fontFamily: '--plasma-tree-font-family',
12
- fontSize: '--plasma-tree-font-size',
13
- fontStyle: '--plasma-tree-font-style',
14
- fontWeight: '--plasma-tree-font-weight',
15
- letterSpacing: '--plasma-tree-letter-spacing',
16
- lineHeight: '--plasma-tree-line-height',
17
- itemHeight: '--plasma-tree-item-height',
18
- itemPadding: '--plasma-tree-item-padding',
19
- itemPaddingTight: '--plasma-tree-item-padding-tight',
20
- itemIndent: '--plasma-tree-item-indent',
21
- itemBorderRadius: '--plasma-tree-item-border-radius',
22
- iconFolderMargin: '--plasma-tree-icon-folder-margin',
23
- switcherMargin: '--plasma-tree-switcher-margin',
24
- switcherSize: '--plasma-tree-switcher-size',
25
- checkboxSize: '--plasma-tree-checkbox-size',
26
- checkboxInnerSize: '--plasma-tree-checkbox-inner-size',
27
- checkboxBorderRadius: '--plasma-tree-checkbox-border-radius',
28
- checkboxMargin: '--plasma-tree-checkbox-margin',
29
- checkboxBorderColor: '--plasma-tree-checkbox-border-color',
30
- checkboxBackgroundColor: '--plasma-tree-checkbox-background-color',
31
- itemBackgroundColor: '--plasma-tree-item-background-color',
32
- itemBackgroundColorHover: '--plasma-tree-item-background-color-hover',
33
- itemBackgroundColorActive: '--plasma-tree-item-background-color-active',
34
- itemDisabledOpacity: '--plasma-tree-item-disabled-opacity'
35
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,2 +0,0 @@
1
- export { treeConfig } from './Tree';
2
- export { treeTokens } from './Tree.tokens';
@@ -1 +0,0 @@
1
- export { sizeToIconSize } from './sizeToIconSize';
@@ -1,4 +0,0 @@
1
- export var sizeToIconSize = function sizeToIconSize(size) {
2
- if (size === 'xs') return 'xs';
3
- return 's';
4
- };
@@ -1,17 +0,0 @@
1
- var _path;
2
- 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); }
3
- import React from 'react';
4
- export var Folder = function Folder(props) {
5
- return /*#__PURE__*/React.createElement("svg", _extends({
6
- width: "100%",
7
- height: "100%",
8
- viewBox: "0 0 24 24",
9
- fill: "none",
10
- xmlns: "http://www.w3.org/2000/svg"
11
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
12
- fillRule: "evenodd",
13
- clipRule: "evenodd",
14
- 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",
15
- fill: "currentColor"
16
- })));
17
- };
@@ -1,15 +0,0 @@
1
- import React from 'react';
2
- import { Folder } from '../Icon.assets/Folder';
3
- import { IconRoot } from '../IconRoot';
4
- export var IconFolder = function IconFolder(_ref) {
5
- var _ref$size = _ref.size,
6
- size = _ref$size === void 0 ? 'xs' : _ref$size,
7
- color = _ref.color,
8
- className = _ref.className;
9
- return /*#__PURE__*/React.createElement(IconRoot, {
10
- className: className,
11
- size: size,
12
- color: color,
13
- icon: Folder
14
- });
15
- };
@@ -1,19 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { treeTokens as tokens } from '../../../../components/Tree/Tree.tokens';
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- size: 'm'
7
- },
8
- variations: {
9
- view: {
10
- "default": /*#__PURE__*/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;"], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity)
11
- },
12
- size: {
13
- l: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
14
- m: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
15
- s: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
16
- xs: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
17
- }
18
- }
19
- };
@@ -1,5 +0,0 @@
1
- import { treeConfig } from '../../../../components/Tree';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './Tree.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(treeConfig, config);
5
- export var Tree = /*#__PURE__*/component(mergedConfig);
@@ -1,117 +0,0 @@
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
- };
@@ -1,19 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { treeTokens as tokens } from '../../../../components/Tree/Tree.tokens';
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- size: 'm'
7
- },
8
- variations: {
9
- view: {
10
- "default": /*#__PURE__*/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;"], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive, tokens.color, tokens.colorSelected, tokens.itemBackgroundColor, tokens.itemBackgroundColorHover, tokens.itemBackgroundColorActive, tokens.checkboxBorderColor, tokens.checkboxBackgroundColor, tokens.itemDisabledOpacity)
11
- },
12
- size: {
13
- l: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
14
- m: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
15
- s: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
16
- xs: /*#__PURE__*/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);"], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
17
- }
18
- }
19
- };
@@ -1,5 +0,0 @@
1
- import { treeConfig } from '../../../../components/Tree';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './Tree.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(treeConfig, config);
5
- export var Tree = /*#__PURE__*/component(mergedConfig);
@@ -1,117 +0,0 @@
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: 'web/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
- };
@@ -1,20 +0,0 @@
1
- import React from 'react';
2
- import 'rc-tree/assets/index.css';
3
- import { RootProps } from '../../engines';
4
- import type { TreeProps } from './Tree.types';
5
- /**
6
- * Многоуровневый раскрывающийся список в виде дерева.
7
- */
8
- export declare const treeRoot: (Root: RootProps<HTMLDivElement, TreeProps>) => React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLDivElement>>;
9
- export declare const treeConfig: {
10
- name: string;
11
- tag: string;
12
- layout: (Root: RootProps<HTMLDivElement, TreeProps>) => React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLDivElement>>;
13
- base: import("@linaria/core").LinariaClassName;
14
- variations: {};
15
- defaults: {
16
- view: string;
17
- size: string;
18
- };
19
- };
20
- //# sourceMappingURL=Tree.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C;;GAEG;AACH,eAAO,MAAM,QAAQ,SAAU,UAAU,cAAc,EAAE,SAAS,CAAC,qFAqE9D,CAAC;AAEN,eAAO,MAAM,UAAU;;;mBAvEQ,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;CAiFlE,CAAC"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const IconArrowWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
3
- export declare const StyledArrow: import("@linaria/react").StyledMeta & import("react").FC<import("../_Icon/IconRoot").IconProps>;
4
- export declare const IconFolderWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
5
- export declare const StyledFolder: import("@linaria/react").StyledMeta & import("react").FC<import("../_Icon/IconRoot").IconProps>;
6
- export declare const base: import("@linaria/core").LinariaClassName;
7
- //# sourceMappingURL=Tree.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tree.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.styles.ts"],"names":[],"mappings":";AAQA,eAAO,MAAM,gBAAgB,qKAW5B,CAAC;AAEF,eAAO,MAAM,WAAW,iGAIvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAI7B,CAAC;AAEF,eAAO,MAAM,YAAY,iGAAuB,CAAC;AAEjD,eAAO,MAAM,IAAI,0CA2KhB,CAAC"}
@@ -1,36 +0,0 @@
1
- export declare const classes: {
2
- treeInverted: string;
3
- treeItemFilled: string;
4
- };
5
- export declare const treeTokens: {
6
- arrowColor: string;
7
- arrowColorHover: string;
8
- arrowColorActive: string;
9
- color: string;
10
- colorSelected: string;
11
- fontFamily: string;
12
- fontSize: string;
13
- fontStyle: string;
14
- fontWeight: string;
15
- letterSpacing: string;
16
- lineHeight: string;
17
- itemHeight: string;
18
- itemPadding: string;
19
- itemPaddingTight: string;
20
- itemIndent: string;
21
- itemBorderRadius: string;
22
- iconFolderMargin: string;
23
- switcherMargin: string;
24
- switcherSize: string;
25
- checkboxSize: string;
26
- checkboxInnerSize: string;
27
- checkboxBorderRadius: string;
28
- checkboxMargin: string;
29
- checkboxBorderColor: string;
30
- checkboxBackgroundColor: string;
31
- itemBackgroundColor: string;
32
- itemBackgroundColorHover: string;
33
- itemBackgroundColorActive: string;
34
- itemDisabledOpacity: string;
35
- };
36
- //# sourceMappingURL=Tree.tokens.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tree.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BtB,CAAC"}