@epam/ai-dial-ui-kit 0.15.0-dev.2 → 0.15.0-dev.20

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 (149) hide show
  1. package/README.md +185 -0
  2. package/dist/CHANGELOG.md +33 -0
  3. package/dist/DateCellRenderer-CkFOYZGc.cjs +1 -0
  4. package/dist/{DateCellRenderer-BVM-Q8yx.cjs → DateCellRenderer-ZLb4GAUV.cjs} +26 -26
  5. package/dist/IconButton-CVttu-k-.cjs +1 -0
  6. package/dist/JsonEditor-CpSpVa0v.cjs +1 -0
  7. package/dist/{MarkdownEditor-jQ8nDJfx.cjs → MarkdownEditor-CPzMv3lE.cjs} +1 -1
  8. package/dist/{MarkdownEditor-DHn2pYOJ.cjs → MarkdownEditor-NYMcKLJy.cjs} +1 -1
  9. package/dist/MarkdownEditorContainer-DSL5-_hG.cjs +1 -0
  10. package/dist/{Switch-CUKClcEz.cjs → Switch-CfxMs3AZ.cjs} +1 -1
  11. package/dist/components/Dropdown/Dropdown.js +70 -65
  12. package/dist/components/Dropdown/DropdownSubMenuItem.js +63 -55
  13. package/dist/components/Dropdown/constants.js +16 -14
  14. package/dist/components/DropdownIcon/DropdownIcon.js +43 -32
  15. package/dist/components/FileManager/FileManager.js +2 -2
  16. package/dist/components/MarkdownEditor/MarkdownEditorContainer.js +18 -16
  17. package/dist/components/New/Accordion/Accordion.js +40 -38
  18. package/dist/components/New/Breadcrumbs/Breadcrumbs.js +159 -0
  19. package/dist/components/New/Breadcrumbs/constants.js +41 -0
  20. package/dist/components/New/ButtonDropdown/ButtonDropdown.js +7 -6
  21. package/dist/components/New/Calendar/Calendar.js +337 -289
  22. package/dist/components/New/Calendar/constants.js +5 -5
  23. package/dist/components/New/CaptionText/CaptionText.js +18 -15
  24. package/dist/components/New/CardShell/CardShell.js +5 -3
  25. package/dist/components/New/Checkbox/Checkbox.js +67 -56
  26. package/dist/components/New/Checkbox/CheckboxBox.js +5 -3
  27. package/dist/components/New/CloseButton/CloseButton.js +18 -16
  28. package/dist/components/New/CollapsibleSidebar/CollapsibleSidebar.js +39 -34
  29. package/dist/components/New/ConfirmationPopup/ConfirmationPopup.js +44 -39
  30. package/dist/components/New/Dropdown/Dropdown.js +112 -105
  31. package/dist/components/New/Dropdown/DropdownSubMenuItem.js +17 -17
  32. package/dist/components/New/Dropdown/constants.js +22 -17
  33. package/dist/components/New/EllipsisTooltip/EllipsisTooltip.js +20 -18
  34. package/dist/components/New/FileDropzone/FileDropzone.js +27 -25
  35. package/dist/components/New/FileIcon/FileIcon.js +55 -0
  36. package/dist/components/New/FileIcon/constants.js +134 -0
  37. package/dist/components/New/FileIcon/icons/FileGlyph.js +150 -0
  38. package/dist/components/New/FileIcon/icons/FolderGlyph.js +50 -0
  39. package/dist/components/New/FileName/FileName.js +78 -0
  40. package/dist/components/New/FilterChips/FilterChips.js +43 -0
  41. package/dist/components/New/FilterChips/constants.js +5 -0
  42. package/dist/components/New/FolderName/FolderName.js +16 -0
  43. package/dist/components/New/FolderPath/FolderPath.js +29 -28
  44. package/dist/components/New/Highlight/Highlight.js +23 -30
  45. package/dist/components/New/InfoButton/InfoButton.js +13 -11
  46. package/dist/components/New/InlineSelect/InlineSelect.js +43 -41
  47. package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js +41 -39
  48. package/dist/components/New/InteractiveTooltip/constants.js +2 -2
  49. package/dist/components/New/Label/Label.js +13 -8
  50. package/dist/components/New/MenuItem/MenuItem.js +29 -27
  51. package/dist/components/New/MenuItem/constants.js +9 -8
  52. package/dist/components/New/NoDataContent/NoDataContent.js +21 -19
  53. package/dist/components/New/Notification/Notification.js +33 -29
  54. package/dist/components/New/NumberInput/NumberInput.js +42 -33
  55. package/dist/components/New/PasswordInput/PasswordInput.js +41 -35
  56. package/dist/components/New/Popup/Popup.js +46 -44
  57. package/dist/components/New/Popup/constants.js +3 -3
  58. package/dist/components/New/Radio/Radio.js +75 -64
  59. package/dist/components/New/RadioGroup/RadioGroup.js +76 -65
  60. package/dist/components/New/RadioGroupPopupField/RadioGroupPopupField.js +117 -106
  61. package/dist/components/New/ResizableContainer/ResizableContainer.js +42 -40
  62. package/dist/components/New/Search/Search.js +29 -27
  63. package/dist/components/New/SegmentedControl/SegmentedControl.js +29 -23
  64. package/dist/components/New/Select/Select.js +120 -109
  65. package/dist/components/New/Select/constants.js +23 -20
  66. package/dist/components/New/SharedEntityIndicator/SharedEntityIndicator.js +34 -0
  67. package/dist/components/New/Switch/Switch.js +69 -58
  68. package/dist/components/New/Tabs/Tabs.js +125 -61
  69. package/dist/components/New/Tag/Tag.js +42 -40
  70. package/dist/components/New/TagInput/TagInput.js +45 -43
  71. package/dist/components/New/ToggleIconButton/ToggleIconButton.js +26 -24
  72. package/dist/components/New/Tooltip/TooltipContent.js +11 -9
  73. package/dist/components/New/Tooltip/constants.js +1 -1
  74. package/dist/components/New/TransferQueue/TransferQueue.js +124 -0
  75. package/dist/components/New/TransferQueue/TransferQueueHeader.js +71 -0
  76. package/dist/components/New/TransferQueue/TransferQueueRow.js +119 -0
  77. package/dist/components/New/TransferQueue/constants.js +24 -0
  78. package/dist/components/New/constants/overlay.js +15 -9
  79. package/dist/components/Popup/constants.js +8 -8
  80. package/dist/components/ProgressBar/ProgressBar.js +45 -33
  81. package/dist/components/SchemaRenderer/components/SchemaAdditionalPropertiesEditor.js +46 -31
  82. package/dist/components/SchemaRenderer/components/SchemaKeyValueEditor.js +223 -135
  83. package/dist/components/SchemaRenderer/types.js +19 -8
  84. package/dist/components/SchemaRenderer/utils.js +121 -96
  85. package/dist/components/Skeleton/Skeleton.js +25 -19
  86. package/dist/components/Spinner/Spinner.js +7 -5
  87. package/dist/components/Tooltip/TooltipContent.js +11 -11
  88. package/dist/components-manifest.json +756 -39
  89. package/dist/constants/public-class-names.js +198 -0
  90. package/dist/dial-ui-kit.cjs +2 -2
  91. package/dist/dial-ui-kit.js +335 -310
  92. package/dist/editor-Bc9xzKuR.cjs +1 -0
  93. package/dist/editors.cjs +1 -1
  94. package/dist/file-manager.cjs +1 -1
  95. package/dist/grid.cjs +1 -1
  96. package/dist/index.css +2 -2
  97. package/dist/lazy-Cy9WobJf.cjs +1 -0
  98. package/dist/merge-classes-BEJXjzkx.cjs +1 -0
  99. package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +419 -399
  100. package/dist/src/components/New/Breadcrumbs/Breadcrumbs.d.ts +94 -0
  101. package/dist/src/components/New/Breadcrumbs/constants.d.ts +60 -0
  102. package/dist/src/components/New/Calendar/Calendar.d.ts +14 -1
  103. package/dist/src/components/New/Calendar/constants.d.ts +1 -1
  104. package/dist/src/components/New/Dropdown/Dropdown.d.ts +9 -1
  105. package/dist/src/components/New/Dropdown/constants.d.ts +3 -0
  106. package/dist/src/components/New/FileIcon/FileIcon.d.ts +61 -0
  107. package/dist/src/components/New/FileIcon/constants.d.ts +16 -0
  108. package/dist/src/components/New/FileIcon/icons/FileGlyph.d.ts +18 -0
  109. package/dist/src/components/New/FileIcon/icons/FolderGlyph.d.ts +17 -0
  110. package/dist/src/components/New/FileName/FileName.d.ts +79 -0
  111. package/dist/src/components/New/FilterChips/FilterChips.d.ts +69 -0
  112. package/dist/src/components/New/FilterChips/constants.d.ts +13 -0
  113. package/dist/src/components/New/FolderName/FolderName.d.ts +37 -0
  114. package/dist/src/components/New/InteractiveTooltip/constants.d.ts +5 -4
  115. package/dist/src/components/New/Notification/Notification.d.ts +18 -0
  116. package/dist/src/components/New/Popup/constants.d.ts +1 -1
  117. package/dist/src/components/New/Select/constants.d.ts +3 -2
  118. package/dist/src/components/New/SharedEntityIndicator/SharedEntityIndicator.d.ts +35 -0
  119. package/dist/src/components/New/Tabs/Tabs.d.ts +54 -6
  120. package/dist/src/components/New/Tooltip/constants.d.ts +5 -3
  121. package/dist/src/components/New/TransferQueue/TransferQueue.d.ts +139 -0
  122. package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts +16 -0
  123. package/dist/src/components/New/TransferQueue/TransferQueueRow.d.ts +10 -0
  124. package/dist/src/components/New/TransferQueue/constants.d.ts +6 -0
  125. package/dist/src/components/New/constants/overlay.d.ts +13 -0
  126. package/dist/src/components/Popup/constants.d.ts +1 -1
  127. package/dist/src/components/SchemaRenderer/types.d.ts +11 -0
  128. package/dist/src/components/SchemaRenderer/utils.d.ts +5 -1
  129. package/dist/src/constants/public-class-names.d.ts +189 -0
  130. package/dist/src/index.d.ts +20 -0
  131. package/dist/src/types/breadcrumbs.d.ts +9 -0
  132. package/dist/src/types/transfer-queue.d.ts +10 -0
  133. package/dist/src/utils/__tests__/timezone.spec.d.ts +1 -0
  134. package/dist/src/utils/sub-menu-floating.d.ts +7 -4
  135. package/dist/src/utils/timezone.d.ts +24 -0
  136. package/dist/types/breadcrumbs.js +4 -0
  137. package/dist/types/transfer-queue.js +4 -0
  138. package/dist/use-file-manager-tabs-4s-dbnmu.cjs +3 -0
  139. package/dist/utils/merge-classes.js +12 -5
  140. package/dist/utils/sub-menu-floating.js +98 -54
  141. package/dist/utils/timezone.js +19 -0
  142. package/package.json +2 -2
  143. package/dist/DateCellRenderer-ssp7eaZY.cjs +0 -1
  144. package/dist/IconButton-DWqoaBWf.cjs +0 -1
  145. package/dist/JsonEditor-qv1Z0dLX.cjs +0 -1
  146. package/dist/MarkdownEditorContainer-Bzcnoemw.cjs +0 -1
  147. package/dist/lazy-tfN4sKhq.cjs +0 -1
  148. package/dist/merge-classes-Dipy1Ih1.cjs +0 -1
  149. package/dist/use-file-manager-tabs-DjdR_mYM.cjs +0 -3
@@ -0,0 +1,35 @@
1
+ import { FC, ReactNode } from 'react';
2
+ /** Props for `SharedEntityIndicator`. */
3
+ export interface SharedEntityIndicatorProps {
4
+ /** Accessible name of the badge. */
5
+ label?: string;
6
+ /** Tooltip shown while the badge is hovered. */
7
+ tooltip?: ReactNode;
8
+ /** Arrow size in px. */
9
+ size?: number;
10
+ /** Additional CSS classes for the badge, e.g. to position it over an icon. */
11
+ className?: string;
12
+ }
13
+ /**
14
+ * A small arrow badge marking an entity as shared.
15
+ * aliases: SharedIcon|AccessIndicator
16
+ * Design system 2.0
17
+ *
18
+ * A `role="img"` named by `label`, so it can stand on its own. Placed inside a
19
+ * larger `role="img"` — as `FileIcon` does — its name is folded into the
20
+ * parent's, which is why `FileIcon` names the shared state itself. The tooltip
21
+ * is a pointer-only hint: the badge is not focusable, and the tooltip never
22
+ * reaches assistive technology, so `label` is what carries the meaning.
23
+ *
24
+ * @example
25
+ * ```tsx
26
+ * <SharedEntityIndicator />
27
+ * <SharedEntityIndicator tooltip="Shared with 3 people" className="absolute -bottom-0.5 -left-0.5" />
28
+ * ```
29
+ *
30
+ * @param [label='Shared'] - Accessible name of the badge
31
+ * @param [tooltip='Shared'] - Tooltip shown while the badge is hovered
32
+ * @param [size=12] - Arrow size in px
33
+ * @param [className] - Additional CSS classes for the badge
34
+ */
35
+ export declare const SharedEntityIndicator: FC<SharedEntityIndicatorProps>;
@@ -1,4 +1,5 @@
1
- import { FC } from 'react';
1
+ import { FC, ReactNode } from 'react';
2
+ import { TabOrientation } from '../../../types/tab';
2
3
  /** A single tab entry rendered by {@link Tabs}. */
3
4
  export interface TabItem {
4
5
  /** Unique identifier used to match against `activeTabId`. */
@@ -7,6 +8,8 @@ export interface TabItem {
7
8
  label: string;
8
9
  /** Optional numeric badge rendered after the label. */
9
10
  count?: number;
11
+ /** Decorative icon rendered before the label. The label names the tab, so the icon is hidden from assistive tech. */
12
+ icon?: ReactNode;
10
13
  /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
11
14
  disabled?: boolean;
12
15
  }
@@ -17,19 +20,35 @@ export interface TabsProps {
17
20
  activeTabId: string;
18
21
  /** Fired with the tab's `id` when the user selects a tab. */
19
22
  onTabChange: (tabId: string) => void;
23
+ /** Layout direction of the tab list. Uses the {@link TabOrientation} enum. Defaults to `TabOrientation.Horizontal`. */
24
+ orientation?: TabOrientation;
25
+ /**
26
+ * Already-translated heading rendered above the tabs, which also names the
27
+ * tab list. Omit to render no heading.
28
+ */
29
+ sectionLabel?: string;
20
30
  /**
21
31
  * Accessible name for the tab list. A row of tabs carries no name of its own,
22
- * so screen readers announce it as an unlabelled list without this.
32
+ * so screen readers announce it as an unlabelled list without this — unless
33
+ * `sectionLabel` is naming it already.
23
34
  */
24
35
  ariaLabel?: string;
25
- /** Additional CSS classes for the tab list container. */
36
+ /** Additional CSS classes for the root element. */
26
37
  className?: string;
38
+ /**
39
+ * Additional CSS classes for the `role="tablist"`. `className` reaches it
40
+ * only when there is no `sectionLabel`, since the heading wrapper is then
41
+ * the root; this prop reaches it in either case.
42
+ */
43
+ tabListClassName?: string;
27
44
  /** Additional CSS classes applied to every tab. */
28
45
  tabClassName?: string;
46
+ /** Additional CSS classes for the `sectionLabel` heading. */
47
+ sectionLabelClassName?: string;
29
48
  }
30
49
  /**
31
- * A horizontal row of tabs, underlining the active one and showing optional count badges.
32
- * aliases: TabRow|TabNavigation|TabBar
50
+ * A row or rail of tabs, marking the active one and showing optional icons and count badges.
51
+ * aliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav
33
52
  * Design system 2.0
34
53
  *
35
54
  * Follows the ARIA tabs pattern with automatic activation: only the active tab is
@@ -38,6 +57,16 @@ export interface TabsProps {
38
57
  * Tabs marked `disabled` are greyed out, cannot be clicked, and are skipped by
39
58
  * keyboard navigation.
40
59
  *
60
+ * `TabOrientation.Horizontal` draws the default row: the active tab takes a
61
+ * gradient underline, and `ArrowLeft` / `ArrowRight` move along it.
62
+ * `TabOrientation.Vertical` draws the settings-page rail instead — full-width
63
+ * rows with the active one on a tinted pill rather than an underline, driven by
64
+ * `ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs
65
+ * label whole pages of a settings surface; the row, when they filter one.
66
+ *
67
+ * `className` lands on whichever element is outermost: the heading wrapper when
68
+ * `sectionLabel` is set, the `role="tablist"` itself when it is not.
69
+ *
41
70
  * The component renders the tabs only; the panels stay with the consumer.
42
71
  *
43
72
  * @example
@@ -53,11 +82,30 @@ export interface TabsProps {
53
82
  * />
54
83
  * ```
55
84
  *
85
+ * @example A settings rail, named by its own heading.
86
+ * ```tsx
87
+ * <Tabs
88
+ * orientation={TabOrientation.Vertical}
89
+ * sectionLabel={t('Settings')}
90
+ * className="w-[240px] shrink-0 border-e border-e-tertiary"
91
+ * tabs={[
92
+ * { id: 'preferences', label: t('Preferences'), icon: <IconSettings size={18} /> },
93
+ * { id: 'usage', label: t('Usage'), icon: <IconChartBar size={18} /> },
94
+ * ]}
95
+ * activeTabId={activeTabId}
96
+ * onTabChange={setActiveTabId}
97
+ * />
98
+ * ```
99
+ *
56
100
  * @param tabs - Ordered list of tabs to render.
57
101
  * @param activeTabId - ID of the currently selected tab.
58
102
  * @param onTabChange - Fired with the tab's `id` when the user selects a tab.
103
+ * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tab list.
104
+ * @param [sectionLabel] - Heading rendered above the tabs, which also names the tab list.
59
105
  * @param [ariaLabel] - Accessible name for the tab list.
60
- * @param [className] - Additional CSS classes for the tab list container.
106
+ * @param [className] - Additional CSS classes for the root element.
107
+ * @param [tabListClassName] - Additional CSS classes for the `role="tablist"`.
61
108
  * @param [tabClassName] - Additional CSS classes applied to every tab.
109
+ * @param [sectionLabelClassName] - Additional CSS classes for the `sectionLabel` heading.
62
110
  */
63
111
  export declare const Tabs: FC<TabsProps>;
@@ -19,8 +19,10 @@ export declare const HOVER_OPEN_DELAY = 500;
19
19
  */
20
20
  export declare const arrowClassName = "fill-control-inverted";
21
21
  /**
22
- * Tooltips sit above popups, dropdowns and the calendar (all `z-[53]`), since
23
- * they can be triggered by a control inside one of them.
22
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
23
+ * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
24
+ * (`z-floating`) and interactive tooltips — since they can be triggered by a
25
+ * control inside any of them.
24
26
  *
25
27
  * `max-w-[376px]` is the cap the design puts on a tooltip: at `dial-small-text`
26
28
  * that is around 60 characters a line, past which a line stops being
@@ -36,4 +38,4 @@ export declare const arrowClassName = "fill-control-inverted";
36
38
  * nothing to see around a 7px triangle that the box's own shadow does not
37
39
  * already carry.
38
40
  */
39
- export declare const tooltipClassName = "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";
41
+ export declare const tooltipClassName = "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";
@@ -0,0 +1,139 @@
1
+ import { FC } from 'react';
2
+ import { TransferQueueItemStatus } from '../../../types/transfer-queue';
3
+ /** One file (or other named unit of work) tracked by a `TransferQueue`. */
4
+ export interface TransferQueueItem {
5
+ /** Stable identifier, passed back to `onCancelItem`. */
6
+ id: string;
7
+ /** Name shown on the row; a file's extension also picks its `FileIcon` glyph. */
8
+ name: string;
9
+ /** Current lifecycle status. */
10
+ status: TransferQueueItemStatus;
11
+ /**
12
+ * Completion as 0–100. Feeds only the aggregate bar shown while the queue
13
+ * is collapsed; a settled item without one counts as 100, a running one as 0.
14
+ */
15
+ percent?: number;
16
+ /**
17
+ * Why a `Failed` or `Warning` item ended as it did. Shown as the status
18
+ * icon's tooltip and used as its accessible name; falls back to
19
+ * `labels.failedMessage` / `labels.warningMessage`.
20
+ */
21
+ message?: string;
22
+ }
23
+ /** Every user-visible string of `TransferQueue`. */
24
+ export interface TransferQueueLabels {
25
+ /** Accessible name of an in-progress row's cancel control. */
26
+ cancelItemAriaLabel: (name: string) => string;
27
+ /** Accessible name of an in-progress row's spinner. */
28
+ itemProgressAriaLabel: (name: string) => string;
29
+ /** Accessible name of a succeeded row's check icon. */
30
+ successLabel: string;
31
+ /** Trailing text on a canceled row. */
32
+ canceledLabel: string;
33
+ /** Fallback reason for a failed item without its own `message`. */
34
+ failedMessage: string;
35
+ /** Fallback reason for a warned item without its own `message`. */
36
+ warningMessage: string;
37
+ /** Accessible name of the collapsed queue's aggregate progress bar. */
38
+ queueProgressAriaLabel: string;
39
+ /**
40
+ * The aggregate bar's `aria-valuetext`. Given settled and total counts
41
+ * rather than a percentage, because "3 of 10 files" reads better than "36%"
42
+ * when the work is a list of files.
43
+ */
44
+ queueProgressValueText: (completed: number, total: number) => string;
45
+ /** Accessible name of the collapse toggle while expanded. */
46
+ collapseAriaLabel: string;
47
+ /** Accessible name of the expand toggle while collapsed. */
48
+ expandAriaLabel: string;
49
+ /** Accessible name of the close control. */
50
+ closeAriaLabel: string;
51
+ /** Heading of the close-confirmation dialog. */
52
+ closeConfirmHeader: string;
53
+ /** Confirmation description when an item is in progress and none failed. */
54
+ closeConfirmDescriptionInProgress: string;
55
+ /** Confirmation description when an item failed and none is in progress. */
56
+ closeConfirmDescriptionFailed: string;
57
+ /** Confirmation description when items are both in progress and failed. */
58
+ closeConfirmDescriptionMixed: string;
59
+ /** Confirm button of the close-confirmation dialog. */
60
+ closeConfirmLabel: string;
61
+ /** Cancel button of the close-confirmation dialog. */
62
+ closeCancelLabel: string;
63
+ }
64
+ /** Props for `TransferQueue`. */
65
+ export interface TransferQueueProps {
66
+ /**
67
+ * Heading, rendered verbatim. The host composes any count into it
68
+ * (e.g. "Importing 5 files"); the component never pluralizes.
69
+ */
70
+ title: string;
71
+ /** Items to show, in display order. The queue renders nothing when empty. */
72
+ items: TransferQueueItem[];
73
+ /**
74
+ * Called when the queue should close — from the close control (after a
75
+ * confirmation while work is in progress or a failure is unread), or by
76
+ * itself once every item has succeeded.
77
+ */
78
+ onClose: () => void;
79
+ /**
80
+ * Called with an item's id when the user cancels it. The host aborts the
81
+ * work and keeps the item in `items` with status `Canceled`. Without it,
82
+ * in-progress rows show a spinner only.
83
+ */
84
+ onCancelItem?: (id: string) => void;
85
+ /** Overrides for the English default strings. */
86
+ labels?: Partial<TransferQueueLabels>;
87
+ /**
88
+ * Milliseconds after every item succeeded before `onClose` is called by
89
+ * itself. Defaults to 8000; `0` or less disables it.
90
+ */
91
+ autoCloseDelay?: number;
92
+ /** Additional CSS classes for the root panel. */
93
+ className?: string;
94
+ /** Additional CSS classes for the scrollable list of rows. */
95
+ bodyClassName?: string;
96
+ }
97
+ /**
98
+ * A floating panel listing the files of an upload, download, import or export
99
+ * with a live status per row.
100
+ * aliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast
101
+ * Design system 2.0
102
+ *
103
+ * Each row shows the file's `FileIcon` and name, and a trailing status: a
104
+ * spinner (with a cancel control on hover or focus) while in progress, a check
105
+ * on success, a warning or error icon whose reason is both its tooltip and its
106
+ * accessible name, or "Canceled". The header carries the host's title, a count
107
+ * of failed items, and collapse and close controls. Collapsed while work runs,
108
+ * the rows are replaced by one aggregate `ProgressBar`.
109
+ *
110
+ * Closing while an item is in progress or has failed asks for confirmation
111
+ * first. Once every item has succeeded the queue closes itself after
112
+ * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
113
+ *
114
+ * The root is a polite `role="status"` live region. Positioning is left to
115
+ * the host — wrap it in a fixed container at the screen corner.
116
+ *
117
+ * @example
118
+ * ```tsx
119
+ * <TransferQueue
120
+ * title="Importing 2 files"
121
+ * items={[
122
+ * { id: '1', name: 'report.pdf', status: TransferQueueItemStatus.Success },
123
+ * { id: '2', name: 'data.csv', status: TransferQueueItemStatus.InProgress, percent: 40 },
124
+ * ]}
125
+ * onClose={handleClose}
126
+ * onCancelItem={handleCancel}
127
+ * />
128
+ * ```
129
+ *
130
+ * @param title - Heading, rendered verbatim
131
+ * @param items - Items to show, in display order
132
+ * @param onClose - Called when the queue should close
133
+ * @param [onCancelItem] - Called with an item's id when the user cancels it
134
+ * @param [labels] - Overrides for the English default strings
135
+ * @param [autoCloseDelay=8000] - Delay before an all-succeeded queue closes itself; `0` disables
136
+ * @param [className] - Additional CSS classes for the root panel
137
+ * @param [bodyClassName] - Additional CSS classes for the list of rows
138
+ */
139
+ export declare const TransferQueue: FC<TransferQueueProps>;
@@ -0,0 +1,16 @@
1
+ import { FC } from 'react';
2
+ import { TransferQueueLabels } from './TransferQueue';
3
+ interface TransferQueueHeaderProps {
4
+ title: string;
5
+ /** The badge renders only when this is positive. */
6
+ failedCount: number;
7
+ isCollapsed: boolean;
8
+ /** Id of the rows container the collapse toggle controls. */
9
+ itemsId: string;
10
+ labels: TransferQueueLabels;
11
+ onToggleCollapse: () => void;
12
+ onClose: () => void;
13
+ }
14
+ /** Queue heading with its failed-item badge and the collapse and close controls. */
15
+ export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
16
+ export {};
@@ -0,0 +1,10 @@
1
+ import { FC } from 'react';
2
+ import { TransferQueueItem, TransferQueueLabels } from './TransferQueue';
3
+ interface TransferQueueRowProps {
4
+ item: TransferQueueItem;
5
+ labels: TransferQueueLabels;
6
+ onCancel?: (id: string) => void;
7
+ }
8
+ /** One queue row: the file's icon and name, plus a trailing status slot. */
9
+ export declare const TransferQueueRow: FC<TransferQueueRowProps>;
10
+ export {};
@@ -0,0 +1,6 @@
1
+ import { TransferQueueLabels } from './TransferQueue';
2
+ /** Delay before a queue whose items have all succeeded closes itself. */
3
+ export declare const TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS = 8000;
4
+ export declare const STATUS_SLOT_CLASS = "flex size-7 shrink-0 items-center justify-center";
5
+ /** English defaults for every `TransferQueue` string; a host passes translations through `labels`. */
6
+ export declare const DEFAULT_TRANSFER_QUEUE_LABELS: TransferQueueLabels;
@@ -5,6 +5,11 @@
5
5
  */
6
6
  /** The floating panel itself: rounded raised card with a one-unit inset. */
7
7
  export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 shadow-md";
8
+ /**
9
+ * Stacks the rows of a menu or option list with a 2px gap, so the tints of
10
+ * adjacent selected and hovered rows read as separate rows instead of one block.
11
+ */
12
+ export declare const overlayListClassName = "flex flex-col gap-0.5";
8
13
  /**
9
14
  * A nested panel opened from a row of the surface above it. It is the same
10
15
  * object as its parent panel, so it reads from `overlaySurfaceClassName` too —
@@ -12,6 +17,14 @@ export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 s
12
17
  * rather than by the trigger further up.
13
18
  */
14
19
  export declare const overlaySubMenuClassName: string;
20
+ /**
21
+ * A submenu panel that lists kit-rendered rows. The top-level menu and option
22
+ * list wrap their rows in `py-1` inside the panel's `p-1`; a submenu renders
23
+ * its rows straight into the panel, so it takes the same total vertical inset
24
+ * here. A caller-rendered submenu body keeps the plain panel, as a
25
+ * `renderOverlay` body does at the top level.
26
+ */
27
+ export declare const overlaySubMenuListClassName: string;
15
28
  /**
16
29
  * A selectable row inside the panel. Keeps a visible focus ring: these rows are
17
30
  * reached by keyboard, and the 1.0 versions suppressed the ring outright.
@@ -1,5 +1,5 @@
1
1
  import { PopupSize } from '../../types/popup';
2
- export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
2
+ export declare const overlayBaseClassName = "z-popup flex items-center justify-center bg-blackout md:p-4";
3
3
  export declare const popupDividerClassName = "divide-tertiary divide-y";
4
4
  export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
5
5
  export declare const popupSizeClassMap: Record<PopupSize, string>;
@@ -80,6 +80,17 @@ export interface SchemaRendererTexts {
80
80
  selectTypePlaceholder: string;
81
81
  removeItemAriaLabel: string;
82
82
  removeFieldAriaLabel: string;
83
+ typeColumnHeader: string;
84
+ entryTypeString: string;
85
+ entryTypeNumber: string;
86
+ entryTypeBoolean: string;
87
+ entryTypeNull: string;
88
+ entryTypeObject: string;
89
+ entryTypeArray: string;
90
+ entryTypeChangeWarning: string;
91
+ booleanTrueOption: string;
92
+ booleanFalseOption: string;
93
+ invalidJsonError: string;
83
94
  }
84
95
  export declare const DEFAULT_SCHEMA_TEXTS: SchemaRendererTexts;
85
96
  export interface DialSchemaRendererProps {
@@ -1,4 +1,4 @@
1
- import { JsonSchema, JsonSchemaDef, ValidationError } from './types';
1
+ import { JsonSchemaType, JsonSchema, JsonSchemaDef, ValidationError } from './types';
2
2
  export declare function resolveRef(schema: JsonSchemaDef, rootSchema: JsonSchema, depth?: number): JsonSchemaDef;
3
3
  export declare function sortByPropertyOrder(entries: [string, JsonSchemaDef][]): [string, JsonSchemaDef][];
4
4
  export declare function isMissingRequiredValue(value: unknown): boolean;
@@ -11,3 +11,7 @@ export declare function buildSummary(value: unknown, schema: JsonSchemaDef, root
11
11
  export declare function detectAnyOfVariant(value: unknown, schemas: JsonSchemaDef[], rootSchema: JsonSchema): number;
12
12
  export declare function getItemTitle(item: unknown, discriminatorProp: string | undefined, index: number): string;
13
13
  export declare function getSchemaDefault(schema: JsonSchemaDef): unknown;
14
+ export type EntryType = JsonSchemaType.String | JsonSchemaType.Number | JsonSchemaType.Boolean | JsonSchemaType.Null | JsonSchemaType.Object | JsonSchemaType.Array;
15
+ export declare const ENTRY_TYPE_OPTIONS: EntryType[];
16
+ export declare function inferEntryType(value: unknown): EntryType;
17
+ export declare function getEntryTypeDefault(type: EntryType): unknown;
@@ -0,0 +1,189 @@
1
+ export declare const DIAL_KIT_CLASS: {
2
+ /** The `role="status"` root of a `Spinner`. */
3
+ readonly spinner: "dial-kit-spinner";
4
+ /**
5
+ * The outermost element of a `ProgressBar`: the box wrapping its label,
6
+ * track and readout — or the track itself, which is the root when the bar
7
+ * has neither.
8
+ */
9
+ readonly progressBar: "dial-kit-progress-bar";
10
+ /** The root of a `Skeleton`, wrapping its avatar and text rows. */
11
+ readonly skeleton: "dial-kit-skeleton";
12
+ /**
13
+ * The `Notification` surface. Present on every wrapper too — the toast and
14
+ * section-message variants of error, info, success, warning, loading and
15
+ * general all render this component.
16
+ */
17
+ readonly notification: "dial-kit-notification";
18
+ /** The empty-state root of `NoDataContent`. */
19
+ readonly noDataContent: "dial-kit-no-data-content";
20
+ /** The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar. */
21
+ readonly transferQueue: "dial-kit-transfer-queue";
22
+ /** The text element of a `Highlight`, which renders the matched query. */
23
+ readonly highlight: "dial-kit-highlight";
24
+ /** The caption line under a field, rendered by `CaptionText`. */
25
+ readonly captionText: "dial-kit-caption-text";
26
+ /**
27
+ * A caption in its error variant — what `ErrorText` renders. Additive to
28
+ * `captionText`, since one component draws both.
29
+ */
30
+ readonly errorText: "dial-kit-error-text";
31
+ /** The `Label` root, which wraps the `label` element and its info button. */
32
+ readonly label: "dial-kit-label";
33
+ /** The `article` element of a `CardShell`. */
34
+ readonly cardShell: "dial-kit-card-shell";
35
+ /** The `aside` element of a `CollapsibleSidebar`. */
36
+ readonly collapsibleSidebar: "dial-kit-collapsible-sidebar";
37
+ /** The content box inside a `ResizableContainer`'s resize frame. */
38
+ readonly resizableContainer: "dial-kit-resizable-container";
39
+ /**
40
+ * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
41
+ * `overlayClassName`.
42
+ */
43
+ readonly popup: "dial-kit-popup";
44
+ /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
45
+ readonly confirmationPopup: "dial-kit-confirmation-popup";
46
+ /** The root of an `Accordion`. */
47
+ readonly accordion: "dial-kit-accordion";
48
+ /** The breadcrumb root of a `FolderPath`. */
49
+ readonly folderPath: "dial-kit-folder-path";
50
+ /** The `nav` element of a `Breadcrumbs` trail. */
51
+ readonly breadcrumbs: "dial-kit-breadcrumbs";
52
+ /**
53
+ * One segment of a `Breadcrumbs` trail: the link, button or plain span that
54
+ * draws the label — not the `li`, which also holds the separator after it.
55
+ */
56
+ readonly breadcrumbsItem: "dial-kit-breadcrumbs-item";
57
+ /**
58
+ * The trigger wrapper of a `Dropdown`. Its floating panel is reached through
59
+ * `listClassName`.
60
+ */
61
+ readonly dropdown: "dial-kit-dropdown";
62
+ /**
63
+ * The `role="none"` item list inside a dropdown overlay — the box that holds
64
+ * the rows and owns their vertical padding. Present in both generations, and
65
+ * on a submenu's own list. It is *not* the floating panel.
66
+ */
67
+ readonly dropdownList: "dial-kit-dropdown-list";
68
+ /**
69
+ * One row of a floating overlay: a dropdown item, a `Select` option, a
70
+ * submenu trigger, or a submenu child. It sits on the element that draws the
71
+ * row box — so on the wrapper, not the inner button, for a row that has a
72
+ * `rightControl` beside it.
73
+ */
74
+ readonly menuItem: "dial-kit-menuitem";
75
+ /**
76
+ * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like
77
+ * the glyph itself — the row's `aria-checked` / `aria-selected` carries the
78
+ * state.
79
+ */
80
+ readonly menuItemCheck: "dial-kit-menuitem-check";
81
+ /** The primary icon of a `DialDropdownIcon` trigger. */
82
+ readonly dropdownIcon: "dial-kit-dropdown-icon";
83
+ /**
84
+ * The caret badge of a `DialDropdownIcon` trigger — the round plate the
85
+ * chevron sits on. Absent when `showCaret` is `false`.
86
+ */
87
+ readonly dropdownIconCaret: "dial-kit-dropdown-icon-caret";
88
+ /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */
89
+ readonly tooltip: "dial-kit-tooltip";
90
+ /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */
91
+ readonly interactiveTooltip: "dial-kit-interactive-tooltip";
92
+ /** The text element of an `EllipsisTooltip`, which is also its trigger. */
93
+ readonly ellipsisTooltip: "dial-kit-ellipsis-tooltip";
94
+ /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */
95
+ readonly search: "dial-kit-search";
96
+ /** The `PasswordInput` field, additive to `dial-kit-input`. */
97
+ readonly passwordInput: "dial-kit-password-input";
98
+ /** The `NumberInput` field, additive to `dial-kit-input`. */
99
+ readonly numberInput: "dial-kit-number-input";
100
+ /** The `TagInput` field, additive to `dial-kit-input`. */
101
+ readonly tagInput: "dial-kit-tag-input";
102
+ /** The root of a `Select`, wrapping its label, field and caption. */
103
+ readonly select: "dial-kit-select";
104
+ /** The trigger button of an `InlineSelect`. */
105
+ readonly inlineSelect: "dial-kit-inline-select";
106
+ /** The root of a `Calendar`, wrapping its label and date field. */
107
+ readonly calendar: "dial-kit-calendar";
108
+ /** The drop area of a `FileDropzone`. */
109
+ readonly fileDropzone: "dial-kit-file-dropzone";
110
+ /**
111
+ * The root of a `FileIcon`, wrapping the file or folder glyph (or
112
+ * its spinner while loading) and the shared badge.
113
+ */
114
+ readonly fileIcon: "dial-kit-file-icon";
115
+ /** The row of a `FileName`: its type icon, the name and any details. */
116
+ readonly fileName: "dial-kit-file-name";
117
+ /** The `FileName` row of a `FolderName`, additive to `fileName`. */
118
+ readonly folderName: "dial-kit-folder-name";
119
+ /**
120
+ * The `role="img"` badge of a `SharedEntityIndicator` — standalone, or the
121
+ * shared badge a `FileIcon` draws over its glyph.
122
+ */
123
+ readonly sharedEntityIndicator: "dial-kit-shared-entity-indicator";
124
+ /** The row of a `Switch`: the control and its label. */
125
+ readonly switch: "dial-kit-switch";
126
+ /** The row of a `Checkbox`: the box and its label. */
127
+ readonly checkbox: "dial-kit-checkbox";
128
+ /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */
129
+ readonly checkboxBox: "dial-kit-checkbox-box";
130
+ /** The row of a `Radio`: the circle and its label. */
131
+ readonly radio: "dial-kit-radio";
132
+ /** The root of a `RadioGroup`, wrapping its label and its radios. */
133
+ readonly radioGroup: "dial-kit-radio-group";
134
+ /**
135
+ * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed
136
+ * field that opens the group.
137
+ */
138
+ readonly radioGroupPopupField: "dial-kit-radio-group-popup-field";
139
+ /** The `role="radiogroup"` track of a `SegmentedControl`. */
140
+ readonly segmentedControl: "dial-kit-segmented-control";
141
+ /** One segment of a `SegmentedControl`. */
142
+ readonly segmentedControlItem: "dial-kit-segmented-control-item";
143
+ /**
144
+ * The outermost element of a `Tabs`: the box wrapping its heading and tab
145
+ * list — or the `role="tablist"` itself, which is the root when the tabs
146
+ * carry no `sectionLabel`.
147
+ */
148
+ readonly tabs: "dial-kit-tabs";
149
+ /**
150
+ * The `role="tablist"` holding the tabs, in either orientation. Additive to
151
+ * `tabs` when there is no heading above it, since one element is then both.
152
+ */
153
+ readonly tabList: "dial-kit-tab-list";
154
+ /**
155
+ * One tab inside `Tabs`, in either orientation. The selected tab of a
156
+ * horizontal row keeps its own `dial-kit-tab-selected-underline`.
157
+ */
158
+ readonly tab: "dial-kit-tab";
159
+ /**
160
+ * The selected tab, additive to `tab`. A horizontal row draws its selection
161
+ * with `dial-kit-tab-selected-underline`, which carries the gradient rule;
162
+ * this one carries no declarations and marks the selected tab in either
163
+ * orientation.
164
+ */
165
+ readonly tabSelected: "dial-kit-tab-selected";
166
+ /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */
167
+ readonly tabsSectionLabel: "dial-kit-tabs-section-label";
168
+ /**
169
+ * The `role="group"` row of a `FilterChips`. Its chips are `Tag` pills, so
170
+ * they carry `dial-kit-tag` and have no entry of their own.
171
+ */
172
+ readonly filterChips: "dial-kit-filter-chips";
173
+ /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */
174
+ readonly tag: "dial-kit-tag";
175
+ /**
176
+ * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it
177
+ * already carries.
178
+ */
179
+ readonly toggleIconButton: "dial-kit-toggle-icon-button";
180
+ /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */
181
+ readonly closeButton: "dial-kit-close-button";
182
+ /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */
183
+ readonly infoButton: "dial-kit-info-button";
184
+ /**
185
+ * The wrapper of a `ButtonDropdown` — its trigger carries
186
+ * `dial-kit-base-button`.
187
+ */
188
+ readonly buttonDropdown: "dial-kit-button-dropdown";
189
+ };
@@ -138,9 +138,12 @@ export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, typ
138
138
  export { GridSelectionMode } from './models/selection-mode';
139
139
  export { mergeClasses } from './utils/merge-classes';
140
140
  export { wrapInRootFolder } from './utils/flat-to-hierarchy-convertor.ts';
141
+ export { getTimezoneLabel } from './utils/timezone';
142
+ export type { TimezoneLabelOptions } from './utils/timezone';
141
143
  export { NAME_COLUMN, SIZE_COLUMN, UPDATED_AT_COLUMN, } from './constants/file-grid-columns';
142
144
  export { DIAL_ICON_SIZE, BASE_ICON_PROPS, BASE_ICON_SIZE, } from './constants/icon.ts';
143
145
  export { NOT_ALLOWED_SYMBOLS, NOT_ALLOWED_SPACES, NOT_ALLOWED_SYMBOLS_REGEXP, NOT_ALLOWED_SPACES_REGEXP, } from './constants/validation.ts';
146
+ export { DIAL_KIT_CLASS } from './constants/public-class-names';
144
147
  export { DialSchemaRenderer } from './components/SchemaRenderer/SchemaRenderer';
145
148
  export { SchemaRendererVariant, SchemaDisplayMode, SchemaOrientation, JsonSchemaType, } from './components/SchemaRenderer/types';
146
149
  export type { DialSchemaRendererProps, JsonSchema, JsonSchemaDef, ValidationError, } from './components/SchemaRenderer/types';
@@ -157,6 +160,9 @@ export { Calendar } from './components/New/Calendar/Calendar';
157
160
  export type { CalendarProps, CalendarValue, } from './components/New/Calendar/Calendar';
158
161
  export { FolderPath } from './components/New/FolderPath/FolderPath';
159
162
  export type { FolderPathProps } from './components/New/FolderPath/FolderPath';
163
+ export { BreadcrumbsSize } from './types/breadcrumbs';
164
+ export { Breadcrumbs } from './components/New/Breadcrumbs/Breadcrumbs';
165
+ export type { BreadcrumbsProps, BreadcrumbsItem, } from './components/New/Breadcrumbs/Breadcrumbs';
160
166
  export { DangerButton, GhostButton, LinkButton, NeutralButton, OutlinedButton, PrimaryButton, } from './components/New/Button/ButtonWrappers';
161
167
  export { DangerIconButton, GhostIconButton, NeutralIconButton, PrimaryIconButton, StaticIconButton, } from './components/New/IconButton/IconButtonWrappers';
162
168
  export { Button } from './components/New/Button/Button';
@@ -221,8 +227,18 @@ export { SegmentedControl } from './components/New/SegmentedControl/SegmentedCon
221
227
  export type { SegmentedControlProps, SegmentedControlItem, } from './components/New/SegmentedControl/SegmentedControl';
222
228
  export { Tabs } from './components/New/Tabs/Tabs';
223
229
  export type { TabsProps, TabItem } from './components/New/Tabs/Tabs';
230
+ export { FilterChips } from './components/New/FilterChips/FilterChips';
231
+ export type { FilterChipsProps, FilterChipItem, } from './components/New/FilterChips/FilterChips';
224
232
  export { FileDropzone } from './components/New/FileDropzone/FileDropzone';
225
233
  export type { FileDropzoneProps } from './components/New/FileDropzone/FileDropzone';
234
+ export { FileIcon } from './components/New/FileIcon/FileIcon';
235
+ export type { FileIconProps } from './components/New/FileIcon/FileIcon';
236
+ export { FileName } from './components/New/FileName/FileName';
237
+ export type { FileNameProps } from './components/New/FileName/FileName';
238
+ export { FolderName } from './components/New/FolderName/FolderName';
239
+ export type { FolderNameProps } from './components/New/FolderName/FolderName';
240
+ export { SharedEntityIndicator } from './components/New/SharedEntityIndicator/SharedEntityIndicator';
241
+ export type { SharedEntityIndicatorProps } from './components/New/SharedEntityIndicator/SharedEntityIndicator';
226
242
  export { Tag } from './components/New/Tag/Tag';
227
243
  export type { TagProps } from './components/New/Tag/Tag';
228
244
  export { TagAppearance } from './types/tag';
@@ -253,6 +269,10 @@ export { ConditionalResizableContainer } from './components/New/ResizableContain
253
269
  export type { ConditionalResizableContainerProps } from './components/New/ResizableContainer/ConditionalResizableContainer';
254
270
  export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
255
271
  export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
272
+ export { TransferQueue } from './components/New/TransferQueue/TransferQueue';
273
+ export type { TransferQueueItem, TransferQueueLabels, TransferQueueProps, } from './components/New/TransferQueue/TransferQueue';
274
+ export { DEFAULT_TRANSFER_QUEUE_LABELS, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS, } from './components/New/TransferQueue/constants';
275
+ export { TransferQueueItemStatus } from './types/transfer-queue';
256
276
  export { Grid, GRID_SELECTION_COLUMN_ID } from './components/New/Grid/Grid';
257
277
  export type { GridProps } from './components/New/Grid/Grid';
258
278
  export { DateCellRenderer } from './components/New/Grid/renderers/DateCellRenderer';