@epam/ai-dial-starter-buttons 1.1.0-dev.99 → 1.1.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.
@@ -1,5 +1,10 @@
1
1
  import { FC } from 'react';
2
2
  import { StarterButtonsProps } from '../../models/starter-props';
3
- /** Row of starter-prompt buttons that collapses overflowing items into a dropdown menu, sized to fit the available container width. */
3
+ /**
4
+ * Row of starter-prompt buttons that collapses overflowing items into a
5
+ * dropdown menu, sized to fit the available container width. With
6
+ * `isCollapsible` set to `false` every starter is rendered instead, each on
7
+ * its own row, and no overflow menu appears.
8
+ */
4
9
  export declare const StarterButtons: FC<StarterButtonsProps>;
5
10
  //# sourceMappingURL=StarterButtons.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"StarterButtons.d.ts","sourceRoot":"","sources":["../../../src/components/StarterButtons/StarterButtons.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAMtE,uIAAuI;AACvI,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkJlD,CAAC"}
1
+ {"version":3,"file":"StarterButtons.d.ts","sourceRoot":"","sources":["../../../src/components/StarterButtons/StarterButtons.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAMtE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmKlD,CAAC"}
package/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { StarterButtons } from './components/StarterButtons/StarterButtons';
2
- export type { StarterButtonsProps, StarterButtonsLabels, } from './models/starter-props';
2
+ export type { StarterButtonsProps, StarterButtonsLabels, StarterButtonsStyles, } from './models/starter-props';
3
3
  //# 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,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,YAAY,EACV,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC"}
package/index.js CHANGED
@@ -1,76 +1,86 @@
1
1
  import { BASE_MD_ICON_PROPS as e } from "@epam/ai-dial-chat-shared";
2
- import { ButtonAppearance as t, DialDropdown as n, NeutralButton as r, NeutralIconButton as i } from "@epam/ai-dial-ui-kit";
3
- import { IconDots as a, IconDotsVertical as o } from "@tabler/icons-react";
4
- import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
5
- import { jsx as f, jsxs as p } from "react/jsx-runtime";
2
+ import { ButtonAppearance as t, DIAL_KIT_ICON_STROKE as n, Dropdown as r, NeutralButton as i, NeutralIconButton as a } from "@epam/ai-dial-ui-kit";
3
+ import { IconDots as o, IconDotsVertical as s } from "@tabler/icons-react";
4
+ import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
5
+ import { jsx as p, jsxs as m } from "react/jsx-runtime";
6
6
  //#region src/components/StarterButtons/StarterButtons.tsx
7
- var m = 4, h = 8, g = ({ starters: g, onSelect: _, isMobile: v, labels: y, styles: b }) => {
8
- let x = u(null), S = u([]), C = u([]), [w, T] = d(() => Math.min(g.length, m)), E = s((e) => {
9
- let t = x.current;
10
- if (!t) return;
7
+ var h = 4, g = 8, _ = ({ starters: _, onSelect: v, isMobile: y, isCollapsible: b = !0, labels: x, styles: S }) => {
8
+ let C = d(null), w = d([]), T = d([]), [E, D] = f(() => Math.min(_.length, h)), O = c((e) => {
9
+ let t = C.current;
10
+ if (!t || !b) return;
11
11
  let n = t.getBoundingClientRect().width;
12
12
  if (n === 0) return;
13
- let r = Math.min(e, m);
14
- S.current.slice(0, r).every((e) => e != null) && (C.current = S.current.slice(0, r).map((e) => e?.getBoundingClientRect().width ?? 0));
15
- let i = (e) => C.current[e] ?? 120, a = 0, o = 0;
13
+ let r = Math.min(e, h);
14
+ w.current.slice(0, r).every((e) => e != null) && (T.current = w.current.slice(0, r).map((e) => e?.getBoundingClientRect().width ?? 0));
15
+ let i = (e) => T.current[e] ?? 120, a = 0, o = 0;
16
16
  for (let t = 0; t < r; t++) {
17
17
  let r = i(t), s = e - (t + 1) > 0;
18
- if (a + (t > 0 ? h : 0) + r + (s ? 64 : 0) > n) break;
19
- a += (t > 0 ? h : 0) + r, o = t + 1;
18
+ if (a + (t > 0 ? g : 0) + r + (s ? 64 : 0) > n) break;
19
+ a += (t > 0 ? g : 0) + r, o = t + 1;
20
20
  }
21
- T(Math.max(1, o));
22
- }, []);
23
- c(() => {
24
- C.current = [], T(Math.min(g.length, m));
25
- }, [g.length]), c(() => {
26
- let e = x.current;
27
- if (!e) return;
21
+ D(Math.max(1, o));
22
+ }, [b]);
23
+ l(() => {
24
+ T.current = [], D(Math.min(_.length, h));
25
+ }, [_.length]), l(() => {
26
+ let e = C.current;
27
+ if (!e || !b) return;
28
28
  let t = new ResizeObserver(() => {
29
- E(g.length);
29
+ O(_.length);
30
30
  });
31
31
  return t.observe(e), () => t.disconnect();
32
- }, [E, g.length]), c(() => {
33
- E(g.length);
34
- });
35
- let D = l(() => ({
32
+ }, [
33
+ O,
34
+ b,
35
+ _.length
36
+ ]), l(() => {
37
+ O(_.length);
38
+ }, [
39
+ O,
40
+ _.length,
41
+ E
42
+ ]);
43
+ let k = u(() => ({
36
44
  ...e,
37
- stroke: b?.iconStrokeWidth ?? e.stroke,
38
- size: b?.iconSize ?? e.size
39
- }), [b?.iconStrokeWidth, b?.iconSize]);
40
- if (g.length === 0) return null;
41
- let O = Math.min(w, m), k = g.slice(0, O), A = g.slice(O), j = A.map((e, t) => ({
45
+ stroke: S?.iconStrokeWidth ?? e.stroke,
46
+ size: S?.iconSize ?? e.size
47
+ }), [S?.iconStrokeWidth, S?.iconSize]);
48
+ if (_.length === 0) return null;
49
+ let A = b ? _.slice(0, E) : _, j = b ? _.slice(E) : [], M = j.map((e, t) => ({
42
50
  key: String(t),
43
51
  label: e.title,
44
- onClick: () => _(e)
52
+ onClick: () => v(e)
45
53
  }));
46
- return /* @__PURE__ */ f("div", {
47
- ref: x,
54
+ return /* @__PURE__ */ p("div", {
55
+ ref: C,
48
56
  className: "mb-4 w-full",
49
- children: /* @__PURE__ */ p("div", {
57
+ children: /* @__PURE__ */ m("div", {
50
58
  role: "list",
51
- "aria-label": y.list,
52
- className: "flex flex-wrap justify-center gap-2",
53
- children: [k.map((e, n) => /* @__PURE__ */ f("div", {
59
+ "aria-label": x.list,
60
+ className: b ? "flex flex-wrap justify-center gap-2" : "flex flex-col items-center gap-2",
61
+ children: [A.map((e, n) => /* @__PURE__ */ p("div", {
54
62
  role: "listitem",
55
63
  ref: (e) => {
56
- S.current[n] = e;
64
+ w.current[n] = e;
57
65
  },
58
- children: /* @__PURE__ */ f(r, {
66
+ children: /* @__PURE__ */ p(i, {
59
67
  label: e.title,
60
68
  appearance: t.Outlined,
61
- onClick: () => _(e)
69
+ onClick: () => v(e)
62
70
  })
63
- }, e.const)), A.length > 0 && /* @__PURE__ */ f("div", {
71
+ }, e.const)), j.length > 0 && /* @__PURE__ */ p("div", {
64
72
  role: "listitem",
65
- children: /* @__PURE__ */ f(n, {
66
- items: j,
73
+ children: /* @__PURE__ */ p(r, {
74
+ items: M,
67
75
  placement: "bottom-end",
68
76
  matchReferenceWidth: !1,
69
- listClassName: "cp-dropdown-overlay",
70
- children: /* @__PURE__ */ f(i, {
77
+ children: /* @__PURE__ */ p(a, {
71
78
  appearance: t.Outlined,
72
- icon: f(v ? a : o, { ...D }),
73
- "aria-label": y.overflow
79
+ icon: p(y ? o : s, {
80
+ ...k,
81
+ stroke: n
82
+ }),
83
+ "aria-label": x.overflow
74
84
  })
75
85
  })
76
86
  })]
@@ -78,4 +88,4 @@ var m = 4, h = 8, g = ({ starters: g, onSelect: _, isMobile: v, labels: y, style
78
88
  });
79
89
  };
80
90
  //#endregion
81
- export { g as StarterButtons };
91
+ export { _ as StarterButtons };
@@ -21,6 +21,13 @@ export interface StarterButtonsProps {
21
21
  onSelect: (starter: StarterOption) => void;
22
22
  /** When `true`, renders a mobile-optimised layout. */
23
23
  isMobile?: boolean;
24
+ /**
25
+ * When `true` (the default), only as many starters as the measured
26
+ * container width allows stay on one row and the rest collapse into an
27
+ * overflow dropdown. When `false`, every starter is rendered, each on its
28
+ * own row, and no overflow menu appears.
29
+ */
30
+ isCollapsible?: boolean;
24
31
  /** Localized labels used within the component. */
25
32
  labels: StarterButtonsLabels;
26
33
  /** Optional style overrides. */
@@ -1 +1 @@
1
- {"version":3,"file":"starter-props.d.ts","sourceRoot":"","sources":["../../src/models/starter-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,gEAAgE;AAChE,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,gDAAgD;AAChD,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,qDAAqD;IACrD,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,gCAAgC;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B"}
1
+ {"version":3,"file":"starter-props.d.ts","sourceRoot":"","sources":["../../src/models/starter-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,gEAAgE;AAChE,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,gDAAgD;AAChD,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,qDAAqD;IACrD,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,gCAAgC;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-starter-buttons",
3
3
  "description": "Responsive starter prompt buttons that overflow into a dropdown when space is limited",
4
- "version": "1.1.0-dev.99",
4
+ "version": "1.1.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -15,11 +15,13 @@
15
15
  "default": "./index.js"
16
16
  }
17
17
  },
18
+ "dependencies": {
19
+ "@tabler/icons-react": "^3.44.0"
20
+ },
18
21
  "peerDependencies": {
19
- "@epam/ai-dial-chat-shared": "1.1.0-dev.99",
20
- "@tabler/icons-react": "^3.44.0",
21
- "react": "^19.0.0",
22
- "@epam/ai-dial-ui-kit": "^0.13.0-dev.26"
22
+ "@epam/ai-dial-chat-shared": "1.1.0-rc.0",
23
+ "react": "^19.2.8",
24
+ "@epam/ai-dial-ui-kit": "^0.14.2"
23
25
  },
24
26
  "repository": {
25
27
  "type": "git",