@epam/ai-dial-starter-buttons 1.1.0-dev.488 → 1.1.0-dev.491

package/components/StarterButtons/StarterButtons.d.ts

@@ -1,5 +1,10 @@
 import { FC } from 'react';
 import { StarterButtonsProps } from '../../models/starter-props';
-/** Row of starter-prompt buttons that collapses overflowing items into a dropdown menu, sized to fit the available container width. */
+/**
+ * Row of starter-prompt buttons that collapses overflowing items into a
+ * dropdown menu, sized to fit the available container width. With
+ * `isCollapsible` set to `false` every starter is rendered instead, each on
+ * its own row, and no overflow menu appears.
+ */
 export declare const StarterButtons: FC<StarterButtonsProps>;
 //# sourceMappingURL=StarterButtons.d.ts.map

package/components/StarterButtons/StarterButtons.d.ts.map

@@ -1 +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,uIAAuI;AACvI,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuJlD,CAAC"}
+{"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.js

@@ -4,79 +4,83 @@ import { IconDots as o, IconDotsVertical as s } from "@tabler/icons-react";
 import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/StarterButtons/StarterButtons.tsx
-var h = 4, g = 8, _ = ({ starters: _, onSelect: v, isMobile: y, labels: b, styles: x }) => {
-	let S = d(null), C = d([]), w = d([]), [T, E] = f(() => Math.min(_.length, h)), D = c((e) => {
-		let t = S.current;
-		if (!t) return;
+var h = 4, g = 8, _ = ({ starters: _, onSelect: v, isMobile: y, isCollapsible: b = !0, labels: x, styles: S }) => {
+	let C = d(null), w = d([]), T = d([]), [E, D] = f(() => Math.min(_.length, h)), O = c((e) => {
+		let t = C.current;
+		if (!t || !b) return;
 		let n = t.getBoundingClientRect().width;
 		if (n === 0) return;
 		let r = Math.min(e, h);
-		C.current.slice(0, r).every((e) => e != null) && (w.current = C.current.slice(0, r).map((e) => e?.getBoundingClientRect().width ?? 0));
-		let i = (e) => w.current[e] ?? 120, a = 0, o = 0;
+		w.current.slice(0, r).every((e) => e != null) && (T.current = w.current.slice(0, r).map((e) => e?.getBoundingClientRect().width ?? 0));
+		let i = (e) => T.current[e] ?? 120, a = 0, o = 0;
 		for (let t = 0; t < r; t++) {
 			let r = i(t), s = e - (t + 1) > 0;
 			if (a + (t > 0 ? g : 0) + r + (s ? 64 : 0) > n) break;
 			a += (t > 0 ? g : 0) + r, o = t + 1;
 		}
-		E(Math.max(1, o));
-	}, []);
+		D(Math.max(1, o));
+	}, [b]);
 	l(() => {
-		w.current = [], E(Math.min(_.length, h));
+		T.current = [], D(Math.min(_.length, h));
 	}, [_.length]), l(() => {
-		let e = S.current;
-		if (!e) return;
+		let e = C.current;
+		if (!e || !b) return;
 		let t = new ResizeObserver(() => {
-			D(_.length);
+			O(_.length);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [D, _.length]), l(() => {
-		D(_.length);
 	}, [
-		D,
+		O,
+		b,
+		_.length
+	]), l(() => {
+		O(_.length);
+	}, [
+		O,
 		_.length,
-		T
+		E
 	]);
-	let O = u(() => ({
+	let k = u(() => ({
 		...e,
-		stroke: x?.iconStrokeWidth ?? e.stroke,
-		size: x?.iconSize ?? e.size
-	}), [x?.iconStrokeWidth, x?.iconSize]);
+		stroke: S?.iconStrokeWidth ?? e.stroke,
+		size: S?.iconSize ?? e.size
+	}), [S?.iconStrokeWidth, S?.iconSize]);
 	if (_.length === 0) return null;
-	let k = _.slice(0, T), A = _.slice(T), j = A.map((e, t) => ({
+	let A = b ? _.slice(0, E) : _, j = b ? _.slice(E) : [], M = j.map((e, t) => ({
 		key: String(t),
 		label: e.title,
 		onClick: () => v(e)
 	}));
 	return /* @__PURE__ */ p("div", {
-		ref: S,
+		ref: C,
 		className: "mb-4 w-full",
 		children: /* @__PURE__ */ m("div", {
 			role: "list",
-			"aria-label": b.list,
-			className: "flex flex-wrap justify-center gap-2",
-			children: [k.map((e, n) => /* @__PURE__ */ p("div", {
+			"aria-label": x.list,
+			className: b ? "flex flex-wrap justify-center gap-2" : "flex flex-col items-center gap-2",
+			children: [A.map((e, n) => /* @__PURE__ */ p("div", {
 				role: "listitem",
 				ref: (e) => {
-					C.current[n] = e;
+					w.current[n] = e;
 				},
 				children: /* @__PURE__ */ p(i, {
 					label: e.title,
 					appearance: t.Outlined,
 					onClick: () => v(e)
 				})
-			}, e.const)), A.length > 0 && /* @__PURE__ */ p("div", {
+			}, e.const)), j.length > 0 && /* @__PURE__ */ p("div", {
 				role: "listitem",
 				children: /* @__PURE__ */ p(r, {
-					items: j,
+					items: M,
 					placement: "bottom-end",
 					matchReferenceWidth: !1,
 					children: /* @__PURE__ */ p(a, {
 						appearance: t.Outlined,
 						icon: p(y ? o : s, {
-							...O,
+							...k,
 							stroke: n
 						}),
-						"aria-label": b.overflow
+						"aria-label": x.overflow
 					})
 				})
 			})]

package/models/starter-props.d.ts

@@ -21,6 +21,13 @@ export interface StarterButtonsProps {
     onSelect: (starter: StarterOption) => void;
     /** When `true`, renders a mobile-optimised layout. */
     isMobile?: boolean;
+    /**
+     * When `true` (the default), only as many starters as the measured
+     * container width allows stay on one row and the rest collapse into an
+     * overflow dropdown. When `false`, every starter is rendered, each on its
+     * own row, and no overflow menu appears.
+     */
+    isCollapsible?: boolean;
     /** Localized labels used within the component. */
     labels: StarterButtonsLabels;
     /** Optional style overrides. */

package/models/starter-props.d.ts.map

@@ -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"}
+{"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

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-starter-buttons",
   "description": "Responsive starter prompt buttons that overflow into a dropdown when space is limited",
-  "version": "1.1.0-dev.488",
+  "version": "1.1.0-dev.491",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,7 +19,7 @@
     "@tabler/icons-react": "^3.44.0"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.488",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.491",
     "react": "^19.2.8",
     "@epam/ai-dial-ui-kit": "^0.14.2"
   },