@spteck/react-controls-v2 2.3.8 → 2.3.91

package/dist/index.js

@@ -9634,27 +9634,27 @@ var Zu = function(e, t, n) {
 			children: [/* @__PURE__ */ R(_t, { children: /* @__PURE__ */ R(yt, { children: ({ renderHeaderCell: e }) => /* @__PURE__ */ R(vt, { children: e() }) }) }), /* @__PURE__ */ R(k, {})]
 		})
 	});
-}, _d = H`
-  &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-  &::-webkit-scrollbar-track {
-    background: ${V.colorNeutralBackground4};
-    border-radius: ${V.borderRadiusMedium};
-  }
-  &::-webkit-scrollbar-thumb {
-    background: ${V.colorBrandBackground};
-    border-radius: ${V.borderRadiusMedium};
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${V.colorBrandBackgroundHover};
-  }
-`;
+}, _d = In({ scrollbar: {
+	scrollbarWidth: "thin",
+	scrollbarColor: `${V.colorBrandBackground} ${V.colorNeutralBackground4}`,
+	"&::-webkit-scrollbar": {
+		width: "5px",
+		height: "5px"
+	},
+	"&::-webkit-scrollbar-track": {
+		background: V.colorNeutralBackground4,
+		borderRadius: V.borderRadiusMedium
+	},
+	"&::-webkit-scrollbar-thumb": {
+		background: V.colorBrandBackground,
+		borderRadius: V.borderRadiusMedium
+	},
+	"&::-webkit-scrollbar-thumb:hover": { background: V.colorBrandBackgroundHover }
+} });
 //#endregion
 //#region src/components/DataGridV2/DataGridV2.tsx
 function vd(e, t) {
-	let { columns: n, items: r, enableSorting: i = !1, enableResizing: a = !1, selectionMode: o = "none", onSelectionChange: s, defaultSelectedItems: c = [], defaultSortState: l, onSortChange: u, columnSizingOptions: d, resizableColumnsOptions: f, noItemsMessage: p, isLoadingData: m, isLoadingDataMessage: h, dataGridBodyClassName: g, dataGridBodyStyles: _, refreshData: v, enableInfiniteScroll: y, onLoadMore: b, infiniteScrollPageSize: x, hasNextPage: S, isLoadingMore: C, autoShowLastPage: w = !0, virtualizedHeight: T = 600, virtualizedItemSize: E = 44, startIndex: D, onRowClick: O } = e, k = M.useMemo(() => n.map((e) => Fn({
+	let n = _d().scrollbar, { columns: r, items: i, enableSorting: a = !1, enableResizing: o = !1, selectionMode: s = "none", onSelectionChange: c, defaultSelectedItems: l = [], defaultSortState: u, onSortChange: d, columnSizingOptions: f, resizableColumnsOptions: p, noItemsMessage: m, isLoadingData: h, isLoadingDataMessage: g, dataGridBodyClassName: _, dataGridBodyStyles: v, refreshData: y, enableInfiniteScroll: b, onLoadMore: x, infiniteScrollPageSize: S, hasNextPage: C, isLoadingMore: w, autoShowLastPage: T = !0, virtualizedHeight: E = 600, virtualizedItemSize: D = 44, startIndex: O, onRowClick: k } = e, A = M.useMemo(() => r.map((e) => Fn({
 		columnId: e.column,
 		renderHeaderCell: () => /* @__PURE__ */ R(rt, { children: e.header }),
 		renderCell: (t) => /* @__PURE__ */ R(Sn, {
@@ -9664,138 +9664,139 @@ function vd(e, t) {
 			children: e.onRender ? e.onRender(t) : String(t[e.column] ?? "")
 		}),
 		compare: e.order
-	})), [n]), A = M.useCallback((e) => r.findIndex((t) => t === e), [r]), [j, ee] = M.useState(new Set(c.map((e) => A(e)))), [te, ne] = M.useState(0);
+	})), [r]), j = M.useCallback((e) => i.findIndex((t) => t === e), [i]), [ee, te] = M.useState(new Set(l.map((e) => j(e)))), [ne, re] = M.useState(0);
 	M.useEffect(() => {
-		c.length && ee(new Set(c.map((e) => A(e))));
+		l.length && te(new Set(l.map((e) => j(e))));
 	}, [
-		c,
-		r,
-		A
+		l,
+		i,
+		j
 	]), M.useEffect(() => {
-		v && ee(/* @__PURE__ */ new Set());
-	}, [v]);
-	let re = (e, t) => {
+		y && te(/* @__PURE__ */ new Set());
+	}, [y]);
+	let ie = (e, t) => {
 		let n = /* @__PURE__ */ new Set();
 		t.selectedItems.forEach((e) => {
 			let t = Number(e);
 			isNaN(t) || n.add(t);
-		}), ee(n), s && s(Array.from(n).map((e) => r[e]));
-	}, ie = (e, t) => {
-		u && u(t);
-	}, [ae, oe] = M.useState(null), se = M.useMemo(() => new Map(r.map((e, t) => [e, t])), [r]);
+		}), te(n), c && c(Array.from(n).map((e) => i[e]));
+	}, ae = (e, t) => {
+		d && d(t);
+	}, [oe, se] = M.useState(null), ce = M.useMemo(() => new Map(i.map((e, t) => [e, t])), [i]);
 	M.useEffect(() => {
-		o === "row" && ae != null && ae >= r.length && oe(null);
+		s === "row" && oe != null && oe >= i.length && se(null);
 	}, [
-		r,
-		ae,
-		o
+		i,
+		oe,
+		s
 	]), M.useEffect(() => {
-		v && o === "row" && oe(null);
-	}, [v, o]);
-	let ce = M.useRef(null), le = M.useRef(r.length), ue = M.useRef(!1), de = M.useRef(!1), fe = M.useRef(!1);
+		y && s === "row" && se(null);
+	}, [y, s]);
+	let le = M.useRef(null), ue = M.useRef(i.length), de = M.useRef(!1), fe = M.useRef(!1), pe = M.useRef(!1);
 	M.useImperativeHandle(t, () => ({
 		scrollToIndex: (e, t = "auto") => {
-			let n = ce.current;
+			let n = le.current;
 			n && "scrollToItem" in n && n.scrollToItem(Math.max(0, e), t);
 		},
 		resetGrid: () => {
-			ne((e) => e + 1), le.current = 0, ue.current = !1, de.current = !1, fe.current = !1, pe.current = -1, ee(/* @__PURE__ */ new Set()), oe(null);
+			re((e) => e + 1), ue.current = 0, de.current = !1, fe.current = !1, pe.current = !1, me.current = -1, te(/* @__PURE__ */ new Set()), se(null);
 		},
-		getSelectedRow: () => ae !== null && ae < r.length ? {
-			item: r[ae],
-			index: ae
+		getSelectedRow: () => oe !== null && oe < i.length ? {
+			item: i[oe],
+			index: oe
 		} : null,
 		setSelectedRow: (e) => {
-			let t = r.findIndex((t) => t === e);
-			t !== -1 && (oe(t), s?.([e]));
+			let t = i.findIndex((t) => t === e);
+			t !== -1 && (se(t), c?.([e]));
 		}
 	})), M.useEffect(() => {
-		if (!ue.current && typeof D == "number" && ce.current) {
-			let e = ce.current;
-			"scrollToItem" in e && e.scrollToItem(Math.min(D, Math.max(r.length - 1, 0)), "start"), ue.current = !0;
-		}
-	}, [D, r.length]), M.useEffect(() => {
-		let e = le.current, t = r.length, n = t > e;
-		if (le.current = t, !w || !n || e === 0) return;
-		let i = ce.current;
-		i && "scrollToItem" in i && i.scrollToItem(Math.max(t - 1, 0), "end");
-	}, [r.length, w]);
-	let pe = M.useRef(-1), me = M.useCallback(({ visibleStopIndex: e }) => {
-		if (!y || !b || C || fe.current) return;
-		if (!de.current) {
-			de.current = !0;
+		if (!de.current && typeof O == "number" && le.current) {
+			let e = le.current;
+			"scrollToItem" in e && e.scrollToItem(Math.min(O, Math.max(i.length - 1, 0)), "start"), de.current = !0;
+		}
+	}, [O, i.length]), M.useEffect(() => {
+		let e = ue.current, t = i.length, n = t > e;
+		if (ue.current = t, !T || !n || e === 0) return;
+		let r = le.current;
+		r && "scrollToItem" in r && r.scrollToItem(Math.max(t - 1, 0), "end");
+	}, [i.length, T]);
+	let me = M.useRef(-1), he = M.useCallback(({ visibleStopIndex: e }) => {
+		if (!b || !x || w || pe.current) return;
+		if (!fe.current) {
+			fe.current = !0;
 			return;
 		}
-		let t = x ?? 20;
-		if (r.length < t) return;
+		let t = S ?? 20;
+		if (i.length < t) return;
 		let n = Math.max(5, Math.ceil(t / 5));
-		e >= r.length - n && S && pe.current !== r.length && (pe.current = r.length, fe.current = !0, b());
+		e >= i.length - n && C && me.current !== i.length && (me.current = i.length, pe.current = !0, x());
 	}, [
-		y,
 		b,
-		S,
+		x,
 		C,
-		r.length,
-		x
+		w,
+		i.length,
+		S
 	]);
 	return M.useEffect(() => {
-		fe.current && r.length > pe.current && (fe.current = !1);
-	}, [r.length]), /* @__PURE__ */ z("div", {
+		pe.current && i.length > me.current && (pe.current = !1);
+	}, [i.length]), /* @__PURE__ */ z("div", {
 		style: M.useMemo(() => ({
 			overflowX: "auto",
 			overflowY: "hidden",
 			position: "relative"
 		}), []),
-		className: _d,
-		children: [m && /* @__PURE__ */ R(Y, {
+		className: n,
+		children: [h && /* @__PURE__ */ R(Y, {
 			alignItems: "center",
 			justifyContent: "center",
-			height: `${T}px`,
-			children: M.isValidElement(h) ? h : /* @__PURE__ */ z(vn, {
+			height: `${E}px`,
+			children: M.isValidElement(g) ? g : /* @__PURE__ */ z(vn, {
 				size: "extra-tiny",
 				children: [
 					" ",
-					h ?? "Loading data...",
+					g ?? "Loading data...",
 					" "
 				]
 			})
-		}), !m && r.length ? /* @__PURE__ */ z(gi, {
-			items: r,
-			columns: k,
-			sortable: i,
-			onSortChange: i ? ie : void 0,
-			selectionMode: o === "none" || o === "row" ? void 0 : o === "multiple" ? "multiselect" : o === "single" ? "single" : void 0,
-			selectedItems: j,
-			onSelectionChange: re,
-			defaultSortState: l,
-			resizableColumns: a,
-			columnSizingOptions: d,
-			resizableColumnsOptions: f,
+		}), !h && i.length ? /* @__PURE__ */ z(gi, {
+			items: i,
+			columns: A,
+			sortable: a,
+			onSortChange: a ? ae : void 0,
+			selectionMode: s === "none" || s === "row" ? void 0 : s === "multiple" ? "multiselect" : s === "single" ? "single" : void 0,
+			selectedItems: ee,
+			onSelectionChange: ie,
+			defaultSortState: u,
+			resizableColumns: o,
+			columnSizingOptions: f,
+			resizableColumnsOptions: p,
 			focusMode: "cell",
-			className: g,
-			style: _,
+			className: Ln(_, n),
+			style: v,
 			children: [/* @__PURE__ */ R(yi, { children: /* @__PURE__ */ R(xi, { children: ({ renderHeaderCell: e }) => /* @__PURE__ */ R(bi, { children: e() }) }) }), /* @__PURE__ */ R(_i, {
-				itemSize: E,
-				height: T,
+				itemSize: D,
+				height: E,
 				width: "100%",
-				listProps: { onItemsRendered: me },
+				listProps: { onItemsRendered: he },
+				className: n,
 				children: (e, t) => (() => {
-					let n = e.item, i = se.get(n) ?? r.indexOf(n), a = o === "row", c = a && ae === i, l = (e) => {
-						oe(i), s?.([n]), O?.(n, i);
+					let n = e.item, r = ce.get(n) ?? i.indexOf(n), a = s === "row", o = a && oe === r, l = (e) => {
+						se(r), c?.([n]), k?.(n, r);
 					};
 					return /* @__PURE__ */ R(xi, {
 						style: {
 							...t,
 							cursor: a ? "pointer" : void 0,
-							background: c ? V.colorSubtleBackgroundSelected : void 0
+							background: o ? V.colorSubtleBackgroundSelected : void 0
 						},
 						onClick: l,
-						"aria-selected": c || void 0,
+						"aria-selected": o || void 0,
 						children: ({ renderCell: e }) => /* @__PURE__ */ R(vi, { children: e(n) })
 					});
 				})()
 			})]
-		}, te) : !m && !r.length ? /* @__PURE__ */ R("div", { children: p }) : null]
+		}, ne) : !h && !i.length ? /* @__PURE__ */ R("div", { children: m }) : null]
 	});
 }
 var yd = M.forwardRef(vd);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@spteck/react-controls-v2",
-   "version": "2.3.8",
+   "version": "2.3.91",
    "description": "Framework-agnostic React controls for Vite, Next.js, and SPFx - based on Fluent UI 9",
    "license": "MIT",
    "author": "João Mendes",