@salutejs/plasma-new-hope 0.336.0-canary.2219.17693950410.0 → 0.336.0-canary.2219.17733017487.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 (154) hide show
  1. package/cjs/components/Pagination/Pagination.css +12 -10
  2. package/cjs/components/Pagination/Pagination.js +57 -5
  3. package/cjs/components/Pagination/Pagination.js.map +1 -1
  4. package/cjs/components/Pagination/Pagination.styles.js +19 -7
  5. package/cjs/components/Pagination/Pagination.styles.js.map +1 -1
  6. package/cjs/components/Pagination/{Pagination.styles_ska0td.css → Pagination.styles_qhyqps.css} +5 -3
  7. package/cjs/components/Pagination/Pagination.tokens.js +3 -0
  8. package/cjs/components/Pagination/Pagination.tokens.js.map +1 -1
  9. package/cjs/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.css +3 -3
  10. package/cjs/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js +1 -1
  11. package/cjs/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js.map +1 -1
  12. package/{es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles_89ax1q.css → cjs/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles_1sw6ww1.css} +2 -2
  13. package/cjs/components/Switch/Switch.css +6 -6
  14. package/cjs/components/Switch/Switch.js +5 -2
  15. package/cjs/components/Switch/Switch.js.map +1 -1
  16. package/cjs/components/Switch/Switch.styles.js +1 -1
  17. package/cjs/components/Switch/Switch.styles.js.map +1 -1
  18. package/{es/components/Switch/Switch.styles_qjefea.css → cjs/components/Switch/Switch.styles_158fwwl.css} +1 -1
  19. package/cjs/components/Switch/Switch.tokens.js +2 -1
  20. package/cjs/components/Switch/Switch.tokens.js.map +1 -1
  21. package/cjs/components/Tree/Tree.css +7 -6
  22. package/cjs/components/Tree/Tree.js +42 -1
  23. package/cjs/components/Tree/Tree.js.map +1 -1
  24. package/cjs/components/Tree/Tree.styles.js +17 -2
  25. package/cjs/components/Tree/Tree.styles.js.map +1 -1
  26. package/cjs/components/Tree/Tree.styles_1bw3k0r.css +8 -0
  27. package/cjs/components/Tree/Tree.tokens.js +5 -2
  28. package/cjs/components/Tree/Tree.tokens.js.map +1 -1
  29. package/cjs/components/Tree/utils/traverseTree.js +3 -3
  30. package/cjs/components/Tree/utils/traverseTree.js.map +1 -1
  31. package/cjs/engines/common.js.map +1 -1
  32. package/cjs/engines/index.js.map +1 -1
  33. package/cjs/index.css +25 -22
  34. package/emotion/cjs/components/Pagination/Pagination.js +53 -5
  35. package/emotion/cjs/components/Pagination/Pagination.styles.js +28 -14
  36. package/emotion/cjs/components/Pagination/Pagination.tokens.js +3 -0
  37. package/emotion/cjs/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js +6 -6
  38. package/emotion/cjs/components/Switch/Switch.js +4 -2
  39. package/emotion/cjs/components/Switch/Switch.styles.js +11 -11
  40. package/emotion/cjs/components/Switch/Switch.tokens.js +2 -1
  41. package/emotion/cjs/components/Tree/Tree.js +31 -1
  42. package/emotion/cjs/components/Tree/Tree.styles.js +23 -13
  43. package/emotion/cjs/components/Tree/Tree.tokens.js +5 -2
  44. package/emotion/cjs/components/Tree/utils/traverseTree.js +3 -3
  45. package/emotion/cjs/examples/components/Pagination/Pagination.config.js +12 -12
  46. package/emotion/cjs/examples/components/Tree/Tree.config.js +5 -5
  47. package/emotion/es/components/Pagination/Pagination.js +55 -7
  48. package/emotion/es/components/Pagination/Pagination.styles.js +23 -15
  49. package/emotion/es/components/Pagination/Pagination.tokens.js +3 -0
  50. package/emotion/es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js +6 -6
  51. package/emotion/es/components/Switch/Switch.js +4 -2
  52. package/emotion/es/components/Switch/Switch.styles.js +11 -11
  53. package/emotion/es/components/Switch/Switch.tokens.js +2 -1
  54. package/emotion/es/components/Tree/Tree.js +32 -2
  55. package/emotion/es/components/Tree/Tree.styles.js +20 -13
  56. package/emotion/es/components/Tree/Tree.tokens.js +5 -2
  57. package/emotion/es/components/Tree/utils/traverseTree.js +3 -3
  58. package/emotion/es/examples/components/Pagination/Pagination.config.js +12 -12
  59. package/emotion/es/examples/components/Tree/Tree.config.js +5 -5
  60. package/es/components/Pagination/Pagination.css +12 -10
  61. package/es/components/Pagination/Pagination.js +59 -7
  62. package/es/components/Pagination/Pagination.js.map +1 -1
  63. package/es/components/Pagination/Pagination.styles.js +18 -8
  64. package/es/components/Pagination/Pagination.styles.js.map +1 -1
  65. package/es/components/Pagination/{Pagination.styles_ska0td.css → Pagination.styles_qhyqps.css} +5 -3
  66. package/es/components/Pagination/Pagination.tokens.js +3 -0
  67. package/es/components/Pagination/Pagination.tokens.js.map +1 -1
  68. package/es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.css +3 -3
  69. package/es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js +1 -1
  70. package/es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js.map +1 -1
  71. package/{cjs/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles_89ax1q.css → es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles_1sw6ww1.css} +2 -2
  72. package/es/components/Switch/Switch.css +6 -6
  73. package/es/components/Switch/Switch.js +5 -2
  74. package/es/components/Switch/Switch.js.map +1 -1
  75. package/es/components/Switch/Switch.styles.js +1 -1
  76. package/es/components/Switch/Switch.styles.js.map +1 -1
  77. package/{cjs/components/Switch/Switch.styles_qjefea.css → es/components/Switch/Switch.styles_158fwwl.css} +1 -1
  78. package/es/components/Switch/Switch.tokens.js +2 -1
  79. package/es/components/Switch/Switch.tokens.js.map +1 -1
  80. package/es/components/Tree/Tree.css +7 -6
  81. package/es/components/Tree/Tree.js +43 -2
  82. package/es/components/Tree/Tree.js.map +1 -1
  83. package/es/components/Tree/Tree.styles.js +17 -3
  84. package/es/components/Tree/Tree.styles.js.map +1 -1
  85. package/es/components/Tree/Tree.styles_1bw3k0r.css +8 -0
  86. package/es/components/Tree/Tree.tokens.js +5 -2
  87. package/es/components/Tree/Tree.tokens.js.map +1 -1
  88. package/es/components/Tree/utils/traverseTree.js +3 -3
  89. package/es/components/Tree/utils/traverseTree.js.map +1 -1
  90. package/es/engines/common.js.map +1 -1
  91. package/es/engines/index.js.map +1 -1
  92. package/es/index.css +25 -22
  93. package/package.json +2 -2
  94. package/styled-components/cjs/components/Pagination/Pagination.js +53 -5
  95. package/styled-components/cjs/components/Pagination/Pagination.styles.js +39 -12
  96. package/styled-components/cjs/components/Pagination/Pagination.tokens.js +3 -0
  97. package/styled-components/cjs/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js +5 -5
  98. package/styled-components/cjs/components/Switch/Switch.js +4 -2
  99. package/styled-components/cjs/components/Switch/Switch.styles.js +9 -8
  100. package/styled-components/cjs/components/Switch/Switch.tokens.js +2 -1
  101. package/styled-components/cjs/components/Tree/Tree.js +31 -1
  102. package/styled-components/cjs/components/Tree/Tree.styles.js +24 -8
  103. package/styled-components/cjs/components/Tree/Tree.tokens.js +5 -2
  104. package/styled-components/cjs/components/Tree/utils/traverseTree.js +3 -3
  105. package/styled-components/cjs/examples/components/Combobox/Combobox.js +0 -15
  106. package/styled-components/cjs/examples/components/Pagination/Pagination.config.js +18 -11
  107. package/styled-components/cjs/examples/components/Tree/Tree.config.js +6 -2
  108. package/styled-components/es/components/Pagination/Pagination.js +55 -7
  109. package/styled-components/es/components/Pagination/Pagination.styles.js +34 -13
  110. package/styled-components/es/components/Pagination/Pagination.tokens.js +3 -0
  111. package/styled-components/es/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.js +5 -5
  112. package/styled-components/es/components/Switch/Switch.js +4 -2
  113. package/styled-components/es/components/Switch/Switch.styles.js +9 -8
  114. package/styled-components/es/components/Switch/Switch.tokens.js +2 -1
  115. package/styled-components/es/components/Tree/Tree.js +32 -2
  116. package/styled-components/es/components/Tree/Tree.styles.js +21 -8
  117. package/styled-components/es/components/Tree/Tree.tokens.js +5 -2
  118. package/styled-components/es/components/Tree/utils/traverseTree.js +3 -3
  119. package/styled-components/es/examples/components/Pagination/Pagination.config.js +18 -11
  120. package/styled-components/es/examples/components/Tree/Tree.config.js +6 -2
  121. package/types/components/Pagination/Pagination.d.ts.map +1 -1
  122. package/types/components/Pagination/Pagination.styles.d.ts +2 -0
  123. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  124. package/types/components/Pagination/Pagination.tokens.d.ts +3 -0
  125. package/types/components/Pagination/Pagination.tokens.d.ts.map +1 -1
  126. package/types/components/Pagination/Pagination.types.d.ts +6 -0
  127. package/types/components/Pagination/Pagination.types.d.ts.map +1 -1
  128. package/types/components/Pagination/ui/PaginationQuickJumpToPage/PaginationQuickJumpToPage.styles.d.ts.map +1 -1
  129. package/types/components/Switch/Switch.d.ts.map +1 -1
  130. package/types/components/Switch/Switch.styles.d.ts.map +1 -1
  131. package/types/components/Switch/Switch.tokens.d.ts +1 -0
  132. package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
  133. package/types/components/Switch/Switch.types.d.ts +5 -0
  134. package/types/components/Switch/Switch.types.d.ts.map +1 -1
  135. package/types/components/Tree/Tree.d.ts +3 -3
  136. package/types/components/Tree/Tree.d.ts.map +1 -1
  137. package/types/components/Tree/Tree.styles.d.ts +3 -0
  138. package/types/components/Tree/Tree.styles.d.ts.map +1 -1
  139. package/types/components/Tree/Tree.tokens.d.ts +3 -0
  140. package/types/components/Tree/Tree.tokens.d.ts.map +1 -1
  141. package/types/components/Tree/Tree.types.d.ts +50 -1
  142. package/types/components/Tree/Tree.types.d.ts.map +1 -1
  143. package/types/components/Tree/utils/traverseTree.d.ts.map +1 -1
  144. package/types/engines/common.d.ts +3 -3
  145. package/types/engines/common.d.ts.map +1 -1
  146. package/types/engines/index.d.ts +1 -1
  147. package/types/engines/index.d.ts.map +1 -1
  148. package/types/engines/types.d.ts +4 -0
  149. package/types/engines/types.d.ts.map +1 -1
  150. package/types/examples/components/Pagination/Pagination.config.d.ts.map +1 -1
  151. package/types/examples/components/Tree/Tree.config.d.ts.map +1 -1
  152. package/types/examples/components/Tree/Tree.d.ts.map +1 -1
  153. package/cjs/components/Tree/Tree.styles_6sla5y.css +0 -7
  154. package/es/components/Tree/Tree.styles_6sla5y.css +0 -7
@@ -64,5 +64,6 @@ var tokens = {
64
64
  };
65
65
  var classes = {
66
66
  beforeSwitchLabelPosition: 'switch-label-position-before',
67
- afterSwitchLabelPosition: 'switch-label-position-after'
67
+ afterSwitchLabelPosition: 'switch-label-position-after',
68
+ singleLine: 'switch-single-line'
68
69
  };
@@ -168,7 +168,7 @@ function _unsupported_iterable_to_array(o, minLen) {
168
168
  }
169
169
  var treeRoot = function(Root) {
170
170
  return /*#__PURE__*/ (0, _react.forwardRef)(function(param, ref) {
171
- var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode;
171
+ var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode, _param_draggable = param.draggable, draggable = _param_draggable === void 0 ? false : _param_draggable, onDragStart = param.onDragStart, onDragEnter = param.onDragEnter, onDragOver = param.onDragOver, onDragLeave = param.onDragLeave, onDragEnd = param.onDragEnd, onDrop = param.onDrop, allowDrop = param.allowDrop;
172
172
  var _useState = _sliced_to_array((0, _react.useState)(defaultSelectedKeys || []), 2), selected = _useState[0], setSelected = _useState[1];
173
173
  var selectedKeys = outerSelectedKeys !== null && outerSelectedKeys !== void 0 ? outerSelectedKeys : selected;
174
174
  var isRadioMode = mode === 'radio' && !multiple;
@@ -241,6 +241,36 @@ var treeRoot = function(Root) {
241
241
  fullWidthItemSelection: fullWidthItemSelection,
242
242
  arrowPlacement: arrowPlacement
243
243
  }, /*#__PURE__*/ _react.default.createElement(_Treestyles.Title, null, renderTitle ? renderTitle(item) : typeof item.title === 'function' ? item.title(item) : item.title), item.contentRight && /*#__PURE__*/ _react.default.createElement(_Treestyles.ContentRight, null, item.contentRight));
244
+ },
245
+ draggable: draggable,
246
+ onDragStart: onDragStart,
247
+ onDragEnter: onDragEnter,
248
+ onDragOver: onDragOver,
249
+ onDragLeave: onDragLeave,
250
+ onDragEnd: onDragEnd,
251
+ onDrop: onDrop,
252
+ allowDrop: allowDrop,
253
+ dropIndicatorRender: function(props) {
254
+ var offset = 0;
255
+ var dropPosition = props.dropPosition, dropLevelOffset = props.dropLevelOffset, indent = props.indent;
256
+ var left = -dropLevelOffset * indent + offset;
257
+ var style = {};
258
+ switch(dropPosition){
259
+ case -1:
260
+ style.top = 0;
261
+ break;
262
+ case 1:
263
+ style.bottom = 0;
264
+ break;
265
+ default:
266
+ style.bottom = 0;
267
+ style.left = indent + offset;
268
+ break;
269
+ }
270
+ return /*#__PURE__*/ _react.default.createElement(_Treestyles.Line, {
271
+ style: style,
272
+ left: left
273
+ });
244
274
  }
245
275
  })));
246
276
  });
@@ -15,6 +15,9 @@ _export(exports, {
15
15
  get IconArrowWrapper () {
16
16
  return IconArrowWrapper;
17
17
  },
18
+ get Line () {
19
+ return Line;
20
+ },
18
21
  get StyledArrow () {
19
22
  return StyledArrow;
20
23
  },
@@ -78,7 +81,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
78
81
  }
79
82
  var IconArrowWrapper = _styledcomponents.default.div.withConfig({
80
83
  displayName: "Tree.styles__IconArrowWrapper",
81
- componentId: "sc-b806b1cc-0"
84
+ componentId: "sc-8ac26406-0"
82
85
  })([
83
86
  "line-height:0;color:var(",
84
87
  ");&:hover{color:var(",
@@ -87,19 +90,19 @@ var IconArrowWrapper = _styledcomponents.default.div.withConfig({
87
90
  ], _Treetokens.treeTokens.arrowColor, _Treetokens.treeTokens.arrowColorHover, _Treetokens.treeTokens.arrowColorActive);
88
91
  var StyledArrow = (0, _styledcomponents.default)(_Icon.IconDisclosureRightCentered).withConfig({
89
92
  displayName: "Tree.styles__StyledArrow",
90
- componentId: "sc-b806b1cc-1"
93
+ componentId: "sc-8ac26406-1"
91
94
  })([
92
95
  "transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"
93
96
  ]);
94
97
  var StyledFolder = (0, _styledcomponents.default)(_Icon.IconFolder).withConfig({
95
98
  displayName: "Tree.styles__StyledFolder",
96
- componentId: "sc-b806b1cc-2"
99
+ componentId: "sc-8ac26406-2"
97
100
  })([
98
101
  ""
99
102
  ]);
100
103
  var TitleWrapper = _styledcomponents.default.div.withConfig({
101
104
  displayName: "Tree.styles__TitleWrapper",
102
- componentId: "sc-b806b1cc-3"
105
+ componentId: "sc-8ac26406-3"
103
106
  })([
104
107
  "display:flex;align-items:center;justify-content:space-between;margin:",
105
108
  ";",
@@ -110,7 +113,7 @@ var TitleWrapper = _styledcomponents.default.div.withConfig({
110
113
  }, (0, _mixins.applyEllipsis)());
111
114
  var Title = _styledcomponents.default.span.withConfig({
112
115
  displayName: "Tree.styles__Title",
113
- componentId: "sc-b806b1cc-4"
116
+ componentId: "sc-8ac26406-4"
114
117
  })([
115
118
  "margin:var(",
116
119
  ");",
@@ -118,12 +121,25 @@ var Title = _styledcomponents.default.span.withConfig({
118
121
  ], _Treetokens.treeTokens.iconFolderMargin, (0, _mixins.applyEllipsis)());
119
122
  var ContentRight = _styledcomponents.default.div.withConfig({
120
123
  displayName: "Tree.styles__ContentRight",
121
- componentId: "sc-b806b1cc-5"
124
+ componentId: "sc-8ac26406-5"
122
125
  })([
123
126
  "line-height:0;"
124
127
  ]);
128
+ var Line = _styledcomponents.default.div.withConfig({
129
+ displayName: "Tree.styles__Line",
130
+ componentId: "sc-8ac26406-6"
131
+ })([
132
+ "left:",
133
+ "px;right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
134
+ ");border-radius:1px;pointer-events:none;"
135
+ ], function(param) {
136
+ var left = param.left;
137
+ return left;
138
+ }, _Treetokens.treeTokens.itemDraggableLineColor);
125
139
  var base = (0, _styledcomponents.css)([
126
- ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{background:rgba(100,100,255,0.1);}.rc-tree .rc-tree-treenode.drop-container > .draggable::after{position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 2px red;content:'';}.rc-tree .rc-tree-treenode.drop-container ~ .rc-tree-treenode{border-left:2px solid chocolate;}.rc-tree .rc-tree-treenode.drop-target{background-color:yellowgreen;}.rc-tree .rc-tree-treenode.drop-target ~ .rc-tree-treenode{border-left:none;}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
140
+ ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{opacity:0.28;}.rc-tree .rc-tree-treenode.drop-container::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.",
141
+ "::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.drag-over::before{box-shadow:inset 0 0 0 1px var(",
142
+ ");}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
127
143
  ");}.rc-tree.",
128
144
  " .rc-tree-treenode.rc-tree-treenode-selected .rc-tree-node-content-wrapper{cursor:default;}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-node-content-wrapper,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-switcher,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-checkbox,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-iconEle{cursor:default;}.rc-tree .rc-tree-treenode span.rc-tree-switcher,.rc-tree .rc-tree-treenode span.rc-tree-checkbox,.rc-tree .rc-tree-treenode span.rc-tree-iconEle{cursor:pointer;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize{background-image:none;}.rc-tree .rc-tree-treenode span.rc-tree-icon_loading{margin-right:2px;vertical-align:top;background:url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7') no-repeat scroll 0 0 transparent;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{flex:none;}.rc-tree.",
129
145
  " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{display:none;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open{background-position:-93px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close{background-position:-75px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox{width:13px;height:13px;margin:0 3px;background-position:0 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked{background-position:-14px 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-indeterminate{background-position:-14px -28px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-disabled{background-position:0 -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled{background-position:-14px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled{position:relative;background:#ccc;border-radius:3px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled::after{position:absolute;top:5px;left:3px;width:5px;height:0;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:scale(1);transform:scale(1);content:' ';}.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop{background:none;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > ul{background:url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > .rc-tree-switcher-noop{background-position:-56px -18px;}.rc-tree.rc-tree-show-line .rc-tree-treenode:last-child > .rc-tree-switcher-noop{background-position:-56px -36px;}.rc-tree-child-tree{display:none;}.rc-tree-child-tree-open{display:block;}.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),.rc-tree-treenode-disabled > a,.rc-tree-treenode-disabled > a span{color:#767676;cursor:not-allowed;}.rc-tree-treenode-active{background:rgba(0,0,0,0.1);}.rc-tree-node-selected{background-color:#ffe6b0;box-shadow:0 0 0 1px #ffb951;opacity:0.8;}.rc-tree-icon__open{margin-right:0;vertical-align:top;background-position:-110px -16px;}.rc-tree-icon__close{margin-right:0;vertical-align:top;background-position:-110px 0;}.rc-tree-icon__docu{margin-right:0;vertical-align:top;background-position:-110px -32px;}.rc-tree-icon__customize{display:block;line-height:0;color:var(",
@@ -185,4 +201,4 @@ var base = (0, _styledcomponents.css)([
185
201
  ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-icon__customize{color:var(",
186
202
  ");;}.rc-tree-indent-unit{width:var(",
187
203
  ");}"
188
- ], _Treetokens.treeTokens.color, _Treetokens.classes.treeRadioMode, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.itemHeight, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPadding, _Treetokens.classes.treeInverted, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.classes.treeItemFilled, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemPrimaryBackground, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherMargin, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.color, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.itemIndent);
204
+ ], _Treetokens.classes.treeLeafNode, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.color, _Treetokens.classes.treeRadioMode, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.itemHeight, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPadding, _Treetokens.classes.treeInverted, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.classes.treeItemFilled, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemPrimaryBackground, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherMargin, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.color, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.itemIndent);
@@ -21,7 +21,8 @@ var classes = {
21
21
  treeItemFilled: 'tree-item-filled',
22
22
  treeItemPrimaryBackground: 'tree-item-primary-background',
23
23
  treeItemHasSelectedChildren: 'tree-item-has-selected-children',
24
- treeRadioMode: 'tree-radio-mode'
24
+ treeRadioMode: 'tree-radio-mode',
25
+ treeLeafNode: 'tree-leaf-node'
25
26
  };
26
27
  var treeTokens = {
27
28
  arrowColor: '--plasma-tree-arrow-color',
@@ -59,5 +60,7 @@ var treeTokens = {
59
60
  itemBackgroundColorActive: '--plasma-tree-item-background-color-active',
60
61
  itemDisabledOpacity: '--plasma-tree-item-disabled-opacity',
61
62
  itemDisabledColor: '--plasma-tree-item-disabled-color',
62
- itemDisabledBorderColor: '--plasma-tree-item-disabled-border-color'
63
+ itemDisabledBorderColor: '--plasma-tree-item-disabled-border-color',
64
+ itemDraggableBorderColor: '--plasma-tree-item-draggable-border-color',
65
+ itemDraggableLineColor: '--plasma-tree-item-draggable-line-color'
63
66
  };
@@ -117,6 +117,9 @@ var dfs = function(node, selectedKeys, rootParentsSelected, parents) {
117
117
  })[0]) === null || _parents_filter_ === void 0 ? void 0 : _parents_filter_.key)) {
118
118
  node.className = (0, _dedupe.default)(node.className, _Treetokens.classes.treeItemPrimaryBackground);
119
119
  }
120
+ if (!node.children) {
121
+ node.className = (0, _dedupe.default)(node.className, _Treetokens.classes.treeLeafNode);
122
+ }
120
123
  };
121
124
  var getRootParentsSelectedChildren = function(node, selectedKeysSet) {
122
125
  var rootParentsSelected = new Set();
@@ -141,9 +144,6 @@ var getRootParentsSelectedChildren = function(node, selectedKeysSet) {
141
144
  return rootParentsSelected;
142
145
  };
143
146
  var traverseTree = function(items, selectedKeys) {
144
- if (!selectedKeys || selectedKeys.length === 0) {
145
- return items;
146
- }
147
147
  var selectedKeysSet = new Set(selectedKeys);
148
148
  var copyItems = deepCopy(items);
149
149
  var rootParentsSelected = getRootParentsSelectedChildren({
@@ -1,16 +1 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "Combobox", {
6
- enumerable: true,
7
- get: function() {
8
- return Combobox;
9
- }
10
- });
11
- var _engines = require("../../../engines");
12
- var _ = require("../../..");
13
- var _Comboboxconfig = require("./Combobox.config");
14
- var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
15
- var ComboboxComponent = (0, _engines.component)(mergedConfig);
16
- var Combobox = ComboboxComponent;
@@ -36,8 +36,9 @@ var config = {
36
36
  ":transparent;",
37
37
  ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );",
38
38
  ":var(--text-primary);",
39
+ ":var(--text-secondary);",
39
40
  ":var(--surface-accent);"
40
- ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.buttonFocusColor),
41
+ ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.paginationHelperTextColor, _Pagination.paginationTokens.buttonFocusColor),
41
42
  secondary: (0, _styledcomponents.css)([
42
43
  "",
43
44
  ":var(--text-primary);",
@@ -56,8 +57,9 @@ var config = {
56
57
  ":var(--surface-solid-secondary);",
57
58
  ":transparent;",
58
59
  ":var(--text-primary);",
60
+ ":var(--text-secondary);",
59
61
  ":var(--surface-accent);"
60
- ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.buttonFocusColor),
62
+ ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.paginationHelperTextColor, _Pagination.paginationTokens.buttonFocusColor),
61
63
  clear: (0, _styledcomponents.css)([
62
64
  "",
63
65
  ":var(--text-primary);",
@@ -76,8 +78,9 @@ var config = {
76
78
  ":var(--surface-solid-card);",
77
79
  ":transparent;",
78
80
  ":var(--text-primary);",
81
+ ":var(--text-secondary);",
79
82
  ":var(--surface-accent);"
80
- ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.buttonFocusColor)
83
+ ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.paginationHelperTextColor, _Pagination.paginationTokens.buttonFocusColor)
81
84
  },
82
85
  viewCurrentPage: {
83
86
  default: (0, _styledcomponents.css)([
@@ -142,8 +145,9 @@ var config = {
142
145
  ":4rem;",
143
146
  ":3.5rem;",
144
147
  ":0 0.625rem;",
145
- ":0.0625rem;"
146
- ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
148
+ ":0.0625rem;",
149
+ ":0.5rem 2.5rem;"
150
+ ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap),
147
151
  m: (0, _styledcomponents.css)([
148
152
  "",
149
153
  ":var(--plasma-typo-body-m-font-family);",
@@ -177,8 +181,9 @@ var config = {
177
181
  ":3.5rem;",
178
182
  ":3rem;",
179
183
  ":0 0.625rem;",
180
- ":0.0625rem;"
181
- ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
184
+ ":0.0625rem;",
185
+ ":0.5rem 2.5rem;"
186
+ ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap),
182
187
  s: (0, _styledcomponents.css)([
183
188
  "",
184
189
  ":var(--plasma-typo-body-s-font-family);",
@@ -212,8 +217,9 @@ var config = {
212
217
  ":3rem;",
213
218
  ":2.5rem;",
214
219
  ":0 0.625rem;",
215
- ":0.0625rem;"
216
- ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
220
+ ":0.0625rem;",
221
+ ":0.5rem 2.5rem;"
222
+ ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap),
217
223
  xs: (0, _styledcomponents.css)([
218
224
  "",
219
225
  ":var(--plasma-typo-body-xs-font-family);",
@@ -247,8 +253,9 @@ var config = {
247
253
  ":2.5rem;",
248
254
  ":2rem;",
249
255
  ":0 0.625rem;",
250
- ":0.0625rem;"
251
- ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth)
256
+ ":0.0625rem;",
257
+ ":0.5rem 2.5rem;"
258
+ ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap)
252
259
  },
253
260
  type: {
254
261
  compact: (0, _styledcomponents.css)([
@@ -33,8 +33,12 @@ var config = {
33
33
  ":var(--text-accent);",
34
34
  ":0.4;",
35
35
  ":var(--text-secondary);",
36
- ":var(--text-secondary);"
37
- ], _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.arrowColor, _Treetokens.treeTokens.arrowColorHover, _Treetokens.treeTokens.arrowColorActive, _Treetokens.treeTokens.color, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.itemDisabledColor)
36
+ ":var(--text-secondary);",
37
+ ":var(--surface-positive);",
38
+ ":var(--surface-solid-default);",
39
+ ":var(--surface-positive);",
40
+ ":var(--surface-solid-default);"
41
+ ], _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.arrowColor, _Treetokens.treeTokens.arrowColorHover, _Treetokens.treeTokens.arrowColorActive, _Treetokens.treeTokens.color, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.itemDraggableLineColor, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.itemDraggableLineColor)
38
42
  },
39
43
  size: {
40
44
  l: (0, _styledcomponents.css)([
@@ -99,9 +99,10 @@ function _unsupported_iterable_to_array(o, minLen) {
99
99
  if (n === "Map" || n === "Set") return Array.from(n);
100
100
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
101
101
  }
102
- import React, { useState, forwardRef, Fragment } from "react";
102
+ import React, { useState, forwardRef, Fragment, useRef, useEffect } from "react";
103
+ import { useForkRef } from "@salutejs/plasma-core";
103
104
  import { cx, isNumber } from "../../utils";
104
- import { PaginationPages, PaginationActions, PaginationButton, PaginationSection, PaginationButtonGroup, PaginationRoot, PaginationShorter } from "./Pagination.styles";
105
+ import { PaginationPages, PaginationActions, PaginationButton, PaginationSection, PaginationButtonGroup, PaginationRoot, PaginationShorter, PaginationActionsLeft, PaginationHelperText } from "./Pagination.styles";
105
106
  import { getSections, defaultValues } from "./utils";
106
107
  import { base as viewCSS } from "./variations/_view/base";
107
108
  import { base as typeCSS } from "./variations/_type/base";
@@ -111,9 +112,11 @@ import { PaginationQuickJumpToPage } from "./ui/PaginationQuickJumpToPage/Pagina
111
112
  import { PaginationSelectPerPage } from "./ui/PaginationSelectPerPage/PaginationSelectPerPage";
112
113
  export var paginationRoot = function(Root) {
113
114
  return /*#__PURE__*/ forwardRef(function(_param, ref) {
114
- var outerValue = _param.value, defaultValue = _param.defaultValue, outerPerPage = _param.perPage, defaultPerPage = _param.defaultPerPage, _param_slots = _param.slots, slots = _param_slots === void 0 ? defaultValues.slots : _param_slots, view = _param.view, viewCurrentPage = _param.viewCurrentPage, _param_type = _param.type, type = _param_type === void 0 ? defaultValues.type : _param_type, size = _param.size, _param_pilled = _param.pilled, pilled = _param_pilled === void 0 ? defaultValues.pilled : _param_pilled, _param_square = _param.square, square = _param_square === void 0 ? defaultValues.square : _param_square, _param_disabledPages = _param.disabledPages, disabledPages = _param_disabledPages === void 0 ? defaultValues.disabledPages : _param_disabledPages, _param_count = _param.count, count = _param_count === void 0 ? defaultValues.value : _param_count, _param_hasQuickJump = _param.hasQuickJump, hasQuickJump = _param_hasQuickJump === void 0 ? defaultValues.hasQuickJump : _param_hasQuickJump, _param_hasPerPage = _param.hasPerPage, hasPerPage = _param_hasPerPage === void 0 ? defaultValues.hasPerPage : _param_hasPerPage, _param_perPageList = _param.perPageList, perPageList = _param_perPageList === void 0 ? defaultValues.perPageList : _param_perPageList, _param_isCommonButtonStyles = _param.isCommonButtonStyles, isCommonButtonStyles = _param_isCommonButtonStyles === void 0 ? defaultValues.isCommonButtonStyles : _param_isCommonButtonStyles, _param_placeholderQuickJump = _param.placeholderQuickJump, placeholderQuickJump = _param_placeholderQuickJump === void 0 ? defaultValues.placeholderQuickJump : _param_placeholderQuickJump, _param_textQuickJump = _param.textQuickJump, textQuickJump = _param_textQuickJump === void 0 ? defaultValues.textQuickJump : _param_textQuickJump, _param_textPerPage = _param.textPerPage, textPerPage = _param_textPerPage === void 0 ? defaultValues.textPerPage : _param_textPerPage, leftContent = _param.leftContent, rightContent = _param.rightContent, _param_listWidth = _param.listWidth, listWidth = _param_listWidth === void 0 ? 'fit-content' : _param_listWidth, onChangePageValue = _param.onChangePageValue, onChangePerPageValue = _param.onChangePerPageValue, onChange = _param.onChange, rest = _object_without_properties(_param, [
115
+ var outerValue = _param.value, defaultValue = _param.defaultValue, helperText = _param.helperText, singleLine = _param.singleLine, outerPerPage = _param.perPage, defaultPerPage = _param.defaultPerPage, _param_slots = _param.slots, slots = _param_slots === void 0 ? defaultValues.slots : _param_slots, view = _param.view, viewCurrentPage = _param.viewCurrentPage, _param_type = _param.type, type = _param_type === void 0 ? defaultValues.type : _param_type, size = _param.size, _param_pilled = _param.pilled, pilled = _param_pilled === void 0 ? defaultValues.pilled : _param_pilled, _param_square = _param.square, square = _param_square === void 0 ? defaultValues.square : _param_square, _param_disabledPages = _param.disabledPages, disabledPages = _param_disabledPages === void 0 ? defaultValues.disabledPages : _param_disabledPages, _param_count = _param.count, count = _param_count === void 0 ? defaultValues.value : _param_count, _param_hasQuickJump = _param.hasQuickJump, hasQuickJump = _param_hasQuickJump === void 0 ? defaultValues.hasQuickJump : _param_hasQuickJump, _param_hasPerPage = _param.hasPerPage, hasPerPage = _param_hasPerPage === void 0 ? defaultValues.hasPerPage : _param_hasPerPage, _param_perPageList = _param.perPageList, perPageList = _param_perPageList === void 0 ? defaultValues.perPageList : _param_perPageList, _param_isCommonButtonStyles = _param.isCommonButtonStyles, isCommonButtonStyles = _param_isCommonButtonStyles === void 0 ? defaultValues.isCommonButtonStyles : _param_isCommonButtonStyles, _param_placeholderQuickJump = _param.placeholderQuickJump, placeholderQuickJump = _param_placeholderQuickJump === void 0 ? defaultValues.placeholderQuickJump : _param_placeholderQuickJump, _param_textQuickJump = _param.textQuickJump, textQuickJump = _param_textQuickJump === void 0 ? defaultValues.textQuickJump : _param_textQuickJump, _param_textPerPage = _param.textPerPage, textPerPage = _param_textPerPage === void 0 ? defaultValues.textPerPage : _param_textPerPage, leftContent = _param.leftContent, rightContent = _param.rightContent, _param_listWidth = _param.listWidth, listWidth = _param_listWidth === void 0 ? 'fit-content' : _param_listWidth, onChangePageValue = _param.onChangePageValue, onChangePerPageValue = _param.onChangePerPageValue, onChange = _param.onChange, rest = _object_without_properties(_param, [
115
116
  "value",
116
117
  "defaultValue",
118
+ "helperText",
119
+ "singleLine",
117
120
  "perPage",
118
121
  "defaultPerPage",
119
122
  "slots",
@@ -143,11 +146,16 @@ export var paginationRoot = function(Root) {
143
146
  var pageValue = outerValue !== null && outerValue !== void 0 ? outerValue : pageInner;
144
147
  var _useState1 = _sliced_to_array(useState(hasPerPage ? defaultPerPage || defaultValues.perPage : undefined), 2), perPageInner = _useState1[0], setPerPageInner = _useState1[1];
145
148
  var perPageValue = outerPerPage !== null && outerPerPage !== void 0 ? outerPerPage : perPageInner;
149
+ var pagesRef = useRef(null);
150
+ var _useState2 = _sliced_to_array(useState(0), 2), pagesWidth = _useState2[0], setPagesWidth = _useState2[1];
151
+ var _useState3 = _sliced_to_array(useState(0), 2), rootWidth = _useState3[0], setRootWidth = _useState3[1];
152
+ var rootRef = useRef(null);
153
+ var forkRef = useForkRef(rootRef, ref);
146
154
  var pages = Math.ceil(count / (perPageValue || 1));
147
155
  var sections = getSections(pageValue, pages, slots);
148
156
  var typeClass = classes["".concat(type, "Type")];
149
157
  var roundedClass = pilled ? 'circle-circle' : 'square-square';
150
- var withHasPerPageSelect = hasPerPage ? classes.withHasPerPageSelect : undefined;
158
+ var withHasPerPageSelect = hasPerPage && !helperText ? classes.withHasPerPageSelect : undefined;
151
159
  var withHasQuickJump = hasQuickJump ? classes.withHasQuickJump : undefined;
152
160
  var disabled = disabledPages.map(function(el) {
153
161
  return isNumber(el) ? Number(el) : null;
@@ -185,15 +193,43 @@ export var paginationRoot = function(Root) {
185
193
  var isActiveButton = function(checkPage) {
186
194
  return pageValue === checkPage ? classes.paginationPageButtonActive : '';
187
195
  };
196
+ useEffect(function() {
197
+ var observers = [];
198
+ if (pagesRef.current) {
199
+ var pagesObserver = new ResizeObserver(function(entries) {
200
+ var newWidth = entries[0].contentRect.width;
201
+ setPagesWidth(newWidth);
202
+ });
203
+ pagesObserver.observe(pagesRef.current);
204
+ observers.push(pagesObserver);
205
+ }
206
+ if (rootRef.current) {
207
+ var rootObserver = new ResizeObserver(function(entries) {
208
+ var newWidth = entries[0].contentRect.width;
209
+ setRootWidth(newWidth);
210
+ });
211
+ rootObserver.observe(rootRef.current);
212
+ observers.push(rootObserver);
213
+ }
214
+ return function() {
215
+ observers.forEach(function(observer) {
216
+ return observer.disconnect();
217
+ });
218
+ };
219
+ }, [
220
+ type
221
+ ]);
188
222
  return /*#__PURE__*/ React.createElement(Root, _object_spread({
189
223
  size: size,
190
224
  view: view,
191
225
  viewCurrentPage: viewCurrentPage,
192
226
  className: cx(classes.wrapper, typeClass),
193
- ref: ref
227
+ ref: forkRef
194
228
  }, rest), /*#__PURE__*/ React.createElement(PaginationRoot, {
195
229
  className: typeClass
196
- }, /*#__PURE__*/ React.createElement(PaginationPages, null, leftContent && /*#__PURE__*/ React.createElement(PaginationButtonGroup, {
230
+ }, /*#__PURE__*/ React.createElement(PaginationPages, {
231
+ ref: pagesRef
232
+ }, leftContent && /*#__PURE__*/ React.createElement(PaginationButtonGroup, {
197
233
  isCommonButtonStyles: isCommonButtonStyles
198
234
  }, leftContent), sections && sections.map(function(section, indexSection) {
199
235
  return /*#__PURE__*/ React.createElement(Fragment, {
@@ -217,12 +253,24 @@ export var paginationRoot = function(Root) {
217
253
  }), rightContent && /*#__PURE__*/ React.createElement(PaginationButtonGroup, {
218
254
  isCommonButtonStyles: isCommonButtonStyles
219
255
  }, rightContent)), /*#__PURE__*/ React.createElement(PaginationActions, {
256
+ style: type === 'compact' ? {
257
+ minWidth: '0px'
258
+ } : {
259
+ width: "calc(100% - ".concat(pagesWidth, "px)")
260
+ },
220
261
  className: cx(classes.actions, typeClass, withHasPerPageSelect, withHasQuickJump)
262
+ }, /*#__PURE__*/ React.createElement(PaginationActionsLeft, {
263
+ className: typeClass
221
264
  }, hasQuickJump && /*#__PURE__*/ React.createElement(PaginationQuickJumpToPage, {
222
265
  placeholderQuickJump: placeholderQuickJump,
223
266
  textQuickJump: textQuickJump,
224
267
  onChangeValue: handleSetPage
225
- }), hasPerPage && /*#__PURE__*/ React.createElement(PaginationSelectPerPage, {
268
+ }), helperText && /*#__PURE__*/ React.createElement(PaginationHelperText, {
269
+ className: cx(typeClass, singleLine ? classes.ellipsisText : ''),
270
+ style: {
271
+ maxWidth: rootWidth
272
+ }
273
+ }, helperText)), hasPerPage && /*#__PURE__*/ React.createElement(PaginationSelectPerPage, {
226
274
  textPerPage: textPerPage,
227
275
  perPageValue: perPageValue,
228
276
  perPageList: perPageList,
@@ -2,7 +2,7 @@ import styled from "styled-components";
2
2
  import { buttonConfig, buttonTokens } from "../Button";
3
3
  import { buttonGroupConfig, buttonGroupTokens } from "../ButtonGroup";
4
4
  import { component, mergeConfig } from "../../engines";
5
- import { addFocus } from "../../mixins";
5
+ import { addFocus, applyEllipsis } from "../../mixins";
6
6
  import { classes, tokens } from "./Pagination.tokens";
7
7
  var mergedButtonConfig = mergeConfig(buttonConfig);
8
8
  var Button = component(mergedButtonConfig);
@@ -10,37 +10,39 @@ var mergedButtonGroupConfig = mergeConfig(buttonGroupConfig);
10
10
  var ButtonGroup = component(mergedButtonGroupConfig);
11
11
  export var PaginationRoot = styled.div.withConfig({
12
12
  displayName: "Pagination.styles__PaginationRoot",
13
- componentId: "sc-123175d4-0"
13
+ componentId: "sc-ec0762a3-0"
14
14
  })([
15
15
  "display:flex;color:var(",
16
16
  ");&.",
17
- "{display:flex;flex-direction:column;gap:0.5rem;}&.",
18
- "{display:flex;justify-content:space-between;flex:0 0 100%;gap:1rem;flex-wrap:wrap;}"
17
+ "{flex-direction:column;gap:0.5rem;justify-content:flex-start;}&.",
18
+ "{width:100%;justify-content:space-between;flex:0 0 100%;gap:1rem;flex-wrap:nowrap;}"
19
19
  ], tokens.paginationColor, classes.compactType, classes.defaultType);
20
20
  export var PaginationPages = styled.div.withConfig({
21
21
  displayName: "Pagination.styles__PaginationPages",
22
- componentId: "sc-123175d4-1"
22
+ componentId: "sc-ec0762a3-1"
23
23
  })([
24
- "display:flex;align-items:center;gap:0.25rem;margin:0 auto;"
24
+ "display:flex;align-items:center;gap:0.25rem;flex-shrink:0;"
25
25
  ]);
26
26
  export var PaginationActions = styled.div.withConfig({
27
27
  displayName: "Pagination.styles__PaginationActions",
28
- componentId: "sc-123175d4-2"
28
+ componentId: "sc-ec0762a3-2"
29
29
  })([
30
- "display:flex;justify-content:space-between;flex-grow:1;gap:0.625rem;&.",
30
+ "display:flex;justify-content:space-between;flex-grow:1;align-items:center;gap:var(",
31
+ ");flex-shrink:1;&.",
32
+ "{flex-direction:row;width:100%;flex-wrap:wrap;}&.",
31
33
  "{flex-direction:row;}&.",
32
34
  "{flex-direction:row-reverse;}&.",
33
35
  "{flex-direction:row;}"
34
- ], classes.compactType, classes.withHasPerPageSelect, classes.withHasQuickJump);
36
+ ], tokens.paginationHelperTextGap, classes.compactType, classes.defaultType, classes.withHasPerPageSelect, classes.withHasQuickJump);
35
37
  export var PaginationSection = styled.div.withConfig({
36
38
  displayName: "Pagination.styles__PaginationSection",
37
- componentId: "sc-123175d4-3"
39
+ componentId: "sc-ec0762a3-3"
38
40
  })([
39
41
  "display:flex;gap:0.125rem;"
40
42
  ]);
41
43
  export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
42
44
  displayName: "Pagination.styles__PaginationButtonGroup",
43
- componentId: "sc-123175d4-4"
45
+ componentId: "sc-ec0762a3-4"
44
46
  })([
45
47
  "",
46
48
  ":var(",
@@ -82,7 +84,7 @@ export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
82
84
  ], buttonGroupTokens.buttonColor, tokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, tokens.buttonHoverColor, buttonGroupTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, tokens.buttonActiveColor, buttonGroupTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonGroupTokens.buttonFontFamily, tokens.paginationFontFamily, buttonGroupTokens.buttonFontSize, tokens.paginationFontSize, buttonGroupTokens.buttonFontStyle, tokens.paginationFontStyle, buttonGroupTokens.buttonFontWeight, tokens.paginationFontWeight, buttonGroupTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonGroupTokens.buttonLineHeight, tokens.paginationLineHeight, buttonGroupTokens.buttonWidth, tokens.buttonWidth, buttonGroupTokens.buttonHeight, tokens.buttonHeight, buttonGroupTokens.buttonDefaultRadius, tokens.buttonRadius, buttonGroupTokens.buttonSideRadius, tokens.buttonRadius, buttonGroupTokens.buttonSegmentedRadius, tokens.buttonRadius, buttonGroupTokens.buttonRadiusCircle, tokens.buttonRadius);
83
85
  export var PaginationButton = styled(Button).withConfig({
84
86
  displayName: "Pagination.styles__PaginationButton",
85
- componentId: "sc-123175d4-5"
87
+ componentId: "sc-ec0762a3-5"
86
88
  })([
87
89
  "",
88
90
  ":var(",
@@ -148,10 +150,29 @@ export var PaginationButton = styled(Button).withConfig({
148
150
  }));
149
151
  export var PaginationShorter = styled(PaginationButton).withConfig({
150
152
  displayName: "Pagination.styles__PaginationShorter",
151
- componentId: "sc-123175d4-6"
153
+ componentId: "sc-ec0762a3-6"
152
154
  })([
153
155
  "",
154
156
  ":var(",
155
157
  ");",
156
158
  ":0;"
157
159
  ], buttonTokens.buttonWidth, tokens.buttonWidthShorter, buttonTokens.buttonPadding);
160
+ export var PaginationActionsLeft = styled.div.withConfig({
161
+ displayName: "Pagination.styles__PaginationActionsLeft",
162
+ componentId: "sc-ec0762a3-7"
163
+ })([
164
+ "display:flex;align-items:center;flex-wrap:wrap;gap:var(",
165
+ ");.",
166
+ " &{min-width:0;flex-wrap:nowrap;flex-shrink:1;}"
167
+ ], tokens.paginationHelperTextGap, classes.defaultType);
168
+ export var PaginationHelperText = styled.div.withConfig({
169
+ displayName: "Pagination.styles__PaginationHelperText",
170
+ componentId: "sc-ec0762a3-8"
171
+ })([
172
+ "color:var(",
173
+ ");&.",
174
+ "{min-width:0;",
175
+ " flex-shrink:1;}&.",
176
+ "{",
177
+ "}"
178
+ ], tokens.paginationHelperTextColor, classes.defaultType, applyEllipsis(), classes.ellipsisText, applyEllipsis());
@@ -4,6 +4,7 @@ export var classes = {
4
4
  actions: 'pagination-actions',
5
5
  perPage: 'pagination-perpage-select',
6
6
  quickJump: 'pagination-quick-jump-page',
7
+ ellipsisText: 'pagination-ellipsis-text',
7
8
  selectWrapper: 'pagination-select-wrapper',
8
9
  defaultType: 'pagination-type-default',
9
10
  compactType: 'pagination-type-compact',
@@ -17,6 +18,8 @@ export var classes = {
17
18
  export var tokens = {
18
19
  paginationWidth: '--plasma-pagination-width',
19
20
  paginationColor: '--plasma-pagination-color',
21
+ paginationHelperTextColor: '--plasma-pagination-helper-text-color',
22
+ paginationHelperTextGap: '--plasma-pagination-helper-text-gap',
20
23
  buttonBackgroundColor: '--plasma-pagination-button-bg-color',
21
24
  buttonBackgroundColorHover: '--plasma-pagination-button-bg-color-hover',
22
25
  buttonBackgroundColorActive: '--plasma-pagination-button-bg-color-active',
@@ -2,9 +2,9 @@ import styled from "styled-components";
2
2
  import { tokens } from "../../Pagination.tokens";
3
3
  export var QuickJumpToPageRoot = styled.div.withConfig({
4
4
  displayName: "PaginationQuickJumpToPage.styles__QuickJumpToPageRoot",
5
- componentId: "sc-baf7e727-0"
5
+ componentId: "sc-d437c7e1-0"
6
6
  })([
7
- "display:flex;align-items:center;gap:0.5rem;font-family:var(",
7
+ "display:flex;align-items:center;gap:0.5rem;flex-shrink:0;font-family:var(",
8
8
  ");font-size:var(",
9
9
  ");font-style:var(",
10
10
  ");font-weight:var(",
@@ -14,13 +14,13 @@ export var QuickJumpToPageRoot = styled.div.withConfig({
14
14
  ], tokens.paginationFontFamily, tokens.paginationFontSize, tokens.paginationFontStyle, tokens.paginationFontWeight, tokens.paginationLetterSpacing, tokens.paginationLineHeight);
15
15
  export var QuickJumpToPageTypography = styled.div.withConfig({
16
16
  displayName: "PaginationQuickJumpToPage.styles__QuickJumpToPageTypography",
17
- componentId: "sc-baf7e727-1"
17
+ componentId: "sc-d437c7e1-1"
18
18
  })([
19
- ""
19
+ "white-space:nowrap;"
20
20
  ]);
21
21
  export var QuickJumpToPageInput = styled.input.withConfig({
22
22
  displayName: "PaginationQuickJumpToPage.styles__QuickJumpToPageInput",
23
- componentId: "sc-baf7e727-2"
23
+ componentId: "sc-d437c7e1-2"
24
24
  })([
25
25
  "background:var(",
26
26
  ");color:var(",