@epam/ai-dial-starter-buttons 0.0.0-dev.0

package/components/StarterButtons/StarterButtons.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { StarterButtonsProps } from '../../models/starter-props';
+export declare const StarterButtons: FC<StarterButtonsProps>;
+//# sourceMappingURL=StarterButtons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StarterButtons.d.ts","sourceRoot":"","sources":["../../../src/components/StarterButtons/StarterButtons.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAMtE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuIlD,CAAC"}

package/index.d.ts

@@ -0,0 +1,3 @@
+export { StarterButtons } from './components/StarterButtons/StarterButtons';
+export type { StarterButtonsProps, StarterButtonsAriaLabels, } from './models/starter-props';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +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,wBAAwB,GACzB,MAAM,wBAAwB,CAAC"}

package/index.js

@@ -0,0 +1,75 @@
+import { DIAL_ICON_SIZE as e, DialDropdown as t, DialRoundedButton as n } from "@epam/ai-dial-ui-kit";
+import { IconDots as r, IconDotsVertical as i } from "@tabler/icons-react";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/StarterButtons/StarterButtons.tsx
+var d = 4, f = 8, p = ({ starters: p, onSelect: m, isMobile: h, ariaLabels: g }) => {
+	let _ = s(null), v = s([]), y = s([]), [b, x] = c(() => Math.min(p.length, d)), S = a((e) => {
+		let t = _.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect().width;
+		if (n === 0) return;
+		let r = Math.min(e, d);
+		v.current.slice(0, r).every((e) => e != null) && (y.current = v.current.slice(0, r).map((e) => e?.getBoundingClientRect().width ?? 0));
+		let i = (e) => y.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 ? f : 0) + r + (s ? 64 : 0) > n) break;
+			a += (t > 0 ? f : 0) + r, o = t + 1;
+		}
+		x(Math.max(1, o));
+	}, []);
+	if (o(() => {
+		y.current = [], x(Math.min(p.length, d));
+	}, [p.length]), o(() => {
+		let e = _.current;
+		if (!e) return;
+		let t = new ResizeObserver(() => {
+			S(p.length);
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [S, p.length]), o(() => {
+		S(p.length);
+	}), p.length === 0) return null;
+	let C = Math.min(b, d), w = p.slice(0, C), T = p.slice(C), E = T.map((e, t) => ({
+		key: String(t),
+		label: e.title,
+		onClick: () => m(e)
+	}));
+	return /* @__PURE__ */ l("div", {
+		ref: _,
+		className: "mt-4 w-full",
+		children: /* @__PURE__ */ u("div", {
+			role: "list",
+			"aria-label": g.list,
+			className: "flex flex-wrap justify-center gap-2",
+			children: [w.map((e, t) => /* @__PURE__ */ l("div", {
+				role: "listitem",
+				ref: (e) => {
+					v.current[t] = e;
+				},
+				children: /* @__PURE__ */ l(n, {
+					label: e.title,
+					onClick: () => m(e)
+				})
+			}, e.const)), T.length > 0 && /* @__PURE__ */ l("div", {
+				role: "listitem",
+				children: /* @__PURE__ */ l(t, {
+					items: E,
+					placement: "bottom-end",
+					matchReferenceWidth: !1,
+					listClassName: "cp-dropdown-overlay",
+					children: /* @__PURE__ */ l(n, {
+						iconAfter: l(h ? r : i, {
+							stroke: 1.5,
+							size: e.MD
+						}),
+						"aria-label": g.overflow
+					})
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { p as StarterButtons };

package/models/starter-props.d.ts

@@ -0,0 +1,12 @@
+import { StarterOption } from '@epam/ai-dial-chat-shared';
+export interface StarterButtonsAriaLabels {
+    list: string;
+    overflow: string;
+}
+export interface StarterButtonsProps {
+    starters: StarterOption[];
+    onSelect: (starter: StarterOption) => void;
+    isMobile?: boolean;
+    ariaLabels: StarterButtonsAriaLabels;
+}
+//# sourceMappingURL=starter-props.d.ts.map

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

@@ -0,0 +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,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,wBAAwB,CAAC;CACtC"}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@epam/ai-dial-starter-buttons",
+  "version": "0.0.0-dev.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "@epam/ai-dial-chat-shared": "0.0.0-dev.0",
+    "@epam/ai-dial-ui-kit": "0.12.0-dev.21",
+    "@tabler/icons-react": "^3.44.0",
+    "react": "^19.0.0"
+  }
+}

package/test-setup.d.ts

@@ -0,0 +1,6 @@
+declare class ResizeObserverMock {
+    observe(): void;
+    unobserve(): void;
+    disconnect(): void;
+}
+//# sourceMappingURL=test-setup.d.ts.map

package/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAEA,cAAM,kBAAkB;IACtB,OAAO;IACP,SAAS;IACT,UAAU;CACX"}