@epam/ai-dial-ui-kit 0.13.0-dev.59 → 0.13.0-dev.60
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.
- package/dist/CHANGELOG.md +6 -0
- package/dist/{JsonEditor-CV2FUqAs.js → JsonEditor-B5vfpxzh.js} +1 -1
- package/dist/{JsonEditor-DPQ_6Rk7.cjs → JsonEditor-CjemqUZ2.cjs} +1 -1
- package/dist/{MarkdownEditor-BEjYBI-4.cjs → MarkdownEditor-BrUvRwsB.cjs} +1 -1
- package/dist/{MarkdownEditor-DT_WX1cP.js → MarkdownEditor-DKG9YlGS.js} +1 -1
- package/dist/{MarkdownEditor-CfnRGBST.js → MarkdownEditor-DWcVxbdX.js} +15 -15
- package/dist/{MarkdownEditor-BpG28sAL.cjs → MarkdownEditor-xg-rmepY.cjs} +1 -1
- package/dist/components-manifest.json +63 -66
- package/dist/dial-ui-kit.cjs.js +1 -1
- package/dist/dial-ui-kit.es.js +126 -127
- package/dist/{index-qU5tP4t0.js → index-B4fgly61.js} +6103 -6094
- package/dist/{index-EGRzQwVW.cjs → index-CY5qji3j.cjs} +27 -27
- package/dist/index.css +2 -2
- package/dist/migration-guides/0.13.0/field-label-props-unification.md +94 -0
- package/dist/migration-guides/0.13.0/progress-bar-2-0-rewrite.md +103 -0
- package/dist/migration-guides/README.md +2 -0
- package/dist/src/components/New/Calendar/Calendar.d.ts +4 -2
- package/dist/src/components/New/FileDropzone/FileDropzone.d.ts +9 -0
- package/dist/src/components/New/MarkdownEditor/constants.d.ts +6 -1
- package/dist/src/components/New/Popup/Popup.d.ts +1 -1
- package/dist/src/components/New/Switch/Switch.d.ts +11 -5
- package/dist/src/components/Popup/Popup.d.ts +1 -1
- package/dist/src/components/ProgressBar/ProgressBar.d.ts +49 -11
- package/dist/src/index.d.ts +2 -2
- package/package.json +1 -1
package/dist/CHANGELOG.md
CHANGED
|
@@ -21,9 +21,14 @@ Versions match the git tags on the `development` branch.
|
|
|
21
21
|
See [migration guide](migration-guides/0.13.0/caption-semi-text-lead-rename.md).
|
|
22
22
|
- **`Notification` (2.0) — live-region role now follows the variant** — the container was hardcoded to `role="alert"` for every variant. `role="alert"` is implicitly `aria-live="assertive"` and interrupts the screen reader, which is wrong for routine feedback and for section messages that are static page content. `error` and `warning` keep `role="alert"`; `info`, `success`, and `loading` now use the polite `role="status"`. Pass an explicit `role` to override.
|
|
23
23
|
Consumers asserting `getByRole('alert')` on a non-error notification must query `status` instead.
|
|
24
|
+
- **`Calendar`, `Switch`, `ProgressBar` — `label` → `labelProps`** — the three components rendered their own label from a bare `label` prop, so `required`, `caption` and `size` were unreachable while every other 2.0 field (`Input`, `Textarea`, `Select`, `TagInput`, …) took them through a `labelProps` object. All three now take `labelProps: LabelProps` and render the shared `Label`. In `Switch` the track and the label text become two sibling `<label for>` elements rather than one wrapper — a `caption` info button nested in a label forwards its clicks to the labelled control — which moves `className` onto the row and the focus ring onto the track.
|
|
25
|
+
See [migration guide](migration-guides/0.13.0/field-label-props-unification.md).
|
|
26
|
+
- **`DialProgressBar` → `ProgressBar`** — the progress bar was built on 1.0 tokens slated for removal (`bg-layer-4`, `bg-controls-accent-primary`), so it could not appear in a 2.0 screen without pulling the legacy palette along. It is rebuilt on the 2.0 set and adopts the 2.0 conventions: the `Dial*` prefix is dropped, the bespoke `DialProgressBarSize` gives way to the shared `ElementSize` (`Medium` → `Standard`), and `ariaLabel` becomes the native `aria-label`. A new optional `labelProps` renders a `Label` above the bar and names it, replacing the generic `"Progress"` default that every bar shared, and `valueLabel` puts a readout (`"3.31 / 500"`) at the end of that row.
|
|
27
|
+
See [migration guide](migration-guides/0.13.0/progress-bar-2-0-rewrite.md).
|
|
24
28
|
|
|
25
29
|
### Fixed
|
|
26
30
|
|
|
31
|
+
- **`DialPopup` and `Popup` (2.0) — Enter closed the dialog the moment it opened** — the focus manager's default focuses the first tabbable descendant, and in a dialog whose header is a heading plus a close button, that is the close button. Every modal form therefore opened with the × focused, so the first Enter dismissed it instead of submitting ([ai-dial-chat#2579](https://github.com/epam/ai-dial-chat/issues/2579)). Initial focus now goes to the dialog container, which the focus manager marks `tabindex="-1"`: it is not a tab stop, screen readers announce the dialog on open, and Tab still moves to the first real control. `preventKeyboardOnOpen` is unchanged but no longer needed for this — the new default cannot raise the virtual keyboard either.
|
|
27
32
|
- **Focus rings were invisible on hosts still themed with the pre-0.13 token names** — the `focus-black` border token dropped straight to its light default (`#161B2D`) when `--stroke-focus-black` was undefined. Hosts themed by the DIAL themes service still ship the old `--stroke-focus`, so every focus ring built on the token — inputs, buttons, icon buttons, dropdowns, accordion, calendar, slider — was painted `#161B2D`, which is the dark theme's own `--bg-layer-2`: a border drawn in the background colour. The token now falls back through `--stroke-focus` before reaching the light default, so those hosts get their real focus colour again. Light themes and hosts with no theme at all are unchanged.
|
|
28
33
|
- **`DialGrid` — the legacy-token fallback inverted the raised/sunken relationship** — when a host defines the legacy DIAL layers but not `--bg-layer-raised`, the row surface fell back to `--bg-layer-0`, the _deepest_ layer in that palette (`#000000` in the DIAL dark theme), while odd rows fell back to the lighter `--bg-layer-2`. A grid whose base surface sits below its own sunken rows reads as inside-out, and pure black matches no other surface in the theme. The fallback is now `--bg-layer-3`, the elevated layer, which is what consumers already use for their own grid surfaces. The light default when no theme is present is unchanged (`#FCFCFC`).
|
|
29
34
|
- **`Notification` (2.0)** — the variant icon is hidden from assistive tech. The `loading` spinner carries its own `role="status"`, so it previously formed a live region nested inside the notification's, announcing the content twice.
|
|
@@ -40,6 +45,7 @@ Versions match the git tags on the `development` branch.
|
|
|
40
45
|
|
|
41
46
|
- **`Tag` (2.0)** — the generation 2.0 counterpart of `DialTag`: a compact label for selections, filters, and categories, with `standard` (24px) and `small` (20px) sizes, an optional icon, a `selected` state, and a removable variant. A tag given `onClick` is a keyboard-operable `role="button"`; its remove control is named `Remove <label>` and stops the click from also activating the tag. Built on 2.0 tokens and `IconButton`, so it pulls none of the 1.0 styling `DialTag` still carries.
|
|
42
47
|
- **`TagInput` (2.0)** — the generation 2.0 counterpart of `DialTagInput`, built on the 2.0 `Input`, so it shares its sizes, label, caption, error and disabled states. Works controlled (`value`) or uncontrolled (`defaultValue`), commits on Enter or comma, removes the last tag on Backspace in an empty input, and renders the tags as a named list of `Tag`s rather than as unlabelled markup. `collapseTagOverflow` keeps the row on one line behind a `+N` chip that names the tags it hides.
|
|
48
|
+
- **`FileDropzone` (2.0) — `labelProps`** — a `Label` above the drop area naming the field it fills, with the `required` marker and `caption` info button the other 2.0 fields already had. The existing `label` stays the copy inside the area: it says how to use the control, not what it is for. Both point at the same input, so its accessible name reads as the field name followed by that copy.
|
|
43
49
|
- **`Input` (2.0) — `wrapperRef`** — exposes the bordered field wrapper, so a caller rendering into the `children` slot can measure the space its content has to fit into. The input itself only ever reports its own share of the row.
|
|
44
50
|
- **`dial-kit-minimum-target`** — the `dial-kit-enhanced-target` mechanism at WCAG 2.5.8's Level AA minimum of 24×24, for controls where the 44px AAA target would overhang far enough to swallow their neighbours. Used by the `Tag` remove button; the rendered size is untouched.
|
|
45
51
|
- **Typography — `dial-display3-text` and `dial-tiny-lead-semi-text`** — the two steps the design scale defined but the kit never shipped: Display 3 (22px/32px semibold) and Tiny Text Lead (Semi Bold) (12px/16px semibold, `+0.03em`, uppercase). The `dial-*-text` scale now covers every row of the design table.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CY5qji3j.cjs"),l=require("@monaco-editor/react"),u={[r.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[r.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},c=({value:n,onChange:t,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=u})=>{function a(o){o?.editor?.defineTheme(e,d[e]),o.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}return r.jsxRuntimeExports.jsx(l.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:n,onChange:t,theme:e,onValidate:i,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...s??{}}})};exports.DialJsonEditor=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CY5qji3j.cjs"),c=require("@uiw/react-md-editor"),x=({value:t,onChange:s,height:r=300,preview:i="edit",theme:n=e.EditorThemes.dark,className:a,placeholder:o})=>{const d=o!==void 0&&!t;return e.jsxRuntimeExports.jsxs("div",{"data-color-mode":n,className:e.mergeClasses("relative",a),children:[e.jsxRuntimeExports.jsx(c,{value:t,onChange:l=>s?.(l||""),height:r,preview:i}),d&&e.jsxRuntimeExports.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:o})]})};exports.DialMarkdownEditor=x;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { j as e, D as
|
|
1
|
+
import { j as e, D as z, E as g, m as u } from "./index-B4fgly61.js";
|
|
2
2
|
import { useMemo as r } from "react";
|
|
3
|
-
import h, { divider as i, group as
|
|
4
|
-
import { IconTextSize as
|
|
5
|
-
const o =
|
|
3
|
+
import h, { divider as i, group as p, heading1 as C, heading2 as E, heading3 as k, bold as L, italic as M, strikethrough as w, unorderedListCommand as b, orderedListCommand as N, quote as T, link as f, code as v, table as O, codeEdit as S, codeLive as _, codePreview as y, fullscreen as D } from "@uiw/react-md-editor";
|
|
4
|
+
import { IconTextSize as P, IconBold as A, IconItalic as R, IconStrikethrough as B, IconList as Z, IconListNumbers as q, IconQuote as F, IconLink as K, IconCode as Q, IconTable as W, IconPencil as G, IconLayoutColumns as H, IconEye as J, IconMaximize as U } from "@tabler/icons-react";
|
|
5
|
+
const o = z.SM, s = (t, n) => ({
|
|
6
6
|
...t,
|
|
7
7
|
icon: n
|
|
8
8
|
}), V = () => [
|
|
@@ -13,38 +13,38 @@ const o = u.MD, s = (t, n) => ({
|
|
|
13
13
|
/* @__PURE__ */ e.jsx(B, { size: o })
|
|
14
14
|
),
|
|
15
15
|
i,
|
|
16
|
-
|
|
16
|
+
p([C, E, k], {
|
|
17
17
|
name: "heading",
|
|
18
18
|
groupName: "heading",
|
|
19
|
-
icon: /* @__PURE__ */ e.jsx(
|
|
19
|
+
icon: /* @__PURE__ */ e.jsx(P, { size: o }),
|
|
20
20
|
buttonProps: { "aria-label": "Text style", title: "Text style" }
|
|
21
21
|
}),
|
|
22
22
|
i,
|
|
23
23
|
s(
|
|
24
|
-
|
|
24
|
+
b,
|
|
25
25
|
/* @__PURE__ */ e.jsx(Z, { size: o })
|
|
26
26
|
),
|
|
27
27
|
s(
|
|
28
|
-
|
|
28
|
+
N,
|
|
29
29
|
/* @__PURE__ */ e.jsx(q, { size: o })
|
|
30
30
|
),
|
|
31
31
|
i,
|
|
32
|
-
s(
|
|
33
|
-
s(
|
|
34
|
-
s(
|
|
32
|
+
s(T, /* @__PURE__ */ e.jsx(F, { size: o })),
|
|
33
|
+
s(f, /* @__PURE__ */ e.jsx(K, { size: o })),
|
|
34
|
+
s(v, /* @__PURE__ */ e.jsx(Q, { size: o })),
|
|
35
35
|
i,
|
|
36
36
|
s(O, /* @__PURE__ */ e.jsx(W, { size: o }))
|
|
37
37
|
], X = () => [
|
|
38
|
-
s(
|
|
38
|
+
s(S, /* @__PURE__ */ e.jsx(G, { size: o })),
|
|
39
39
|
s(_, /* @__PURE__ */ e.jsx(H, { size: o })),
|
|
40
40
|
s(y, /* @__PURE__ */ e.jsx(J, { size: o })),
|
|
41
41
|
i,
|
|
42
|
-
s(
|
|
42
|
+
s(D, /* @__PURE__ */ e.jsx(U, { size: o }))
|
|
43
43
|
], se = ({
|
|
44
44
|
value: t,
|
|
45
45
|
onChange: n,
|
|
46
46
|
height: a = 300,
|
|
47
|
-
theme: d =
|
|
47
|
+
theme: d = g.light,
|
|
48
48
|
className: c,
|
|
49
49
|
placeholder: m,
|
|
50
50
|
defaultPreview: x = "edit"
|
|
@@ -54,7 +54,7 @@ const o = u.MD, s = (t, n) => ({
|
|
|
54
54
|
"div",
|
|
55
55
|
{
|
|
56
56
|
"data-color-mode": d,
|
|
57
|
-
className:
|
|
57
|
+
className: u("dial-kit-markdown-editor", c),
|
|
58
58
|
children: /* @__PURE__ */ e.jsx(
|
|
59
59
|
h,
|
|
60
60
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-CY5qji3j.cjs"),x=require("react"),e=require("@uiw/react-md-editor"),t=require("@tabler/icons-react"),o=s.DIAL_ICON_SIZE.SM,i=(n,r)=>({...n,icon:r}),p=()=>[i(e.bold,s.jsxRuntimeExports.jsx(t.IconBold,{size:o})),i(e.italic,s.jsxRuntimeExports.jsx(t.IconItalic,{size:o})),i(e.strikethrough,s.jsxRuntimeExports.jsx(t.IconStrikethrough,{size:o})),e.divider,e.group([e.heading1,e.heading2,e.heading3],{name:"heading",groupName:"heading",icon:s.jsxRuntimeExports.jsx(t.IconTextSize,{size:o}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),e.divider,i(e.unorderedListCommand,s.jsxRuntimeExports.jsx(t.IconList,{size:o})),i(e.orderedListCommand,s.jsxRuntimeExports.jsx(t.IconListNumbers,{size:o})),e.divider,i(e.quote,s.jsxRuntimeExports.jsx(t.IconQuote,{size:o})),i(e.link,s.jsxRuntimeExports.jsx(t.IconLink,{size:o})),i(e.code,s.jsxRuntimeExports.jsx(t.IconCode,{size:o})),e.divider,i(e.table,s.jsxRuntimeExports.jsx(t.IconTable,{size:o}))],I=()=>[i(e.codeEdit,s.jsxRuntimeExports.jsx(t.IconPencil,{size:o})),i(e.codeLive,s.jsxRuntimeExports.jsx(t.IconLayoutColumns,{size:o})),i(e.codePreview,s.jsxRuntimeExports.jsx(t.IconEye,{size:o})),e.divider,i(e.fullscreen,s.jsxRuntimeExports.jsx(t.IconMaximize,{size:o}))],R=({value:n,onChange:r,height:d=300,theme:c=s.EditorThemes.light,className:a,placeholder:m,defaultPreview:u="edit"})=>{const j=x.useMemo(()=>p(),[]),l=x.useMemo(()=>I(),[]);return s.jsxRuntimeExports.jsx("div",{"data-color-mode":c,className:s.mergeClasses("dial-kit-markdown-editor",a),children:s.jsxRuntimeExports.jsx(e,{value:n,onChange:E=>r?.(E||""),height:d,preview:u,commands:j,extraCommands:l,textareaProps:{placeholder:m}})})};exports.MarkdownEditor=R;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.0-dev.
|
|
3
|
-
"generatedAt": "2026-08-
|
|
2
|
+
"version": "0.13.0-dev.60",
|
|
3
|
+
"generatedAt": "2026-08-12T22:17:27.853Z",
|
|
4
4
|
"kit": {
|
|
5
5
|
"name": "@epam/ai-dial-ui-kit",
|
|
6
6
|
"description": "A modern UI kit for building AI DIAL interfaces with React",
|
|
@@ -56,6 +56,50 @@
|
|
|
56
56
|
"examples": [],
|
|
57
57
|
"sourceFile": "components/Spinner/Spinner.tsx"
|
|
58
58
|
},
|
|
59
|
+
{
|
|
60
|
+
"name": "ProgressBar",
|
|
61
|
+
"category": "Components_2_0",
|
|
62
|
+
"generation": "2.0",
|
|
63
|
+
"description": "A horizontal bar indicating progress toward a goal.\naliases: Progress|LoadingBar|Meter\nDesign system 2.0\n\nNames itself from `labelProps.label` through `aria-labelledby`; without one it\nfalls back to `aria-label`, and finally to `Progress` so the bar is never\nanonymous. Prefer a real label — several bars all announcing \"Progress\" tell a\nscreen reader user nothing about which is which.\n\nScreen readers derive the announced percentage from the value and `max`. When\nthe raw numbers are more useful than a percentage, pass `aria-valuetext`\n(e.g. `\"3 of 10 files\"`); it goes straight through to the element.\n\n`valueLabel` renders a readout at the end of the label row. Formatting stays\nwith the caller — the bar has no way to know how many decimals or which unit\na given quantity deserves. It does not name the bar, so pair it with a\nmatching `aria-valuetext` to have the same reading announced.",
|
|
64
|
+
"props": [
|
|
65
|
+
{
|
|
66
|
+
"name": "value",
|
|
67
|
+
"type": "number",
|
|
68
|
+
"required": true,
|
|
69
|
+
"description": "Current progress. Clamped into `0…max`."
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "max",
|
|
73
|
+
"type": "number",
|
|
74
|
+
"required": false,
|
|
75
|
+
"defaultValue": "100",
|
|
76
|
+
"description": "Value that counts as complete."
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "size",
|
|
80
|
+
"type": "ElementSize",
|
|
81
|
+
"required": false,
|
|
82
|
+
"defaultValue": "ElementSize.Standard",
|
|
83
|
+
"description": "Bar height: standard is 8px, small is 4px."
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "labelProps",
|
|
87
|
+
"type": "LabelProps",
|
|
88
|
+
"required": false,
|
|
89
|
+
"description": "Props of the rendered above the bar, which also names it."
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"name": "valueLabel",
|
|
93
|
+
"type": "ReactNode",
|
|
94
|
+
"required": false,
|
|
95
|
+
"description": "Readout rendered at the end of the label row."
|
|
96
|
+
}
|
|
97
|
+
],
|
|
98
|
+
"examples": [
|
|
99
|
+
"<ProgressBar value={40} labelProps={{ label: 'Uploading' }} />\n<ProgressBar value={3} max={10} aria-valuetext=\"3 of 10 files\" />\n<ProgressBar value={80} size={ElementSize.Small} />\n\n<ProgressBar\n value={3.313182}\n max={500}\n labelProps={{ label: 'Cost per month', caption: 'Billed monthly' }}\n valueLabel=\"3.31 / 500\"\n aria-valuetext=\"3.31 of 500\"\n/>"
|
|
100
|
+
],
|
|
101
|
+
"sourceFile": "components/ProgressBar/ProgressBar.tsx"
|
|
102
|
+
},
|
|
59
103
|
{
|
|
60
104
|
"name": "Skeleton",
|
|
61
105
|
"category": "Components_2_0",
|
|
@@ -372,10 +416,10 @@
|
|
|
372
416
|
"description": "Callback fired with the next value when the selection changes"
|
|
373
417
|
},
|
|
374
418
|
{
|
|
375
|
-
"name": "
|
|
376
|
-
"type": "
|
|
419
|
+
"name": "labelProps",
|
|
420
|
+
"type": "LabelProps",
|
|
377
421
|
"required": false,
|
|
378
|
-
"description": "
|
|
422
|
+
"description": "Props of the rendered above the control, including `label`, `required` and `caption`"
|
|
379
423
|
},
|
|
380
424
|
{
|
|
381
425
|
"name": "placeholder",
|
|
@@ -436,7 +480,7 @@
|
|
|
436
480
|
}
|
|
437
481
|
],
|
|
438
482
|
"examples": [
|
|
439
|
-
"<Calendar mode={CalendarMode.Date} value={date} onChange={setDate} />\n<Calendar mode={CalendarMode.DateTime} value={date} onChange={setDate} />\n<Calendar mode={CalendarMode.Time} value={time} onChange={setTime} />\n<Calendar mode={CalendarMode.Weekday} value={weekday} onChange={setWeekday} />\n<Calendar mode={CalendarMode.Date} value={date} onChange={setDate} locale=\"de-DE\" />"
|
|
483
|
+
"<Calendar mode={CalendarMode.Date} value={date} onChange={setDate} />\n<Calendar mode={CalendarMode.DateTime} value={date} onChange={setDate} />\n<Calendar mode={CalendarMode.Time} value={time} onChange={setTime} />\n<Calendar mode={CalendarMode.Weekday} value={weekday} onChange={setWeekday} />\n<Calendar mode={CalendarMode.Date} value={date} onChange={setDate} locale=\"de-DE\" />\n<Calendar labelProps={{ label: 'Start date', required: true }} value={date} onChange={setDate} />"
|
|
440
484
|
],
|
|
441
485
|
"sourceFile": "components/New/Calendar/Calendar.tsx"
|
|
442
486
|
},
|
|
@@ -1590,7 +1634,7 @@
|
|
|
1590
1634
|
"type": "boolean",
|
|
1591
1635
|
"required": false,
|
|
1592
1636
|
"defaultValue": "false",
|
|
1593
|
-
"description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile"
|
|
1637
|
+
"description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility"
|
|
1594
1638
|
}
|
|
1595
1639
|
],
|
|
1596
1640
|
"examples": [
|
|
@@ -2014,10 +2058,10 @@
|
|
|
2014
2058
|
"description": "A switch (toggle) control from the 2.0 design system.\naliases: ToggleSwitch|BinaryToggle|Switcher\nDesign system 2.0",
|
|
2015
2059
|
"props": [
|
|
2016
2060
|
{
|
|
2017
|
-
"name": "
|
|
2018
|
-
"type": "
|
|
2061
|
+
"name": "labelProps",
|
|
2062
|
+
"type": "LabelProps",
|
|
2019
2063
|
"required": false,
|
|
2020
|
-
"description": "
|
|
2064
|
+
"description": "Props of the rendered next to the control"
|
|
2021
2065
|
},
|
|
2022
2066
|
{
|
|
2023
2067
|
"name": "isOn",
|
|
@@ -2042,11 +2086,11 @@
|
|
|
2042
2086
|
"name": "caption",
|
|
2043
2087
|
"type": "string",
|
|
2044
2088
|
"required": false,
|
|
2045
|
-
"description": "Caption text rendered below the label"
|
|
2089
|
+
"description": "Caption text rendered below the label, and described by the switch"
|
|
2046
2090
|
}
|
|
2047
2091
|
],
|
|
2048
2092
|
"examples": [
|
|
2049
|
-
"<Switch\n id=\"notifications\"\n label
|
|
2093
|
+
"<Switch\n id=\"notifications\"\n labelProps={{ label: 'Active' }}\n isOn={isActive}\n onChange={setIsActive}\n/>"
|
|
2050
2094
|
],
|
|
2051
2095
|
"sourceFile": "components/New/Switch/Switch.tsx"
|
|
2052
2096
|
},
|
|
@@ -2104,6 +2148,12 @@
|
|
|
2104
2148
|
"generation": "2.0",
|
|
2105
2149
|
"description": "A dashed drop area that takes files by drag-and-drop or through the file picker.\naliases: LoadFileArea|FileUpload|DragDropUpload|UploadArea\nDesign system 2.0\n\nThe area is a label over a visually hidden file input, so the picker opens on\nclick and the control stays operable by keyboard and announced as a file input\nwithout any extra wiring. The border highlights while a drag hovers it.\n\n`accept` is enforced on drops as well as in the picker — the browser only\nfilters the latter — so `onChange` never receives a file the caller excluded.\nRejected files go to `onReject`; all copy stays with the caller, which keeps\nvalidation messages in the consumer's own wording and language.",
|
|
2106
2150
|
"props": [
|
|
2151
|
+
{
|
|
2152
|
+
"name": "labelProps",
|
|
2153
|
+
"type": "LabelProps",
|
|
2154
|
+
"required": false,
|
|
2155
|
+
"description": "Props of the naming the field, rendered above the area."
|
|
2156
|
+
},
|
|
2107
2157
|
{
|
|
2108
2158
|
"name": "label",
|
|
2109
2159
|
"type": "ReactNode",
|
|
@@ -3035,44 +3085,6 @@
|
|
|
3035
3085
|
],
|
|
3036
3086
|
"sourceFile": "components/Loader/Loader.tsx"
|
|
3037
3087
|
},
|
|
3038
|
-
{
|
|
3039
|
-
"name": "DialProgressBar",
|
|
3040
|
-
"category": "Status",
|
|
3041
|
-
"generation": "1.0",
|
|
3042
|
-
"description": "Design system 1.0",
|
|
3043
|
-
"props": [
|
|
3044
|
-
{
|
|
3045
|
-
"name": "value",
|
|
3046
|
-
"type": "number",
|
|
3047
|
-
"required": true
|
|
3048
|
-
},
|
|
3049
|
-
{
|
|
3050
|
-
"name": "max",
|
|
3051
|
-
"type": "number",
|
|
3052
|
-
"required": false,
|
|
3053
|
-
"defaultValue": "100"
|
|
3054
|
-
},
|
|
3055
|
-
{
|
|
3056
|
-
"name": "size",
|
|
3057
|
-
"type": "DialProgressBarSize",
|
|
3058
|
-
"required": false,
|
|
3059
|
-
"defaultValue": "DialProgressBarSize.Medium"
|
|
3060
|
-
},
|
|
3061
|
-
{
|
|
3062
|
-
"name": "className",
|
|
3063
|
-
"type": "string",
|
|
3064
|
-
"required": false
|
|
3065
|
-
},
|
|
3066
|
-
{
|
|
3067
|
-
"name": "ariaLabel",
|
|
3068
|
-
"type": "string",
|
|
3069
|
-
"required": false,
|
|
3070
|
-
"defaultValue": "'Progress'"
|
|
3071
|
-
}
|
|
3072
|
-
],
|
|
3073
|
-
"examples": [],
|
|
3074
|
-
"sourceFile": "components/ProgressBar/ProgressBar.tsx"
|
|
3075
|
-
},
|
|
3076
3088
|
{
|
|
3077
3089
|
"name": "DialPagination",
|
|
3078
3090
|
"category": "Navigation",
|
|
@@ -5294,7 +5306,7 @@
|
|
|
5294
5306
|
"type": "boolean",
|
|
5295
5307
|
"required": false,
|
|
5296
5308
|
"defaultValue": "false",
|
|
5297
|
-
"description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile"
|
|
5309
|
+
"description": "When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility"
|
|
5298
5310
|
}
|
|
5299
5311
|
],
|
|
5300
5312
|
"examples": [
|
|
@@ -7259,21 +7271,6 @@
|
|
|
7259
7271
|
],
|
|
7260
7272
|
"sourceFile": "models/analytics.ts"
|
|
7261
7273
|
},
|
|
7262
|
-
{
|
|
7263
|
-
"name": "DialProgressBarSize",
|
|
7264
|
-
"kind": "enum",
|
|
7265
|
-
"members": [
|
|
7266
|
-
{
|
|
7267
|
-
"name": "Small",
|
|
7268
|
-
"value": "'sm'"
|
|
7269
|
-
},
|
|
7270
|
-
{
|
|
7271
|
-
"name": "Medium",
|
|
7272
|
-
"value": "'md'"
|
|
7273
|
-
}
|
|
7274
|
-
],
|
|
7275
|
-
"sourceFile": "components/ProgressBar/ProgressBar.tsx"
|
|
7276
|
-
},
|
|
7277
7274
|
{
|
|
7278
7275
|
"name": "DialTooltipContainerOptions",
|
|
7279
7276
|
"kind": "interface",
|
package/dist/dial-ui-kit.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-CY5qji3j.cjs");exports.Accordion=a.Accordion;exports.AnalyticsCardVariant=a.AnalyticsCardVariant;exports.BASE_ICON_PROPS=a.BASE_ICON_PROPS;exports.BASE_ICON_SIZE=a.BASE_ICON_SIZE;exports.Button=a.Button;exports.ButtonAppearance=a.ButtonAppearance;exports.ButtonDropdown=a.ButtonDropdown;exports.ButtonVariant=a.ButtonVariant;exports.Calendar=a.Calendar;exports.CalendarMode=a.CalendarMode;exports.CaptionText=a.CaptionText;exports.CardShell=a.CardShell;exports.CloseButton=a.CloseButton;exports.ConfirmationPopup=a.ConfirmationPopup;exports.ConfirmationPopupVariant=a.ConfirmationPopupVariant;exports.DEFAULT_ANALYTICS_BAR_COLOR_MAP=a.DEFAULT_ANALYTICS_BAR_COLOR_MAP;exports.DEFAULT_GRID_DATE_FORMAT_OPTIONS=a.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_GRID_DATE_LOCALE=a.DEFAULT_LOCALE;exports.DIAL_ICON_SIZE=a.DIAL_ICON_SIZE;exports.DangerButton=a.DangerButton;exports.DangerIconButton=a.DangerIconButton;exports.DialAccordion=a.DialAccordion;exports.DialAnalyticsBar=a.DialAnalyticsBar;exports.DialAnalyticsBarGroup=a.DialAnalyticsBarGroup;exports.DialAnalyticsCard=a.DialAnalyticsCard;exports.DialAnalyticsErrorTag=a.DialAnalyticsErrorTag;exports.DialAnalyticsHistogram=a.DialAnalyticsHistogram;exports.DialAutocompleteInputValue=a.DialAutocompleteInputValue;exports.DialBreadcrumb=a.DialBreadcrumb;exports.DialBreadcrumbItem=a.DialBreadcrumbItem;exports.DialButton=a.DialButton;exports.DialButtonDropdown=a.DialButtonDropdown;exports.DialCaptionText=a.DialCaptionText;exports.DialCheckbox=a.DialCheckbox;exports.DialCloseButton=a.DialCloseButton;exports.DialCollapsibleSidebar=a.DialCollapsibleSidebar;exports.DialConditionalResizableContainer=a.DialConditionalResizableContainer;exports.DialConfirmationPopup=a.DialConfirmationPopup;exports.DialDangerButton=a.DialDangerButton;exports.DialDangerIconButton=a.DialDangerIconButton;exports.DialDateCellRenderer=a.DialDateCellRenderer;exports.DialDestinationFolderPopup=a.DialDestinationFolderPopup;exports.DialDraggableItem=a.DialDraggableItem;exports.DialDropdown=a.DialDropdown;exports.DialDropdownIcon=a.DialDropdownIcon;exports.DialEllipsisTooltip=a.DialEllipsisTooltip;exports.DialErrorText=a.DialErrorText;exports.DialFileIcon=a.DialFileIcon;exports.DialFileManager=a.DialFileManager;exports.DialFileManagerActions=a.DialFileManagerActions;exports.DialFileManagerTabs=a.DialFileManagerTabs;exports.DialFileName=a.DialFileName;exports.DialFileNodeType=a.DialFileNodeType;exports.DialFilePermission=a.DialFilePermission;exports.DialFileResourceType=a.DialFileResourceType;exports.DialFolderName=a.DialFolderName;exports.DialFoldersTree=a.DialFoldersTree;exports.DialFormItem=a.DialFormItem;exports.DialFormPopup=a.DialFormPopup;exports.DialGhostButton=a.DialGhostButton;exports.DialGhostIconButton=a.DialGhostIconButton;exports.DialGrid=a.DialGrid;exports.DialIcon=a.DialIcon;exports.DialIconButton=a.DialIconButton;exports.DialInput=a.DialInput;exports.DialInputPopup=a.DialInputPopup;exports.DialItemType=a.DialItemType;exports.DialLabel=a.DialLabel;exports.DialLabelledText=a.DialLabelledText;exports.DialLinkButton=a.DialLinkButton;exports.DialLoadFileArea=a.DialLoadFileArea;exports.DialLoadFileAreaField=a.DialLoadFileAreaField;exports.DialLoader=a.DialLoader;exports.DialNeutralButton=a.DialNeutralButton;exports.DialNeutralIconButton=a.DialNeutralIconButton;exports.DialNoDataContent=a.DialNoDataContent;exports.DialNotification=a.DialNotification;exports.DialNumberInput=a.DialNumberInput;exports.DialPagination=a.DialPagination;exports.DialPasswordInput=a.DialPasswordInput;exports.DialPopup=a.DialPopup;exports.DialPrimaryButton=a.DialPrimaryButton;exports.DialPrimaryIconButton=a.DialPrimaryIconButton;exports.DialRadioButton=a.DialRadioButton;exports.DialRadioGroup=a.DialRadioGroup;exports.DialRadioGroupPopupField=a.DialRadioGroupPopupField;exports.DialRemoveButton=a.DialRemoveButton;exports.DialResizableContainer=a.DialResizableContainer;exports.DialSchemaRenderer=a.DialSchemaRenderer;exports.DialSearch=a.DialSearch;exports.DialSecondaryIconButton=a.DialSecondaryIconButton;exports.DialSegmentedControl=a.DialSegmentedControl;exports.DialSelect=a.DialSelect;exports.DialSelectField=a.DialSelectField;exports.DialSharedEntityIndicator=a.DialSharedEntityIndicator;exports.DialSlider=a.DialSlider;exports.DialSteps=a.DialSteps;exports.DialSuccessIconButton=a.DialSuccessIconButton;exports.DialSwitch=a.DialSwitch;exports.DialTabs=a.DialTabs;exports.DialTag=a.DialTag;exports.DialTagInput=a.DialTagInput;exports.DialTertiaryIconButton=a.DialTertiaryIconButton;exports.DialTextarea=a.DialTextarea;exports.DialTooltip=a.DialTooltip;exports.DialTooltipContainer=a.DialTooltipContainer;exports.DialTooltipContent=a.DialTooltipContent;exports.DialTooltipTrigger=a.DialTooltipTrigger;exports.Dropdown=a.Dropdown;exports.DropdownItemType=a.DropdownItemType;exports.DropdownTrigger=a.DropdownTrigger;exports.DropdownType=a.DropdownType;exports.EDITABLE_CONTAINER_ATTRIBUTE=a.EDITABLE_CONTAINER_ATTRIBUTE;exports.EditorThemes=a.EditorThemes;exports.ElementSize=a.ElementSize;exports.ErrorMessageNotification=a.ErrorMessageNotification;exports.ErrorText=a.ErrorText;exports.ErrorToastNotification=a.ErrorToastNotification;exports.FabButton=a.FabButton;exports.FileDropzone=a.FileDropzone;exports.FileManagerColumnKey=a.FileManagerColumnKey;exports.FileManagerProvider=a.FileManagerProvider;exports.FlexibleActionsDirection=a.FlexibleActionsDirection;exports.FolderPath=a.FolderPath;exports.FormItemOrientation=a.FormItemOrientation;exports.GhostButton=a.GhostButton;exports.GhostIconButton=a.GhostIconButton;exports.GridSelectionMode=a.GridSelectionMode;exports.Highlight=a.Highlight;exports.IconButton=a.IconButton;exports.InfoButton=a.InfoButton;exports.InfoMessageNotification=a.InfoMessageNotification;exports.InfoToastNotification=a.InfoToastNotification;exports.InlineSelect=a.InlineSelect;exports.InlineSelectTrigger=a.InlineSelectTrigger;exports.Input=a.Input;exports.JsonSchemaType=a.JsonSchemaType;exports.Label=a.Label;exports.LazyDialJsonEditor=a.LazyDialJsonEditor;exports.LazyDialMarkdownEditor=a.LazyDialMarkdownEditor;exports.LazyMarkdownEditor=a.LazyMarkdownEditor;exports.LinkButton=a.LinkButton;exports.LoadingMessageNotification=a.LoadingMessageNotification;exports.LoadingToastNotification=a.LoadingToastNotification;exports.MultiSelectTags=a.MultiSelectTags;exports.NAME_COLUMN=a.NAME_COLUMN;exports.NOT_ALLOWED_SPACES=a.NOT_ALLOWED_SPACES;exports.NOT_ALLOWED_SPACES_REGEXP=a.NOT_ALLOWED_SPACES_REGEXP;exports.NOT_ALLOWED_SYMBOLS=a.NOT_ALLOWED_SYMBOLS;exports.NOT_ALLOWED_SYMBOLS_REGEXP=a.NOT_ALLOWED_SYMBOLS_REGEXP;exports.NeutralButton=a.NeutralButton;exports.NeutralIconButton=a.NeutralIconButton;exports.Notification=a.Notification;exports.NotificationType=a.NotificationType;exports.NotificationVariant=a.NotificationVariant;exports.NumberInput=a.NumberInput;exports.OutlinedButton=a.OutlinedButton;exports.PasswordInput=a.PasswordInput;exports.Popup=a.Popup;exports.PopupSize=a.PopupSize;exports.PrimaryButton=a.PrimaryButton;exports.PrimaryIconButton=a.PrimaryIconButton;exports.ProgressBar=a.ProgressBar;exports.RadioGroupOrientation=a.RadioGroupOrientation;exports.ResizableContainerSide=a.ResizableContainerSide;exports.SIZE_COLUMN=a.SIZE_COLUMN;exports.SchemaDisplayMode=a.SchemaDisplayMode;exports.SchemaOrientation=a.SchemaOrientation;exports.SchemaRendererVariant=a.SchemaRendererVariant;exports.ScreenResolution=a.ScreenResolution;exports.Select=a.Select;exports.SelectSize=a.SelectSize;exports.SelectVariant=a.SelectVariant;exports.Skeleton=a.Skeleton;exports.SkeletonAvatarShape=a.SkeletonAvatarShape;exports.SkeletonAvatarSize=a.SkeletonAvatarSize;exports.SkeletonVariant=a.SkeletonVariant;exports.Spinner=a.Spinner;exports.StaticIconButton=a.StaticIconButton;exports.StepStatus=a.StepStatus;exports.SuccessMessageNotification=a.SuccessMessageNotification;exports.SuccessToastNotification=a.SuccessToastNotification;exports.Switch=a.Switch;exports.TabOrientation=a.TabOrientation;exports.TabView=a.TabView;exports.Tabs=a.Tabs;exports.Tag=a.Tag;exports.TagInput=a.TagInput;exports.Textarea=a.Textarea;exports.UPDATED_AT_COLUMN=a.UPDATED_AT_COLUMN;exports.WarningMessageNotification=a.WarningMessageNotification;exports.WarningToastNotification=a.WarningToastNotification;exports.convertGridDateToDate=a.convertToDate;exports.editableContainerProps=a.editableContainerProps;exports.matchesAccept=a.matchesAccept;exports.mergeClasses=a.mergeClasses;exports.useDialFileManagerTabs=a.useDialFileManagerTabs;exports.useEditableItem=a.useEditableItem;exports.useFileManagerContext=a.useFileManagerContext;exports.wrapInRootFolder=a.wrapInRootFolder;
|