@epam/ai-dial-settings-panel 1.3.0-dev.98 → 1.3.0-rc.0

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 (12) hide show
  1. package/components/ExtensionsSection/ExtensionServiceRow.d.ts +1 -1
  2. package/components/ExtensionsSection/ExtensionServiceRow.d.ts.map +1 -1
  3. package/components/SettingsPanel/SettingsPanel.d.ts.map +1 -1
  4. package/index.css +2 -2
  5. package/index.d.ts +1 -1
  6. package/index.d.ts.map +1 -1
  7. package/index.js +92 -68
  8. package/models/extensions-props.d.ts +18 -5
  9. package/models/extensions-props.d.ts.map +1 -1
  10. package/models/settings-panel-props.d.ts +9 -0
  11. package/models/settings-panel-props.d.ts.map +1 -1
  12. package/package.json +4 -4
package/components/ExtensionsSection/ExtensionServiceRow.d.ts CHANGED
@@ -8,6 +8,6 @@ export interface ExtensionServiceRowProps {
8
8
  /** Typography class overrides. */
9
9
  typography: ExtensionsTypography;
10
10
  }
11
- /** One service row of the Extensions table: an avatar with an optional corner warning badge, the service name, the description, and the host-supplied trailing action. */
11
+ /** One service row of the Extensions table: an avatar with an optional corner warning badge, the service name, the description, and the host-supplied trailing action or limited-access badge. */
12
12
  export declare const ExtensionServiceRow: FC<ExtensionServiceRowProps>;
13
13
  //# sourceMappingURL=ExtensionServiceRow.d.ts.map
package/components/ExtensionsSection/ExtensionServiceRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExtensionServiceRow.d.ts","sourceRoot":"","sources":["../../../src/components/ExtensionsSection/ExtensionServiceRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AASvC,eAAO,MAAM,uBAAuB,8EACyC,CAAC;AAI9E,uCAAuC;AACvC,MAAM,WAAW,wBAAwB;IACvC,wCAAwC;IACxC,GAAG,EAAE,oBAAoB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,EAAE,oBAAoB,CAAC;CAClC;AAED,0KAA0K;AAC1K,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA6E5D,CAAC"}
1
+ {"version":3,"file":"ExtensionServiceRow.d.ts","sourceRoot":"","sources":["../../../src/components/ExtensionsSection/ExtensionServiceRow.tsx"],"names":[],"mappings":"AASA,OAAO,EAAS,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AASvC,eAAO,MAAM,uBAAuB,8EACyC,CAAC;AAI9E,uCAAuC;AACvC,MAAM,WAAW,wBAAwB;IACvC,wCAAwC;IACxC,GAAG,EAAE,oBAAoB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,EAAE,oBAAoB,CAAC;CAClC;AAED,kMAAkM;AAClM,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAyH5D,CAAC"}
package/components/SettingsPanel/SettingsPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SettingsPanel/SettingsPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,kFAAkF;AAClF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwChD,CAAC"}
1
+ {"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SettingsPanel/SettingsPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,kFAAkF;AAClF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+ChD,CAAC"}
package/index.css CHANGED
@@ -1,3 +1,3 @@
1
- ._container_1qo5v_1{background:var(--ext-container-bg,var(--bg-layer-raised,#fcfcfc))}._columnHeader_1qo5v_5{color:var(--ext-column-header,var(--text-secondary,#57647a))}._headerRow_1qo5v_9{border-block-end:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._row_1qo5v_16{border-block-start:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._name_1qo5v_20{color:var(--ext-name,var(--text-primary,#161b2d))}._description_1qo5v_24{color:var(--ext-description,var(--text-secondary,#57647a))}._warningBadge_1qo5v_28{color:var(--ext-warning-badge,var(--text-warning-icon,#eec840))}
1
+ ._container_1a0g4_1{background:var(--ext-container-bg,var(--bg-layer-raised,#fcfcfc))}._columnHeader_1a0g4_5{color:var(--ext-column-header,var(--text-secondary,#57647a))}._headerRow_1a0g4_9{border-block-end:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._row_1a0g4_16{border-block-start:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._name_1a0g4_20{color:var(--ext-name,var(--text-primary,#161b2d))}._description_1a0g4_24{color:var(--ext-description,var(--text-secondary,#57647a))}._limitedAccessDescription_1a0g4_28{color:var(--ext-description,var(--text-primary,#161b2d))}._warningBadge_1a0g4_32{color:var(--ext-warning-badge,var(--text-warning-icon,#eec840))}._panel_12dqa_1{background:var(--sp-bg,var(--bg-layer-raised,#fcfcfc))}
2
2
  /*$vite$:1*//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
3
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.end-\[-10px\]{inset-inline-end:-10px}.bottom-\[-3px\]{bottom:-3px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.min-h-0{min-height:0}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.py-3{padding-block:.75rem}.text-start{text-align:start}.text-lg{font-size:1.125rem;line-height:var(--tw-leading,1.75rem)}.break-words{overflow-wrap:break-word}.shadow-md{--tw-shadow:0 8px 24px 0 var(--tw-shadow-color,var(--shadow-md,#2764d90f));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-width:1280px){.desktop\:grid{display:grid}.desktop\:min-h-16{min-height:4rem}.desktop\:grid-cols-\[minmax\(12rem\,1\.25fr\)_minmax\(0\,1fr\)_minmax\(8rem\,10rem\)\]{grid-template-columns:minmax(12rem,1.25fr) minmax(0,1fr) minmax(8rem,10rem)}.desktop\:items-center{align-items:center}.desktop\:gap-4{gap:1rem}.desktop\:px-6{padding-inline:1.5rem}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
3
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.inset-e-\[-10px\]{inset-inline-end:-10px}.bottom-\[-3px\]{bottom:-3px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.min-h-0{min-height:0}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.py-3{padding-block:.75rem}.text-end{text-align:end}.text-start{text-align:start}.wrap-break-word{overflow-wrap:break-word}.shadow-md{--tw-shadow:0 10px 30px 9px var(--tw-shadow-color,var(--shadow-md-2,var(--shadow-md,#2764d90f))), 0 0 8px 2px var(--tw-shadow-color,var(--shadow-md-1,#2764d90a));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-width:1280px){.desktop\:grid{display:grid}.desktop\:min-h-16{min-height:4rem}.desktop\:grid-cols-\[minmax\(12rem\,1\.25fr\)_minmax\(0\,1fr\)_minmax\(8rem\,10rem\)\]{grid-template-columns:minmax(12rem,1.25fr) minmax(0,1fr) minmax(8rem,10rem)}.desktop\:items-center{align-items:center}.desktop\:gap-4{gap:1rem}.desktop\:px-6{padding-inline:1.5rem}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
package/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { ExtensionsSection } from './components/ExtensionsSection/ExtensionsSection';
2
2
  export type { ExtensionServiceItem, ExtensionsColors, ExtensionsLabels, ExtensionsSectionProps, ExtensionsStyles, ExtensionsTypography, } from './models/extensions-props';
3
3
  export { SettingsPanel } from './components/SettingsPanel/SettingsPanel';
4
- export type { SettingsPanelItem, SettingsPanelProps, SettingsPanelStyles, SettingsPanelTypography, } from './models/settings-panel-props';
4
+ export type { SettingsPanelItem, SettingsPanelProps, SettingsPanelColors, SettingsPanelStyles, SettingsPanelTypography, } from './models/settings-panel-props';
5
5
  export { SETTINGS_PANEL_CLASS } from './constants/public-class-names';
6
6
  //# sourceMappingURL=index.d.ts.map
package/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}
package/index.js CHANGED
@@ -1,63 +1,85 @@
1
1
  import { InitialsAvatar as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
2
- import { DIAL_ICON_SIZE as r, TabOrientation as i, Tabs as a, Tooltip as o } from "@epam/ai-dial-ui-kit";
3
- import { IconAlertTriangleFilled as s } from "@tabler/icons-react";
4
- import { jsx as c, jsxs as l } from "react/jsx-runtime";
5
- var u = {
6
- container: "_container_1qo5v_1",
7
- columnHeader: "_columnHeader_1qo5v_5",
8
- headerRow: "_headerRow_1qo5v_9",
9
- row: "_row_1qo5v_16",
10
- name: "_name_1qo5v_20",
11
- description: "_description_1qo5v_24",
12
- warningBadge: "_warningBadge_1qo5v_28"
13
- }, d = "desktop:grid-cols-[minmax(12rem,1.25fr)_minmax(0,1fr)_minmax(8rem,10rem)]", f = 40, p = ({ row: t, typography: i }) => {
14
- let { nameClassName: a = "dial-small-semi-text", descriptionClassName: p = "dial-small-text" } = i, { displayName: m, description: h, isWarningVisible: g, authorizeLabel: _, action: v } = t;
15
- return /* @__PURE__ */ l("div", {
2
+ import { Badge as r, BadgeColor as i, BadgeVariant as a, DIAL_ICON_SIZE as o, TabOrientation as s, Tabs as c, Tooltip as l } from "@epam/ai-dial-ui-kit";
3
+ import { IconAlertTriangleFilled as u } from "@tabler/icons-react";
4
+ import { useId as d } from "react";
5
+ import { jsx as f, jsxs as p } from "react/jsx-runtime";
6
+ var m = {
7
+ container: "_container_1a0g4_1",
8
+ columnHeader: "_columnHeader_1a0g4_5",
9
+ headerRow: "_headerRow_1a0g4_9",
10
+ row: "_row_1a0g4_16",
11
+ name: "_name_1a0g4_20",
12
+ description: "_description_1a0g4_24",
13
+ limitedAccessDescription: "_limitedAccessDescription_1a0g4_28",
14
+ warningBadge: "_warningBadge_1a0g4_32"
15
+ }, h = "desktop:grid-cols-[minmax(12rem,1.25fr)_minmax(0,1fr)_minmax(8rem,10rem)]", g = 40, _ = ({ row: t, typography: s }) => {
16
+ let { nameClassName: c = "dial-small-semi-text", descriptionClassName: _ = "dial-small-text", tooltipTitleClassName: v = "dial-small-semi-text", tooltipDescriptionClassName: y = "dial-small-text", avatarInitialsClassName: b = "dial-h2-text" } = s, { displayName: x, description: S, avatarColor: C, isWarningVisible: w, limitedAccessLabel: T, limitedAccessTooltipTitle: E, limitedAccessTooltipDescription: D, action: O } = t, k = T != null, A = d();
17
+ return /* @__PURE__ */ p("div", {
16
18
  role: "row",
17
- className: n("grid grid-cols-1 gap-2 px-4 py-3 desktop:min-h-16 desktop:items-center desktop:gap-4 desktop:px-6", d, u.row),
19
+ className: n("grid grid-cols-1 gap-2 px-4 py-3 desktop:min-h-16 desktop:items-center desktop:gap-4 desktop:px-6", h, m.row),
18
20
  children: [
19
- /* @__PURE__ */ l("div", {
21
+ /* @__PURE__ */ p("div", {
20
22
  role: "cell",
21
23
  className: "flex min-w-0 items-center gap-3",
22
- children: [/* @__PURE__ */ l("div", {
24
+ children: [/* @__PURE__ */ p("div", {
23
25
  className: "relative shrink-0",
24
- children: [/* @__PURE__ */ c(e, {
25
- name: m,
26
- size: f,
27
- textClassName: "text-lg"
28
- }), g && /* @__PURE__ */ c(o, {
29
- tooltip: _,
30
- triggerClassName: n("absolute bottom-[-3px] end-[-10px] flex", u.warningBadge),
31
- children: /* @__PURE__ */ c("span", {
32
- role: "img",
33
- "aria-label": _,
34
- children: /* @__PURE__ */ c(s, {
35
- size: r.MD,
36
- "aria-hidden": !0
37
- })
26
+ children: [/* @__PURE__ */ f(e, {
27
+ name: x,
28
+ size: g,
29
+ color: C,
30
+ textClassName: b
31
+ }), w && /* @__PURE__ */ f("span", {
32
+ className: n("absolute inset-e-[-10px] bottom-[-3px] flex", m.warningBadge),
33
+ children: /* @__PURE__ */ f(u, {
34
+ size: o.MD,
35
+ "aria-hidden": !0
38
36
  })
39
37
  })]
40
- }), /* @__PURE__ */ c("span", {
41
- className: n(a, "min-w-0 flex-1 truncate", u.name),
42
- children: m
38
+ }), /* @__PURE__ */ f("span", {
39
+ className: n(c, "min-w-0 flex-1 truncate", m.name),
40
+ children: x
43
41
  })]
44
42
  }),
45
- /* @__PURE__ */ c("div", {
43
+ /* @__PURE__ */ f("div", {
46
44
  role: "cell",
47
45
  className: "flex min-w-0 items-center",
48
- children: /* @__PURE__ */ c("span", {
49
- className: n(p, "min-w-0 break-words", u.description),
50
- children: h
46
+ children: /* @__PURE__ */ f("span", {
47
+ className: n(_, "min-w-0 wrap-break-word", m.description),
48
+ children: S
51
49
  })
52
50
  }),
53
- /* @__PURE__ */ c("div", {
51
+ /* @__PURE__ */ f("div", {
54
52
  role: "cell",
55
- className: "flex items-center justify-end",
56
- children: v
53
+ className: "flex min-w-0 items-center justify-end",
54
+ children: k ? /* @__PURE__ */ p("div", {
55
+ className: "flex min-w-0 flex-col items-end gap-1",
56
+ children: [/* @__PURE__ */ f(l, {
57
+ tooltip: /* @__PURE__ */ p("span", {
58
+ className: "flex flex-col gap-1 text-start",
59
+ children: [/* @__PURE__ */ f("span", {
60
+ className: v,
61
+ children: E
62
+ }), /* @__PURE__ */ f("span", {
63
+ className: y,
64
+ children: D
65
+ })]
66
+ }),
67
+ children: /* @__PURE__ */ f(r, {
68
+ label: T,
69
+ variant: a.Filled,
70
+ color: i.Red,
71
+ "aria-describedby": A
72
+ })
73
+ }), /* @__PURE__ */ f("span", {
74
+ id: A,
75
+ className: n(_, "min-w-0 text-end wrap-break-word", m.limitedAccessDescription),
76
+ children: D
77
+ })]
78
+ }) : O
57
79
  })
58
80
  ]
59
81
  });
60
- }, m = ({ rows: e, labels: r, styles: i }) => {
82
+ }, v = ({ rows: e, labels: r, styles: i }) => {
61
83
  let { colors: a } = i ?? {}, o = {
62
84
  columnHeaderClassName: "dial-caption-lead-semi-text",
63
85
  ...i?.typography
@@ -69,63 +91,65 @@ var u = {
69
91
  "--ext-description": a?.descriptionColor,
70
92
  "--ext-warning-badge": a?.warningBadgeColor
71
93
  });
72
- return /* @__PURE__ */ l("div", {
94
+ return /* @__PURE__ */ p("div", {
73
95
  role: "table",
74
96
  "aria-label": r.tableAriaLabel,
75
- className: n("overflow-hidden rounded-xl shadow-md", u.container),
97
+ className: n("overflow-hidden rounded-xl shadow-md", m.container),
76
98
  style: s,
77
- children: [/* @__PURE__ */ l("div", {
99
+ children: [/* @__PURE__ */ p("div", {
78
100
  role: "row",
79
- className: n("hidden gap-4 px-6 py-3 desktop:grid desktop:items-center", d, u.headerRow),
101
+ className: n("hidden gap-4 px-6 py-3 desktop:grid desktop:items-center", h, m.headerRow),
80
102
  children: [
81
- /* @__PURE__ */ c("span", {
103
+ /* @__PURE__ */ f("span", {
82
104
  role: "columnheader",
83
- className: n("text-start", o.columnHeaderClassName, u.columnHeader),
105
+ className: n("text-start", o.columnHeaderClassName, m.columnHeader),
84
106
  children: r.nameColumnLabel
85
107
  }),
86
- /* @__PURE__ */ c("span", {
108
+ /* @__PURE__ */ f("span", {
87
109
  role: "columnheader",
88
- className: n("text-start", o.columnHeaderClassName, u.columnHeader),
110
+ className: n("text-start", o.columnHeaderClassName, m.columnHeader),
89
111
  children: r.descriptionColumnLabel
90
112
  }),
91
- /* @__PURE__ */ c("span", {
113
+ /* @__PURE__ */ f("span", {
92
114
  role: "columnheader",
93
- children: /* @__PURE__ */ c("span", {
115
+ children: /* @__PURE__ */ f("span", {
94
116
  className: "sr-only",
95
117
  children: r.actionsColumnLabel
96
118
  })
97
119
  })
98
120
  ]
99
- }), /* @__PURE__ */ c("div", {
121
+ }), /* @__PURE__ */ f("div", {
100
122
  role: "rowgroup",
101
- children: e.map((e) => /* @__PURE__ */ c(p, {
123
+ children: e.map((e) => /* @__PURE__ */ f(_, {
102
124
  row: e,
103
125
  typography: o
104
126
  }, e.id))
105
127
  })]
106
128
  });
107
- }, h = {
129
+ }, y = {
108
130
  panel: "dial-settings-panel-panel",
109
131
  tabList: "dial-settings-panel-tab-list",
110
132
  tab: "dial-settings-panel-tab"
111
- }, g = ({ items: e, activeId: t, onSelect: r, sectionLabel: o, styles: s, className: l }) => {
112
- let { sectionLabelClassName: u = "dial-h1-text" } = s?.typography ?? {};
113
- return /* @__PURE__ */ c("div", {
114
- className: n("flex min-h-0 flex-col bg-layer-raised", l, h.panel),
115
- children: /* @__PURE__ */ c(a, {
116
- orientation: i.Vertical,
117
- sectionLabel: o,
133
+ }, b = { panel: "_panel_12dqa_1" }, x = ({ items: e, activeId: r, onSelect: i, sectionLabel: a, ariaLabel: o, styles: l, className: u }) => {
134
+ let { sectionLabelClassName: d = "dial-h1-text" } = l?.typography ?? {}, p = t({ "--sp-bg": l?.colors?.background });
135
+ return /* @__PURE__ */ f("div", {
136
+ style: p,
137
+ className: n("flex min-h-0 flex-col", b.panel, u, y.panel),
138
+ children: /* @__PURE__ */ f(c, {
139
+ orientation: s.Vertical,
140
+ sectionLabel: a,
141
+ ariaLabel: o,
118
142
  tabs: e,
119
- activeTabId: t,
143
+ activeTabId: r,
120
144
  onTabChange: (e) => {
121
- e !== t && r(e);
145
+ e !== r && i(e);
122
146
  },
123
147
  className: "min-h-0 grow",
124
- tabListClassName: h.tabList,
125
- tabClassName: h.tab,
126
- sectionLabelClassName: u
148
+ tabListClassName: y.tabList,
149
+ tabClassName: y.tab,
150
+ sectionLabelClassName: d
127
151
  })
128
152
  });
129
153
  };
130
154
  //#endregion
131
- export { m as ExtensionsSection, h as SETTINGS_PANEL_CLASS, g as SettingsPanel };
155
+ export { v as ExtensionsSection, y as SETTINGS_PANEL_CLASS, x as SettingsPanel };
package/models/extensions-props.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { AvatarColorClasses } from '@epam/ai-dial-ui-kit';
1
2
  import { ReactNode } from 'react';
2
3
  /** One extension service rendered as one row of the Extensions table. */
3
4
  export interface ExtensionServiceItem {
@@ -5,13 +6,19 @@ export interface ExtensionServiceItem {
5
6
  id: string;
6
7
  /** Service display name shown beside the avatar and used for its initials. */
7
8
  displayName: string;
9
+ /** Explicit avatar colour pair (an `AVATAR_PALETTE` entry from the host) overriding the name-derived colour; omitted keeps the deterministic pick. */
10
+ avatarColor?: AvatarColorClasses;
8
11
  /** Localized service description shown in the Description cell. */
9
12
  description: string;
10
13
  /** Whether the disconnected-state warning badge renders on the avatar's corner. */
11
14
  isWarningVisible: boolean;
12
- /** Accessible name and tooltip text of the warning badge. */
13
- authorizeLabel: string;
14
- /** The row's trailing action (e.g. a Log in / Log out button), owned by the host. */
15
+ /** Label of the red limited-access `Badge` that replaces the row's action while the host reports limited access; the row renders no badge when omitted. */
16
+ limitedAccessLabel?: string;
17
+ /** Bold title line of the limited-access badge's tooltip. */
18
+ limitedAccessTooltipTitle?: string;
19
+ /** Explanation shown below the limited-access badge and repeated in its tooltip; also referenced by the badge's aria-describedby. */
20
+ limitedAccessTooltipDescription?: string;
21
+ /** The row's trailing action (e.g. a Log in / Log out button), owned by the host; ignored while `limitedAccessLabel` is set. */
15
22
  action: ReactNode;
16
23
  }
17
24
  /** Localized strings shared by the Extensions table shell. */
@@ -35,7 +42,7 @@ export interface ExtensionsColors {
35
42
  rowDividerColor?: string;
36
43
  /** Service name text color. Fallback: `--text-primary`. */
37
44
  nameColor?: string;
38
- /** Service description text color. Fallback: `--text-secondary`. */
45
+ /** Service and limited-access description text color. Fallback: `--text-secondary` for the service description, `--text-primary` for the limited-access explanation. */
39
46
  descriptionColor?: string;
40
47
  /** Warning badge color. Fallback: `--text-warning-icon`. */
41
48
  warningBadgeColor?: string;
@@ -46,8 +53,14 @@ export interface ExtensionsTypography {
46
53
  columnHeaderClassName?: string;
47
54
  /** CSS class for the service name. Defaults to `'dial-small-semi-text'`. */
48
55
  nameClassName?: string;
49
- /** CSS class for the service description. Defaults to `'dial-small-text'`. */
56
+ /** CSS class for the service description and limited-access explanation. Defaults to `'dial-small-text'`. */
50
57
  descriptionClassName?: string;
58
+ /** CSS class for the limited-access tooltip title. Defaults to `'dial-small-semi-text'`. */
59
+ tooltipTitleClassName?: string;
60
+ /** CSS class for the limited-access tooltip description. Defaults to `'dial-small-text'`. */
61
+ tooltipDescriptionClassName?: string;
62
+ /** CSS class for the initials in a service avatar without an icon. Defaults to `'dial-h2-text'`. */
63
+ avatarInitialsClassName?: string;
51
64
  }
52
65
  /** Style overrides accepted by `ExtensionsSection`. */
53
66
  export interface ExtensionsStyles {
package/models/extensions-props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"extensions-props.d.ts","sourceRoot":"","sources":["../../src/models/extensions-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,yEAAyE;AACzE,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,gBAAgB,EAAE,OAAO,CAAC;IAC1B,6DAA6D;IAC7D,cAAc,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mFAAmF;IACnF,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,iFAAiF;AACjF,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,uDAAuD;AACvD,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACnC;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,mDAAmD;IACnD,MAAM,EAAE,gBAAgB,CAAC;IACzB,uFAAuF;IACvF,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B"}
1
+ {"version":3,"file":"extensions-props.d.ts","sourceRoot":"","sources":["../../src/models/extensions-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,yEAAyE;AACzE,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,sJAAsJ;IACtJ,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,gBAAgB,EAAE,OAAO,CAAC;IAC1B,2JAA2J;IAC3J,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qIAAqI;IACrI,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,gIAAgI;IAChI,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mFAAmF;IACnF,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,iFAAiF;AACjF,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wKAAwK;IACxK,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6GAA6G;IAC7G,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4FAA4F;IAC5F,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,6FAA6F;IAC7F,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,oGAAoG;IACpG,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,uDAAuD;AACvD,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACnC;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,mDAAmD;IACnD,MAAM,EAAE,gBAAgB,CAAC;IACzB,uFAAuF;IACvF,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B"}
package/models/settings-panel-props.d.ts CHANGED
@@ -15,8 +15,15 @@ export interface SettingsPanelTypography {
15
15
  /** Typography class applied to the section header. Defaults to `'dial-h1-text'`. */
16
16
  sectionLabelClassName?: string;
17
17
  }
18
+ /** Color overrides for the {@link SettingsPanel} component, applied as CSS custom properties. */
19
+ export interface SettingsPanelColors {
20
+ /** Panel background color. Defaults to `--bg-layer-raised`. */
21
+ background?: string;
22
+ }
18
23
  /** Style overrides for the {@link SettingsPanel} component. */
19
24
  export interface SettingsPanelStyles {
25
+ /** Color overrides. */
26
+ colors?: SettingsPanelColors;
20
27
  /** Typography overrides. */
21
28
  typography?: SettingsPanelTypography;
22
29
  }
@@ -30,6 +37,8 @@ export interface SettingsPanelProps {
30
37
  onSelect: (id: string) => void;
31
38
  /** Already-localized header text rendered above the item list. Omit to render no header. */
32
39
  sectionLabel?: string;
40
+ /** Already-localized accessible name for the item list, for a panel rendered without `sectionLabel`. */
41
+ ariaLabel?: string;
33
42
  /** Style overrides. */
34
43
  styles?: SettingsPanelStyles;
35
44
  /** Additional CSS class applied to the root element. */
package/models/settings-panel-props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"settings-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/settings-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,uBAAuB,CAAC;CACtC;AAED,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iGAAiG;IACjG,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
1
+ {"version":3,"file":"settings-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/settings-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,iGAAiG;AACjG,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,uBAAuB,CAAC;CACtC;AAED,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iGAAiG;IACjG,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wGAAwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-settings-panel",
3
3
  "description": "Presentational settings surfaces: a vertical settings navigation panel and the Extensions services table",
4
- "version": "1.3.0-dev.98",
4
+ "version": "1.3.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -17,11 +17,11 @@
17
17
  }
18
18
  },
19
19
  "dependencies": {
20
- "@tabler/icons-react": "^3.44.0"
20
+ "@tabler/icons-react": "^3.50.0"
21
21
  },
22
22
  "peerDependencies": {
23
- "@epam/ai-dial-chat-shared": "1.3.0-dev.98",
24
- "@epam/ai-dial-ui-kit": "^0.16.0-dev.13",
23
+ "@epam/ai-dial-chat-shared": "1.3.0-rc.0",
24
+ "@epam/ai-dial-ui-kit": "^0.16.0",
25
25
  "react": "^19.2.8"
26
26
  },
27
27
  "repository": {