@epam/ai-dial-ui-kit 0.14.0 → 0.14.2
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 +2 -0
- package/dist/JsonEditor-qv1Z0dLX.cjs +1 -0
- package/dist/MarkdownEditor-DHn2pYOJ.cjs +1 -0
- package/dist/{MarkdownEditor-5kljDPcm.cjs → MarkdownEditor-jQ8nDJfx.cjs} +1 -1
- package/dist/{MarkdownEditorContainer-BqTGQArV.cjs → MarkdownEditorContainer-Bzcnoemw.cjs} +1 -1
- package/dist/components/JsonEditor/JsonEditor.js +7 -6
- package/dist/components/MarkdownEditor/MarkdownEditor.js +5 -5
- package/dist/components/New/MarkdownEditor/MarkdownEditor.js +9 -9
- package/dist/components/New/MarkdownEditor/constants.js +58 -37
- package/dist/components/New/PasswordInput/PasswordInput.js +33 -32
- package/dist/components-manifest.json +3 -3
- package/dist/dial-ui-kit.cjs +2 -2
- package/dist/editors.cjs +1 -1
- package/dist/lazy-tfN4sKhq.cjs +1 -0
- package/dist/src/components/New/PasswordInput/PasswordInput.d.ts +4 -1
- package/package.json +2 -2
- package/dist/JsonEditor-BlaSMX26.cjs +0 -1
- package/dist/MarkdownEditor-C0_gU7Fi.cjs +0 -1
- package/dist/lazy-B1eG0EeX.cjs +0 -1
package/dist/CHANGELOG.md
CHANGED
|
@@ -41,6 +41,8 @@ Versions match the git tags on the `development` branch.
|
|
|
41
41
|
|
|
42
42
|
### Fixed
|
|
43
43
|
|
|
44
|
+
- **`PasswordInput` (2.0) — a disabled field no longer draws a toggle it cannot act on** — the field masked its value correctly while disabled, but still rendered the reveal button beside it in a disabled state. The design draws a masked field with nothing after it (see [ai-dial-chat#8791](https://github.com/epam/ai-dial-chat/issues/8791), where a toolset's OAuth client secret sits in exactly that state once the user has logged in), and a control whose only two outcomes are both unreachable is space spent on nothing. The toggle is now absent while `disabled`, and masking resets with it: a field that is disabled and then enabled again comes back masked rather than silently restoring an earlier reveal, which previously left a revealed secret on screen with no pressed toggle to explain it. Nothing changes for an enabled field; a test that asserted on the disabled toggle should assert its absence instead.
|
|
45
|
+
- **An optional editor peer broke the build of every consumer that did not install it** — this release moved `@monaco-editor/react`, `monaco-editor` and `@uiw/react-md-editor` to optional peers, so `npm install` stops bringing them in; but `JsonEditor` still reached `Editor` and the 2.0 markdown toolbar still reached its command set through **named** imports. A named import of a package that is not installed is a build error, not a runtime one: the root entry re-exports `LazyDialJsonEditor`/`LazyMarkdownEditor`, a bundler resolves a dynamic import target to chunk it, and Vite's stub for the absent optional peer exports nothing — so a host that installed nothing but this kit and React got `[MISSING_EXPORT] "Editor" is not exported by "__vite-optional-peer-dep:@monaco-editor/react:@epam/ai-dial-ui-kit"` and no bundle. Both modules now read their bindings off a namespace import, inside the render/getter that needs them, so nothing resolves by name at build time and a missing engine surfaces where it belongs: on the consumer that renders an editor without installing it. Types stay named — they are erased before any bundler sees them. Nothing changes for a host that installs the editor peers.
|
|
44
46
|
- **`DialAnalyticsBarGroup` — compare-mode hover now highlights both bars of an entry as one block** — click already targeted the whole entry (label, delta, both bars), but hover used CSS `:hover` on each bar's own container, so only the bar under the pointer lit up (and a per-bar fill left a gap between the pair). The compare entry wrapper is now a Tailwind `group`; when `onBarClick` is set the shared bars container gets a default `group-hover` / `group-focus-visible` accent fill, and in compare mode `barClassName` applies to that container so consumers can use `group-hover:` for a continuous pair highlight. Single-bar mode is unchanged.
|
|
45
47
|
- **`Tooltip` (2.0) and `DialTooltip` — no tooltip anywhere in an app embedded below 640px, mouse or not** — both bubbles asked `useIsMobileScreen()`, a `window.innerWidth < 640` test, and rendered `null` when it was true. Width is the wrong question: an app running inside an iframe reads the _iframe's_ width, so a chat in a 380px overlay panel lost every tooltip it had — the agent name on a conversation row included — while the desktop mouse hovering it worked exactly as before. The gate is now the `(hover: none)` media query, via the new internal `useHasHover`: a touch-only phone still gets nothing, since nothing there can reveal a hover-only bubble, and a narrow embed driven by a pointer gets its tooltips back. A hybrid device that gains or loses a hovering pointer re-evaluates without a reload, and an environment that cannot answer the question at all (SSR, or no `matchMedia`) counts as hover-capable, so a tooltip is never dropped on a guess. `(pointer: coarse)` is deliberately not part of the query — a touchscreen laptop on a mouse hovers fine. Tooltips remain unusable by touch, so a control still must not depend on one for its accessible name.
|
|
46
48
|
- **`Grid` (2.0) — an `additionalGridOptions.rowSelection` put a second checkbox column on every row** — the grid draws its own selection column and switches ag-Grid's inputs off through `checkboxes` and `headerCheckbox`, but it passed `rowSelection` to ag-Grid _before_ spreading `additionalGridOptions`, so a consumer supplying that key at all replaced the whole object. Both flags default back to `true` for `multiRow`, and ag-Grid drew a full selection column of its own beside the grid's. `rowSelection` is now pulled out of `additionalGridOptions` and merged, the way `defaultColDef` already was: a consumer contributes `isRowSelectable` and the rest, while `mode`, `checkboxes` and `headerCheckbox` stay with `selectionMode` — which is what decides whether the column draws checkboxes or radios. Without a `selectionMode` there is no selection column, so a consumer's `rowSelection` still reaches ag-Grid untouched.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("./lazy-tfN4sKhq.cjs"),c=require("@monaco-editor/react");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const f=g(c),b={[a.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"}},[a.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"}}},k=({value:e,onChange:o,onValidateJSON:r,options:t,currentTheme:n,themesConfig:s=b})=>{function d(i){i?.editor?.defineTheme(n,s[n]),i.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}}]})}const{Editor:l}=f;return u.jsx(l,{beforeMount:d,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:r,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},...t??{}}})};exports.DialJsonEditor=k;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-tfN4sKhq.cjs"),k=require("./merge-classes-Dipy1Ih1.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-tfN4sKhq.cjs"),u=require("./merge-classes-Dipy1Ih1.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-CUKClcEz.cjs"),E=require("./lazy-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-CUKClcEz.cjs"),E=require("./lazy-tfN4sKhq.cjs"),N=require("./MarkdownEditor-jQ8nDJfx.cjs"),b=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-qv1Z0dLX.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),o=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||o)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,o&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:w,onChange:s=>C(s)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { EDITOR_THEMES_CONFIG as
|
|
3
|
-
import
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import { EDITOR_THEMES_CONFIG as c } from "../../constants/editor.js";
|
|
3
|
+
import * as m from "@monaco-editor/react";
|
|
4
4
|
const p = ({
|
|
5
5
|
value: o,
|
|
6
6
|
onChange: a,
|
|
7
7
|
onValidateJSON: r,
|
|
8
8
|
options: i,
|
|
9
9
|
currentTheme: e,
|
|
10
|
-
themesConfig: s =
|
|
10
|
+
themesConfig: s = c
|
|
11
11
|
}) => {
|
|
12
12
|
function n(t) {
|
|
13
13
|
t?.editor?.defineTheme(
|
|
@@ -29,8 +29,9 @@ const p = ({
|
|
|
29
29
|
]
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
const { Editor: l } = m;
|
|
33
|
+
return /* @__PURE__ */ u(
|
|
34
|
+
l,
|
|
34
35
|
{
|
|
35
36
|
beforeMount: n,
|
|
36
37
|
height: "100%",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as n, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import c from "@uiw/react-md-editor";
|
|
3
3
|
import { EditorThemes as p } from "../../types/editor.js";
|
|
4
|
-
import { mergeClasses as
|
|
4
|
+
import { mergeClasses as f } from "../../utils/merge-classes.js";
|
|
5
5
|
const g = ({
|
|
6
6
|
value: o,
|
|
7
7
|
onChange: r,
|
|
@@ -12,17 +12,17 @@ const g = ({
|
|
|
12
12
|
placeholder: e
|
|
13
13
|
}) => {
|
|
14
14
|
const m = e !== void 0 && !o;
|
|
15
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ n(
|
|
16
16
|
"div",
|
|
17
17
|
{
|
|
18
18
|
"data-color-mode": a,
|
|
19
|
-
className:
|
|
19
|
+
className: f("relative", d),
|
|
20
20
|
children: [
|
|
21
21
|
/* @__PURE__ */ t(
|
|
22
22
|
c,
|
|
23
23
|
{
|
|
24
24
|
value: o,
|
|
25
|
-
onChange: (
|
|
25
|
+
onChange: (l) => r?.(l || ""),
|
|
26
26
|
height: i,
|
|
27
27
|
preview: s
|
|
28
28
|
}
|
|
@@ -4,23 +4,23 @@ import g from "@uiw/react-md-editor";
|
|
|
4
4
|
import { EditorThemes as k } from "../../../types/editor.js";
|
|
5
5
|
import { mergeClasses as w } from "../../../utils/merge-classes.js";
|
|
6
6
|
import { getMarkdownFormattingCommands as x, getMarkdownExtraCommands as C } from "./constants.js";
|
|
7
|
-
const
|
|
7
|
+
const b = ({
|
|
8
8
|
value: m,
|
|
9
9
|
onChange: t,
|
|
10
10
|
height: a = 300,
|
|
11
11
|
theme: e = k.light,
|
|
12
|
-
className:
|
|
13
|
-
placeholder:
|
|
12
|
+
className: d,
|
|
13
|
+
placeholder: i,
|
|
14
14
|
defaultPreview: n = "edit",
|
|
15
15
|
id: s,
|
|
16
|
-
ariaLabel:
|
|
16
|
+
ariaLabel: l
|
|
17
17
|
}) => {
|
|
18
|
-
const
|
|
18
|
+
const p = r(() => x(), []), c = r(() => C(), []);
|
|
19
19
|
return /* @__PURE__ */ o(
|
|
20
20
|
"div",
|
|
21
21
|
{
|
|
22
22
|
"data-color-mode": e,
|
|
23
|
-
className: w("dial-kit-markdown-editor",
|
|
23
|
+
className: w("dial-kit-markdown-editor", d),
|
|
24
24
|
children: /* @__PURE__ */ o(
|
|
25
25
|
g,
|
|
26
26
|
{
|
|
@@ -28,14 +28,14 @@ const j = ({
|
|
|
28
28
|
onChange: (f) => t?.(f || ""),
|
|
29
29
|
height: a,
|
|
30
30
|
preview: n,
|
|
31
|
-
commands:
|
|
31
|
+
commands: p,
|
|
32
32
|
extraCommands: c,
|
|
33
|
-
textareaProps: { placeholder:
|
|
33
|
+
textareaProps: { placeholder: i, id: s, "aria-label": l }
|
|
34
34
|
}
|
|
35
35
|
)
|
|
36
36
|
}
|
|
37
37
|
);
|
|
38
38
|
};
|
|
39
39
|
export {
|
|
40
|
-
|
|
40
|
+
b as MarkdownEditor
|
|
41
41
|
};
|
|
@@ -1,43 +1,64 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { IconTextSize as
|
|
4
|
-
import { DIAL_KIT_ICON_STROKE as
|
|
5
|
-
import { DIAL_ICON_SIZE as
|
|
6
|
-
const
|
|
7
|
-
size:
|
|
8
|
-
stroke:
|
|
2
|
+
import * as a from "@uiw/react-md-editor";
|
|
3
|
+
import { IconTextSize as C, IconBold as _, IconItalic as p, IconStrikethrough as T, IconList as k, IconListNumbers as x, IconQuote as E, IconLink as N, IconCode as S, IconTable as b, IconPencil as f, IconLayoutColumns as A, IconEye as M, IconMaximize as P } from "@tabler/icons-react";
|
|
4
|
+
import { DIAL_KIT_ICON_STROKE as R } from "../constants/icon.js";
|
|
5
|
+
import { DIAL_ICON_SIZE as v } from "../../../constants/icon.js";
|
|
6
|
+
const w = v.SM, e = {
|
|
7
|
+
size: w,
|
|
8
|
+
stroke: R
|
|
9
9
|
}, t = (i, r) => ({
|
|
10
10
|
...i,
|
|
11
11
|
icon: r
|
|
12
|
-
}),
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
12
|
+
}), K = () => {
|
|
13
|
+
const {
|
|
14
|
+
bold: i,
|
|
15
|
+
code: r,
|
|
16
|
+
divider: n,
|
|
17
|
+
group: c,
|
|
18
|
+
heading1: d,
|
|
19
|
+
heading2: m,
|
|
20
|
+
heading3: I,
|
|
21
|
+
italic: s,
|
|
22
|
+
link: l,
|
|
23
|
+
orderedListCommand: u,
|
|
24
|
+
quote: g,
|
|
25
|
+
strikethrough: L,
|
|
26
|
+
table: O,
|
|
27
|
+
unorderedListCommand: h
|
|
28
|
+
} = a;
|
|
29
|
+
return [
|
|
30
|
+
t(i, /* @__PURE__ */ o(_, { ...e })),
|
|
31
|
+
t(s, /* @__PURE__ */ o(p, { ...e })),
|
|
32
|
+
t(L, /* @__PURE__ */ o(T, { ...e })),
|
|
33
|
+
n,
|
|
34
|
+
c([d, m, I], {
|
|
35
|
+
name: "heading",
|
|
36
|
+
groupName: "heading",
|
|
37
|
+
icon: /* @__PURE__ */ o(C, { ...e }),
|
|
38
|
+
buttonProps: { "aria-label": "Text style", title: "Text style" }
|
|
39
|
+
}),
|
|
40
|
+
n,
|
|
41
|
+
t(h, /* @__PURE__ */ o(k, { ...e })),
|
|
42
|
+
t(u, /* @__PURE__ */ o(x, { ...e })),
|
|
43
|
+
n,
|
|
44
|
+
t(g, /* @__PURE__ */ o(E, { ...e })),
|
|
45
|
+
t(l, /* @__PURE__ */ o(N, { ...e })),
|
|
46
|
+
t(r, /* @__PURE__ */ o(S, { ...e })),
|
|
47
|
+
n,
|
|
48
|
+
t(O, /* @__PURE__ */ o(b, { ...e }))
|
|
49
|
+
];
|
|
50
|
+
}, Z = () => {
|
|
51
|
+
const { codeEdit: i, codeLive: r, codePreview: n, divider: c, fullscreen: d } = a;
|
|
52
|
+
return [
|
|
53
|
+
t(i, /* @__PURE__ */ o(f, { ...e })),
|
|
54
|
+
t(r, /* @__PURE__ */ o(A, { ...e })),
|
|
55
|
+
t(n, /* @__PURE__ */ o(M, { ...e })),
|
|
56
|
+
c,
|
|
57
|
+
t(d, /* @__PURE__ */ o(P, { ...e }))
|
|
58
|
+
];
|
|
59
|
+
};
|
|
39
60
|
export {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
61
|
+
w as MARKDOWN_TOOLBAR_ICON_SIZE,
|
|
62
|
+
Z as getMarkdownExtraCommands,
|
|
63
|
+
K as getMarkdownFormattingCommands
|
|
43
64
|
};
|
|
@@ -1,54 +1,55 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { IconEyeOff as
|
|
3
|
-
import { useState as l } from "react";
|
|
4
|
-
import { GhostIconButton as
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { IconEyeOff as S, IconEye as u } from "@tabler/icons-react";
|
|
3
|
+
import { useState as l, useEffect as d } from "react";
|
|
4
|
+
import { GhostIconButton as E } from "../IconButton/IconButtonWrappers.js";
|
|
5
5
|
import { Input as w } from "../Input/Input.js";
|
|
6
|
-
import { DIAL_KIT_ICON_STROKE as
|
|
7
|
-
import { DIAL_ICON_SIZE as
|
|
8
|
-
import { ElementSize as
|
|
9
|
-
const
|
|
10
|
-
showPasswordLabel:
|
|
6
|
+
import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
|
|
7
|
+
import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
|
|
8
|
+
import { ElementSize as m } from "../../../types/size.js";
|
|
9
|
+
const C = ({
|
|
10
|
+
showPasswordLabel: n = "Show password",
|
|
11
11
|
hidePasswordLabel: a = "Hide password",
|
|
12
|
-
disabled:
|
|
13
|
-
size:
|
|
12
|
+
disabled: o,
|
|
13
|
+
size: f = m.Standard,
|
|
14
14
|
...p
|
|
15
15
|
}) => {
|
|
16
|
-
const [
|
|
17
|
-
return
|
|
16
|
+
const [I, e] = l(!1), r = I && !o;
|
|
17
|
+
return d(() => {
|
|
18
|
+
o && e(!1);
|
|
19
|
+
}, [o]), /* @__PURE__ */ t(
|
|
18
20
|
w,
|
|
19
21
|
{
|
|
20
22
|
...p,
|
|
21
|
-
size:
|
|
22
|
-
disabled:
|
|
23
|
-
type:
|
|
24
|
-
iconAfter: /* @__PURE__ */
|
|
25
|
-
|
|
23
|
+
size: f,
|
|
24
|
+
disabled: o,
|
|
25
|
+
type: r ? "text" : "password",
|
|
26
|
+
iconAfter: o ? void 0 : /* @__PURE__ */ t(
|
|
27
|
+
E,
|
|
26
28
|
{
|
|
27
|
-
size:
|
|
28
|
-
|
|
29
|
-
"aria-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
d,
|
|
29
|
+
size: m.Small,
|
|
30
|
+
"aria-label": r ? a : n,
|
|
31
|
+
"aria-pressed": r,
|
|
32
|
+
icon: r ? /* @__PURE__ */ t(
|
|
33
|
+
S,
|
|
33
34
|
{
|
|
34
|
-
size:
|
|
35
|
-
stroke:
|
|
35
|
+
size: s.SM,
|
|
36
|
+
stroke: i,
|
|
36
37
|
"aria-hidden": "true"
|
|
37
38
|
}
|
|
38
|
-
) : /* @__PURE__ */
|
|
39
|
-
|
|
39
|
+
) : /* @__PURE__ */ t(
|
|
40
|
+
u,
|
|
40
41
|
{
|
|
41
|
-
size:
|
|
42
|
-
stroke:
|
|
42
|
+
size: s.SM,
|
|
43
|
+
stroke: i,
|
|
43
44
|
"aria-hidden": "true"
|
|
44
45
|
}
|
|
45
46
|
),
|
|
46
|
-
onClick: () =>
|
|
47
|
+
onClick: () => e((c) => !c)
|
|
47
48
|
}
|
|
48
49
|
)
|
|
49
50
|
}
|
|
50
51
|
);
|
|
51
52
|
};
|
|
52
53
|
export {
|
|
53
|
-
|
|
54
|
+
C as PasswordInput
|
|
54
55
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.14.
|
|
3
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"version": "0.14.2",
|
|
3
|
+
"generatedAt": "2026-09-14T20:35:22.578Z",
|
|
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",
|
|
@@ -1517,7 +1517,7 @@
|
|
|
1517
1517
|
"name": "PasswordInput",
|
|
1518
1518
|
"category": "Components_2_0",
|
|
1519
1519
|
"generation": "2.0",
|
|
1520
|
-
"description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other prop is passed through.",
|
|
1520
|
+
"description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other prop is passed through.\n\nA disabled field is masked with no toggle at all, and comes back masked if it\nis enabled again.",
|
|
1521
1521
|
"props": [
|
|
1522
1522
|
{
|
|
1523
1523
|
"name": "showPasswordLabel",
|