@epam/ai-dial-sidebar 1.2.0-dev.6 → 1.2.0-dev.61

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 (9) hide show
  1. package/components/Header/Header.d.ts.map +1 -1
  2. package/components/SidebarPanel/SidebarPanel.d.ts.map +1 -1
  3. package/constants/public-class-names.d.ts +16 -0
  4. package/constants/public-class-names.d.ts.map +1 -0
  5. package/index.css +1 -1
  6. package/index.d.ts +1 -0
  7. package/index.d.ts.map +1 -1
  8. package/index.js +57 -54
  9. package/package.json +3 -3
package/components/Header/Header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,wCAAwC;AACxC,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,yEAAyE;AACzE,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6BlC,CAAC"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,wCAAwC;AACxC,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,yEAAyE;AACzE,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8BlC,CAAC"}
package/components/SidebarPanel/SidebarPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SidebarPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarPanel/SidebarPanel.tsx"],"names":[],"mappings":"AASA,OAAO,EAML,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,6GAA6G;AAC7G,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAgP9C,CAAC"}
1
+ {"version":3,"file":"SidebarPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarPanel/SidebarPanel.tsx"],"names":[],"mappings":"AASA,OAAO,EAML,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,6GAA6G;AAC7G,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiP9C,CAAC"}
package/constants/public-class-names.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ export declare const SIDEBAR_CLASS: {
2
+ /**
3
+ * The panel's `<aside role="complementary">` element — the region itself,
4
+ * not the wrapper around it. The wrapper is where `styles.className` lands,
5
+ * which is how the libs built on this panel mark themselves:
6
+ * `@epam/ai-dial-attachment-canvas` puts `dial-attachment-canvas-panel`
7
+ * there and `@epam/ai-dial-source-panel` puts `dial-source-panel-panel`. A
8
+ * host targeting one of those panels therefore descends from its class to
9
+ * this one (`.dial-attachment-canvas-panel .dial-sb-aside`), and sizes or
10
+ * positions the wrapper rather than the region.
11
+ */
12
+ readonly aside: "dial-sb-aside";
13
+ /** The 48 px header bar rendered by `Header`. */
14
+ readonly header: "dial-sb-header";
15
+ };
16
+ //# sourceMappingURL=public-class-names.d.ts.map
package/constants/public-class-names.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,aAAa;IACxB;;;;;;;;;OASG;;IAEH,iDAAiD;;CAEzC,CAAC"}
package/index.css CHANGED
@@ -1,2 +1,2 @@
1
1
  ._wrapper_1fadt_1{background:var(--sb-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--sb-border,var(--stroke-tertiary,#e0e6f0))}._header_1fadt_6{color:var(--sb-text,var(--text-primary,#161b2d))}._resizeHandler_1fadt_10{background:var(--sb-resize-handler,var(--text-accent,#1d4ed8));width:4px!important;color:var(--sb-resize-handler,var(--text-accent,#1d4ed8))!important}
2
- /*$vite$:1*/
2
+ /*$vite$:1*/.relative{position:relative}.z-50{z-index:50}.block{display:block}.inline{display:inline}.flex{display:flex}.h-12{height:3rem}.h-full{height:100%}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-1{gap:.25rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border{border-width:1px}.border-s{border-inline-start-width:1px}.p-4{padding:1rem}.pe-3{padding-inline-end:.75rem}.ps-6{padding-inline-start:1.5rem}.pt-0{padding-top:0}.pt-6{padding-top:1.5rem}.shadow-sm{--tw-shadow:0 8px 10px 0 var(--shadow-sm,#2764d914);--tw-shadow-colored:0 8px 10px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[width\]{transition-duration:.15s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.\[clip-path\:inset\(-24px_-24px_-24px_0\)\]{clip-path:inset(-24px -24px -24px 0)}@media (prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}}.ltr\:-translate-x-full:where([dir=ltr],[dir=ltr] *){--tw-translate-x:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.ltr\:translate-x-full:where([dir=ltr],[dir=ltr] *){--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rtl\:-translate-x-full:where([dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rtl\:translate-x-full:where([dir=rtl],[dir=rtl] *){--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rtl\:\[clip-path\:inset\(-24px_0_-24px_-24px\)\]:where([dir=rtl],[dir=rtl] *){clip-path:inset(-24px 0 -24px -24px)}
package/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export { SIDEBAR_CLASS } from './constants/public-class-names';
1
2
  export { SidebarPanel } from './components/SidebarPanel/SidebarPanel';
2
3
  export { PanelEmpty } from './components/PanelEmptyState/PanelEmpty';
3
4
  export { PanelNoResults } from './components/PanelEmptyState/PanelNoResults';
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,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC"}
package/index.js CHANGED
@@ -3,15 +3,18 @@ import { ConditionalResizableContainer as r, DIAL_ICON_SIZE as i, DIAL_KIT_ICON_
3
3
  import { IconX as l } from "@tabler/icons-react";
4
4
  import { memo as u, useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
5
5
  import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
6
- //#region src/types/orientation.ts
7
- var y = /* @__PURE__ */ function(e) {
6
+ //#region src/constants/public-class-names.ts
7
+ var y = {
8
+ aside: "dial-sb-aside",
9
+ header: "dial-sb-header"
10
+ }, b = /* @__PURE__ */ function(e) {
8
11
  return e.Left = "left", e.Right = "right", e;
9
- }({}), b = {
12
+ }({}), x = {
10
13
  wrapper: "_wrapper_1fadt_1",
11
14
  header: "_header_1fadt_6",
12
15
  resizeHandler: "_resizeHandler_1fadt_10"
13
- }, x = u(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ v("div", {
14
- className: n("flex h-12 items-center px-4", i, b.header),
16
+ }, S = u(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ v("div", {
17
+ className: n("flex h-12 items-center pe-3 ps-6", i, x.header, y.header),
15
18
  children: [
16
19
  r && /* @__PURE__ */ _("div", {
17
20
  className: "flex items-center gap-1",
@@ -26,79 +29,79 @@ var y = /* @__PURE__ */ function(e) {
26
29
  children: a
27
30
  })
28
31
  ]
29
- })), S = ({ isOpen: e, orientation: o, title: u, leftActions: S, rightActions: C, onClose: w, labels: T, children: E, styles: D, resizable: O, isOverlay: k = !1, defaultWidth: A = 360, minWidth: j = 280, maxWidth: M = 600, onResizeStop: N }) => {
30
- let { colors: P, typography: F, bodyClassName: I, cssVars: L, titleClassName: R, className: z, headerClassName: B } = D ?? {}, V = p(() => t({
31
- "--sb-bg": P?.background,
32
- "--sb-border": P?.border,
33
- "--sb-text": P?.text,
34
- "--sb-resize-handler": P?.resizeHandler
35
- }), [P]), H = m(A), [U, W] = h(e ? A : 0), [G, K] = h(!1), q = m(null);
32
+ })), C = ({ isOpen: e, orientation: o, title: u, leftActions: C, rightActions: w, onClose: T, labels: E, children: D, styles: O, resizable: k, isOverlay: A = !1, defaultWidth: j = 360, minWidth: M = 280, maxWidth: N = 600, onResizeStop: P }) => {
33
+ let { colors: F, typography: I, bodyClassName: L, cssVars: R, titleClassName: z, className: B, headerClassName: V } = O ?? {}, H = p(() => t({
34
+ "--sb-bg": F?.background,
35
+ "--sb-border": F?.border,
36
+ "--sb-text": F?.text,
37
+ "--sb-resize-handler": F?.resizeHandler
38
+ }), [F]), U = m(j), [W, G] = h(e ? j : 0), [K, q] = h(!1), J = m(null);
36
39
  f(() => {
37
- if (!e) W(A), H.current = A, K(!1), q.current = null;
40
+ if (!e) G(j), U.current = j, q(!1), J.current = null;
38
41
  else {
39
- let e = q.current, t = e?.forDefault === A ? e.width : A;
40
- W(t), H.current = t;
42
+ let e = J.current, t = e?.forDefault === j ? e.width : j;
43
+ G(t), U.current = t;
41
44
  }
42
- }, [e, A]);
43
- let J = d((e) => {
44
- K(!0), W(e);
45
- }, []), Y = d((e) => {
46
- q.current = {
47
- forDefault: A,
45
+ }, [e, j]);
46
+ let Y = d((e) => {
47
+ q(!0), G(e);
48
+ }, []), X = d((e) => {
49
+ J.current = {
50
+ forDefault: j,
48
51
  width: e
49
- }, H.current = e, W(e), K(!1), N?.(e);
50
- }, [A, N]), X = e ? U || H.current : 0, Z = z?.includes("w-full"), Q = !k && !Z, $ = () => e ? "translate-x-0" : o === y.Left ? "ltr:-translate-x-full rtl:translate-x-full" : "ltr:translate-x-full rtl:-translate-x-full", ee = () => {
51
- if (k) return "transition-transform duration-200 ease-in-out motion-reduce:transition-none";
52
- if (!G) return "transition-[width] duration-200 ease-in-out motion-reduce:transition-none";
53
- }, te = o === y.Left && e ? "border-s" : void 0, ne = o === y.Right ? c.Left : c.Right, re = w ? /* @__PURE__ */ _(s, {
52
+ }, U.current = e, G(e), q(!1), P?.(e);
53
+ }, [j, P]), Z = e ? W || U.current : 0, Q = B?.includes("w-full"), $ = !A && !Q, ee = () => e ? "translate-x-0" : o === b.Left ? "ltr:-translate-x-full rtl:translate-x-full" : "ltr:translate-x-full rtl:-translate-x-full", te = () => {
54
+ if (A) return "transition-transform duration-200 ease-in-out motion-reduce:transition-none";
55
+ if (!K) return "transition-[width] duration-200 ease-in-out motion-reduce:transition-none";
56
+ }, ne = o === b.Left && e ? "border-s" : void 0, re = o === b.Right ? c.Left : c.Right, ie = T ? /* @__PURE__ */ _(s, {
54
57
  icon: /* @__PURE__ */ _(l, {
55
58
  size: i.LG,
56
59
  stroke: a,
57
60
  "aria-hidden": !0
58
61
  }),
59
- "aria-label": T.closeLabel,
60
- tooltipProps: { tooltip: T.closeLabel },
61
- onClick: w
62
+ "aria-label": E.closeLabel,
63
+ tooltipProps: { tooltip: E.closeLabel },
64
+ onClick: T
62
65
  }) : null;
63
66
  return /* @__PURE__ */ _("div", {
64
- style: Q ? { width: X } : void 0,
65
- className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-sm", o === y.Left && "[clip-path:inset(-24px_-24px_-24px_0)] rtl:[clip-path:inset(-24px_0_-24px_-24px)]", ee(), "relative z-50", z, k && n("w-full", $()), b.panel),
67
+ style: $ ? { width: Z } : void 0,
68
+ className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-sm", o === b.Left && "[clip-path:inset(-24px_-24px_-24px_0)] rtl:[clip-path:inset(-24px_0_-24px_-24px)]", te(), "relative z-50", B, A && n("w-full", ee()), x.panel),
66
69
  children: /* @__PURE__ */ _(r, {
67
- enabled: (O ?? !1) && e,
68
- side: ne,
69
- ariaLabel: T.resizeLabel ?? "Resize panel",
70
- width: e ? U || H.current : void 0,
71
- defaultWidth: A,
72
- minWidth: j,
73
- maxWidth: M,
74
- resizeHandlerClassName: b.resizeHandler,
75
- onResizeStop: Y,
76
- onResize: J,
70
+ enabled: (k ?? !1) && e,
71
+ side: re,
72
+ ariaLabel: E.resizeLabel ?? "Resize panel",
73
+ width: e ? W || U.current : void 0,
74
+ defaultWidth: j,
75
+ minWidth: M,
76
+ maxWidth: N,
77
+ resizeHandlerClassName: x.resizeHandler,
78
+ onResizeStop: X,
79
+ onResize: Y,
77
80
  children: /* @__PURE__ */ v("aside", {
78
81
  role: "complementary",
79
- "aria-label": T.ariaLabel,
82
+ "aria-label": E.ariaLabel,
80
83
  inert: !e,
81
84
  style: {
82
- ...L,
83
- ...V
85
+ ...R,
86
+ ...H
84
87
  },
85
- className: n(b.wrapper, "flex h-full w-full flex-col gap-3", te, F?.fontClassName),
86
- children: [/* @__PURE__ */ _(x, {
88
+ className: n(x.wrapper, "flex h-full w-full flex-col gap-3", ne, I?.fontClassName, y.aside),
89
+ children: [/* @__PURE__ */ _(S, {
87
90
  title: u,
88
- className: B,
89
- titleClassName: R,
90
- leftActions: S,
91
- rightActions: /* @__PURE__ */ v(g, { children: [C, re] })
91
+ className: V,
92
+ titleClassName: z,
93
+ leftActions: C,
94
+ rightActions: /* @__PURE__ */ v(g, { children: [w, ie] })
92
95
  }), /* @__PURE__ */ _("div", {
93
- className: n("flex-1 overflow-y-auto p-4 pt-0", I),
94
- children: E
96
+ className: n("flex-1 overflow-y-auto p-4 pt-0", L),
97
+ children: D
95
98
  })]
96
99
  })
97
100
  })
98
101
  });
99
- }, C = u(({ label: t }) => /* @__PURE__ */ _(e, { label: t })), w = u(({ label: t }) => /* @__PURE__ */ _(e, {
102
+ }, w = u(({ label: t }) => /* @__PURE__ */ _(e, { label: t })), T = u(({ label: t }) => /* @__PURE__ */ _(e, {
100
103
  label: t,
101
104
  containerClassName: "pt-6"
102
105
  }));
103
106
  //#endregion
104
- export { C as PanelEmpty, w as PanelNoResults, y as SidebarOrientation, S as SidebarPanel };
107
+ export { w as PanelEmpty, T as PanelNoResults, y as SIDEBAR_CLASS, b as SidebarOrientation, C as SidebarPanel };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-sidebar",
3
3
  "description": "Resizable sidebar panel shell with header, search, and empty state components",
4
- "version": "1.2.0-dev.6",
4
+ "version": "1.2.0-dev.61",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -20,9 +20,9 @@
20
20
  "@tabler/icons-react": "^3.44.0"
21
21
  },
22
22
  "peerDependencies": {
23
- "@epam/ai-dial-chat-shared": "1.2.0-dev.6",
23
+ "@epam/ai-dial-chat-shared": "1.2.0-dev.61",
24
24
  "react": "^19.2.8",
25
- "@epam/ai-dial-ui-kit": "^0.14.2"
25
+ "@epam/ai-dial-ui-kit": "^0.15.0-dev.9"
26
26
  },
27
27
  "repository": {
28
28
  "type": "git",