@epam/ai-dial-sidebar 1.1.0-dev.411 → 1.1.0-dev.413

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 (6) hide show
  1. package/components/SidebarPanel/SidebarPanel.d.ts.map +1 -1
  2. package/index.css +1 -1
  3. package/index.js +41 -40
  4. package/models/panel-props.d.ts +10 -1
  5. package/models/panel-props.d.ts.map +1 -1
  6. package/package.json +2 -2
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,CAuM9C,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;AACf,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,6GAA6G;AAC7G,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+O9C,CAAC"}
package/index.css CHANGED
@@ -1,2 +1,2 @@
1
- ._wrapper_1civp_1{background:var(--sb-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--sb-border,var(--stroke-tertiary,#e0e6f0))}._header_1civp_6{color:var(--sb-text,var(--text-primary,#161b2d))}@keyframes _fadeIn_1civp_1{0%{opacity:0}to{opacity:1}}._appear_1civp_18{animation:.2s ease-out forwards _fadeIn_1civp_1}._resizeHandler_1civp_22{background:var(--sb-resize-handler,var(--text-accent,#1d4ed8));width:4px!important;color:var(--sb-resize-handler,var(--text-accent,#1d4ed8))!important}
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
2
  /*$vite$:1*/
package/index.js CHANGED
@@ -7,11 +7,9 @@ import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
7
7
  var x = /* @__PURE__ */ function(e) {
8
8
  return e.Left = "left", e.Right = "right", e;
9
9
  }({}), S = {
10
- wrapper: "_wrapper_1civp_1",
11
- header: "_header_1civp_6",
12
- appear: "_appear_1civp_18",
13
- fadeIn: "_fadeIn_1civp_1",
14
- resizeHandler: "_resizeHandler_1civp_22"
10
+ wrapper: "_wrapper_1fadt_1",
11
+ header: "_header_1fadt_6",
12
+ resizeHandler: "_resizeHandler_1fadt_10"
15
13
  }, C = f(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: a }) => /* @__PURE__ */ b("div", {
16
14
  className: n("flex h-12 items-center px-4", i, S.header),
17
15
  children: [
@@ -28,28 +26,31 @@ var x = /* @__PURE__ */ function(e) {
28
26
  children: a
29
27
  })
30
28
  ]
31
- })), w = ({ isOpen: e, orientation: o, title: l, leftActions: u, rightActions: f, onClose: w, labels: T, children: E, styles: D, resizable: O, defaultWidth: k = 360, minWidth: A = 280, maxWidth: j = 600, onResizeStop: M }) => {
32
- let { colors: N, typography: P, bodyClassName: F, cssVars: I, titleClassName: L, className: R, headerClassName: z } = D ?? {}, B = h(() => t({
33
- "--sb-bg": N?.background,
34
- "--sb-border": N?.border,
35
- "--sb-text": N?.text,
36
- "--sb-resize-handler": N?.resizeHandler
37
- }), [N]), V = g(k), [H, U] = _(e ? k : 0), [W, G] = _(!1), K = g(null);
29
+ })), w = ({ isOpen: e, orientation: o, title: l, leftActions: u, rightActions: f, 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 = h(() => 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 = g(A), [U, W] = _(e ? A : 0), [G, K] = _(!1), q = g(null);
38
36
  m(() => {
39
- if (!e) U(k), V.current = k, G(!1), K.current = null;
37
+ if (!e) W(A), H.current = A, K(!1), q.current = null;
40
38
  else {
41
- let e = K.current, t = e?.forDefault === k ? e.width : k;
42
- U(t), V.current = t;
39
+ let e = q.current, t = e?.forDefault === A ? e.width : A;
40
+ W(t), H.current = t;
43
41
  }
44
- }, [e, k]);
45
- let q = p((e) => {
46
- G(!0), U(e);
47
- }, []), J = p((e) => {
48
- K.current = {
49
- forDefault: k,
42
+ }, [e, A]);
43
+ let J = p((e) => {
44
+ K(!0), W(e);
45
+ }, []), Y = p((e) => {
46
+ q.current = {
47
+ forDefault: A,
50
48
  width: e
51
- }, V.current = e, U(e), G(!1), M?.(e);
52
- }, [k, M]), Y = e ? H || V.current : 0, X = R?.includes("w-full"), Z = o === x.Left && e ? "border-s" : void 0, Q = o === x.Right ? c.Left : c.Right, $ = w ? /* @__PURE__ */ y(s, {
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 === x.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 === x.Left && e ? "border-s" : void 0, ne = o === x.Right ? c.Left : c.Right, re = w ? /* @__PURE__ */ y(s, {
53
54
  icon: /* @__PURE__ */ y(d, {
54
55
  size: r.LG,
55
56
  stroke: i,
@@ -60,35 +61,35 @@ var x = /* @__PURE__ */ function(e) {
60
61
  onClick: w
61
62
  }) : null;
62
63
  return /* @__PURE__ */ y("div", {
63
- style: X ? void 0 : { width: Y },
64
- className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-sm", o === x.Left && "[clip-path:inset(-24px_-24px_-24px_0)] rtl:[clip-path:inset(-24px_0_-24px_-24px)]", !W && "transition-[width] duration-200 ease-in-out", e && "relative z-50", R, S.panel),
64
+ style: Q ? { width: X } : void 0,
65
+ className: n("h-full flex-shrink-0 gap-3 overflow-hidden shadow-sm", o === x.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", $()), S.panel),
65
66
  children: /* @__PURE__ */ y(a, {
66
67
  enabled: (O ?? !1) && e,
67
- side: Q,
68
- width: e ? H || V.current : void 0,
69
- defaultWidth: k,
70
- minWidth: A,
71
- maxWidth: j,
68
+ side: ne,
69
+ width: e ? U || H.current : void 0,
70
+ defaultWidth: A,
71
+ minWidth: j,
72
+ maxWidth: M,
72
73
  resizeHandlerClassName: S.resizeHandler,
73
- onResizeStop: J,
74
- onResize: q,
74
+ onResizeStop: Y,
75
+ onResize: J,
75
76
  children: /* @__PURE__ */ b("aside", {
76
77
  role: "complementary",
77
78
  "aria-label": T.ariaLabel,
78
79
  inert: !e,
79
80
  style: {
80
- ...I,
81
- ...B
81
+ ...L,
82
+ ...V
82
83
  },
83
- className: n(S.wrapper, "flex h-full w-full flex-col gap-3", e && S.appear, Z, P?.fontClassName),
84
+ className: n(S.wrapper, "flex h-full w-full flex-col gap-3", te, F?.fontClassName),
84
85
  children: [/* @__PURE__ */ y(C, {
85
86
  title: l,
86
- className: z,
87
- titleClassName: L,
88
- leftActions: e && u,
89
- rightActions: e && /* @__PURE__ */ b(v, { children: [f, $] })
87
+ className: B,
88
+ titleClassName: R,
89
+ leftActions: u,
90
+ rightActions: /* @__PURE__ */ b(v, { children: [f, re] })
90
91
  }), /* @__PURE__ */ y("div", {
91
- className: n("flex-1 overflow-y-auto p-4 pt-0", F),
92
+ className: n("flex-1 overflow-y-auto p-4 pt-0", I),
92
93
  children: E
93
94
  })]
94
95
  })
package/models/panel-props.d.ts CHANGED
@@ -42,7 +42,7 @@ export interface SidebarPanelStyles {
42
42
  }
43
43
  /** Props accepted by the `SidebarPanel` component. */
44
44
  export interface SidebarPanelProps {
45
- /** Whether the panel is open; drives the slide-in animation and sets `aria-hidden` when closed. */
45
+ /** Whether the panel is open; drives the open/close animation and sets `inert` on the panel region when closed. */
46
46
  isOpen: boolean;
47
47
  /** Edge the panel anchors to; drives the divider side and close-button placement. */
48
48
  orientation: SidebarOrientation;
@@ -62,6 +62,15 @@ export interface SidebarPanelProps {
62
62
  styles?: SidebarPanelStyles;
63
63
  /** Enables drag-to-resize on the panel edge opposite to `orientation`. Defaults to `false`. */
64
64
  resizable?: boolean;
65
+ /**
66
+ * Renders the panel as a drawer that keeps its full width in both states and
67
+ * slides in and out of the `orientation` edge, instead of animating its
68
+ * layout width. Set it when the host positions the panel over the content
69
+ * (rather than beside it) so the panel content does not reflow mid-animation
70
+ * and the content underneath never shows through a half-open panel. The host
71
+ * still owns the positioning itself. Defaults to `false`.
72
+ */
73
+ isOverlay?: boolean;
65
74
  /** Initial panel width in px used when `resizable` is true. Defaults to `360`. */
66
75
  defaultWidth?: number;
67
76
  /** Minimum panel width in px used when `resizable` is true. Defaults to `280`. */
package/models/panel-props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"panel-props.d.ts","sourceRoot":"","sources":["../../src/models/panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,sEAAsE;AACtE,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,6DAA6D;AAC7D,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oEAAoE;AACpE,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,yFAAyF;AACzF,MAAM,WAAW,kBAAkB;IACjC,wDAAwD;IACxD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,sDAAsD;AACtD,MAAM,WAAW,iBAAiB;IAChC,mGAAmG;IACnG,MAAM,EAAE,OAAO,CAAC;IAChB,qFAAqF;IACrF,WAAW,EAAE,kBAAkB,CAAC;IAChC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,MAAM,EAAE,kBAAkB,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC"}
1
+ {"version":3,"file":"panel-props.d.ts","sourceRoot":"","sources":["../../src/models/panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,sEAAsE;AACtE,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,6DAA6D;AAC7D,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oEAAoE;AACpE,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,yFAAyF;AACzF,MAAM,WAAW,kBAAkB;IACjC,wDAAwD;IACxD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,sDAAsD;AACtD,MAAM,WAAW,iBAAiB;IAChC,mHAAmH;IACnH,MAAM,EAAE,OAAO,CAAC;IAChB,qFAAqF;IACrF,WAAW,EAAE,kBAAkB,CAAC;IAChC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,MAAM,EAAE,kBAAkB,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC"}
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.1.0-dev.411",
4
+ "version": "1.1.0-dev.413",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -17,7 +17,7 @@
17
17
  }
18
18
  },
19
19
  "peerDependencies": {
20
- "@epam/ai-dial-chat-shared": "1.1.0-dev.411",
20
+ "@epam/ai-dial-chat-shared": "1.1.0-dev.413",
21
21
  "@tabler/icons-react": "^3.44.0",
22
22
  "react": "^19.0.0",
23
23
  "@epam/ai-dial-ui-kit": "*"