@epam/ai-dial-ui-kit 0.15.0-dev.4 → 0.15.0-dev.41

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 (193) hide show
  1. package/README.md +190 -0
  2. package/dist/CHANGELOG.md +73 -0
  3. package/dist/DateCellRenderer-DFknFcs1.cjs +1 -0
  4. package/dist/{DateCellRenderer-BVM-Q8yx.cjs → DateCellRenderer-J9A5gyDz.cjs} +31 -31
  5. package/dist/IconButton-DHOFapLo.cjs +1 -0
  6. package/dist/{JsonEditor-qv1Z0dLX.cjs → JsonEditor-BDe6elKO.cjs} +1 -1
  7. package/dist/{MarkdownEditor-DHn2pYOJ.cjs → MarkdownEditor-C7BONfsl.cjs} +1 -1
  8. package/dist/{MarkdownEditor-jQ8nDJfx.cjs → MarkdownEditor-FVzYMdkC.cjs} +1 -1
  9. package/dist/{MarkdownEditorContainer-Bzcnoemw.cjs → MarkdownEditorContainer-GvlxX6kx.cjs} +1 -1
  10. package/dist/{Switch-CUKClcEz.cjs → Switch-DE6MrcqJ.cjs} +1 -1
  11. package/dist/components/Button/constants.js +9 -8
  12. package/dist/components/Dropdown/Dropdown.js +70 -65
  13. package/dist/components/Dropdown/DropdownSubMenuItem.js +63 -55
  14. package/dist/components/Dropdown/constants.js +16 -14
  15. package/dist/components/DropdownIcon/DropdownIcon.js +43 -32
  16. package/dist/components/FileManager/FileManager.js +373 -372
  17. package/dist/components/FileManager/FileManagerProvider.js +266 -264
  18. package/dist/components/FileManager/hooks/use-grid-context-menu.js +59 -59
  19. package/dist/components/New/Accordion/Accordion.js +87 -71
  20. package/dist/components/New/Avatar/Avatar.js +70 -0
  21. package/dist/components/New/Badge/Badge.js +45 -0
  22. package/dist/components/New/BottomSheet/BottomSheet.js +128 -0
  23. package/dist/components/New/Breadcrumbs/Breadcrumbs.js +159 -0
  24. package/dist/components/New/Breadcrumbs/constants.js +41 -0
  25. package/dist/components/New/Button/Button.js +32 -32
  26. package/dist/components/New/Button/ButtonWrappers.js +93 -37
  27. package/dist/components/New/Button/constants.js +3 -0
  28. package/dist/components/New/Button/utils.js +18 -8
  29. package/dist/components/New/ButtonDropdown/ButtonDropdown.js +26 -16
  30. package/dist/components/New/Calendar/Calendar.js +301 -265
  31. package/dist/components/New/Calendar/constants.js +5 -5
  32. package/dist/components/New/CaptionText/CaptionText.js +18 -15
  33. package/dist/components/New/CardShell/CardShell.js +5 -3
  34. package/dist/components/New/Checkbox/Checkbox.js +67 -56
  35. package/dist/components/New/Checkbox/CheckboxBox.js +5 -3
  36. package/dist/components/New/CloseButton/CloseButton.js +18 -16
  37. package/dist/components/New/CollapsibleSidebar/CollapsibleSidebar.js +39 -34
  38. package/dist/components/New/ConfirmationPopup/ConfirmationPopup.js +38 -37
  39. package/dist/components/New/ConfirmationPopup/constants.js +8 -11
  40. package/dist/components/New/Dropdown/Dropdown.js +112 -105
  41. package/dist/components/New/Dropdown/DropdownSubMenuItem.js +17 -17
  42. package/dist/components/New/Dropdown/constants.js +22 -17
  43. package/dist/components/New/EllipsisTooltip/EllipsisTooltip.js +20 -18
  44. package/dist/components/New/EntityIdentity/EntityIdentity.js +135 -0
  45. package/dist/components/New/FileDropzone/FileDropzone.js +27 -25
  46. package/dist/components/New/FileIcon/FileIcon.js +55 -0
  47. package/dist/components/New/FileIcon/constants.js +134 -0
  48. package/dist/components/New/FileIcon/icons/FileGlyph.js +150 -0
  49. package/dist/components/New/FileIcon/icons/FolderGlyph.js +50 -0
  50. package/dist/components/New/FileName/FileName.js +78 -0
  51. package/dist/components/New/FilterChips/FilterChips.js +43 -0
  52. package/dist/components/New/FilterChips/constants.js +5 -0
  53. package/dist/components/New/FolderName/FolderName.js +16 -0
  54. package/dist/components/New/FolderPath/FolderPath.js +29 -28
  55. package/dist/components/New/Highlight/Highlight.js +23 -30
  56. package/dist/components/New/IconButton/IconButton.js +30 -28
  57. package/dist/components/New/InfoButton/InfoButton.js +13 -11
  58. package/dist/components/New/InlineSelect/InlineSelect.js +74 -56
  59. package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js +41 -39
  60. package/dist/components/New/InteractiveTooltip/constants.js +2 -2
  61. package/dist/components/New/Label/Label.js +13 -8
  62. package/dist/components/New/MenuItem/MenuItem.js +29 -27
  63. package/dist/components/New/MenuItem/constants.js +9 -8
  64. package/dist/components/New/NoDataContent/NoDataContent.js +21 -19
  65. package/dist/components/New/Notification/Notification.js +33 -29
  66. package/dist/components/New/NumberInput/NumberInput.js +42 -33
  67. package/dist/components/New/PasswordInput/PasswordInput.js +41 -35
  68. package/dist/components/New/Popup/Popup.js +46 -44
  69. package/dist/components/New/Popup/constants.js +3 -3
  70. package/dist/components/New/Radio/Radio.js +75 -64
  71. package/dist/components/New/RadioGroup/RadioGroup.js +76 -65
  72. package/dist/components/New/RadioGroupPopupField/RadioGroupPopupField.js +117 -106
  73. package/dist/components/New/ResizableContainer/ResizableContainer.js +42 -40
  74. package/dist/components/New/Search/Search.js +29 -27
  75. package/dist/components/New/SegmentedControl/SegmentedControl.js +29 -23
  76. package/dist/components/New/Select/CollapsedSelectTags.js +127 -0
  77. package/dist/components/New/Select/MultiSelectTags.js +18 -15
  78. package/dist/components/New/Select/Select.js +219 -197
  79. package/dist/components/New/Select/constants.js +23 -20
  80. package/dist/components/New/SharedEntityIndicator/SharedEntityIndicator.js +34 -0
  81. package/dist/components/New/SideDrawer/SideDrawer.js +148 -0
  82. package/dist/components/New/Switch/Switch.js +69 -58
  83. package/dist/components/New/Tabs/Tabs.js +125 -61
  84. package/dist/components/New/Tag/Tag.js +42 -40
  85. package/dist/components/New/TagInput/TagInput.js +48 -44
  86. package/dist/components/New/ToggleIconButton/ToggleIconButton.js +26 -24
  87. package/dist/components/New/Tooltip/TooltipContent.js +11 -9
  88. package/dist/components/New/Tooltip/constants.js +1 -1
  89. package/dist/components/New/TransferQueue/TransferQueue.js +124 -0
  90. package/dist/components/New/TransferQueue/TransferQueueHeader.js +71 -0
  91. package/dist/components/New/TransferQueue/TransferQueueRow.js +119 -0
  92. package/dist/components/New/TransferQueue/constants.js +24 -0
  93. package/dist/components/New/constants/overlay.js +17 -9
  94. package/dist/components/Popup/constants.js +8 -8
  95. package/dist/components/ProgressBar/ProgressBar.js +45 -33
  96. package/dist/components/SchemaRenderer/components/SchemaAdditionalPropertiesEditor.js +46 -31
  97. package/dist/components/SchemaRenderer/components/SchemaField.js +19 -19
  98. package/dist/components/SchemaRenderer/components/SchemaFieldContent.js +18 -18
  99. package/dist/components/SchemaRenderer/components/SchemaKeyValueEditor.js +223 -135
  100. package/dist/components/SchemaRenderer/types.js +19 -8
  101. package/dist/components/SchemaRenderer/utils.js +122 -95
  102. package/dist/components/Skeleton/Skeleton.js +25 -19
  103. package/dist/components/Spinner/Spinner.js +7 -5
  104. package/dist/components/Tooltip/TooltipContent.js +11 -11
  105. package/dist/components-manifest.json +1478 -59
  106. package/dist/constants/public-class-names.js +208 -0
  107. package/dist/dial-ui-kit.cjs +2 -2
  108. package/dist/dial-ui-kit.js +337 -292
  109. package/dist/editors.cjs +1 -1
  110. package/dist/file-manager.cjs +1 -1
  111. package/dist/grid.cjs +1 -1
  112. package/dist/index.css +2 -2
  113. package/dist/lazy-BEsZqouS.cjs +1 -0
  114. package/dist/merge-classes-BEJXjzkx.cjs +1 -0
  115. package/dist/migration-guides/0.15.0/legacy-theme-variable-fallbacks-removal.md +69 -0
  116. package/dist/migration-guides/README.md +1 -0
  117. package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +419 -399
  118. package/dist/src/components/FileManager/FileManager.d.ts +2 -0
  119. package/dist/src/components/FileManager/FileManagerContext.d.ts +1 -0
  120. package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +2 -1
  121. package/dist/src/components/New/Accordion/Accordion.d.ts +6 -1
  122. package/dist/src/components/New/Avatar/Avatar.d.ts +55 -0
  123. package/dist/src/components/New/Badge/Badge.d.ts +47 -0
  124. package/dist/src/components/New/BottomSheet/BottomSheet.d.ts +84 -0
  125. package/dist/src/components/New/Breadcrumbs/Breadcrumbs.d.ts +94 -0
  126. package/dist/src/components/New/Breadcrumbs/constants.d.ts +60 -0
  127. package/dist/src/components/New/Button/Button.d.ts +4 -1
  128. package/dist/src/components/New/Button/ButtonWrappers.d.ts +20 -0
  129. package/dist/src/components/New/Button/utils.d.ts +15 -0
  130. package/dist/src/components/New/ButtonDropdown/ButtonDropdown.d.ts +4 -0
  131. package/dist/src/components/New/Calendar/Calendar.d.ts +7 -1
  132. package/dist/src/components/New/Calendar/constants.d.ts +1 -1
  133. package/dist/src/components/New/ConfirmationPopup/constants.d.ts +0 -1
  134. package/dist/src/components/New/Dropdown/Dropdown.d.ts +9 -1
  135. package/dist/src/components/New/Dropdown/constants.d.ts +3 -0
  136. package/dist/src/components/New/EntityIdentity/EntityIdentity.d.ts +85 -0
  137. package/dist/src/components/New/FileIcon/FileIcon.d.ts +61 -0
  138. package/dist/src/components/New/FileIcon/constants.d.ts +16 -0
  139. package/dist/src/components/New/FileIcon/icons/FileGlyph.d.ts +18 -0
  140. package/dist/src/components/New/FileIcon/icons/FolderGlyph.d.ts +17 -0
  141. package/dist/src/components/New/FileName/FileName.d.ts +79 -0
  142. package/dist/src/components/New/FilterChips/FilterChips.d.ts +69 -0
  143. package/dist/src/components/New/FilterChips/constants.d.ts +13 -0
  144. package/dist/src/components/New/FolderName/FolderName.d.ts +37 -0
  145. package/dist/src/components/New/InlineSelect/InlineSelect.d.ts +16 -1
  146. package/dist/src/components/New/InteractiveTooltip/constants.d.ts +5 -4
  147. package/dist/src/components/New/Notification/Notification.d.ts +18 -0
  148. package/dist/src/components/New/Popup/constants.d.ts +1 -1
  149. package/dist/src/components/New/Select/CollapsedSelectTags.d.ts +22 -0
  150. package/dist/src/components/New/Select/MultiSelectTags.d.ts +5 -0
  151. package/dist/src/components/New/Select/Select.d.ts +9 -0
  152. package/dist/src/components/New/Select/constants.d.ts +3 -2
  153. package/dist/src/components/New/SharedEntityIndicator/SharedEntityIndicator.d.ts +35 -0
  154. package/dist/src/components/New/SideDrawer/SideDrawer.d.ts +100 -0
  155. package/dist/src/components/New/Tabs/Tabs.d.ts +54 -6
  156. package/dist/src/components/New/Tooltip/constants.d.ts +5 -3
  157. package/dist/src/components/New/TransferQueue/TransferQueue.d.ts +139 -0
  158. package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts +16 -0
  159. package/dist/src/components/New/TransferQueue/TransferQueueRow.d.ts +10 -0
  160. package/dist/src/components/New/TransferQueue/constants.d.ts +6 -0
  161. package/dist/src/components/New/constants/overlay.d.ts +13 -0
  162. package/dist/src/components/Popup/constants.d.ts +1 -1
  163. package/dist/src/components/SchemaRenderer/types.d.ts +11 -0
  164. package/dist/src/components/SchemaRenderer/utils.d.ts +10 -1
  165. package/dist/src/constants/public-class-names.d.ts +199 -0
  166. package/dist/src/index.d.ts +34 -1
  167. package/dist/src/types/accordion.d.ts +7 -0
  168. package/dist/src/types/avatar.d.ts +7 -0
  169. package/dist/src/types/badge.d.ts +16 -0
  170. package/dist/src/types/breadcrumbs.d.ts +9 -0
  171. package/dist/src/types/button.d.ts +1 -0
  172. package/dist/src/types/entity-type.d.ts +9 -0
  173. package/dist/src/types/transfer-queue.d.ts +10 -0
  174. package/dist/src/utils/__tests__/avatar.spec.d.ts +1 -0
  175. package/dist/src/utils/avatar.d.ts +12 -0
  176. package/dist/src/utils/sub-menu-floating.d.ts +7 -4
  177. package/dist/types/accordion.js +4 -0
  178. package/dist/types/avatar.js +4 -0
  179. package/dist/types/badge.js +5 -0
  180. package/dist/types/breadcrumbs.js +4 -0
  181. package/dist/types/button.js +3 -3
  182. package/dist/types/entity-type.js +4 -0
  183. package/dist/types/transfer-queue.js +4 -0
  184. package/dist/use-file-manager-tabs-Bj_ENNKt.cjs +3 -0
  185. package/dist/utils/avatar.js +22 -0
  186. package/dist/utils/merge-classes.js +12 -5
  187. package/dist/utils/sub-menu-floating.js +99 -54
  188. package/package.json +4 -7
  189. package/dist/DateCellRenderer-ssp7eaZY.cjs +0 -1
  190. package/dist/IconButton-DWqoaBWf.cjs +0 -1
  191. package/dist/lazy-tfN4sKhq.cjs +0 -1
  192. package/dist/merge-classes-Dipy1Ih1.cjs +0 -1
  193. package/dist/use-file-manager-tabs-DjdR_mYM.cjs +0 -3
@@ -1,64 +1,66 @@
1
- import { jsxs as C, jsx as r } from "react/jsx-runtime";
2
- import { IconX as S } from "@tabler/icons-react";
3
- import { DIAL_KIT_ICON_STROKE as y } from "../constants/icon.js";
4
- import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
5
- import { ElementSize as T } from "../../../types/size.js";
1
+ import { jsxs as x, jsx as r } from "react/jsx-runtime";
2
+ import { IconX as C } from "@tabler/icons-react";
3
+ import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
4
+ import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
5
+ import { ElementSize as D } from "../../../types/size.js";
6
6
  import { TagAppearance as d } from "../../../types/tag.js";
7
- import { mergeClasses as _ } from "../../../utils/merge-classes.js";
8
- import { GhostIconButton as w } from "../IconButton/IconButtonWrappers.js";
9
- import { tagInteractiveClassName as z, tagHoverClassName as E, tagStateClassNames as K, tagBaseClassName as O } from "./constants.js";
10
- const H = ({
7
+ import { mergeClasses as T } from "../../../utils/merge-classes.js";
8
+ import { GhostIconButton as A } from "../IconButton/IconButtonWrappers.js";
9
+ import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagBaseClassName as z } from "./constants.js";
10
+ import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
11
+ const X = ({
11
12
  label: o,
12
- icon: l,
13
- appearance: n = d.Outlined,
14
- selected: s = !1,
13
+ icon: m,
14
+ appearance: l = d.Outlined,
15
+ selected: i = !1,
15
16
  disabled: t = !1,
16
17
  closable: p = !1,
17
18
  removeLabel: u,
18
- className: h,
19
- title: I,
20
- onClick: m,
19
+ className: I,
20
+ title: g,
21
+ onClick: n,
21
22
  onRemove: c,
22
- onKeyDown: g,
23
- ...i
23
+ onKeyDown: h,
24
+ ...s
24
25
  }) => {
25
- const f = n === d.Selectable, a = !!m && !t, N = p && !!c && !t, k = f && s, x = (e) => {
26
- g?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
26
+ const f = l === d.Selectable, a = !!n && !t, N = p && !!c && !t, S = f && i, k = (e) => {
27
+ h?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
27
28
  };
28
- return /* @__PURE__ */ C(
29
+ return /* @__PURE__ */ x(
29
30
  "span",
30
31
  {
31
- ...i,
32
- role: a ? "button" : i.role,
33
- tabIndex: a ? 0 : i.tabIndex,
32
+ ...s,
33
+ role: a ? "button" : s.role,
34
+ tabIndex: a ? 0 : s.tabIndex,
34
35
  "aria-disabled": t || void 0,
35
- "aria-pressed": f && a ? s : void 0,
36
- onClick: t ? void 0 : m,
37
- onKeyDown: x,
38
- className: _(
39
- O,
40
- k ? "dial-tiny-semi-text" : "dial-tiny-text",
41
- K[n][s ? "selected" : "default"],
36
+ "aria-pressed": f && a ? i : void 0,
37
+ onClick: t ? void 0 : n,
38
+ onKeyDown: k,
39
+ className: T(
40
+ z,
41
+ S ? "dial-tiny-semi-text" : "dial-tiny-text",
42
+ w[l][i ? "selected" : "default"],
42
43
  // The design defines no disabled tag, so a disabled one keeps its
43
44
  // colours and only stops responding.
44
45
  t && "cursor-not-allowed",
45
- a && [z, E],
46
- h
46
+ a && [K, L],
47
+ I,
48
+ E.tag
47
49
  ),
48
50
  children: [
49
- l && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
50
- /* @__PURE__ */ r("span", { className: "truncate", title: I ?? o, children: o }),
51
+ m && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: m }),
52
+ /* @__PURE__ */ r("span", { className: "truncate", title: g ?? o, children: o }),
51
53
  N && /* @__PURE__ */ r(
52
- w,
54
+ A,
53
55
  {
54
56
  className: "size-[16px] shrink-0 dial-kit-minimum-target",
55
- size: T.Small,
57
+ size: D.Small,
56
58
  "aria-label": u ?? `Remove ${o}`,
57
59
  icon: /* @__PURE__ */ r(
58
- S,
60
+ C,
59
61
  {
60
- size: D.SM,
61
- stroke: y,
62
+ size: y.SM,
63
+ stroke: _,
62
64
  "aria-hidden": "true"
63
65
  }
64
66
  ),
@@ -72,5 +74,5 @@ const H = ({
72
74
  );
73
75
  };
74
76
  export {
75
- H as Tag
77
+ X as Tag
76
78
  };
@@ -1,48 +1,49 @@
1
1
  import { jsxs as D, jsx as a } from "react/jsx-runtime";
2
- import { useId as oe, useRef as R, useState as T, useCallback as v, useEffect as ae } from "react";
3
- import { ElementSize as L } from "../../../types/size.js";
2
+ import { useId as oe, useRef as T, useState as I, useCallback as R, useEffect as ae } from "react";
3
+ import { ElementSize as V } from "../../../types/size.js";
4
4
  import { mergeClasses as c } from "../../../utils/merge-classes.js";
5
5
  import { Input as le } from "../Input/Input.js";
6
6
  import { Tag as d } from "../Tag/Tag.js";
7
7
  import { getVisibleTagCount as ce } from "./utils.js";
8
- const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
8
+ import { DIAL_KIT_CLASS as me } from "../../../constants/public-class-names.js";
9
+ const pe = 4, ue = 24, A = (r) => parseFloat(r) || 0, fe = (r) => {
9
10
  let o = r.length;
10
11
  for (; o > 0 && r[o - 1] === ","; ) o--;
11
12
  return r.slice(0, o);
12
- }, fe = () => {
13
- }, Te = ({
13
+ }, de = () => {
14
+ }, ve = ({
14
15
  id: r,
15
16
  value: o,
16
- defaultValue: y,
17
- size: N = L.Standard,
18
- labelProps: j,
19
- placeholder: A,
17
+ defaultValue: P,
18
+ size: v = V.Standard,
19
+ labelProps: y,
20
+ placeholder: j,
20
21
  caption: B,
21
- error: M,
22
- invalid: G,
22
+ error: K,
23
+ invalid: M,
23
24
  disabled: m = !1,
24
25
  readOnly: p = !1,
25
26
  collapseTagOverflow: s = !1,
26
- ariaLabel: K,
27
+ ariaLabel: G,
27
28
  tagListLabel: U = "Tags",
28
29
  className: X,
29
30
  fieldClassName: $,
30
31
  tagClassName: u,
31
- onChange: I
32
+ onChange: N
32
33
  }) => {
33
- const z = oe(), F = r || z, q = N === L.Small, h = R(null), S = R([]), k = R(null), g = o !== void 0, [H, J] = T(
34
- y ?? []
35
- ), n = g ? o : H, i = n.length, [f, E] = T(""), [W, b] = T(i), l = !p && !m, w = v(
34
+ const z = oe(), F = r || z, q = v === V.Small, h = T(null), S = T([]), _ = T(null), g = o !== void 0, [H, J] = I(
35
+ P ?? []
36
+ ), n = g ? o : H, i = n.length, [f, k] = I(""), [E, b] = I(i), l = !p && !m, w = R(
36
37
  (e) => {
37
- g || J(e), I?.(e);
38
+ g || J(e), N?.(e);
38
39
  },
39
- [g, I]
40
- ), Q = v(
40
+ [g, N]
41
+ ), Q = R(
41
42
  (e) => (t) => {
42
43
  S.current[e] = t;
43
44
  },
44
45
  []
45
- ), x = v(() => {
46
+ ), x = R(() => {
46
47
  const e = h.current;
47
48
  if (!e || e.clientWidth === 0) {
48
49
  b(n.length);
@@ -51,12 +52,12 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
51
52
  const { paddingLeft: t, paddingRight: ie } = getComputedStyle(e);
52
53
  b(
53
54
  ce({
54
- availableWidth: e.clientWidth - P(t) - P(ie) - (p ? 0 : pe),
55
+ availableWidth: e.clientWidth - A(t) - A(ie) - (p ? 0 : ue),
55
56
  tagWidths: n.map(
56
- (de, re) => S.current[re]?.offsetWidth ?? 0
57
+ (he, re) => S.current[re]?.offsetWidth ?? 0
57
58
  ),
58
- overflowChipWidth: k.current?.offsetWidth ?? 0,
59
- gap: me
59
+ overflowChipWidth: _.current?.offsetWidth ?? 0,
60
+ gap: pe
60
61
  })
61
62
  );
62
63
  }, [p, n]);
@@ -76,23 +77,23 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
76
77
  s ? "shrink-0" : "min-w-0",
77
78
  u
78
79
  ), Z = (e) => {
79
- const t = ue(e.trim()).trim();
80
+ const t = fe(e.trim()).trim();
80
81
  !t || n.includes(t) || w([...n, t]);
81
82
  }, O = (e) => {
82
83
  w(n.filter((t) => t !== e));
83
- }, V = () => {
84
- Z(f), E("");
84
+ }, L = () => {
85
+ Z(f), k("");
85
86
  }, ee = (e) => {
86
87
  if (l) {
87
88
  if (e.key === "Enter" || e.key === ",") {
88
- e.preventDefault(), V();
89
+ e.preventDefault(), L();
89
90
  return;
90
91
  }
91
92
  e.key === "Backspace" && !f && i > 0 && (e.preventDefault(), w(n.slice(0, -1)));
92
93
  }
93
94
  }, te = () => {
94
- l && f.trim() && V();
95
- }, ne = s ? n.slice(0, W) : n, C = s ? n.slice(W) : [], _ = C.join(", "), se = i > 0 && /* @__PURE__ */ D(
95
+ l && f.trim() && L();
96
+ }, ne = s ? n.slice(0, E) : n, C = s ? n.slice(E) : [], W = C.join(", "), se = i > 0 && /* @__PURE__ */ D(
96
97
  "span",
97
98
  {
98
99
  role: "list",
@@ -119,8 +120,8 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
119
120
  {
120
121
  role: "listitem",
121
122
  label: `+${C.length}`,
122
- "aria-label": _,
123
- title: _,
123
+ "aria-label": W,
124
+ title: W,
124
125
  className: c("shrink-0", u),
125
126
  disabled: m
126
127
  }
@@ -143,13 +144,13 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
143
144
  className: u,
144
145
  disabled: m,
145
146
  closable: l,
146
- onRemove: l ? fe : void 0
147
+ onRemove: l ? de : void 0
147
148
  }
148
149
  )
149
150
  },
150
151
  e
151
152
  )),
152
- /* @__PURE__ */ a("span", { ref: k, className: "inline-flex", children: /* @__PURE__ */ a(d, { label: `+${i}`, className: u }) })
153
+ /* @__PURE__ */ a("span", { ref: _, className: "inline-flex", children: /* @__PURE__ */ a(d, { label: `+${i}`, className: u }) })
153
154
  ]
154
155
  }
155
156
  )
@@ -160,28 +161,31 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
160
161
  le,
161
162
  {
162
163
  id: F,
163
- size: N,
164
- labelProps: j,
164
+ size: v,
165
+ labelProps: y,
165
166
  caption: B,
166
- error: M,
167
- invalid: G,
167
+ error: K,
168
+ invalid: M,
168
169
  disabled: m,
169
170
  readOnly: p,
170
171
  value: f,
171
- placeholder: i > 0 ? void 0 : A,
172
- "aria-label": K,
172
+ placeholder: i > 0 ? void 0 : j,
173
+ "aria-label": G,
173
174
  wrapperRef: h,
174
- onChange: (e) => E(e ?? ""),
175
+ onChange: (e) => k(e ?? ""),
175
176
  onKeyDown: ee,
176
177
  onBlur: te,
177
178
  containerClassName: c("w-full", X),
178
179
  wrapperClassName: c(
179
180
  i > 0 && [
180
181
  "!h-auto",
181
- q ? "min-h-[24px] py-0.5" : "min-h-[40px] py-1.5",
182
+ // 1px border + 3px + 32px tag + 3px + 1px keeps a one-row field at
183
+ // the 40px of the empty one.
184
+ q ? "min-h-[24px] py-0.5" : "min-h-[40px] py-[3px]",
182
185
  s ? "flex-nowrap overflow-hidden" : "flex-wrap"
183
186
  ],
184
- $
187
+ $,
188
+ me.tagInput
185
189
  ),
186
190
  className: c(
187
191
  "w-auto flex-1",
@@ -193,5 +197,5 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
193
197
  );
194
198
  };
195
199
  export {
196
- Te as TagInput
200
+ ve as TagInput
197
201
  };
@@ -1,54 +1,56 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
2
  import { useCallback as f } from "react";
3
- import { ButtonAppearance as b, ButtonVariant as B } from "../../../types/button.js";
3
+ import { ButtonAppearance as B, ButtonVariant as b } from "../../../types/button.js";
4
4
  import { ElementSize as C } from "../../../types/size.js";
5
- import { mergeClasses as h } from "../../../utils/merge-classes.js";
6
- import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
7
- import { IconButton as x } from "../IconButton/IconButton.js";
8
- import { Tooltip as g } from "../Tooltip/Tooltip.js";
9
- const E = ({
10
- icon: o,
5
+ import { mergeClasses as I } from "../../../utils/merge-classes.js";
6
+ import { resolveAccessibleName as g } from "../../../utils/accessible-name.js";
7
+ import { IconButton as A } from "../IconButton/IconButton.js";
8
+ import { Tooltip as h } from "../Tooltip/Tooltip.js";
9
+ import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
10
+ const y = ({
11
+ icon: t,
11
12
  selectedIcon: l,
12
- isSelected: r = !1,
13
- onToggle: t,
13
+ isSelected: o = !1,
14
+ onToggle: a,
14
15
  onClick: m,
15
- tooltipProps: a,
16
+ tooltipProps: r,
16
17
  size: s = C.Small,
17
18
  className: c,
18
19
  ...n
19
20
  }) => {
20
21
  const p = f(
21
22
  (u) => {
22
- m?.(u), t?.(!r);
23
+ m?.(u), a?.(!o);
23
24
  },
24
- [m, t, r]
25
+ [m, a, o]
25
26
  ), e = /* @__PURE__ */ i(
26
- x,
27
+ A,
27
28
  {
28
29
  ...n,
29
30
  size: s,
30
- variant: B.Primary,
31
- appearance: b.Ghost,
32
- icon: r ? l ?? o : o,
33
- "aria-pressed": r,
34
- "aria-label": v(
31
+ variant: b.Primary,
32
+ appearance: B.Ghost,
33
+ icon: o ? l ?? t : t,
34
+ "aria-pressed": o,
35
+ "aria-label": g(
35
36
  n["aria-label"],
36
- a?.tooltip
37
+ r?.tooltip
37
38
  ),
38
39
  onClick: p,
39
- className: h(
40
+ className: I(
40
41
  "!rounded",
41
42
  // The glyph stays 16px at every size tier — only the tint square grows.
42
43
  // CSS outranks the width/height attributes Tabler renders, so callers
43
44
  // need not pass a size and the two icons can never disagree.
44
45
  "[&_svg]:size-4",
45
- r && "!text-accent",
46
- c
46
+ o && "!text-accent",
47
+ c,
48
+ v.toggleIconButton
47
49
  )
48
50
  }
49
51
  );
50
- return a ? /* @__PURE__ */ i(g, { asChild: !0, ...a, children: e }) : e;
52
+ return r ? /* @__PURE__ */ i(h, { asChild: !0, ...r, children: e }) : e;
51
53
  };
52
54
  export {
53
- E as ToggleIconButton
55
+ y as ToggleIconButton
54
56
  };
@@ -1,20 +1,21 @@
1
- import { jsx as e, jsxs as m } from "react/jsx-runtime";
2
- import { useMergeRefs as i, FloatingPortal as c, FloatingArrow as p } from "@floating-ui/react";
1
+ import { jsx as e, jsxs as n } from "react/jsx-runtime";
2
+ import { useMergeRefs as i, FloatingPortal as p, FloatingArrow as c } from "@floating-ui/react";
3
3
  import f from "classnames";
4
4
  import { useRef as g } from "react";
5
5
  import { useThemeScope as u } from "../ThemeScope/ThemeScope.js";
6
6
  import { useHasHover as x } from "../../../hooks/use-has-hover.js";
7
7
  import { arrowClassName as d, tooltipClassName as h } from "./constants.js";
8
8
  import { useTooltipContext as N } from "./TooltipContext.js";
9
- const T = ({
9
+ import { DIAL_KIT_CLASS as C } from "../../../constants/public-class-names.js";
10
+ const j = ({
10
11
  style: r,
11
12
  ...t
12
13
  }) => {
13
- const o = N(), s = x(), l = u(), a = g(null), n = i([o.refs.setFloating, a]);
14
- return !o.open || !s ? null : /* @__PURE__ */ e(c, { id: "tooltip-portal", children: /* @__PURE__ */ m(
14
+ const o = N(), s = x(), l = u(), a = g(null), m = i([o.refs.setFloating, a]);
15
+ return !o.open || !s ? null : /* @__PURE__ */ e(p, { id: "tooltip-portal", children: /* @__PURE__ */ n(
15
16
  "div",
16
17
  {
17
- ref: n,
18
+ ref: m,
18
19
  "data-placement": o.placement,
19
20
  style: {
20
21
  ...o.floatingStyles,
@@ -24,12 +25,13 @@ const T = ({
24
25
  className: f(
25
26
  h,
26
27
  l,
27
- o.getFloatingProps(t).className
28
+ o.getFloatingProps(t).className,
29
+ C.tooltip
28
30
  ),
29
31
  children: [
30
32
  t.children,
31
33
  /* @__PURE__ */ e(
32
- p,
34
+ c,
33
35
  {
34
36
  ref: o.arrowRef,
35
37
  context: o.context,
@@ -41,5 +43,5 @@ const T = ({
41
43
  ) });
42
44
  };
43
45
  export {
44
- T as TooltipContent
46
+ j as TooltipContent
45
47
  };
@@ -1,4 +1,4 @@
1
- const t = 7, o = 2, e = 500, r = "fill-control-inverted", s = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
1
+ const t = 7, o = 2, e = 500, r = "fill-control-inverted", s = "z-tooltip max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
2
2
  export {
3
3
  o as ARROW_GAP,
4
4
  t as ARROW_HEIGHT,
@@ -0,0 +1,124 @@
1
+ import { jsxs as b, jsx as t } from "react/jsx-runtime";
2
+ import { useState as h, useId as Q, useCallback as m, useEffect as w } from "react";
3
+ import { ConfirmationPopup as D } from "../ConfirmationPopup/ConfirmationPopup.js";
4
+ import { ProgressBar as U } from "../../ProgressBar/ProgressBar.js";
5
+ import { DIAL_KIT_CLASS as F } from "../../../constants/public-class-names.js";
6
+ import { ConfirmationPopupVariant as R } from "../../../types/confirmation-popup.js";
7
+ import { ElementSize as N } from "../../../types/size.js";
8
+ import { TransferQueueItemStatus as l } from "../../../types/transfer-queue.js";
9
+ import { mergeClasses as T } from "../../../utils/merge-classes.js";
10
+ import { DEFAULT_TRANSFER_QUEUE_LABELS as O, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS as y } from "./constants.js";
11
+ import { TransferQueueHeader as M } from "./TransferQueueHeader.js";
12
+ import { TransferQueueRow as j } from "./TransferQueueRow.js";
13
+ const q = (n) => Math.round(
14
+ n.reduce(
15
+ (e, r) => e + (r.percent ?? (r.status === l.InProgress ? 0 : 100)),
16
+ 0
17
+ ) / n.length
18
+ ), z = (n, e, r) => n && e ? r.closeConfirmDescriptionMixed : e ? r.closeConfirmDescriptionFailed : r.closeConfirmDescriptionInProgress, ee = ({
19
+ title: n,
20
+ items: e,
21
+ onClose: r,
22
+ onCancelItem: E,
23
+ labels: S,
24
+ autoCloseDelay: i = y,
25
+ className: v,
26
+ bodyClassName: x
27
+ }) => {
28
+ const [c, I] = h(!1), [L, f] = h(!1), p = Q(), s = { ...O, ...S }, d = e.filter(
29
+ (o) => o.status === l.InProgress
30
+ ).length, a = d > 0, g = e.filter(
31
+ (o) => o.status === l.Failed
32
+ ).length, u = g > 0, C = e.length > 0 && e.every((o) => o.status === l.Success), P = m(() => {
33
+ a || u ? f(!0) : r();
34
+ }, [a, u, r]), A = m(() => {
35
+ f(!1), r();
36
+ }, [r]), _ = m(() => {
37
+ I((o) => !o);
38
+ }, []);
39
+ return w(() => {
40
+ if (!C || i <= 0) return;
41
+ const o = setTimeout(r, i);
42
+ return () => clearTimeout(o);
43
+ }, [C, i, r]), e.length === 0 ? null : /* @__PURE__ */ b(
44
+ "div",
45
+ {
46
+ role: "status",
47
+ "aria-live": "polite",
48
+ className: T(
49
+ "w-[370px] max-w-[calc(100vw-2rem)] rounded-xl bg-layer-raised shadow-md",
50
+ v,
51
+ F.transferQueue
52
+ ),
53
+ children: [
54
+ /* @__PURE__ */ t(
55
+ M,
56
+ {
57
+ title: n,
58
+ failedCount: g,
59
+ isCollapsed: c,
60
+ itemsId: p,
61
+ labels: s,
62
+ onToggleCollapse: _,
63
+ onClose: P
64
+ }
65
+ ),
66
+ c && a && /*
67
+ * Only while collapsed: expanded, every running row already shows its
68
+ * own spinner, so an aggregate bar would restate what is on screen.
69
+ */
70
+ /* @__PURE__ */ t(
71
+ U,
72
+ {
73
+ value: q(e),
74
+ size: N.Small,
75
+ "aria-label": s.queueProgressAriaLabel,
76
+ "aria-valuetext": s.queueProgressValueText(
77
+ e.length - d,
78
+ e.length
79
+ )
80
+ }
81
+ ),
82
+ !c && /* @__PURE__ */ t(
83
+ "div",
84
+ {
85
+ id: p,
86
+ className: T(
87
+ "flex max-h-[40vh] flex-col overflow-y-auto py-1",
88
+ x
89
+ ),
90
+ children: e.map((o) => /* @__PURE__ */ t(
91
+ j,
92
+ {
93
+ item: o,
94
+ labels: s,
95
+ onCancel: E
96
+ },
97
+ o.id
98
+ ))
99
+ }
100
+ ),
101
+ /* @__PURE__ */ t(
102
+ D,
103
+ {
104
+ open: L,
105
+ header: s.closeConfirmHeader,
106
+ description: z(
107
+ a,
108
+ u,
109
+ s
110
+ ),
111
+ confirmLabel: s.closeConfirmLabel,
112
+ cancelLabel: s.closeCancelLabel,
113
+ variant: R.Danger,
114
+ onConfirm: A,
115
+ onClose: () => f(!1)
116
+ }
117
+ )
118
+ ]
119
+ }
120
+ );
121
+ };
122
+ export {
123
+ ee as TransferQueue
124
+ };
@@ -0,0 +1,71 @@
1
+ import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
+ import { IconChevronUp as f, IconChevronDown as S, IconX as I } from "@tabler/icons-react";
3
+ import { GhostIconButton as t } from "../IconButton/IconButtonWrappers.js";
4
+ import { DIAL_KIT_ICON_STROKE as o } from "../constants/icon.js";
5
+ import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
6
+ import { ElementSize as m } from "../../../types/size.js";
7
+ import { STATUS_SLOT_CLASS as c } from "./constants.js";
8
+ const k = ({
9
+ title: l,
10
+ failedCount: n,
11
+ isCollapsed: r,
12
+ itemsId: p,
13
+ labels: a,
14
+ onToggleCollapse: d,
15
+ onClose: x
16
+ }) => {
17
+ const h = r ? f : S;
18
+ return /* @__PURE__ */ i("div", { className: "mx-4 flex items-center justify-between border-b border-tertiary py-3", children: [
19
+ /* @__PURE__ */ i("div", { className: "flex min-w-0 items-center gap-2", children: [
20
+ /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text truncate text-primary", children: l }),
21
+ n > 0 && /*
22
+ * On the filled --bg-control-error swatch, so it takes the on-control
23
+ * token; --text-tertiary would contrast at under 2:1 over that fill.
24
+ */
25
+ /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-control-error px-1 text-control-permanent", children: n })
26
+ ] }),
27
+ /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-1", children: [
28
+ /* @__PURE__ */ e(
29
+ t,
30
+ {
31
+ "aria-label": r ? a.expandAriaLabel : a.collapseAriaLabel,
32
+ "aria-expanded": !r,
33
+ "aria-controls": p,
34
+ size: m.Small,
35
+ icon: /* @__PURE__ */ e(
36
+ h,
37
+ {
38
+ size: s.SM,
39
+ stroke: o,
40
+ className: "text-secondary",
41
+ "aria-hidden": !0
42
+ }
43
+ ),
44
+ onClick: d,
45
+ className: c
46
+ }
47
+ ),
48
+ /* @__PURE__ */ e(
49
+ t,
50
+ {
51
+ "aria-label": a.closeAriaLabel,
52
+ size: m.Small,
53
+ icon: /* @__PURE__ */ e(
54
+ I,
55
+ {
56
+ size: s.SM,
57
+ stroke: o,
58
+ className: "text-secondary",
59
+ "aria-hidden": !0
60
+ }
61
+ ),
62
+ onClick: x,
63
+ className: c
64
+ }
65
+ )
66
+ ] })
67
+ ] });
68
+ };
69
+ export {
70
+ k as TransferQueueHeader
71
+ };