@epam/ai-dial-sidebar 1.1.0-dev.44 → 1.1.0-dev.49
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/components/Header/Header.d.ts +2 -8
- package/components/Header/Header.d.ts.map +1 -1
- package/components/SearchInput/SearchInput.d.ts +3 -7
- package/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/index.css +1 -1
- package/index.js +17 -12
- package/models/panel-props.d.ts +10 -44
- package/models/panel-props.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
/** Props for the `Header` component. */
|
|
3
3
|
export interface HeaderProps {
|
|
4
|
-
/**
|
|
5
|
-
* Title text rendered between the two action groups.
|
|
6
|
-
* Truncated with an ellipsis when the panel is too narrow.
|
|
7
|
-
*/
|
|
4
|
+
/** Title rendered between the start and end action slots. */
|
|
8
5
|
title?: ReactNode;
|
|
9
|
-
/**
|
|
10
|
-
* CSS class applied to the title element.
|
|
11
|
-
* Defaults to `'dial-h1-text'`.
|
|
12
|
-
*/
|
|
6
|
+
/** CSS class applied to the title element. Defaults to `'dial-h1-text'`. */
|
|
13
7
|
titleClassName?: string;
|
|
14
8
|
/** CSS class applied to the root element. */
|
|
15
9
|
className?: string;
|
|
@@ -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
|
|
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"}
|
|
@@ -19,9 +19,9 @@ export interface SearchInputStyles {
|
|
|
19
19
|
colors?: SearchInputColors;
|
|
20
20
|
/** CSS class applied to the search icon. Defaults to the module's `.icon` class (`--text-secondary`). */
|
|
21
21
|
iconClassName?: string;
|
|
22
|
-
/** CSS class applied to the outer wrapper
|
|
22
|
+
/** CSS class applied to the outer wrapper. Defaults to `'px-2 py-1'`. */
|
|
23
23
|
wrapperClassName?: string;
|
|
24
|
-
/** CSS class applied to the search row, merged after its own border
|
|
24
|
+
/** CSS class applied to the search row, merged after its own border and radius defaults. */
|
|
25
25
|
rowClassName?: string;
|
|
26
26
|
}
|
|
27
27
|
/** Props for `SearchInput`. */
|
|
@@ -35,10 +35,6 @@ export interface SearchInputProps {
|
|
|
35
35
|
/** Style overrides for colors and element class names. */
|
|
36
36
|
styles?: SearchInputStyles;
|
|
37
37
|
}
|
|
38
|
-
/**
|
|
39
|
-
* Minimal search input with icon positioned to align with sibling action buttons.
|
|
40
|
-
* Reuses the shared {@link SearchBar} default colors (border, hover/focus, icon
|
|
41
|
-
* and text colors) and only adjusts shape (pill) and background for the sidebar.
|
|
42
|
-
*/
|
|
38
|
+
/** Search input styled to align with sidebar action buttons. */
|
|
43
39
|
export declare const SearchInput: FC<SearchInputProps>;
|
|
44
40
|
//# sourceMappingURL=SearchInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAG/C,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,yFAAyF;AACzF,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,yGAAyG;IACzG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAG/C,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,yFAAyF;AACzF,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,yGAAyG;IACzG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,+BAA+B;AAC/B,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4BAA4B;IAC5B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,gEAAgE;AAChE,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA4C5C,CAAC"}
|
package/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_1toho_1{background:var(--sb-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--sb-border,var(--stroke-tertiary,#e0e6f0))}._header_1toho_6{color:var(--sb-text,var(--text-primary,#161b2d))}._divider_1toho_10{border-color:var(--sb-border,var(--stroke-tertiary,#e0e6f0))}._panel_1toho_14{border-color:var(--sb-border,var(--stroke-tertiary,#e0e6f0));border-inline-end-color:var(--sb-border-inline-end,var(--sb-border,var(--stroke-tertiary,#e0e6f0)))}@keyframes _fadeIn_1toho_1{0%{opacity:0}to{opacity:1}}._appear_1toho_27{animation:.2s ease-out forwards _fadeIn_1toho_1}._resizeHandler_1toho_31{background:var(--sb-bg-resize-handler,var(--text-info,#2764d9));width:4px!important;color:var(--sb-resize-handler,var(--text-info,#2764d9))!important}._icon_1b1ye_1{color:var(--si-icon,var(--text-secondary,#575f73))}
|
|
2
2
|
/*$vite$:1*/
|
package/index.js
CHANGED
|
@@ -10,13 +10,13 @@ import I, { createPortal as ee, flushSync as te } from "react-dom";
|
|
|
10
10
|
var ne = /* @__PURE__ */ function(e) {
|
|
11
11
|
return e.Left = "left", e.Right = "right", e;
|
|
12
12
|
}({}), re = {
|
|
13
|
-
wrapper: "
|
|
14
|
-
header: "
|
|
15
|
-
divider: "
|
|
16
|
-
panel: "
|
|
17
|
-
appear: "
|
|
18
|
-
fadeIn: "
|
|
19
|
-
resizeHandler: "
|
|
13
|
+
wrapper: "_wrapper_1toho_1",
|
|
14
|
+
header: "_header_1toho_6",
|
|
15
|
+
divider: "_divider_1toho_10",
|
|
16
|
+
panel: "_panel_1toho_14",
|
|
17
|
+
appear: "_appear_1toho_27",
|
|
18
|
+
fadeIn: "_fadeIn_1toho_1",
|
|
19
|
+
resizeHandler: "_resizeHandler_1toho_31"
|
|
20
20
|
}, ie = S(({ title: e, titleClassName: t = "dial-h1-text", leftActions: r, className: i, rightActions: o }) => /* @__PURE__ */ P("div", {
|
|
21
21
|
className: n("flex h-12 shrink-0 items-center gap-2 px-4", i, re.header),
|
|
22
22
|
children: [
|
|
@@ -82758,14 +82758,19 @@ S(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
|
|
|
82758
82758
|
let { tabClassName: i = "dial-tiny-semi-text" } = r?.typography ?? {};
|
|
82759
82759
|
return /* @__PURE__ */ N("div", {
|
|
82760
82760
|
className: "flex flex-nowrap gap-1",
|
|
82761
|
+
role: "tablist",
|
|
82761
82762
|
children: e.map((e) => {
|
|
82762
82763
|
let r = t === e.id;
|
|
82763
|
-
return /* @__PURE__ */ N(
|
|
82764
|
-
|
|
82765
|
-
selected: r,
|
|
82766
|
-
onClick: () => n(e.id),
|
|
82764
|
+
return /* @__PURE__ */ N("div", {
|
|
82765
|
+
role: "tab",
|
|
82767
82766
|
"aria-selected": r,
|
|
82768
|
-
className:
|
|
82767
|
+
className: "contents",
|
|
82768
|
+
children: /* @__PURE__ */ N(kc, {
|
|
82769
|
+
label: e.label,
|
|
82770
|
+
selected: r,
|
|
82771
|
+
onClick: () => n(e.id),
|
|
82772
|
+
className: jK("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, $9.tabContainer, r && $9.tabActive)
|
|
82773
|
+
})
|
|
82769
82774
|
}, e.id);
|
|
82770
82775
|
})
|
|
82771
82776
|
});
|
package/models/panel-props.d.ts
CHANGED
|
@@ -15,22 +15,14 @@ export interface SidebarPanelColors {
|
|
|
15
15
|
}
|
|
16
16
|
/** Typography overrides for the `SidebarPanel` component. */
|
|
17
17
|
export interface SidebarPanelTypography {
|
|
18
|
-
/**
|
|
19
|
-
* A Tailwind font utility class applied to the panel root.
|
|
20
|
-
* When provided, individual `fontFamily` / `fontSize` vars are skipped.
|
|
21
|
-
*/
|
|
18
|
+
/** CSS class applied to the title element. Defaults to `'dial-body-semi-bold-text'`. */
|
|
22
19
|
fontClassName?: string;
|
|
23
|
-
/** Font family applied to the panel root via CSS custom property. */
|
|
24
|
-
fontFamily?: string;
|
|
25
20
|
}
|
|
26
21
|
/** Localised accessible labels for the `SidebarPanel` component. */
|
|
27
22
|
export interface SidebarPanelLabels {
|
|
28
|
-
/** Accessible label for the panel region.
|
|
23
|
+
/** Accessible label for the panel region. */
|
|
29
24
|
ariaLabel: string;
|
|
30
|
-
/**
|
|
31
|
-
* Accessible label and tooltip for the built-in close button.
|
|
32
|
-
* Required when `onClose` is provided.
|
|
33
|
-
*/
|
|
25
|
+
/** Accessible label and tooltip for the close button. Required when `onClose` is provided. */
|
|
34
26
|
closeLabel?: string;
|
|
35
27
|
}
|
|
36
28
|
/** Combined style overrides (colors and typography) for the `SidebarPanel` component. */
|
|
@@ -39,10 +31,7 @@ export interface SidebarPanelStyles {
|
|
|
39
31
|
colors?: SidebarPanelColors;
|
|
40
32
|
/** Typography overrides applied via CSS custom properties. */
|
|
41
33
|
typography?: SidebarPanelTypography;
|
|
42
|
-
/**
|
|
43
|
-
* CSS class applied to the title element.
|
|
44
|
-
* Defaults to `'dial-body-semi-bold-text'`.
|
|
45
|
-
*/
|
|
34
|
+
/** CSS class applied to the title element. Defaults to `'dial-body-semi-bold-text'`. */
|
|
46
35
|
titleClassName?: string;
|
|
47
36
|
/** Extra class name(s) merged onto the scrollable body `<div>`. */
|
|
48
37
|
bodyClassName?: string;
|
|
@@ -55,36 +44,17 @@ export interface SidebarPanelStyles {
|
|
|
55
44
|
}
|
|
56
45
|
/** Props accepted by the `SidebarPanel` component. */
|
|
57
46
|
export interface SidebarPanelProps {
|
|
58
|
-
/**
|
|
59
|
-
* Whether the panel is currently open.
|
|
60
|
-
* When provided, the wrapper adds a slide-in width animation and
|
|
61
|
-
* `aria-hidden` is set on the panel when closed.
|
|
62
|
-
*/
|
|
47
|
+
/** Whether the panel is open; drives the slide-in animation and sets `aria-hidden` when closed. */
|
|
63
48
|
isOpen: boolean;
|
|
64
|
-
/**
|
|
65
|
-
* Which edge the panel anchors to.
|
|
66
|
-
* Controls the divider side (`border-s` vs `border-e`) and
|
|
67
|
-
* the close-button placement (outer edge of the panel).
|
|
68
|
-
* `leftActions` / `rightActions` are header-bar positions and are
|
|
69
|
-
* independent of this prop.
|
|
70
|
-
*/
|
|
49
|
+
/** Edge the panel anchors to; drives the divider side and close-button placement. */
|
|
71
50
|
orientation: SidebarOrientation;
|
|
72
|
-
/**
|
|
73
|
-
* Title text rendered in the header bar between the action groups.
|
|
74
|
-
* Truncated with an ellipsis when the panel is too narrow.
|
|
75
|
-
*/
|
|
51
|
+
/** Title rendered in the header bar between the start and end action slots. */
|
|
76
52
|
title?: ReactNode;
|
|
77
53
|
/** Rendered in the left group of the 48 px header bar. */
|
|
78
54
|
leftActions?: ReactNode;
|
|
79
|
-
/**
|
|
80
|
-
* Rendered in the right group of the 48 px header bar, immediately
|
|
81
|
-
* before the built-in close button when `orientation === SidebarOrientation.Right`.
|
|
82
|
-
*/
|
|
55
|
+
/** Content for the end (right) slot of the header bar. */
|
|
83
56
|
rightActions?: ReactNode;
|
|
84
|
-
/**
|
|
85
|
-
* Called when the user activates the built-in close button.
|
|
86
|
-
* When omitted the close button is not rendered.
|
|
87
|
-
*/
|
|
57
|
+
/** Called when the user closes the panel; omit to hide the close button. */
|
|
88
58
|
onClose?: () => void;
|
|
89
59
|
/** Localised accessible labels for the panel region and close button. */
|
|
90
60
|
labels: SidebarPanelLabels;
|
|
@@ -92,11 +62,7 @@ export interface SidebarPanelProps {
|
|
|
92
62
|
children: ReactNode;
|
|
93
63
|
/** Style overrides for colors, typography, and element class names. */
|
|
94
64
|
styles?: SidebarPanelStyles;
|
|
95
|
-
/**
|
|
96
|
-
* Enables drag-to-resize on the panel edge opposite to `orientation`.
|
|
97
|
-
* When false (default) the panel renders at a width determined by `className`.
|
|
98
|
-
* Automatically disabled when `isOpen` is false.
|
|
99
|
-
*/
|
|
65
|
+
/** Enables drag-to-resize on the panel edge opposite to `orientation`. Defaults to `false`. */
|
|
100
66
|
resizable?: boolean;
|
|
101
67
|
/** Initial panel width in px used when `resizable` is true. Defaults to `360`. */
|
|
102
68
|
defaultWidth?: number;
|
|
@@ -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,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,6DAA6D;AAC7D,MAAM,WAAW,sBAAsB;IACrC
|
|
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,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,6DAA6D;AAC7D,MAAM,WAAW,sBAAsB;IACrC,wFAAwF;IACxF,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,wFAAwF;IACxF,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"}
|
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.
|
|
4
|
+
"version": "1.1.0-dev.49",
|
|
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.1.0-dev.
|
|
21
|
-
"@epam/ai-dial-kit": "1.1.0-dev.
|
|
20
|
+
"@epam/ai-dial-chat-shared": "1.1.0-dev.49",
|
|
21
|
+
"@epam/ai-dial-kit": "1.1.0-dev.49",
|
|
22
22
|
"@tabler/icons-react": "^3.44.0",
|
|
23
23
|
"react": "^19.0.0",
|
|
24
24
|
"@epam/ai-dial-ui-kit": "^0.13.0-dev.12"
|