@cognite/aura 0.3.4 → 0.3.5

package/README.md

@@ -159,6 +159,33 @@ Some Aura entry points require optional peer dependencies that consumers must in
   </ChartContainer>
   ```
 
+- `@cognite/aura/data-grid` requires `@tanstack/react-table >=8.7` and `@tanstack/react-virtual >=3.10`. Add them to your app:
+
+  ```sh
+  pnpm add @tanstack/react-table @tanstack/react-virtual
+  ```
+
+  The DataGrid is a virtualised table with client/server sorting, column pinning, and
+  expandable rows. Pass `columns` and `data` from your own TanStack column definitions.
+  Header chrome, pagination, selection, search, filters, and loading states are landing in
+  follow-up PRs.
+
+  ```tsx
+  import type { ColumnDef } from '@tanstack/react-table';
+  import { DataGrid } from '@cognite/aura/data-grid';
+
+  type Row = { id: string; name: string };
+  const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }];
+
+  <DataGrid
+    data={rows}
+    columns={columns}
+    getRowId={(row) => row.id}
+    enableSorting
+    aria-label="Assets"
+  />;
+  ```
+
 ## Versioning
 
 ### Before releasing

package/dist/components/ui/core/data-grid/data-grid-cell.js

@@ -0,0 +1,23 @@
+import { cn as e } from "../../../../lib/utils.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/data-grid/data-grid-cell.tsx
+var r = t(function({ className: t, children: r, isPinned: i, isLastPinned: a, colIndex: o, textValue: s, truncate: c = !0, style: l, ...u }, d) {
+	return /* @__PURE__ */ n("div", {
+		ref: d,
+		"data-slot": "data-grid-cell",
+		role: "cell",
+		"aria-colindex": o,
+		title: s,
+		className: e("flex items-center pr-3 text-sm font-normal", o === 1 ? "pl-4" : "pl-3", "min-w-0", i && "sticky z-10 bg-inherit", a && "shadow-pinned-column", t),
+		style: l,
+		...u,
+		children: c && s !== void 0 ? /* @__PURE__ */ n("span", {
+			className: "block min-w-0 flex-1 truncate",
+			children: s
+		}) : r
+	});
+});
+r.displayName = "DataGridCell";
+//#endregion
+export { r as DataGridCell };

package/dist/components/ui/core/data-grid/data-grid-header-row.js

@@ -0,0 +1,56 @@
+import { cn as e } from "../../../../lib/utils.js";
+import { getAriaSort as t } from "./data-grid.utils.js";
+import { IconArrowDown as n } from "@tabler/icons-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { flexRender as a } from "@tanstack/react-table";
+//#region libs/aura/src/components/ui/core/data-grid/data-grid-header-row.tsx
+function o({ headerGroup: o, headerRowIndex: s, resolvedHeaderHeight: c, gridTemplateColumns: l, pinnedColumnIds: u, lastPinnedColumnId: d, pinnedLeftByColumnId: f }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "data-grid-header-row",
+		role: "row",
+		"aria-rowindex": s + 1,
+		className: e("sticky z-20 grid bg-background", s === 0 ? "border-y" : "border-b"),
+		style: {
+			top: s * c,
+			gridTemplateColumns: l,
+			minHeight: c
+		},
+		children: o.headers.map((o) => {
+			let s = o.colSpan === 1, c = s && u.has(o.column.id), l = c && d === o.column.id, p = o.column.getIsSorted(), m = s && o.column.getCanSort(), h = o.colSpan > 1, g = o.isPlaceholder ? null : a(o.column.columnDef.header, o.getContext()), _ = typeof g == "string" || typeof g == "number";
+			return /* @__PURE__ */ r("div", {
+				"data-slot": "data-grid-column-header",
+				role: "columnheader",
+				"aria-colindex": o.index + 1,
+				"aria-colspan": o.colSpan > 1 ? o.colSpan : void 0,
+				"aria-sort": t(p, m),
+				className: e("flex items-center pr-3 text-left text-sm font-medium text-muted-foreground", o.index === 0 ? "pl-4" : "pl-3", h && "justify-center text-base font-semibold text-foreground/70", o.isPlaceholder && "pointer-events-none", c && "sticky left-0 z-10 bg-background", l && "shadow-pinned-column", m && e("cursor-pointer select-none hover:bg-muted/60", "focus-visible:shadow-focus-ring focus-visible:bg-background focus-visible:border-transparent focus-visible:text-foreground outline-none")),
+				tabIndex: m ? 0 : void 0,
+				style: {
+					gridColumn: `span ${o.colSpan} / span ${o.colSpan}`,
+					...c ? {
+						position: "sticky",
+						left: f.get(o.column.id) ?? 0,
+						zIndex: 10
+					} : {}
+				},
+				onClick: m ? o.column.getToggleSortingHandler() : void 0,
+				onKeyDown: m ? (e) => {
+					e.key !== "Enter" && e.key !== " " || (e.preventDefault(), o.column.toggleSorting(void 0, e.shiftKey));
+				} : void 0,
+				children: /* @__PURE__ */ i("div", {
+					className: "flex min-w-0 flex-1 items-center gap-1",
+					children: [_ ? /* @__PURE__ */ r("span", {
+						className: "block min-w-0 truncate",
+						children: g
+					}) : g, (p === "asc" || p === "desc") && /* @__PURE__ */ r("span", {
+						"aria-hidden": "true",
+						className: "inline-flex size-4 shrink-0 items-center justify-center",
+						children: /* @__PURE__ */ r(n, { className: e("size-3.5 shrink-0", p === "asc" && "rotate-180") })
+					})]
+				})
+			}, o.id);
+		})
+	});
+}
+//#endregion
+export { o as DataGridHeaderRow };

package/dist/components/ui/core/data-grid/data-grid-row.js

@@ -0,0 +1,77 @@
+import { cn as e } from "../../../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { getTextValue as n, isAccessorColumn as r, isFromExpandToggleTarget as i, isFromIgnoredCellTarget as a } from "./data-grid.utils.js";
+import { DataGridCell as o } from "./data-grid-cell.js";
+import { IconChevronRight as s } from "@tabler/icons-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { flexRender as u } from "@tanstack/react-table";
+//#region libs/aura/src/components/ui/core/data-grid/data-grid-row.tsx
+function d({ row: d, virtualRow: f, headerGroupCount: p, gridTemplateColumns: m, pinnedColumnIds: h, lastPinnedColumnId: g, pinnedLeftByColumnId: _, customCellColumnIds: v, maxDepth: y, hasExpanding: b, onRowClick: x }) {
+	let S = d.getCanExpand(), C = x !== void 0, w = C ? (e) => {
+		a(e) || i(e) || x?.(d);
+	} : void 0, T = d.getVisibleCells(), E = T.findIndex((e) => r(e.column.columnDef)), D = E >= 0 ? E : 0;
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "data-grid-row",
+		role: "row",
+		"aria-rowindex": f.index + 1 + p,
+		"aria-expanded": S ? d.getIsExpanded() : void 0,
+		className: e("group absolute left-0 right-0 grid border-b bg-background transition-colors", "hover:bg-active-muted-background", C && e("cursor-pointer focus-visible:bg-active-muted-background", "focus-visible:shadow-focus-ring focus-visible:bg-background focus-visible:border-transparent focus-visible:text-foreground outline-none")),
+		style: {
+			gridTemplateColumns: m,
+			height: f.size,
+			transform: `translateY(${f.start}px)`
+		},
+		tabIndex: C ? 0 : void 0,
+		onClick: w ? (e) => w(e.target) : void 0,
+		onKeyDown: w ? (e) => {
+			e.key !== "Enter" && e.key !== " " || a(e.target) || i(e.target) || (e.preventDefault(), w(e.target));
+		} : void 0,
+		children: T.map((i, a) => {
+			let f = h.has(i.column.id), p = f && g === i.column.id, m = u(i.column.columnDef.cell, i.getContext()), x = v.has(i.column.id), C = n(m), w = n(i.getValue()), T = C ?? (x ? void 0 : w), E = a === D, O = Math.min(d.depth, y), k = E && O > 0 ? O * 16 : 0, A = E && S, j = E && b && !S && O > 0, M = f ? {
+				position: "sticky",
+				left: _.get(i.column.id) ?? 0,
+				zIndex: 10
+			} : void 0, N = k > 0 || M ? {
+				...M,
+				...k > 0 ? { paddingInlineStart: `${k + 12}px` } : {}
+			} : void 0, P = A || j;
+			return /* @__PURE__ */ l(o, {
+				"data-row-activation": r(i.column.columnDef) ? void 0 : "ignore",
+				isPinned: f,
+				isLastPinned: p,
+				colIndex: a + 1,
+				textValue: T,
+				truncate: !P && T !== void 0,
+				style: N,
+				children: [
+					A && /* @__PURE__ */ c(t, {
+						size: "icon-sm",
+						variant: "ghost",
+						className: "mr-2",
+						"data-row-expand-toggle": "true",
+						onClick: (e) => {
+							e.stopPropagation(), d.toggleExpanded();
+						},
+						"aria-label": d.getIsExpanded() ? "Collapse row" : "Expand row",
+						children: /* @__PURE__ */ c(s, {
+							width: 5,
+							height: 8,
+							className: e(d.getIsExpanded() && "rotate-90"),
+							"aria-hidden": "true"
+						})
+					}),
+					j && /* @__PURE__ */ c("span", {
+						className: "mr-2 inline-block h-7 w-7 shrink-0",
+						"aria-hidden": "true"
+					}),
+					P && T !== void 0 ? /* @__PURE__ */ c("span", {
+						className: "block min-w-0 flex-1 truncate",
+						children: T
+					}) : m
+				]
+			}, i.id);
+		})
+	});
+}
+//#endregion
+export { d as DataGridRow };

package/dist/components/ui/core/data-grid/data-grid.js

@@ -0,0 +1,134 @@
+import { cn as e } from "../../../../lib/utils.js";
+import { useControllableState as t } from "../../../../lib/use-controllable-state.js";
+import { collectCustomCellColumnIds as n } from "./data-grid.utils.js";
+import { DataGridHeaderRow as r } from "./data-grid-header-row.js";
+import { DataGridRow as i } from "./data-grid-row.js";
+import { useEffect as a, useImperativeHandle as o, useMemo as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { getCoreRowModel as ee, getExpandedRowModel as te, getFilteredRowModel as ne, getSortedRowModel as re, useReactTable as ie } from "@tanstack/react-table";
+import { useVirtualizer as ae } from "@tanstack/react-virtual";
+//#region libs/aura/src/components/ui/core/data-grid/data-grid.tsx
+var oe = [], d = 120, f = {
+	default: 36,
+	compact: 32
+}, p = {
+	default: 36,
+	compact: 32
+};
+function m({ data: m, columns: h, getRowId: se, rowCount: g, globalFilterFn: _ = "auto", enableSorting: v = !1, manualSorting: y = !1, sorting: ce, defaultSorting: le, onSortingChange: ue, getSubRows: b, expanded: de, defaultExpanded: x, onExpandedChange: S, getRowCanExpand: C, maxDepth: w = 5, pinnedColumns: T = oe, gridRef: E, size: D = "default", children: O, className: k, onRowClick: A, rowHeight: j, headerHeight: M, "aria-label": N, "aria-labelledby": P }) {
+	let F = c(null), [fe, I] = t({
+		prop: ce,
+		defaultProp: le ?? [],
+		onChange: ue
+	}), L = b !== void 0, [R, z] = t({
+		prop: de,
+		defaultProp: x ?? {},
+		onChange: S
+	}), B = v && !y, V = s(() => ({
+		left: T,
+		right: []
+	}), [T]), H = s(() => new Set(T), [T]), U = T[T.length - 1], pe = s(() => n(h), [h]), W = ie({
+		data: m,
+		columns: h,
+		state: {
+			columnPinning: V,
+			sorting: fe,
+			...L ? { expanded: R } : {}
+		},
+		onSortingChange: I,
+		...L ? { onExpandedChange: z } : {},
+		autoResetExpanded: !1,
+		enableSorting: v,
+		manualSorting: y,
+		getCoreRowModel: ee(),
+		getFilteredRowModel: ne(),
+		globalFilterFn: _,
+		...B ? { getSortedRowModel: re() } : {},
+		...L ? { getExpandedRowModel: te() } : {},
+		getRowId: se,
+		getSubRows: b,
+		getRowCanExpand: C
+	}), { rows: G } = W.getRowModel(), K = W.getHeaderGroups(), q = W.getAllColumns(), J = W.getVisibleFlatColumns(), Y = j ?? f[D], me = M ?? p[D], X = m.length === 0, Z = ae({
+		count: G.length,
+		getScrollElement: () => F.current,
+		estimateSize: () => Y,
+		overscan: 10
+	}), he = {
+		"--data-grid-body-height": `${Z.getTotalSize()}px`,
+		"--data-grid-body-min-height": `${Y * 4}px`
+	};
+	o(E, () => ({
+		scrollToRow: (e) => Z.scrollToIndex(e),
+		resetSorting: () => I([])
+	})), a(() => {
+		for (let e of T) {
+			let t = q.find((t) => t.id === e);
+			t && t.columnDef.size === void 0 && console.warn(`[Aura DataGrid] Pinned column "${e}" has no \`size\` set. Pinned columns must declare an explicit \`size\` to keep the sticky offset aligned with the rendered column width.`);
+		}
+	}, [T, q]);
+	let Q = s(() => {
+		let e = J.some((e) => e.columnDef.size === void 0 && !H.has(e.id));
+		return J.map((t, n) => {
+			let r = t.columnDef.size, i = n === J.length - 1;
+			return H.has(t.id) ? `${r ?? d}px` : r === void 0 ? `minmax(${d}px, 1fr)` : !e && i ? `minmax(${r}px, 1fr)` : `${r}px`;
+		}).join(" ");
+	}, [J, H]), $ = s(() => {
+		let e = /* @__PURE__ */ new Map(), t = 0;
+		for (let n of T) {
+			let r = J.find((e) => e.id === n);
+			r && (e.set(n, t), t += r.columnDef.size ?? d);
+		}
+		return e;
+	}, [J, T]);
+	return /* @__PURE__ */ u("div", {
+		"data-slot": "data-grid",
+		className: e("relative flex h-full min-h-0 w-full flex-col overflow-clip rounded-xl bg-default text-sm", k),
+		children: [O, /* @__PURE__ */ l("div", {
+			ref: F,
+			"data-slot": "data-grid-scroll-container",
+			className: "relative order-2 h-full min-h-0 w-full flex-1 overflow-auto",
+			role: "table",
+			"aria-rowcount": (g ?? G.length) + K.length,
+			"aria-colcount": J.length,
+			"aria-label": N,
+			"aria-labelledby": P,
+			children: /* @__PURE__ */ u("div", {
+				className: "min-w-fit w-full",
+				children: [/* @__PURE__ */ l("div", {
+					role: "rowgroup",
+					"data-slot": "data-grid-header-group",
+					className: "contents",
+					children: K.map((e, t) => /* @__PURE__ */ l(r, {
+						headerGroup: e,
+						headerRowIndex: t,
+						resolvedHeaderHeight: me,
+						gridTemplateColumns: Q,
+						pinnedColumnIds: H,
+						lastPinnedColumnId: U,
+						pinnedLeftByColumnId: $
+					}, e.id))
+				}), /* @__PURE__ */ l("div", {
+					role: "rowgroup",
+					"data-slot": "data-grid-body",
+					className: e("relative min-h-(--data-grid-body-min-height)", !X && "h-(--data-grid-body-height)"),
+					style: he,
+					children: !X && Z.getVirtualItems().map((e) => /* @__PURE__ */ l(i, {
+						row: G[e.index],
+						virtualRow: e,
+						headerGroupCount: K.length,
+						gridTemplateColumns: Q,
+						pinnedColumnIds: H,
+						lastPinnedColumnId: U,
+						pinnedLeftByColumnId: $,
+						customCellColumnIds: pe,
+						maxDepth: w,
+						hasExpanding: L,
+						onRowClick: A
+					}, G[e.index].id))
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { m as DataGrid };

package/dist/components/ui/core/data-grid/data-grid.utils.js

@@ -0,0 +1,40 @@
+//#region libs/aura/src/components/ui/core/data-grid/data-grid.utils.ts
+function e(e, t) {
+	return e === "asc" ? "ascending" : e === "desc" ? "descending" : t ? "none" : void 0;
+}
+function t(e) {
+	if (typeof e == "string" || typeof e == "number") return String(e);
+}
+function n(e) {
+	let t = "accessorKey" in e && e.accessorKey !== void 0, n = "accessorFn" in e && e.accessorFn !== void 0;
+	return t || n;
+}
+function r(e) {
+	return e instanceof Element && !!e.closest("[data-row-activation=\"ignore\"]");
+}
+function i(e) {
+	return e instanceof Element && !!e.closest("[data-row-expand-toggle=\"true\"]");
+}
+function a(e) {
+	let t = /* @__PURE__ */ new Set(), n = (e) => {
+		for (let r of e) {
+			if (o(r)) {
+				n(r.columns);
+				continue;
+			}
+			if (Object.prototype.hasOwnProperty.call(r, "cell")) {
+				if ("id" in r && typeof r.id == "string") {
+					t.add(r.id);
+					continue;
+				}
+				"accessorKey" in r && typeof r.accessorKey == "string" && t.add(r.accessorKey);
+			}
+		}
+	};
+	return n(e), t;
+}
+function o(e) {
+	return "columns" in e && Array.isArray(e.columns);
+}
+//#endregion
+export { a as collectCustomCellColumnIds, e as getAriaSort, t as getTextValue, n as isAccessorColumn, i as isFromExpandToggleTarget, r as isFromIgnoredCellTarget };

package/dist/components/ui/core/data-grid/index.d.ts

@@ -0,0 +1 @@
+export { DataGrid, type DataGridHandle } from './data-grid';

package/dist/components/ui/core/data-grid/index.js

@@ -0,0 +1,2 @@
+import { DataGrid as e } from "./data-grid.js";
+export { e as DataGrid };

package/dist/components/ui/core/segmented-control/segmented-control.d.ts

@@ -1,20 +1,26 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
 declare function SegmentedControl({ className, ...props }: TabsPrimitive.Root.Props): ReactNode;
-interface SegmentedControlListVariantProps {
+interface SegmentedControlSizeVariantProps {
     size?: 'small' | 'default' | null;
 }
-declare const segmentedControlListVariants: (props?: (SegmentedControlListVariantProps & ClassProp) | undefined) => string;
+declare const segmentedControlListVariants: (props?: (SegmentedControlSizeVariantProps & ClassProp) | undefined) => string;
+type SegmentedControlSize = NonNullable<VariantProps<typeof segmentedControlListVariants>['size']>;
 type SegmentedControlListProps = TabsPrimitive.List.Props & VariantProps<typeof segmentedControlListVariants>;
 declare function SegmentedControlList({ className, size, children, ...props }: SegmentedControlListProps): ReactNode;
-interface SegmentedControlButtonVariantProps {
-    size?: 'small' | 'default' | null;
+declare const segmentedControlIndicatorVariants: (props?: (SegmentedControlSizeVariantProps & ClassProp) | undefined) => string;
+type SegmentedControlIndicatorProps = ComponentProps<'div'> & VariantProps<typeof segmentedControlIndicatorVariants> & {
+    activeSelector?: string;
+};
+declare function SegmentedControlIndicator({ className, size, activeSelector, style, ...props }: SegmentedControlIndicatorProps): ReactNode;
+interface SegmentedControlButtonVariantProps extends SegmentedControlSizeVariantProps {
     tabContent?: 'icon-label' | 'label-only' | 'icon-only' | null;
 }
 declare const segmentedControlButtonVariants: (props?: (SegmentedControlButtonVariantProps & ClassProp) | undefined) => string;
 type SegmentedControlButtonProps = TabsPrimitive.Tab.Props & VariantProps<typeof segmentedControlButtonVariants>;
 declare function SegmentedControlButton({ className, size, tabContent, ...props }: SegmentedControlButtonProps): ReactNode;
 declare function SegmentedControlContent({ className, ...props }: TabsPrimitive.Panel.Props): ReactNode;
-export { SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlList, segmentedControlButtonVariants, segmentedControlListVariants, };
+export { SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlIndicator, SegmentedControlList, segmentedControlButtonVariants, segmentedControlIndicatorVariants, segmentedControlListVariants, };
+export type { SegmentedControlSize };

package/dist/components/ui/core/segmented-control/segmented-control.js

@@ -1,50 +1,92 @@
 import { cn as e } from "../../../../lib/utils.js";
-import { createContext as t, useContext as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { cva as a } from "class-variance-authority";
-import { Tabs as o } from "@base-ui/react/tabs";
+import { createContext as t, useContext as n, useLayoutEffect as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cva as s } from "class-variance-authority";
+import { Tabs as c } from "@base-ui/react/tabs";
 //#region libs/aura/src/components/ui/core/segmented-control/segmented-control.tsx
-function s({ className: t, ...n }) {
-	return /* @__PURE__ */ r(o.Root, {
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ a(c.Root, {
 		"data-slot": "segmented-control",
 		className: e("flex flex-col gap-2", t),
 		...n
 	});
 }
-var c = a("bg-muted-background text-muted-foreground relative isolate inline-flex w-fit items-center justify-center gap-2 p-0.5", {
+var u = s("bg-muted-background text-muted-foreground relative isolate inline-flex w-fit items-center justify-center gap-2 p-0.5", {
 	variants: { size: {
 		default: "h-9 rounded-lg",
 		small: "h-7 rounded-md"
 	} },
 	defaultVariants: { size: "default" }
-}), l = t(void 0);
-function u({ className: t, size: n, children: a, ...s }) {
-	let u = n ?? "default";
-	return /* @__PURE__ */ r(o.List, {
+}), d = t(void 0);
+function f(e) {
+	let t = n(d);
+	return e ?? t ?? "default";
+}
+function p({ className: t, size: n, children: r, ...i }) {
+	let s = n ?? "default";
+	return /* @__PURE__ */ a(c.List, {
 		"data-slot": "segmented-control-list",
-		className: e(c({ size: n }), t),
-		...s,
-		children: /* @__PURE__ */ i(l.Provider, {
-			value: u,
-			children: [/* @__PURE__ */ r(f, { size: u }), a]
+		className: e(u({ size: n }), t),
+		...i,
+		children: /* @__PURE__ */ o(d.Provider, {
+			value: s,
+			children: [/* @__PURE__ */ a(h, {
+				size: s,
+				activeSelector: "[aria-selected=\"true\"]"
+			}), r]
 		})
 	});
 }
-var d = a("bg-background pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) -z-0 h-(--active-tab-height) w-(--active-tab-width) motion-safe:transition-[top,left,width,height] motion-safe:duration-200 motion-safe:ease-out data-[activation-direction=none]:transition-none", {
+var m = s("bg-background pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) -z-0 h-(--active-tab-height) w-(--active-tab-width) motion-safe:transition-[top,left,width,height] motion-safe:duration-200 motion-safe:ease-out data-[activation-direction=none]:transition-none", {
 	variants: { size: {
 		default: "rounded-md",
 		small: "rounded-sm"
 	} },
 	defaultVariants: { size: "default" }
 });
-function f({ className: t, size: n, ...i }) {
-	return /* @__PURE__ */ r(o.Indicator, {
+function h({ className: t, size: n, activeSelector: o = "[aria-selected=\"true\"],[data-active]", style: s, ...c }) {
+	let l = i(null), u = i(null);
+	return r(() => {
+		let e = l.current, t = e?.parentElement;
+		if (!e || !t) return;
+		let n = null, r = /* @__PURE__ */ new Set(), i = (e) => {
+			r.add(e), s.observe(e);
+		}, a = (r = !1) => {
+			let a = t.querySelector(o);
+			if (!a) {
+				e.style.opacity = "0";
+				return;
+			}
+			a !== n && (n && s.unobserve(n), i(a), n = a);
+			let c = a.offsetLeft, l = u.current, d = r || l === null || c === l ? "none" : c > l ? "right" : "left";
+			e.dataset.activationDirection = d, e.style.opacity = "1", e.style.setProperty("--active-tab-left", `${c}px`), e.style.setProperty("--active-tab-top", `${a.offsetTop}px`), e.style.setProperty("--active-tab-width", `${a.offsetWidth}px`), e.style.setProperty("--active-tab-height", `${a.offsetHeight}px`), u.current = c;
+		}, s = new ResizeObserver((e) => {
+			e.some((e) => r.has(e.target) ? (r.delete(e.target), !1) : !0) && a(!0);
+		});
+		i(t), a();
+		let c = new MutationObserver(() => a(!1));
+		return c.observe(t, {
+			attributes: !0,
+			attributeFilter: [
+				"aria-selected",
+				"data-active",
+				"class"
+			],
+			subtree: !0,
+			childList: !0
+		}), () => {
+			c.disconnect(), s.disconnect();
+		};
+	}, [o]), /* @__PURE__ */ a("div", {
+		ref: l,
 		"data-slot": "segmented-control-indicator",
-		className: e(d({ size: n }), t),
-		...i
+		"data-activation-direction": "none",
+		className: e("opacity-0", m({ size: n }), t),
+		style: s,
+		...c
 	});
 }
-var p = a("text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap text-muted-foreground dark:text-muted-foreground border border-transparent transition-[color,box-shadow] duration-200 ease-out focus-visible:border-ring focus-visible:ring focus-visible:ring-ring-shadow focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 hover:text-foreground data-active:text-foreground data-active:hover:text-foreground", {
+var g = s("text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap text-muted-foreground dark:text-muted-foreground border border-transparent transition-[color,box-shadow] duration-200 ease-out focus-visible:border-ring focus-visible:ring focus-visible:ring-ring-shadow focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 hover:text-foreground data-active:text-foreground data-active:hover:text-foreground", {
 	variants: {
 		size: {
 			default: "rounded-md",
@@ -93,23 +135,23 @@ var p = a("text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-
 		tabContent: "icon-label"
 	}
 });
-function m({ className: t, size: i, tabContent: a, ...s }) {
-	let c = n(l), u = i ?? c;
-	return /* @__PURE__ */ r(o.Tab, {
+function _({ className: t, size: n, tabContent: r, ...i }) {
+	let o = f(n);
+	return /* @__PURE__ */ a(c.Tab, {
 		"data-slot": "segmented-control-trigger",
-		className: e(p({
-			size: u,
-			tabContent: a
+		className: e(g({
+			size: o,
+			tabContent: r
 		}), t),
-		...s
+		...i
 	});
 }
-function h({ className: t, ...n }) {
-	return /* @__PURE__ */ r(o.Panel, {
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ a(c.Panel, {
 		"data-slot": "segmented-control-content",
 		className: e("flex-1 outline-none", t),
 		...n
 	});
 }
 //#endregion
-export { s as SegmentedControl, m as SegmentedControlButton, h as SegmentedControlContent, u as SegmentedControlList, p as segmentedControlButtonVariants, c as segmentedControlListVariants };
+export { l as SegmentedControl, _ as SegmentedControlButton, v as SegmentedControlContent, h as SegmentedControlIndicator, p as SegmentedControlList, g as segmentedControlButtonVariants, m as segmentedControlIndicatorVariants, u as segmentedControlListVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/aura",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "sideEffects": [
     "**/*.scss",
@@ -227,6 +227,10 @@
       "import": "./dist/components/ui/core/chart/index.js",
       "types": "./dist/components/ui/core/chart/index.d.ts"
     },
+    "./data-grid": {
+      "import": "./dist/components/ui/core/data-grid/index.js",
+      "types": "./dist/components/ui/core/data-grid/index.d.ts"
+    },
     "./highlight-code": {
       "import": "./dist/lib/highlight-code.js",
       "types": "./dist/lib/highlight-code.d.ts"