@olenbetong/appframe-ds 0.8.0 → 0.9.0

package/src/grid/license.ts

@@ -0,0 +1,48 @@
+import { LicenseInfo } from "@mui/x-license";
+
+let explicitKey: string | undefined;
+let registered = false;
+
+/**
+ * Sets the MUI X license key used by the grid. Only needed when the key isn't
+ * injected at build time — call it before the first grid renders.
+ */
+export function setAfGridLicenseKey(key: string) {
+	explicitKey = key;
+	registered = false;
+	registerLicense();
+}
+
+function resolveLicenseKey() {
+	if (explicitKey) {
+		return explicitKey;
+	}
+
+	// Replaced at build time by the `appframe()` Vite plugin. Guarded with
+	// `typeof`, because this package is compiled with `tsc` and consumers are
+	// free to bundle it without the define.
+	if (typeof __MUI_X_LICENSE_KEY__ === "string" && __MUI_X_LICENSE_KEY__) {
+		return __MUI_X_LICENSE_KEY__;
+	}
+
+	return import.meta.env?.VITE_MUI_X_LICENSE_KEY;
+}
+
+/**
+ * Registers the MUI X license key with MUI. Called when the grid module is
+ * loaded, so apps don't have to do it themselves.
+ */
+export function registerLicense() {
+	if (registered) return;
+
+	registered = true;
+	let key = resolveLicenseKey();
+
+	if (key) {
+		LicenseInfo.setLicenseKey(key);
+	} else if (import.meta.env?.DEV) {
+		console.warn(
+			"[appframe-ds] No MUI X license key found. Set the MUI_X_LICENSE_KEY environment variable, or call setAfGridLicenseKey() before rendering a grid.",
+		);
+	}
+}

package/src/grid/localization.ts

@@ -0,0 +1,369 @@
+import type { GridLocaleText } from "@mui/x-data-grid-pro";
+import { getLocalizedString, localize } from "@olenbetong/appframe-core";
+
+export type AfGridLocaleTextExt = GridLocaleText & {
+	filterOperatorNotContains: string;
+	filterOperatorNotEquals: string;
+	filterOperatorLike: string;
+	filterOperatorNotLike: string;
+	filterOperatorIsNoneOf: string;
+	headerFilterOperatorNotContains: string;
+	headerFilterOperatorNotEquals: string;
+	headerFilterOperatorLike: string;
+	headerFilterOperatorNotLike: string;
+	headerFilterOperatorIsNoneOf: string;
+};
+
+export const AF_GRID_LOCALE_TEXT: AfGridLocaleTextExt = {
+	// Root
+	noRowsLabel: getLocalizedString("No rows"),
+	noResultsOverlayLabel: getLocalizedString("No results found."),
+	noColumnsOverlayLabel: getLocalizedString("No columns"),
+	noColumnsOverlayManageColumns: getLocalizedString("Manage columns"),
+	emptyPivotOverlayLabel: getLocalizedString("Add fields to rows, columns, and values to create a pivot table"),
+
+	// Density selector toolbar button text
+	toolbarDensity: getLocalizedString("Density"),
+	toolbarDensityLabel: getLocalizedString("Density"),
+	toolbarDensityCompact: getLocalizedString("Compact"),
+	toolbarDensityStandard: getLocalizedString("Standard"),
+	toolbarDensityComfortable: getLocalizedString("Comfortable"),
+
+	// Undo/redo toolbar button text
+	toolbarUndo: getLocalizedString("Undo"),
+	toolbarRedo: getLocalizedString("Redo"),
+
+	// Columns selector toolbar button text
+	toolbarColumns: getLocalizedString("Columns"),
+	toolbarColumnsLabel: getLocalizedString("Select columns"),
+
+	// Filters toolbar button text
+	toolbarFilters: getLocalizedString("Filters"),
+	toolbarFiltersLabel: getLocalizedString("Show filters"),
+	toolbarFiltersTooltipHide: getLocalizedString("Hide filters"),
+	toolbarFiltersTooltipShow: getLocalizedString("Show filters"),
+	toolbarFiltersTooltipActive: (count) =>
+		count !== 1
+			? getLocalizedString(`$count active filters`).replace("$count", String(count))
+			: getLocalizedString(`$count active filter`).replace("$count", String(count)),
+
+	// Quick filter toolbar field
+	toolbarQuickFilterPlaceholder: getLocalizedString("Search…"),
+	toolbarQuickFilterLabel: getLocalizedString("Search"),
+	toolbarQuickFilterDeleteIconLabel: getLocalizedString("Clear"),
+
+	// Export selector toolbar button text
+	toolbarExport: getLocalizedString("Export"),
+	toolbarExportLabel: getLocalizedString("Export"),
+	toolbarExportCSV: getLocalizedString("Download as CSV"),
+	toolbarExportPrint: getLocalizedString("Print"),
+	toolbarExportExcel: getLocalizedString("Download as Excel"),
+
+	// Toolbar pivot button
+	toolbarPivot: getLocalizedString("Pivot"),
+
+	// Toolbar charts button
+	toolbarCharts: getLocalizedString("Charts"),
+
+	// Toolbar AI Assistant button
+	toolbarAssistant: getLocalizedString("AI Assistant"),
+
+	// Columns management text
+	columnsManagementSearchTitle: getLocalizedString("Search"),
+	columnsManagementNoColumns: getLocalizedString("No columns"),
+	columnsManagementShowHideAllText: getLocalizedString("Show/Hide All"),
+	columnsManagementReset: getLocalizedString("Reset"),
+	columnsManagementDeleteIconLabel: getLocalizedString("Clear"),
+
+	// Filter panel text
+	filterPanelAddFilter: getLocalizedString("Add filter"),
+	filterPanelDeleteIconLabel: getLocalizedString("Delete"),
+	filterPanelLogicOperator: getLocalizedString("Logic operator"),
+	filterPanelOperator: getLocalizedString("Operator"),
+	filterPanelOperatorAnd: getLocalizedString("And"),
+	filterPanelOperatorOr: getLocalizedString("Or"),
+	filterPanelColumns: getLocalizedString("Columns"),
+	filterPanelInputLabel: getLocalizedString("Value"),
+	filterPanelInputPlaceholder: getLocalizedString("Filter value"),
+	filterPanelRemoveAll: getLocalizedString("Remove all"),
+
+	// Filter operators text
+	filterOperatorContains: getLocalizedString("contains"),
+	filterOperatorDoesNotContain: getLocalizedString("does not contain"),
+	filterOperatorEquals: getLocalizedString("equals"),
+	filterOperatorDoesNotEqual: getLocalizedString("does not equal"),
+	filterOperatorStartsWith: getLocalizedString("starts with"),
+	filterOperatorEndsWith: getLocalizedString("ends with"),
+	filterOperatorIs: getLocalizedString("is"),
+	filterOperatorNot: getLocalizedString("is not"),
+	filterOperatorAfter: getLocalizedString("is after"),
+	filterOperatorOnOrAfter: getLocalizedString("is on or after"),
+	filterOperatorBefore: getLocalizedString("is before"),
+	filterOperatorOnOrBefore: getLocalizedString("is on or before"),
+	filterOperatorIsEmpty: getLocalizedString("is empty"),
+	filterOperatorIsNotEmpty: getLocalizedString("is not empty"),
+	filterOperatorIsAnyOf: getLocalizedString("is any of"),
+	"filterOperator=": "=",
+	"filterOperator!=": "!=",
+	"filterOperator>": ">",
+	"filterOperator>=": ">=",
+	"filterOperator<": "<",
+	"filterOperator<=": "<=",
+
+	// Header filter operators text
+	headerFilterOperatorContains: getLocalizedString("Contains"),
+	headerFilterOperatorDoesNotContain: getLocalizedString("Does not contain"),
+	headerFilterOperatorEquals: getLocalizedString("Equals"),
+	headerFilterOperatorDoesNotEqual: getLocalizedString("Does not equal"),
+	headerFilterOperatorStartsWith: getLocalizedString("Starts with"),
+	headerFilterOperatorEndsWith: getLocalizedString("Ends with"),
+	headerFilterOperatorIs: getLocalizedString("Is"),
+	headerFilterOperatorNot: getLocalizedString("Is not"),
+	headerFilterOperatorAfter: getLocalizedString("Is after"),
+	headerFilterOperatorOnOrAfter: getLocalizedString("Is on or after"),
+	headerFilterOperatorBefore: getLocalizedString("Is before"),
+	headerFilterOperatorOnOrBefore: getLocalizedString("Is on or before"),
+	headerFilterOperatorIsEmpty: getLocalizedString("Is empty"),
+	headerFilterOperatorIsNotEmpty: getLocalizedString("Is not empty"),
+	headerFilterOperatorIsAnyOf: getLocalizedString("Is any of"),
+	"headerFilterOperator=": getLocalizedString("Equals"),
+	"headerFilterOperator!=": getLocalizedString("Not equals"),
+	"headerFilterOperator>": getLocalizedString("greater than"),
+	"headerFilterOperator>=": getLocalizedString("greater than or equal to"),
+	"headerFilterOperator<": getLocalizedString("less than"),
+	"headerFilterOperator<=": getLocalizedString("less than or equal to"),
+	headerFilterClear: getLocalizedString("Clear filter"),
+
+	// Filter values text
+	filterValueAny: getLocalizedString("any"),
+	filterValueTrue: getLocalizedString("true"),
+	filterValueFalse: getLocalizedString("false"),
+
+	// Column menu text
+	columnMenuLabel: getLocalizedString("Menu"),
+	columnMenuAriaLabel: (columnName: string) => localize`${columnName} column menu`,
+	columnMenuShowColumns: getLocalizedString("Show columns"),
+	columnMenuFilter: getLocalizedString("Filter"),
+	columnMenuHideColumn: getLocalizedString("Hide"),
+	columnMenuUnsort: getLocalizedString("Unsort"),
+	columnMenuSortAsc: getLocalizedString("Sort by ASC"),
+	columnMenuSortDesc: getLocalizedString("Sort by DESC"),
+	columnMenuManageColumns: getLocalizedString("Manage columns"),
+	columnMenuManagePivot: getLocalizedString("Manage pivot"),
+	columnMenuManageCharts: getLocalizedString("Manage charts"),
+
+	// Column header text
+	columnHeaderFiltersTooltipActive: (count) =>
+		count !== 1
+			? getLocalizedString(`$count active filters`).replace("$count", String(count))
+			: getLocalizedString(`$count active filter`).replace("$count", String(count)),
+	columnHeaderFiltersLabel: getLocalizedString("Show filters"),
+	columnHeaderSortIconLabel: getLocalizedString("Sort"),
+
+	// Rows selected footer text
+	footerRowSelected: (count) =>
+		count !== 1
+			? getLocalizedString(`$count rows selected`).replace("$count", count.toLocaleString())
+			: getLocalizedString(`$count row selected`).replace("$count", count.toLocaleString()),
+
+	// Total row amount footer text
+	footerTotalRows: getLocalizedString("Total Rows:"),
+
+	// Total visible row amount footer text
+	footerTotalVisibleRows: (visibleCount, totalCount) =>
+		getLocalizedString(`$count of $total`)
+			.replace("$count", visibleCount.toLocaleString())
+			.replace("$total", totalCount.toLocaleString()),
+
+	// Checkbox selection text
+	checkboxSelectionHeaderName: getLocalizedString("Checkbox selection"),
+	checkboxSelectionSelectAllRows: getLocalizedString("Select all rows"),
+	checkboxSelectionUnselectAllRows: getLocalizedString("Unselect all rows"),
+	checkboxSelectionSelectRow: getLocalizedString("Select row"),
+	checkboxSelectionUnselectRow: getLocalizedString("Unselect row"),
+
+	// Boolean cell text
+	booleanCellTrueLabel: getLocalizedString("yes"),
+	booleanCellFalseLabel: getLocalizedString("no"),
+
+	// Long text cell
+	longTextCellExpandLabel: getLocalizedString("Expand"),
+	longTextCellCollapseLabel: getLocalizedString("Collapse"),
+
+	// Actions cell more text
+	actionsCellMore: getLocalizedString("more"),
+
+	// Column pinning text
+	pinToLeft: getLocalizedString("Pin to left"),
+	pinToRight: getLocalizedString("Pin to right"),
+	unpin: getLocalizedString("Unpin"),
+
+	// Tree Data
+	treeDataGroupingHeaderName: getLocalizedString("Group"),
+	treeDataExpand: getLocalizedString("see children"),
+	treeDataCollapse: getLocalizedString("hide children"),
+
+	// Grouping columns
+	groupingColumnHeaderName: getLocalizedString("Group"),
+	groupColumn: (name) => getLocalizedString("Group by $name").replace("$name", name),
+	unGroupColumn: (name) => getLocalizedString("Stop grouping by $name").replace("$name", name),
+
+	// Master/detail
+	detailPanelToggle: getLocalizedString("Detail panel toggle"),
+	expandDetailPanel: getLocalizedString("Expand"),
+	collapseDetailPanel: getLocalizedString("Collapse"),
+
+	// Pagination
+	paginationRowsPerPage: getLocalizedString("Rows per page:"),
+	paginationDisplayedRows: ({ from, to, count, estimated }) => {
+		if (!estimated) {
+			return localize`${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+		}
+		const estimatedLabel = estimated && estimated > to ? localize`around ${estimated}` : `more than ${to}`;
+		return localize`${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+	},
+	paginationItemAriaLabel: (type) => {
+		if (type === "first") {
+			return getLocalizedString("Go to first page");
+		}
+		if (type === "last") {
+			return getLocalizedString("Go to last page");
+		}
+		if (type === "next") {
+			return getLocalizedString("Go to next page");
+		}
+		// if (type === 'previous') {
+		return getLocalizedString("Go to previous page");
+	},
+
+	// Row reordering text
+	rowReorderingHeaderName: getLocalizedString("Row reordering"),
+
+	// Aggregation
+	aggregationMenuItemHeader: getLocalizedString("Aggregation"),
+	aggregationFunctionLabelNone: getLocalizedString("none"),
+	aggregationFunctionLabelSum: getLocalizedString("sum"),
+	aggregationFunctionLabelAvg: getLocalizedString("avg"),
+	aggregationFunctionLabelMin: getLocalizedString("min"),
+	aggregationFunctionLabelMax: getLocalizedString("max"),
+	aggregationFunctionLabelSize: getLocalizedString("size"),
+
+	// Pivot panel
+	pivotToggleLabel: getLocalizedString("Pivot"),
+	pivotRows: getLocalizedString("Rows"),
+	pivotColumns: getLocalizedString("Columns"),
+	pivotValues: getLocalizedString("Values"),
+	pivotCloseButton: getLocalizedString("Close pivot settings"),
+	pivotSearchButton: getLocalizedString("Search fields"),
+	pivotSearchControlPlaceholder: getLocalizedString("Search fields"),
+	pivotSearchControlLabel: getLocalizedString("Search fields"),
+	pivotSearchControlClear: getLocalizedString("Clear search"),
+	pivotNoFields: getLocalizedString("No fields"),
+	pivotMenuMoveUp: getLocalizedString("Move up"),
+	pivotMenuMoveDown: getLocalizedString("Move down"),
+	pivotMenuMoveToTop: getLocalizedString("Move to top"),
+	pivotMenuMoveToBottom: getLocalizedString("Move to bottom"),
+	pivotMenuRows: getLocalizedString("Rows"),
+	pivotMenuColumns: getLocalizedString("Columns"),
+	pivotMenuValues: getLocalizedString("Values"),
+	pivotMenuOptions: getLocalizedString("Field options"),
+	pivotMenuAddToRows: getLocalizedString("Add to Rows"),
+	pivotMenuAddToColumns: getLocalizedString("Add to Columns"),
+	pivotMenuAddToValues: getLocalizedString("Add to Values"),
+	pivotMenuRemove: getLocalizedString("Remove"),
+	pivotDragToRows: getLocalizedString("Drag here to create rows"),
+	pivotDragToColumns: getLocalizedString("Drag here to create columns"),
+	pivotDragToValues: getLocalizedString("Drag here to create values"),
+	pivotYearColumnHeaderName: getLocalizedString("(Year)"),
+	pivotQuarterColumnHeaderName: getLocalizedString("(Quarter)"),
+
+	// Charts configuration panel
+	chartsNoCharts: getLocalizedString("There are no charts available"),
+	chartsChartNotSelected: getLocalizedString("Select a chart type to configure its options"),
+	chartsTabChart: getLocalizedString("Chart"),
+	chartsTabFields: getLocalizedString("Fields"),
+	chartsTabCustomize: getLocalizedString("Customize"),
+	chartsCloseButton: getLocalizedString("Close charts configuration"),
+	chartsSyncButtonLabel: getLocalizedString("Sync chart"),
+	chartsSearchPlaceholder: getLocalizedString("Search fields"),
+	chartsSearchLabel: getLocalizedString("Search fields"),
+	chartsSearchClear: getLocalizedString("Clear search"),
+	chartsNoFields: getLocalizedString("No fields"),
+	chartsFieldBlocked: getLocalizedString("This field cannot be added to any section"),
+	chartsCategories: getLocalizedString("Categories"),
+	chartsSeries: getLocalizedString("Series"),
+	chartsMenuAddToDimensions: (dimensionLabel: string) => localize`Add to ${dimensionLabel}`,
+	chartsMenuAddToValues: (valuesLabel: string) => localize`Add to ${valuesLabel}`,
+	chartsMenuMoveUp: getLocalizedString("Move up"),
+	chartsMenuMoveDown: getLocalizedString("Move down"),
+	chartsMenuMoveToTop: getLocalizedString("Move to top"),
+	chartsMenuMoveToBottom: getLocalizedString("Move to bottom"),
+	chartsMenuOptions: getLocalizedString("Field options"),
+	chartsMenuRemove: getLocalizedString("Remove"),
+	chartsDragToDimensions: (dimensionLabel: string) => localize`Drag here to use column as ${dimensionLabel}`,
+	chartsDragToValues: (valuesLabel: string) => localize`Drag here to use column as ${valuesLabel}`,
+
+	// AI Assistant panel
+	aiAssistantPanelTitle: getLocalizedString("AI Assistant"),
+	aiAssistantPanelClose: getLocalizedString("Close AI Assistant"),
+	aiAssistantPanelNewConversation: getLocalizedString("New conversation"),
+	aiAssistantPanelConversationHistory: getLocalizedString("Conversation history"),
+	aiAssistantPanelEmptyConversation: getLocalizedString("No prompt history"),
+	aiAssistantSuggestions: getLocalizedString("Suggestions"),
+
+	// Prompt field
+	promptFieldLabel: getLocalizedString("Prompt"),
+	promptFieldPlaceholder: getLocalizedString("Type a prompt…"),
+	promptFieldPlaceholderWithRecording: getLocalizedString("Type or record a prompt…"),
+	promptFieldPlaceholderListening: getLocalizedString("Listening for prompt…"),
+	promptFieldSpeechRecognitionNotSupported: getLocalizedString("Speech recognition is not supported in this browser"),
+	promptFieldSend: getLocalizedString("Send"),
+	promptFieldRecord: getLocalizedString("Record"),
+	promptFieldStopRecording: getLocalizedString("Stop recording"),
+
+	// Prompt
+	promptRerun: getLocalizedString("Run again"),
+	promptProcessing: getLocalizedString("Processing…"),
+	promptAppliedChanges: getLocalizedString("Applied changes"),
+
+	// Prompt changes
+	promptChangeGroupDescription: (column: string) => localize`Group by ${column}`,
+	promptChangeAggregationLabel: (column: string, aggregation: string) => localize`${column} (${aggregation})`,
+	promptChangeAggregationDescription: (column: string, aggregation: string) =>
+		localize`Aggregate ${column} (${aggregation})`,
+	promptChangeFilterLabel: (column: string, operator: string, value: string) => {
+		if (operator === "is any of") {
+			return localize`${column} is any of: ${value}`;
+		}
+		return localize`${column} ${operator} ${value}`;
+	},
+	promptChangeFilterDescription: (column: string, operator: string, value: string) => {
+		if (operator === "is any of") {
+			return localize`Filter where ${column} is any of: ${value}`;
+		}
+		return localize`Filter where ${column} ${operator} ${value}`;
+	},
+	promptChangeSortDescription: (column: string, direction: string) => localize`Sort by ${column} (${direction})`,
+	promptChangePivotEnableLabel: getLocalizedString("Pivot"),
+	promptChangePivotEnableDescription: getLocalizedString("Enable pivot"),
+	promptChangePivotColumnsLabel: (count: number) => localize`Columns (${count})`,
+	promptChangePivotColumnsDescription: (column: string, direction: string) =>
+		localize`${column}${direction ? ` (${direction})` : ""}`,
+	promptChangePivotRowsLabel: (count: number) => localize`Rows (${count})`,
+	promptChangePivotValuesLabel: (count: number) => localize`Values (${count})`,
+	promptChangePivotValuesDescription: (column: string, aggregation: string) => localize`${column} (${aggregation})`,
+	promptChangeChartsLabel: (dimensionsCount: number, valuesCount: number) =>
+		localize`Dimensions (${dimensionsCount}), Values (${valuesCount})`,
+
+	// Custom AF filters
+	filterOperatorNotContains: getLocalizedString("not contains"),
+	filterOperatorNotEquals: getLocalizedString("not equals"),
+	filterOperatorLike: getLocalizedString("like"),
+	filterOperatorNotLike: getLocalizedString("not like"),
+	filterOperatorIsNoneOf: getLocalizedString("is none of"),
+	headerFilterOperatorNotContains: getLocalizedString("Not contains??"),
+	headerFilterOperatorNotEquals: getLocalizedString("Not equals"),
+	headerFilterOperatorLike: getLocalizedString("Like"),
+	headerFilterOperatorNotLike: getLocalizedString("Not like"),
+	headerFilterOperatorIsNoneOf: getLocalizedString("Is none of"),
+};

package/src/grid/slots/index.tsx

@@ -0,0 +1,275 @@
+import "./slots.css";
+
+import {
+	Badge,
+	Button,
+	Checkbox,
+	Divider,
+	Select,
+	Skeleton,
+	Spinner,
+	Switch,
+	Tag,
+	Textfield,
+	Tooltip,
+} from "@digdir/designsystemet-react";
+import type { GridSlotProps, GridSlotsComponent } from "@mui/x-data-grid-pro";
+
+import clsx from "clsx";
+import { type Ref, useCallback } from "react";
+
+type DsSize = "2xs" | "xs" | "sm" | "md" | "lg";
+
+/**
+ * Maps the MUI slot sizes onto the Designsystemet size tokens. The grid only
+ * ever asks for `small` or `medium`, but the toolbar buttons also allow `large`.
+ */
+function dsSize(size?: "small" | "medium" | "large"): DsSize {
+	switch (size) {
+		case "small":
+			return "sm";
+		case "large":
+			return "lg";
+		default:
+			return "sm";
+	}
+}
+
+/**
+ * The grid passes `title` as a `ReactNode`, but Designsystemet's tooltip only
+ * accepts a string. Anything else is rendered without a tooltip.
+ */
+function tooltipContent(title: React.ReactNode) {
+	return typeof title === "string" ? title : typeof title === "number" ? String(title) : undefined;
+}
+
+function BaseCheckbox(props: GridSlotProps["baseCheckbox"]) {
+	let {
+		indeterminate,
+		inputRef,
+		label,
+		size,
+		density: _density,
+		fullWidth: _fullWidth,
+		touchRippleRef: _touchRippleRef,
+		slotProps,
+		className,
+		...other
+	} = props;
+
+	// `indeterminate` is not a DOM attribute, so it has to be set on the input
+	// element itself.
+	let ref = useCallback(
+		(element: HTMLInputElement | null) => {
+			if (element) {
+				element.indeterminate = !!indeterminate;
+			}
+
+			if (typeof inputRef === "function") {
+				inputRef(element);
+			} else if (inputRef) {
+				(inputRef as React.RefObject<HTMLInputElement | null>).current = element;
+			}
+		},
+		[indeterminate, inputRef],
+	);
+
+	return (
+		<Checkbox
+			{...(other as any)}
+			{...slotProps?.htmlInput}
+			ref={ref}
+			className={clsx("AfGrid-checkbox", className)}
+			data-size={dsSize(size)}
+			label={label}
+			aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")}
+		/>
+	);
+}
+
+function BaseButton(props: GridSlotProps["baseButton"]) {
+	let { children, size, startIcon, touchRippleRef: _touchRippleRef, ...other } = props;
+
+	return (
+		<Button {...(other as any)} variant="tertiary" data-size={dsSize(size)}>
+			{startIcon}
+			{children}
+		</Button>
+	);
+}
+
+function BaseIconButton(props: GridSlotProps["baseIconButton"]) {
+	let { children, size, label, color: _color, edge: _edge, touchRippleRef: _touchRippleRef, ...other } = props;
+
+	return (
+		<Button {...(other as any)} icon variant="tertiary" data-size={dsSize(size)} aria-label={label}>
+			{children}
+		</Button>
+	);
+}
+
+function BaseTooltip(props: GridSlotProps["baseTooltip"]) {
+	let { children, title, enterDelay: _enterDelay, disableInteractive: _disableInteractive, ...other } = props;
+	let content = tooltipContent(title);
+
+	if (!content) {
+		return children;
+	}
+
+	return (
+		<Tooltip {...(other as any)} content={content}>
+			{children}
+		</Tooltip>
+	);
+}
+
+function BaseTextField(props: GridSlotProps["baseTextField"]) {
+	let {
+		inputRef,
+		size,
+		error,
+		helperText,
+		slotProps,
+		fullWidth: _fullWidth,
+		color: _color,
+		className,
+		...other
+	} = props;
+
+	return (
+		<Textfield
+			{...(other as any)}
+			{...slotProps?.htmlInput}
+			ref={inputRef as Ref<HTMLInputElement>}
+			className={clsx("AfGrid-textField", className)}
+			data-size={dsSize(size)}
+			error={error ? helperText : undefined}
+			aria-label={other.label ? undefined : ((other as any)["aria-label"] ?? "")}
+		/>
+	);
+}
+
+function BaseSelect(props: GridSlotProps["baseSelect"]) {
+	let {
+		children,
+		size,
+		label,
+		labelId: _labelId,
+		native: _native,
+		fullWidth: _fullWidth,
+		open: _open,
+		onOpen: _onOpen,
+		onClose: _onClose,
+		slotProps,
+		className,
+		...other
+	} = props;
+
+	return (
+		<Select
+			{...(other as any)}
+			{...slotProps?.htmlInput}
+			className={clsx("AfGrid-select", className)}
+			data-size={dsSize(size)}
+			aria-label={typeof label === "string" ? label : ((other as any)["aria-label"] ?? "")}
+		>
+			{children}
+		</Select>
+	);
+}
+
+function BaseSelectOption(props: GridSlotProps["baseSelectOption"]) {
+	let { native: _native, children, ...other } = props;
+
+	return <Select.Option {...(other as any)}>{children}</Select.Option>;
+}
+
+function BaseSwitch(props: GridSlotProps["baseSwitch"]) {
+	let { size, label, ...other } = props;
+
+	return (
+		<Switch
+			{...(other as any)}
+			data-size={dsSize(size)}
+			label={label}
+			aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")}
+		/>
+	);
+}
+
+function BaseChip(props: GridSlotProps["baseChip"]) {
+	let { label, size, icon, variant, children: _children, ...other } = props;
+
+	return (
+		<Tag {...(other as any)} data-size={dsSize(size)} variant={variant === "outlined" ? "outline" : "default"}>
+			{icon}
+			{label}
+		</Tag>
+	);
+}
+
+function BaseBadge(props: GridSlotProps["baseBadge"]) {
+	let { badgeContent, children, invisible, color, variant, overlap, className, ...other } = props;
+	let count = typeof badgeContent === "number" ? badgeContent : Number(badgeContent);
+
+	return (
+		<span {...(other as any)} className={clsx("AfGrid-badgeWrapper", className)}>
+			{children}
+			{!invisible && (
+				<Badge.Position placement="top-right" overlap={overlap === "circular" ? "circle" : "rectangle"}>
+					<Badge
+						count={variant === "dot" || Number.isNaN(count) ? undefined : count}
+						data-color={color === "error" ? "danger" : color === "primary" ? "accent" : "neutral"}
+					/>
+				</Badge.Position>
+			)}
+		</span>
+	);
+}
+
+function BaseCircularProgress(props: GridSlotProps["baseCircularProgress"]) {
+	let { size, color: _color, ...other } = props;
+	let numericSize = typeof size === "number" ? size : 24;
+
+	return <Spinner {...(other as any)} aria-hidden data-size={numericSize <= 20 ? "xs" : "sm"} />;
+}
+
+function BaseLinearProgress(props: GridSlotProps["baseLinearProgress"]) {
+	let { className, ...other } = props;
+
+	return <div {...(other as any)} role="progressbar" className={clsx("AfGrid-linearProgress", className)} />;
+}
+
+function BaseSkeleton(props: GridSlotProps["baseSkeleton"]) {
+	let { variant, width, height, ...other } = props;
+
+	return (
+		<Skeleton {...(other as any)} variant={variant === "circular" ? "circle" : variant} width={width} height={height} />
+	);
+}
+
+function BaseDivider(props: GridSlotProps["baseDivider"]) {
+	return <Divider {...(props as any)} />;
+}
+
+/**
+ * Designsystemet replacements for the grid's base components. Passed to the
+ * `slots` prop of the data grid, so the grid renders Designsystemet components
+ * instead of the MUI ones wherever it can.
+ */
+export const dsBaseSlots: Partial<GridSlotsComponent> = {
+	baseBadge: BaseBadge,
+	baseButton: BaseButton,
+	baseCheckbox: BaseCheckbox,
+	baseChip: BaseChip,
+	baseCircularProgress: BaseCircularProgress,
+	baseDivider: BaseDivider,
+	baseIconButton: BaseIconButton,
+	baseLinearProgress: BaseLinearProgress,
+	baseSelect: BaseSelect,
+	baseSelectOption: BaseSelectOption,
+	baseSkeleton: BaseSkeleton,
+	baseSwitch: BaseSwitch,
+	baseTextField: BaseTextField,
+	baseTooltip: BaseTooltip,
+};