@epam/ai-dial-settings-panel 1.2.0-dev.85 → 1.2.0-dev.89
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SettingsPanel/SettingsPanel.tsx"],"names":[],"mappings":"
|
|
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,CAsDhD,CAAC"}
|
package/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.
|
|
2
|
-
/*$vite$:1*/.flex{display:flex}.h-
|
|
1
|
+
._sectionLabel_1vf1h_2{color:var(--sp-section-label-text,var(--text-primary,#161b2d))}._row_1vf1h_12{color:var(--sp-row-text,var(--text-secondary,#57647a))}._row_1vf1h_12:focus-visible{outline-color:var(--sp-row-focus-outline,var(--stroke-focus-black,#161b2d))}@media (hover:hover){._row_1vf1h_12:hover:not(:disabled):not(.dial-kit-tab-selected){background-color:var(--sp-row-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}}._row_1vf1h_12:disabled{cursor:not-allowed}._row_1vf1h_12.dial-kit-tab-selected{color:var(--sp-active-row-text,var(--text-accent,#1d4ed8));background-color:var(--sp-active-row-bg,var(--bg-control-accent-alpha,#2764d90f))}@media (hover:hover){._row_1vf1h_12.dial-kit-tab-selected:hover{background-color:var(--sp-active-row-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}}
|
|
2
|
+
/*$vite$:1*/.flex{display:flex}.min-h-0{min-height:0}.grow{flex-grow:1}.flex-col{flex-direction:column}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
|
package/index.js
CHANGED
|
@@ -1,96 +1,41 @@
|
|
|
1
1
|
import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
|
|
2
|
-
import {
|
|
3
|
-
import { jsx as i
|
|
2
|
+
import { TabOrientation as n, Tabs as r } from "@epam/ai-dial-ui-kit";
|
|
3
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
4
4
|
//#region src/constants/public-class-names.ts
|
|
5
|
-
var
|
|
5
|
+
var a = {
|
|
6
6
|
panel: "dial-settings-panel-panel",
|
|
7
7
|
tabList: "dial-settings-panel-tab-list",
|
|
8
8
|
tab: "dial-settings-panel-tab"
|
|
9
|
-
},
|
|
10
|
-
sectionLabel: "
|
|
11
|
-
row: "
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
return
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}), w = d.findIndex((e) => e.id === f), T = (e) => {
|
|
33
|
-
if (e < 0 || e === w) return;
|
|
34
|
-
let t = d[e];
|
|
35
|
-
v.current.get(t.id)?.focus(), p(t.id);
|
|
36
|
-
};
|
|
37
|
-
return /* @__PURE__ */ a("div", {
|
|
38
|
-
className: t("flex flex-col gap-3 bg-layer-raised", g, o.panel),
|
|
39
|
-
style: C,
|
|
40
|
-
children: [m && /* @__PURE__ */ i("div", {
|
|
41
|
-
className: "flex h-16 shrink-0 items-center px-4",
|
|
42
|
-
children: /* @__PURE__ */ i("span", {
|
|
43
|
-
id: _,
|
|
44
|
-
className: t(s.sectionLabel, y),
|
|
45
|
-
children: m
|
|
46
|
-
})
|
|
47
|
-
}), /* @__PURE__ */ i("div", {
|
|
48
|
-
role: "tablist",
|
|
49
|
-
"aria-orientation": "vertical",
|
|
50
|
-
"aria-labelledby": m ? _ : void 0,
|
|
51
|
-
onKeyDown: (e) => {
|
|
52
|
-
switch (e.key) {
|
|
53
|
-
case "ArrowDown":
|
|
54
|
-
e.preventDefault(), T(c(d, w, 1));
|
|
55
|
-
break;
|
|
56
|
-
case "ArrowUp":
|
|
57
|
-
e.preventDefault(), T(c(d, w, -1));
|
|
58
|
-
break;
|
|
59
|
-
case "Home":
|
|
60
|
-
e.preventDefault(), T(l(d));
|
|
61
|
-
break;
|
|
62
|
-
case "End":
|
|
63
|
-
e.preventDefault(), T(u(d));
|
|
64
|
-
break;
|
|
65
|
-
default: break;
|
|
66
|
-
}
|
|
9
|
+
}, o = {
|
|
10
|
+
sectionLabel: "_sectionLabel_1vf1h_2",
|
|
11
|
+
row: "_row_1vf1h_12"
|
|
12
|
+
}, s = ({ items: s, activeId: c, onSelect: l, sectionLabel: u, styles: d, className: f }) => {
|
|
13
|
+
let { sectionLabelClassName: p = "dial-h1-text" } = d?.typography ?? {}, m = d?.colors, h = e({
|
|
14
|
+
"--sp-section-label-text": m?.sectionLabelText,
|
|
15
|
+
"--sp-row-text": m?.rowText,
|
|
16
|
+
"--sp-row-bg-hover": m?.rowBackgroundHover,
|
|
17
|
+
"--sp-active-row-bg": m?.activeRowBackground,
|
|
18
|
+
"--sp-active-row-bg-hover": m?.activeRowBackgroundHover,
|
|
19
|
+
"--sp-active-row-text": m?.activeRowText,
|
|
20
|
+
"--sp-row-focus-outline": m?.rowFocusOutline
|
|
21
|
+
});
|
|
22
|
+
return /* @__PURE__ */ i("div", {
|
|
23
|
+
className: t("flex min-h-0 flex-col bg-layer-raised", f, a.panel),
|
|
24
|
+
style: h,
|
|
25
|
+
children: /* @__PURE__ */ i(r, {
|
|
26
|
+
orientation: n.Vertical,
|
|
27
|
+
sectionLabel: u,
|
|
28
|
+
tabs: s,
|
|
29
|
+
activeTabId: c,
|
|
30
|
+
onTabChange: (e) => {
|
|
31
|
+
e !== c && l(e);
|
|
67
32
|
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
ref: (t) => {
|
|
74
|
-
t ? v.current.set(e.id, t) : v.current.delete(e.id);
|
|
75
|
-
},
|
|
76
|
-
type: "button",
|
|
77
|
-
role: "tab",
|
|
78
|
-
"aria-selected": n,
|
|
79
|
-
"aria-disabled": e.disabled || void 0,
|
|
80
|
-
disabled: e.disabled,
|
|
81
|
-
tabIndex: n ? 0 : -1,
|
|
82
|
-
onClick: () => {
|
|
83
|
-
!e.disabled && !n && p(e.id);
|
|
84
|
-
},
|
|
85
|
-
className: t("flex h-11 w-full items-center gap-2 rounded-lg px-3 text-start desktop:h-10", "focus-visible:outline focus-visible:-outline-offset-1", s.row, r && s.rowActive, o.tab),
|
|
86
|
-
children: [e.icon, /* @__PURE__ */ i("span", {
|
|
87
|
-
className: t(r ? x : b, !r && "text-primary"),
|
|
88
|
-
children: e.label
|
|
89
|
-
})]
|
|
90
|
-
}, e.id);
|
|
91
|
-
})
|
|
92
|
-
})]
|
|
33
|
+
className: "min-h-0 grow",
|
|
34
|
+
tabListClassName: a.tabList,
|
|
35
|
+
tabClassName: t(o.row, a.tab),
|
|
36
|
+
sectionLabelClassName: t(o.sectionLabel, p)
|
|
37
|
+
})
|
|
93
38
|
});
|
|
94
39
|
};
|
|
95
40
|
//#endregion
|
|
96
|
-
export {
|
|
41
|
+
export { a as SETTINGS_PANEL_CLASS, s as SettingsPanel };
|
|
@@ -14,10 +14,6 @@ export interface SettingsPanelItem {
|
|
|
14
14
|
export interface SettingsPanelTypography {
|
|
15
15
|
/** Typography class applied to the section header. Defaults to `'dial-h1-text'`. */
|
|
16
16
|
sectionLabelClassName?: string;
|
|
17
|
-
/** Typography class applied to an inactive row's label. Defaults to `'dial-small-text'`. */
|
|
18
|
-
itemLabelClassName?: string;
|
|
19
|
-
/** Typography class applied to the active row's label. Defaults to `'dial-small-semi-text'`. */
|
|
20
|
-
activeItemLabelClassName?: string;
|
|
21
17
|
}
|
|
22
18
|
/** Color overrides for the {@link SettingsPanel} component, applied as CSS custom properties. */
|
|
23
19
|
export interface SettingsPanelColors {
|
|
@@ -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;
|
|
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,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4GAA4G;IAC5G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mFAAmF;IACnF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kGAAkG;IAClG,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,wDAAwD;IACxD,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/ai-dial-settings-panel",
|
|
3
3
|
"description": "Presentational vertical settings navigation panel with icon-labeled rows and active-row highlighting",
|
|
4
|
-
"version": "1.2.0-dev.
|
|
4
|
+
"version": "1.2.0-dev.89",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@epam/ai-dial-chat-shared": "1.2.0-dev.
|
|
21
|
-
"@epam/ai-dial-ui-kit": "^0.15.0-dev.
|
|
20
|
+
"@epam/ai-dial-chat-shared": "1.2.0-dev.89",
|
|
21
|
+
"@epam/ai-dial-ui-kit": "^0.15.0-dev.12",
|
|
22
22
|
"react": "^19.2.8"
|
|
23
23
|
},
|
|
24
24
|
"repository": {
|