@reportportal/ui-kit 0.0.1-alpha.9 → 0.0.1-alpha.90

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 (156) hide show
  1. package/README.md +70 -12
  2. package/dist/arrowUp-4a5caee7.js +6 -0
  3. package/dist/baseIconButton-251479f7.js +25 -0
  4. package/dist/baseIconButton.js +1 -1
  5. package/dist/breadcrumbs-8e5ca8d7.js +183 -0
  6. package/dist/breadcrumbs.js +11 -0
  7. package/dist/button-97d9e587.js +66 -0
  8. package/dist/button.js +1 -1
  9. package/dist/calendarArrow-44c7e60e.js +5 -0
  10. package/dist/checkbox-ed6cc375.js +73 -0
  11. package/dist/checkbox.js +1 -1
  12. package/dist/close-4d480ef7.js +5 -0
  13. package/dist/common/hooks/useOnClickOutside.d.ts +1 -0
  14. package/dist/common/types.d.ts +3 -0
  15. package/dist/components/{icons/baseIconButton → baseIconButton}/baseIconButton.d.ts +1 -0
  16. package/dist/components/{icons/baseIconButton → baseIconButton}/index.d.ts +1 -0
  17. package/dist/components/breadcrumbs/breadcrumb/breadcrumb.d.ts +10 -0
  18. package/dist/components/breadcrumbs/breadcrumb/index.d.ts +1 -0
  19. package/dist/components/breadcrumbs/breadcrumbs.d.ts +3 -0
  20. package/dist/components/breadcrumbs/breadcrumbsProvider/breadcrumbsProvider.d.ts +13 -0
  21. package/dist/components/breadcrumbs/breadcrumbsProvider/hooks.d.ts +3 -0
  22. package/dist/components/breadcrumbs/breadcrumbsProvider/index.d.ts +1 -0
  23. package/dist/components/breadcrumbs/hiddenBreadcrumbs/hiddenBreadcrumbs.d.ts +6 -0
  24. package/dist/components/breadcrumbs/hiddenBreadcrumbs/index.d.ts +2 -0
  25. package/dist/components/breadcrumbs/index.d.ts +5 -0
  26. package/dist/components/breadcrumbs/tree/index.d.ts +1 -0
  27. package/dist/components/breadcrumbs/tree/tree.d.ts +7 -0
  28. package/dist/components/breadcrumbs/types.d.ts +24 -0
  29. package/dist/components/bubblesLoader/bubblesLoader.d.ts +1 -0
  30. package/dist/components/bubblesLoader/index.d.ts +1 -0
  31. package/dist/components/button/button.d.ts +5 -4
  32. package/dist/components/button/index.d.ts +1 -0
  33. package/dist/components/checkbox/checkbox.d.ts +3 -1
  34. package/dist/components/checkbox/index.d.ts +1 -0
  35. package/dist/components/datePicker/datePicker.d.ts +25 -0
  36. package/dist/components/datePicker/header/datePickerHeader.d.ts +16 -0
  37. package/dist/components/datePicker/header/index.d.ts +4 -0
  38. package/dist/components/datePicker/index.d.ts +5 -0
  39. package/dist/components/datePicker/utils.d.ts +4 -0
  40. package/dist/components/dropdown/constants.d.ts +1 -0
  41. package/dist/components/dropdown/dropdown.d.ts +13 -4
  42. package/dist/components/dropdown/dropdownOption/dropdownOption.d.ts +1 -0
  43. package/dist/components/dropdown/dropdownOption/index.d.ts +1 -0
  44. package/dist/components/dropdown/index.d.ts +1 -0
  45. package/dist/components/dropdown/types.d.ts +3 -0
  46. package/dist/components/dropdown/utils.d.ts +2 -1
  47. package/dist/components/fieldLabel/fieldLabel.d.ts +7 -0
  48. package/dist/components/fieldLabel/index.d.ts +1 -0
  49. package/dist/components/fieldNumber/constants.d.ts +1 -0
  50. package/dist/components/fieldNumber/fieldNumber.d.ts +3 -3
  51. package/dist/components/fieldNumber/index.d.ts +1 -0
  52. package/dist/components/fieldText/fieldText.d.ts +12 -4
  53. package/dist/components/fieldText/index.d.ts +1 -0
  54. package/dist/components/fieldTextFlex/fieldTextFlex.d.ts +4 -2
  55. package/dist/components/fieldTextFlex/index.d.ts +1 -0
  56. package/dist/components/icons/index.d.ts +46 -7
  57. package/dist/components/index.d.ts +7 -0
  58. package/dist/components/maxValueDisplay/index.d.ts +4 -0
  59. package/dist/components/maxValueDisplay/maxValueDisplay.d.ts +8 -0
  60. package/dist/components/maxValueDisplay/utils/index.d.ts +1 -0
  61. package/dist/components/maxValueDisplay/utils/isPositiveInteger.d.ts +1 -0
  62. package/dist/components/modal/modal.d.ts +5 -2
  63. package/dist/components/modal/modalContent/modalContent.d.ts +2 -0
  64. package/dist/components/modal/modalFooter/modalFooter.d.ts +1 -0
  65. package/dist/components/modal/modalHeader/modalHeader.d.ts +2 -1
  66. package/dist/components/pagination/index.d.ts +1 -0
  67. package/dist/components/pagination/itemsCounter/itemCounter.d.ts +1 -0
  68. package/dist/components/pagination/pageControls/activePage/activePage.d.ts +1 -0
  69. package/dist/components/pagination/pageControls/activePage/pageSelector/pageSelector.d.ts +1 -0
  70. package/dist/components/pagination/pageControls/pageControls.d.ts +1 -0
  71. package/dist/components/pagination/pageControls/pageNavigator/bar/bar.d.ts +12 -0
  72. package/dist/components/pagination/pageControls/pageNavigator/bar/index.d.ts +1 -0
  73. package/dist/components/pagination/pageControls/pageNavigator/pageNavigator.d.ts +4 -0
  74. package/dist/components/pagination/pageSizeControl/pageSizeControl.d.ts +1 -0
  75. package/dist/components/pagination/pageSizeControl/sizeSelector/sizeSelector.d.ts +1 -0
  76. package/dist/components/pagination/pagination.d.ts +1 -0
  77. package/dist/components/popover/index.d.ts +4 -1
  78. package/dist/components/popover/popover.d.ts +3 -2
  79. package/dist/components/radio/index.d.ts +1 -0
  80. package/dist/components/radio/radio.d.ts +1 -0
  81. package/dist/components/radio/radioGroup.d.ts +1 -0
  82. package/dist/components/selection/index.d.ts +5 -0
  83. package/dist/components/selection/selection.d.ts +12 -0
  84. package/dist/components/selection/types.d.ts +1 -0
  85. package/dist/components/spinLoader/index.d.ts +4 -0
  86. package/dist/components/spinLoader/spinLoader.d.ts +8 -0
  87. package/dist/components/systemAlert/index.d.ts +1 -0
  88. package/dist/components/systemAlert/systemAlert.d.ts +4 -0
  89. package/dist/components/systemAlert/types.d.ts +16 -0
  90. package/dist/components/systemMessage/index.d.ts +1 -0
  91. package/dist/components/systemMessage/systemMessage.d.ts +1 -0
  92. package/dist/components/table/constants.d.ts +2 -0
  93. package/dist/components/table/index.d.ts +1 -0
  94. package/dist/components/table/table.d.ts +1 -0
  95. package/dist/components/table/types.d.ts +13 -7
  96. package/dist/components/table/utils.d.ts +5 -1
  97. package/dist/components/themeProvider/index.d.ts +1 -0
  98. package/dist/components/themeProvider/themeProvider.d.ts +1 -0
  99. package/dist/components/toggle/index.d.ts +1 -0
  100. package/dist/components/toggle/toggle.d.ts +1 -0
  101. package/dist/components/tooltip/tooltip.d.ts +12 -2
  102. package/dist/datePicker-f8747600.js +196 -0
  103. package/dist/datePicker.js +28 -0
  104. package/dist/dropdown-0260bb66.js +5 -0
  105. package/dist/dropdown-b26b8fd8.js +282 -0
  106. package/dist/dropdown.js +5 -2
  107. package/dist/fieldLabel.js +18 -0
  108. package/dist/fieldNumber-c9113a7f.js +135 -0
  109. package/dist/fieldNumber.js +4 -2
  110. package/dist/fieldText-35421470.js +166 -0
  111. package/dist/fieldText.js +6 -2
  112. package/dist/fieldTextFlex-8afaab31.js +78 -0
  113. package/dist/fieldTextFlex.js +3 -1
  114. package/dist/fonts/OpenSans/OpenSans-Bold.ttf +0 -0
  115. package/dist/fonts/OpenSans/OpenSans-Medium.ttf +0 -0
  116. package/dist/icons.js +64 -0
  117. package/dist/index.js +110 -44
  118. package/dist/maxValueDisplay-9be01a75.js +13 -0
  119. package/dist/maxValueDisplay.js +6 -0
  120. package/dist/modal.js +144 -14
  121. package/dist/openEye-7b9cf080.js +7 -0
  122. package/dist/pagination-b001d791.js +347 -0
  123. package/dist/pagination.js +11 -4
  124. package/dist/plus-0929dda4.js +6 -0
  125. package/dist/popover.js +61 -57
  126. package/dist/prevPage-87faf576.js +6 -0
  127. package/dist/radio-62546efa.js +76 -0
  128. package/dist/radio.js +1 -1
  129. package/dist/selection-9124d029.js +38 -0
  130. package/dist/selection.js +10 -0
  131. package/dist/spinLoader-c4a53718.js +11 -0
  132. package/dist/spinLoader.js +7 -0
  133. package/dist/style.css +1 -1
  134. package/dist/success-8fd8bd2c.js +7 -0
  135. package/dist/systemAlert.js +63 -0
  136. package/dist/systemMessage-924fdaa6.js +30 -0
  137. package/dist/systemMessage.js +1 -1
  138. package/dist/table-920fdad9.js +142 -0
  139. package/dist/table.js +11 -0
  140. package/dist/toggle-304107fa.js +59 -0
  141. package/dist/toggle.js +1 -1
  142. package/dist/tooltip.js +87 -56
  143. package/dist/tree-c3dd3d45.js +6 -0
  144. package/package.json +28 -16
  145. package/dist/baseIconButton-7bc53dec.js +0 -25
  146. package/dist/button-7fb84fde.js +0 -62
  147. package/dist/checkbox-4143390f.js +0 -70
  148. package/dist/dropdown-e07f2a71.js +0 -212
  149. package/dist/fieldNumber-46fe79b9.js +0 -127
  150. package/dist/fieldText-d80b29ba.js +0 -102
  151. package/dist/fieldTextFlex-5bddf46a.js +0 -67
  152. package/dist/index-bb9b62ef.js +0 -131
  153. package/dist/pagination-a36bc786.js +0 -274
  154. package/dist/radio-fd49a09c.js +0 -76
  155. package/dist/systemMessage-1ced6079.js +0 -30
  156. package/dist/toggle-707ecb74.js +0 -67
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  This library is designed to reflect [ReportPortal Design System](https://www.figma.com/file/gjYQPbeyf4YsH3wZiVKoaj/RP-DS-6) components as React components.
4
4
 
5
+ **alpha versions available**
6
+
5
7
  ## Installation
6
8
 
7
9
  Install the package into your project using your favourite package manager:
@@ -43,7 +45,7 @@ const MyComponent = () => (
43
45
 
44
46
  ### Theming
45
47
 
46
- All components are provided with the `light'` theme by default.
48
+ All components are provided with the `light` theme by default.
47
49
  To use the `dark` theme, you need to wrap your application with the `ThemeProvider` component and pass the `dark` theme as a prop:
48
50
 
49
51
  ```jsx
@@ -112,7 +114,7 @@ To see a published showcase of the latest components released with its API and u
112
114
 
113
115
  ### Icons
114
116
 
115
- The library provides a set of SVG icons and the `BaseIconButton` component to apply basic styles for hover, disabled and others to them.
117
+ The library provides a set of SVG icons and the `BaseIconButton` component to apply basic styles for hover, disabled and other states to them.
116
118
 
117
119
  The list of available icons can be found in the [icons](./src/components/icons/svg) folder.
118
120
 
@@ -150,14 +152,7 @@ const MyComponent = () => {
150
152
 
151
153
  `BaseIconButton` supports all the props of the `button` HTML element.
152
154
 
153
- ## Build process
154
-
155
- We use [vite](https://vitejs.dev/) as a build tool.
156
-
157
- To build the library run
158
- ```console
159
- npm run build
160
- ```
155
+ **Note:** To support styling via `BaseIconButton`, it is recommended to use *path-based*, *single-color* SVG icons.
161
156
 
162
157
  ## Development
163
158
 
@@ -170,11 +165,48 @@ To run it locally use
170
165
  npm run start
171
166
  ```
172
167
 
173
- To create a ready-to-deploy version of the Storybook run
168
+ To create a ready-to-deploy version of the Storybook, run
174
169
  ```console
175
170
  npm run build:storybook
176
171
  ```
177
172
 
173
+ ### Build process
174
+
175
+ We use [vite](https://vitejs.dev/) as a build tool.
176
+
177
+ To build the library run
178
+ ```console
179
+ npm run build
180
+ ```
181
+
182
+ ### Storybook showcase deploy
183
+
184
+ While the library is in alpha, the showcase hosted on [GitHub Pages](https://reportportal.io/ui-kit/) should be updated based on changes from the `develop` branch.
185
+
186
+ #### Deployment steps
187
+
188
+ 1. Navigate to the "Actions" page within the [repository](https://github.com/reportportal/ui-kit/actions).
189
+ 2. Choose the "Deploy dev storybook showcase" action from list of available workflows.
190
+ 3. Click "Run workflow" button on the right and select the `develop` branch.
191
+ 4. Wait for the deployment process to complete. The progress can be tracked on the "Actions" page.
192
+ 5. Once the deployment is finished, verify that the changes have been deployed correctly, visiting [GitHub Pages](https://reportportal.io/ui-kit/).
193
+
194
+ That's it! If you encounter any issues during the deployment process, please consult the documentation or reach out to the project maintainers for assistance.
195
+
196
+ ### Release
197
+
198
+ While the library is in alpha, the [NPM package](https://www.npmjs.com/package/@reportportal/ui-kit) should be built and published from the `develop` branch with `alpha` tag.
199
+
200
+ #### Release steps
201
+
202
+ 1. Navigate to the "Actions" page within the [repository](https://github.com/reportportal/ui-kit/actions).
203
+ 2. Choose the "Publish dev package version" action from list of available workflows.
204
+ 3. Click "Run workflow" button on the right and select the `develop` branch.
205
+ 4. Wait for the publishing process to complete. The progress can be tracked on the "Actions" page.
206
+ 5. Once the publishing is finished, verify that the changes have been published correctly, visiting [NPM registry](https://www.npmjs.com/package/@reportportal/ui-kit?activeTab=versions).
207
+
208
+ That's it! If you encounter any issues during the release process, please consult the documentation or reach out to the project maintainers for assistance.
209
+
178
210
  ### Code style
179
211
 
180
212
  We follow the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) and use [ESLint](https://eslint.org/) to enforce it.
@@ -202,4 +234,30 @@ The CSS custom properties that come from DS are prefixed with `rp-ui-base` to av
202
234
 
203
235
  ### Testing
204
236
 
205
- To be provided.
237
+ Each new component/hook/utility **must be** covered by unit/component tests.
238
+ All existing uncovered stuff will be tested gradually in the scope of tech-debt elimination activities.
239
+
240
+ #### Testing Tools
241
+
242
+ The project uses the following testing tools:
243
+ - **Vitest**: Fast testing framework, compatible with Vite
244
+ - **React Testing Library**: For testing React components with a focus on user interactions
245
+ - **@testing-library/user-event**: For simulating user events in tests
246
+ - **JSDOM**: For simulating a DOM environment in Node.js
247
+ - **@vitest/coverage-v8**: For code coverage reporting
248
+
249
+ #### Test Scripts
250
+
251
+ Available npm scripts for testing:
252
+ - `npm run test` - Run tests in watch mode
253
+ - `npm run test:coverage` - Run tests with coverage report
254
+ - `npm run test:ci` - Run tests once (for CI environments)
255
+ - `npm run test:ui` - Run tests with UI interface
256
+
257
+ #### Test Coverage
258
+
259
+ The project maintains a minimum of 80% test coverage threshold for:
260
+ - Statements
261
+ - Branches
262
+ - Functions
263
+ - Lines
@@ -0,0 +1,6 @@
1
+ import * as e from "react";
2
+ const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L4.14645 9.85355C3.95118 9.65829 3.95118 9.34171 4.14645 9.14645C4.34171 8.95118 4.65829 8.95118 4.85355 9.14645L7 11.2929L7 3.5C7 3.22386 7.22386 3 7.5 3C7.77614 3 8 3.22386 8 3.5L8 11.2929L10.1464 9.14645C10.3417 8.95119 10.6583 8.95118 10.8536 9.14645C11.0488 9.34171 11.0488 9.65829 10.8536 9.85355L7.85355 12.8536Z", fill: "#A2AAB5" })), o = (l) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L10.8536 6.14645C11.0488 6.34171 11.0488 6.65829 10.8536 6.85355C10.6583 7.04882 10.3417 7.04882 10.1464 6.85355L8 4.70711V12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 4.70711L4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355C3.95118 6.65829 3.95118 6.34171 4.14645 6.14645L7.14645 3.14645Z", fill: "#A2AAB5" }));
3
+ export {
4
+ t as S,
5
+ o as a
6
+ };
@@ -0,0 +1,25 @@
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { c as e } from "./bind-06a7ff84.js";
3
+ const b = "_disabled_1q88n_12", i = {
4
+ "base-icon-button": "_base-icon-button_1q88n_1",
5
+ disabled: b
6
+ }, l = e.bind(i), _ = ({
7
+ children: t,
8
+ className: o,
9
+ disabled: s = !1,
10
+ onClick: n,
11
+ ...a
12
+ }) => /* @__PURE__ */ c(
13
+ "button",
14
+ {
15
+ className: l("base-icon-button", o, { disabled: s }),
16
+ type: "button",
17
+ disabled: s,
18
+ onClick: n,
19
+ ...a,
20
+ children: t
21
+ }
22
+ );
23
+ export {
24
+ _ as B
25
+ };
@@ -1,4 +1,4 @@
1
- import { B as t } from "./baseIconButton-7bc53dec.js";
1
+ import { B as t } from "./baseIconButton-251479f7.js";
2
2
  import "react/jsx-runtime";
3
3
  import "./bind-06a7ff84.js";
4
4
  export {
@@ -0,0 +1,183 @@
1
+ import { jsx as e, jsxs as p, Fragment as y } from "react/jsx-runtime";
2
+ import { c as h } from "./bind-06a7ff84.js";
3
+ import { createContext as T, useContext as w, useRef as P, useState as g, useEffect as D } from "react";
4
+ import { Popover as N } from "./popover.js";
5
+ import { S as O, a as E } from "./tree-c3dd3d45.js";
6
+ const B = T(void 0), H = ({ children: l, LinkComponent: r }) => /* @__PURE__ */ e(B.Provider, { value: { LinkComponent: r }, children: l }), M = () => {
7
+ const l = w(B);
8
+ if (l === void 0)
9
+ throw new Error("useBreadcrumbsContext must be used within a BreadcrumbsProvider");
10
+ return l;
11
+ }, R = "_breadcrumb_1cva8_1", W = "_link_1cva8_5", j = "_dark_1cva8_30", I = {
12
+ breadcrumb: R,
13
+ link: W,
14
+ "breadcrumb-text": "_breadcrumb-text_1cva8_10",
15
+ dark: j
16
+ }, v = h.bind(I), u = ({
17
+ titleTailNumChars: l = 8,
18
+ descriptor: { title: r, link: t, onClick: c },
19
+ isClickable: k = !0,
20
+ variant: _ = "default"
21
+ }) => {
22
+ const { LinkComponent: s } = M(), i = P(null), [m, b] = g(null);
23
+ D(() => {
24
+ if (i.current) {
25
+ const { offsetWidth: a, scrollWidth: $, dataset: S } = i.current;
26
+ if (a < $) {
27
+ const x = typeof r == "string" ? r : "";
28
+ S.tail = x.slice(x.length - l), b(x);
29
+ }
30
+ }
31
+ }, [r, l]);
32
+ const n = /* @__PURE__ */ e("div", { ref: i, className: v("breadcrumb-text", _), children: r });
33
+ return /* @__PURE__ */ e(
34
+ "div",
35
+ {
36
+ className: v("breadcrumb", _),
37
+ title: m || void 0,
38
+ "data-testid": "breadcrumb",
39
+ children: k ? s && t ? /* @__PURE__ */ e(s, { className: v("link"), to: t, onClick: c, children: n }) : t ? /* @__PURE__ */ e("a", { className: v("link"), href: typeof t == "string" ? t : "#", onClick: c, children: n }) : /* @__PURE__ */ e("button", { type: "button", className: v("link"), onClick: c, children: n }) : n
40
+ }
41
+ );
42
+ }, F = {
43
+ "hidden-breadcrumbs-trigger": "_hidden-breadcrumbs-trigger_14kki_1",
44
+ "hidden-breadcrumbs-content": "_hidden-breadcrumbs-content_14kki_8",
45
+ "hidden-breadcrumb-item": "_hidden-breadcrumb-item_14kki_14",
46
+ "level-2": "_level-2_14kki_18",
47
+ "level-3": "_level-3_14kki_31",
48
+ "level-4": "_level-4_14kki_44",
49
+ "level-5": "_level-5_14kki_57",
50
+ "level-6": "_level-6_14kki_70",
51
+ "level-7": "_level-7_14kki_83",
52
+ "level-8": "_level-8_14kki_96",
53
+ "level-9": "_level-9_14kki_109",
54
+ "level-10": "_level-10_14kki_122",
55
+ "level-11": "_level-11_14kki_135",
56
+ "level-12": "_level-12_14kki_148",
57
+ "level-13": "_level-13_14kki_161",
58
+ "level-14": "_level-14_14kki_174",
59
+ "level-15": "_level-15_14kki_187",
60
+ "level-16": "_level-16_14kki_200",
61
+ "level-17": "_level-17_14kki_213",
62
+ "level-18": "_level-18_14kki_226",
63
+ "level-19": "_level-19_14kki_239",
64
+ "level-20": "_level-20_14kki_252",
65
+ "level-21": "_level-21_14kki_265",
66
+ "level-22": "_level-22_14kki_278",
67
+ "level-23": "_level-23_14kki_291",
68
+ "level-24": "_level-24_14kki_304",
69
+ "level-25": "_level-25_14kki_317"
70
+ }, z = h.bind(F), L = ({ descriptors: l }) => /* @__PURE__ */ e("div", { className: z("hidden-breadcrumbs-content"), "data-testid": "hidden-breadcrumbs-content", children: l.map((r, t) => /* @__PURE__ */ e("div", { className: z("hidden-breadcrumb-item", `level-${t + 1}`), children: /* @__PURE__ */ e(u, { descriptor: r }) }, t)) }), X = ({ descriptors: l }) => /* @__PURE__ */ e(
71
+ N,
72
+ {
73
+ content: /* @__PURE__ */ e(L, { descriptors: l }),
74
+ placement: "bottom-start",
75
+ children: /* @__PURE__ */ e("div", { className: z("hidden-breadcrumbs-trigger"), "data-testid": "hidden-breadcrumbs-trigger", children: /* @__PURE__ */ e(O, {}) })
76
+ }
77
+ ), q = "_opened_zxn5r_1", A = {
78
+ "tree-button": "_tree-button_zxn5r_1",
79
+ opened: q,
80
+ "tree-menu-node": "_tree-menu-node_zxn5r_8",
81
+ "tree-menu-children": "_tree-menu-children_zxn5r_9",
82
+ "tree-menu-item": "_tree-menu-item_zxn5r_15",
83
+ "level-2": "_level-2_zxn5r_19",
84
+ "level-3": "_level-3_zxn5r_32",
85
+ "level-4": "_level-4_zxn5r_45",
86
+ "level-5": "_level-5_zxn5r_58",
87
+ "level-6": "_level-6_zxn5r_71",
88
+ "level-7": "_level-7_zxn5r_84",
89
+ "level-8": "_level-8_zxn5r_97",
90
+ "level-9": "_level-9_zxn5r_110",
91
+ "level-10": "_level-10_zxn5r_123",
92
+ "level-11": "_level-11_zxn5r_136",
93
+ "level-12": "_level-12_zxn5r_149",
94
+ "level-13": "_level-13_zxn5r_162",
95
+ "level-14": "_level-14_zxn5r_175",
96
+ "level-15": "_level-15_zxn5r_188",
97
+ "level-16": "_level-16_zxn5r_201",
98
+ "level-17": "_level-17_zxn5r_214",
99
+ "level-18": "_level-18_zxn5r_227",
100
+ "level-19": "_level-19_zxn5r_240",
101
+ "level-20": "_level-20_zxn5r_253",
102
+ "level-21": "_level-21_zxn5r_266",
103
+ "level-22": "_level-22_zxn5r_279",
104
+ "level-23": "_level-23_zxn5r_292",
105
+ "level-24": "_level-24_zxn5r_305",
106
+ "level-25": "_level-25_zxn5r_318"
107
+ }, o = h.bind(A), G = ({ descriptor: l, level: r }) => /* @__PURE__ */ e("div", { className: o("tree-menu-item", `level-${r}`), children: /* @__PURE__ */ e(u, { descriptor: l, variant: "dark" }) }), C = (l, r) => l.map((t, c) => /* @__PURE__ */ p("div", { className: o("tree-menu-node"), children: [
108
+ /* @__PURE__ */ e(G, { descriptor: t, level: r }),
109
+ t.children && t.children.length > 0 && /* @__PURE__ */ e("div", { className: o("tree-menu-children"), children: C(t.children, r + 1) })
110
+ ] }, c)), J = ({ tree: l }) => {
111
+ const [r, t] = g(!1);
112
+ return /* @__PURE__ */ e(
113
+ N,
114
+ {
115
+ content: /* @__PURE__ */ e("div", { className: o("tree-menu"), children: C(l, 1) }),
116
+ placement: "bottom-start",
117
+ isOpened: r,
118
+ setIsOpened: t,
119
+ children: /* @__PURE__ */ e("div", { className: o("tree-button", { opened: r }), children: /* @__PURE__ */ e(E, {}) })
120
+ }
121
+ );
122
+ }, K = "_breadcrumbs_pxlum_1", Q = {
123
+ "breadcrumbs-container": "_breadcrumbs-container_pxlum_1",
124
+ breadcrumbs: K,
125
+ "breadcrumb-item": "_breadcrumb-item_pxlum_15",
126
+ "hidden-breadcrumbs": "_hidden-breadcrumbs_pxlum_23",
127
+ "back-button": "_back-button_pxlum_40",
128
+ "breadcrumbs-2": "_breadcrumbs-2_pxlum_49",
129
+ "breadcrumbs-3": "_breadcrumbs-3_pxlum_52",
130
+ "breadcrumbs-4": "_breadcrumbs-4_pxlum_55",
131
+ "breadcrumbs-5": "_breadcrumbs-5_pxlum_58",
132
+ "breadcrumbs-6-plus": "_breadcrumbs-6-plus_pxlum_58"
133
+ }, d = h.bind(Q), f = 5, le = ({
134
+ descriptors: l = [],
135
+ dataAutomationId: r,
136
+ LinkComponent: t,
137
+ tree: c,
138
+ isBackButton: k = !1
139
+ }) => {
140
+ const _ = [...l], s = _.shift(), i = (n) => `breadcrumbs-${n > 5 ? "6-plus" : n}`, m = ((n) => ({
141
+ 1: 55,
142
+ 2: 24,
143
+ 3: 18,
144
+ 4: 13
145
+ })[n] ?? 12)(l.length);
146
+ let b = [];
147
+ return _.length > f - 1 && (b = _.splice(
148
+ 0,
149
+ _.length - (f - 1)
150
+ )), /* @__PURE__ */ e(H, { LinkComponent: t, children: /* @__PURE__ */ e(
151
+ "div",
152
+ {
153
+ className: d("breadcrumbs-container"),
154
+ "data-automation-id": r,
155
+ "data-testid": r,
156
+ children: k && s ? /* @__PURE__ */ e("div", { className: d("breadcrumbs"), children: /* @__PURE__ */ e("div", { className: d("breadcrumb-item", "back-button"), "data-testid": "back-breadcrumb", children: /* @__PURE__ */ e(u, { descriptor: s, titleTailNumChars: m }) }) }) : /* @__PURE__ */ p(y, { children: [
157
+ c && /* @__PURE__ */ e("div", { className: d("tree"), children: /* @__PURE__ */ e(J, { tree: c }) }),
158
+ /* @__PURE__ */ p("div", { className: d("breadcrumbs", i(l.length)), children: [
159
+ s && /* @__PURE__ */ e("div", { className: d("breadcrumb-item"), children: /* @__PURE__ */ e(
160
+ u,
161
+ {
162
+ descriptor: s,
163
+ titleTailNumChars: m,
164
+ isClickable: !!_.length
165
+ }
166
+ ) }),
167
+ b.length > 0 && /* @__PURE__ */ e("div", { className: d("breadcrumb-item", "hidden-breadcrumbs"), children: /* @__PURE__ */ e(X, { descriptors: b }) }),
168
+ _.length > 0 && _.map((n, a) => /* @__PURE__ */ e("div", { className: d("breadcrumb-item"), children: /* @__PURE__ */ e(
169
+ u,
170
+ {
171
+ descriptor: n,
172
+ titleTailNumChars: m,
173
+ isClickable: a !== _.length - 1
174
+ }
175
+ ) }, a))
176
+ ] })
177
+ ] })
178
+ }
179
+ ) });
180
+ };
181
+ export {
182
+ le as B
183
+ };
@@ -0,0 +1,11 @@
1
+ import { B as m } from "./breadcrumbs-8e5ca8d7.js";
2
+ import "react/jsx-runtime";
3
+ import "./bind-06a7ff84.js";
4
+ import "react";
5
+ import "./popover.js";
6
+ import "@floating-ui/react";
7
+ import "./tree-c3dd3d45.js";
8
+ export {
9
+ m as Breadcrumbs,
10
+ m as default
11
+ };
@@ -0,0 +1,66 @@
1
+ import { jsxs as m, jsx as w } from "react/jsx-runtime";
2
+ import { forwardRef as g } from "react";
3
+ import { c as p } from "./bind-06a7ff84.js";
4
+ const b = "_button_j5f2i_1", l = "_primary_j5f2i_18", x = "_disabled_j5f2i_23", u = "_ghost_j5f2i_38", y = "_danger_j5f2i_59", N = "_text_j5f2i_79", B = "_icon_j5f2i_180", $ = {
5
+ button: b,
6
+ primary: l,
7
+ disabled: x,
8
+ ghost: u,
9
+ danger: y,
10
+ text: N,
11
+ "ghost-danger": "_ghost-danger_j5f2i_108",
12
+ "text-danger": "_text-danger_j5f2i_128",
13
+ "width-min-width": "_width-min-width_j5f2i_162",
14
+ "width-content": "_width-content_j5f2i_166",
15
+ "width-wide-content": "_width-wide-content_j5f2i_170",
16
+ "width-parent": "_width-parent_j5f2i_175",
17
+ icon: B,
18
+ "icon-start": "_icon-start_j5f2i_186",
19
+ "icon-end": "_icon-end_j5f2i_190"
20
+ }, o = p.bind($), v = g(
21
+ ({
22
+ variant: s = "primary",
23
+ icon: t,
24
+ iconPlace: i = "start",
25
+ adjustWidthOn: n = "min-width",
26
+ type: e = "button",
27
+ children: r,
28
+ disabled: _ = !1,
29
+ onClick: c,
30
+ title: d,
31
+ className: a,
32
+ ...f
33
+ }, h) => {
34
+ const j = o("button", s, a, {
35
+ disabled: _,
36
+ [`width-${n}`]: n
37
+ });
38
+ return /* @__PURE__ */ m(
39
+ "button",
40
+ {
41
+ ref: h,
42
+ type: e,
43
+ disabled: _,
44
+ className: j,
45
+ onClick: c,
46
+ title: d,
47
+ ...f,
48
+ children: [
49
+ t && /* @__PURE__ */ w(
50
+ "i",
51
+ {
52
+ className: o("icon", {
53
+ [`icon-${i}`]: i
54
+ }),
55
+ children: t
56
+ }
57
+ ),
58
+ r
59
+ ]
60
+ }
61
+ );
62
+ }
63
+ );
64
+ export {
65
+ v as B
66
+ };
package/dist/button.js CHANGED
@@ -1,4 +1,4 @@
1
- import { B as o } from "./button-7fb84fde.js";
1
+ import { B as o } from "./button-97d9e587.js";
2
2
  import "react/jsx-runtime";
3
3
  import "react";
4
4
  import "./bind-06a7ff84.js";
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 8, height: 13, viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.54134 12.2173C6.69755 12.3735 6.95081 12.3735 7.10702 12.2173L7.24844 12.0759C7.40465 11.9197 7.40465 11.6664 7.24844 11.5102L1.90539 6.16715L7.24844 0.824097C7.40465 0.667887 7.40465 0.41462 7.24844 0.258411L7.10702 0.116989C6.95081 -0.0392199 6.69755 -0.0392199 6.54134 0.116989L0.998591 5.65973L0.999562 5.6607L0.767094 5.89317C0.610884 6.04938 0.610884 6.30265 0.767093 6.45886L1.48425 7.17602L1.49215 7.16813L6.54134 12.2173Z", fill: "#C1C7D0" }));
3
+ export {
4
+ t as S
5
+ };
@@ -0,0 +1,73 @@
1
+ import { jsxs as x, jsx as n } from "react/jsx-runtime";
2
+ import { c as f } from "./bind-06a7ff84.js";
3
+ import { useRef as y, useId as C } from "react";
4
+ import { K as p } from "./keyCodes-f63c0e11.js";
5
+ const E = "_checkbox_rvc2u_1", D = "_disabled_rvc2u_11", K = "_input_rvc2u_16", N = "_control_rvc2u_23", v = "_children_rvc2u_155", I = {
6
+ checkbox: E,
7
+ disabled: D,
8
+ input: K,
9
+ control: N,
10
+ "partially-checked": "_partially-checked_rvc2u_78",
11
+ children: v
12
+ }, e = f.bind(I), Y = ({
13
+ children: s,
14
+ disabled: c = !1,
15
+ onChange: d,
16
+ className: h,
17
+ value: t,
18
+ partiallyChecked: k,
19
+ title: l,
20
+ ...b
21
+ }) => {
22
+ const o = y(null), a = C(), m = (r) => {
23
+ var _, u;
24
+ const { keyCode: i } = r;
25
+ if (i === p.SPACE_KEY_CODE) {
26
+ r.preventDefault(), (_ = o.current) == null || _.click();
27
+ return;
28
+ }
29
+ i === p.ENTER_KEY_CODE && (r.preventDefault(), (u = o.current) == null || u.click());
30
+ };
31
+ return /* @__PURE__ */ x(
32
+ "label",
33
+ {
34
+ id: a,
35
+ className: e("checkbox", h, {
36
+ disabled: c
37
+ }),
38
+ title: l,
39
+ children: [
40
+ /* @__PURE__ */ n(
41
+ "input",
42
+ {
43
+ ref: o,
44
+ tabIndex: 0,
45
+ type: "checkbox",
46
+ onKeyDown: m,
47
+ className: e("input", { "partially-checked": k }),
48
+ disabled: c,
49
+ onChange: d,
50
+ checked: t,
51
+ title: l,
52
+ ...b
53
+ }
54
+ ),
55
+ /* @__PURE__ */ n(
56
+ "span",
57
+ {
58
+ "aria-labelledby": a,
59
+ role: "checkbox",
60
+ "aria-checked": t,
61
+ className: e("control", {
62
+ disabled: c
63
+ })
64
+ }
65
+ ),
66
+ s && /* @__PURE__ */ n("span", { className: e("children", { disabled: c }), children: s })
67
+ ]
68
+ }
69
+ );
70
+ };
71
+ export {
72
+ Y as C
73
+ };
package/dist/checkbox.js CHANGED
@@ -1,4 +1,4 @@
1
- import { C as r } from "./checkbox-4143390f.js";
1
+ import { C as r } from "./checkbox-ed6cc375.js";
2
2
  import "react/jsx-runtime";
3
3
  import "./bind-06a7ff84.js";
4
4
  import "react";
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.732184 15.2698C0.330645 14.8683 0.330646 14.2172 0.732185 13.8157L6.54859 7.99928L0.732185 2.18288C0.330646 1.78134 0.330645 1.13031 0.732184 0.728774C1.13372 0.327235 1.78475 0.327235 2.18629 0.728774L8.00269 6.54518L13.8191 0.728767C14.2206 0.327229 14.8717 0.327228 15.2732 0.728767C15.6747 1.13031 15.6747 1.78133 15.2732 2.18287L9.45679 7.99928L15.2732 13.8157C15.6747 14.2172 15.6747 14.8683 15.2732 15.2698C14.8717 15.6713 14.2206 15.6713 13.8191 15.2698L8.00269 9.45338L2.18629 15.2698C1.78475 15.6713 1.13372 15.6713 0.732184 15.2698Z", fill: "#A2AAB5" }));
3
+ export {
4
+ t as S
5
+ };
@@ -1,2 +1,3 @@
1
1
  import { RefObject } from 'react';
2
+
2
3
  export declare function useOnClickOutside<T extends HTMLElement = HTMLDivElement>(ref: RefObject<T>, handler?: (e?: MouseEvent) => void): void;
@@ -0,0 +1,3 @@
1
+ export type ShapeWithClassName<P = Record<string, unknown>> = P & {
2
+ className?: string;
3
+ };
@@ -1,4 +1,5 @@
1
1
  import { FC, MouseEventHandler, ReactNode, HTMLAttributes } from 'react';
2
+
2
3
  export interface BaseIconButtonProps extends HTMLAttributes<HTMLButtonElement> {
3
4
  children: ReactNode;
4
5
  className?: string;
@@ -1,4 +1,5 @@
1
1
  import { BaseIconButton, BaseIconButtonProps } from './baseIconButton';
2
+
2
3
  export { BaseIconButton };
3
4
  export type { BaseIconButtonProps };
4
5
  export default BaseIconButton;
@@ -0,0 +1,10 @@
1
+ import { BreadcrumbDescriptor } from '../types';
2
+
3
+ interface BreadcrumbProps {
4
+ descriptor: BreadcrumbDescriptor;
5
+ titleTailNumChars?: number;
6
+ isClickable?: boolean;
7
+ variant?: 'default' | 'dark';
8
+ }
9
+ export declare const Breadcrumb: React.FC<BreadcrumbProps>;
10
+ export {};
@@ -0,0 +1 @@
1
+ export { Breadcrumb } from './breadcrumb';
@@ -0,0 +1,3 @@
1
+ import { BreadcrumbsProps } from './types';
2
+
3
+ export declare const Breadcrumbs: ({ descriptors, dataAutomationId, LinkComponent, tree, isBackButton, }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ import { LinkComponentType } from '../types';
3
+
4
+ export interface BreadcrumbsContextValue {
5
+ LinkComponent?: LinkComponentType;
6
+ }
7
+ export declare const BreadcrumbsContext: import('react').Context<BreadcrumbsContextValue | undefined>;
8
+ interface BreadcrumbsProviderProps {
9
+ children: ReactNode;
10
+ LinkComponent?: LinkComponentType;
11
+ }
12
+ export declare const BreadcrumbsProvider: ({ children, LinkComponent }: BreadcrumbsProviderProps) => import("react/jsx-runtime").JSX.Element;
13
+ export {};
@@ -0,0 +1,3 @@
1
+ import { BreadcrumbsContextValue } from './breadcrumbsProvider';
2
+
3
+ export declare const useBreadcrumbsContext: () => BreadcrumbsContextValue;
@@ -0,0 +1 @@
1
+ export { BreadcrumbsProvider } from './breadcrumbsProvider';
@@ -0,0 +1,6 @@
1
+ import { BreadcrumbDescriptor } from '../types';
2
+
3
+ export interface HiddenBreadcrumbsProps {
4
+ descriptors: BreadcrumbDescriptor[];
5
+ }
6
+ export declare const HiddenBreadcrumbs: ({ descriptors }: HiddenBreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ export { HiddenBreadcrumbs } from './hiddenBreadcrumbs';
2
+ export type { HiddenBreadcrumbsProps } from './hiddenBreadcrumbs';
@@ -0,0 +1,5 @@
1
+ import { Breadcrumbs } from './breadcrumbs';
2
+
3
+ export { Breadcrumbs };
4
+ export type { BreadcrumbDescriptor, TreeDescriptor, LinkComponentType, BreadcrumbsProps, } from './types';
5
+ export default Breadcrumbs;
@@ -0,0 +1 @@
1
+ export { Tree } from './tree';
@@ -0,0 +1,7 @@
1
+ import { TreeDescriptor } from '../types';
2
+
3
+ interface TreeProps {
4
+ tree: TreeDescriptor[];
5
+ }
6
+ export declare const Tree: ({ tree }: TreeProps) => import("react/jsx-runtime").JSX.Element;
7
+ export {};
@@ -0,0 +1,24 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ export interface BreadcrumbDescriptor {
4
+ title: string | ReactNode;
5
+ link?: object | string;
6
+ onClick?: () => void;
7
+ }
8
+ export interface TreeDescriptor extends BreadcrumbDescriptor {
9
+ link: object | string;
10
+ children?: TreeDescriptor[];
11
+ }
12
+ export type LinkComponentType = React.ComponentType<{
13
+ to: object | string;
14
+ className?: string;
15
+ onClick?: () => void;
16
+ children: React.ReactNode;
17
+ }>;
18
+ export interface BreadcrumbsProps {
19
+ descriptors: BreadcrumbDescriptor[];
20
+ LinkComponent?: LinkComponentType;
21
+ tree?: TreeDescriptor[];
22
+ dataAutomationId?: string;
23
+ isBackButton?: boolean;
24
+ }