@olenbetong/appframe-ds 1.3.3 → 1.3.5

package/src/grid/slots/index.tsx

@@ -1,307 +1,334 @@
-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-premium";
-
-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);
-
-	// Designsystemet labels the tooltip host itself, and logs `Missing
-	// tabindex="0" attribute on:` whenever that host is not tabbable. In the grid
-	// it never is — the column header is the tab stop and moves focus with the
-	// arrow keys, so MUI gives the menu button `tabindex="-1"` and hangs the sort
-	// tooltip on a bare `<span>`. The tooltips still open, because Designsystemet
-	// resolves the host with `closest()` on focus and hover, so the warning is a
-	// false positive — and it is not gated on `NODE_ENV`, so it reaches
-	// production too.
-	//
-	// Setting the label ourselves is exactly what Designsystemet does a moment
-	// later (`aria-description` when the host has text, `aria-label` when it does
-	// not), and it makes Designsystemet skip that whole branch — silencing the
-	// warning without turning off `window.dsWarnings` for the entire app.
-	let ref = useCallback(
-		(element: HTMLElement | null) => {
-			if (!element || !content) {
-				return;
-			}
-
-			let hasText = element.getAttribute("role") !== "img" && !!element.textContent?.trim();
-			element.setAttribute(hasText ? "aria-description" : "aria-label", content);
-		},
-		[content],
-	);
-
-	if (!content) {
-		return children;
-	}
-
-	return (
-		<Tooltip {...(other as any)} ref={ref} 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);
-
-	// The badge must wrap the element it decorates so Designsystemet anchors it to
-	// that element's corner. Rendering it as a sibling put the badge on an empty
-	// box next to the icon, where it was clipped by the column header.
-	return (
-		<Badge.Position
-			{...(other as any)}
-			className={clsx("AfGrid-badge", className)}
-			placement="top-right"
-			overlap={overlap === "circular" ? "circle" : "rectangle"}
-		>
-			{children}
-			{!invisible && (
-				<Badge
-					aria-hidden
-					count={variant === "dot" || Number.isNaN(count) ? undefined : count}
-					data-color={color === "error" ? "danger" : color === "primary" ? "accent" : "neutral"}
-				/>
-			)}
-		</Badge.Position>
-	);
-}
-
-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,
-};
+import "./slots.css";
+
+import {
+	Badge,
+	Button,
+	Checkbox,
+	Divider,
+	Select,
+	Spinner,
+	Switch,
+	Tag,
+	Textfield,
+	Tooltip,
+} from "@digdir/designsystemet-react";
+import type { GridSlotProps, GridSlotsComponent } from "@mui/x-data-grid-premium";
+
+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);
+
+	// Designsystemet labels the tooltip host itself, and logs `Missing
+	// tabindex="0" attribute on:` whenever that host is not tabbable. In the grid
+	// it never is — the column header is the tab stop and moves focus with the
+	// arrow keys, so MUI gives the menu button `tabindex="-1"` and hangs the sort
+	// tooltip on a bare `<span>`. The tooltips still open, because Designsystemet
+	// resolves the host with `closest()` on focus and hover, so the warning is a
+	// false positive — and it is not gated on `NODE_ENV`, so it reaches
+	// production too.
+	//
+	// Setting the label ourselves is exactly what Designsystemet does a moment
+	// later (`aria-description` when the host has text, `aria-label` when it does
+	// not), and it makes Designsystemet skip that whole branch — silencing the
+	// warning without turning off `window.dsWarnings` for the entire app.
+	let ref = useCallback(
+		(element: HTMLElement | null) => {
+			if (!element || !content) {
+				return;
+			}
+
+			let hasText = element.getAttribute("role") !== "img" && !!element.textContent?.trim();
+			element.setAttribute(hasText ? "aria-description" : "aria-label", content);
+		},
+		[content],
+	);
+
+	if (!content) {
+		return children;
+	}
+
+	return (
+		<Tooltip {...(other as any)} ref={ref} 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);
+
+	// The badge must wrap the element it decorates so Designsystemet anchors it to
+	// that element's corner. Rendering it as a sibling put the badge on an empty
+	// box next to the icon, where it was clipped by the column header.
+	return (
+		<Badge.Position
+			{...(other as any)}
+			className={clsx("AfGrid-badge", className)}
+			placement="top-right"
+			overlap={overlap === "circular" ? "circle" : "rectangle"}
+		>
+			{children}
+			{!invisible && (
+				<Badge
+					aria-hidden
+					count={variant === "dot" || Number.isNaN(count) ? undefined : count}
+					data-color={color === "error" ? "danger" : color === "primary" ? "accent" : "neutral"}
+				/>
+			)}
+		</Badge.Position>
+	);
+}
+
+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)} />;
+}
+
+/**
+ * Renders Designsystemet's skeleton markup rather than its `Skeleton`
+ * component. The component synchronizes its animation with every other
+ * skeleton by calling `document.getAnimations()` when it mounts, and the grid's
+ * loading overlay mounts one per visible cell in the same commit - hundreds of
+ * scans over hundreds of animations, which froze the page for seconds on every
+ * load. Skeletons mounted together start their animation together anyway.
+ */
+function BaseSkeleton(props: GridSlotProps["baseSkeleton"]) {
+	let { variant, width, height, className, style, ...other } = props;
+	let dsVariant = variant === "circular" ? "circle" : variant;
+
+	if (dsVariant === "text") {
+		return (
+			<span
+				{...(other as any)}
+				aria-hidden="true"
+				className={clsx("ds-skeleton", className)}
+				data-text={"-".repeat(Number(width) || 1)}
+				data-variant="text"
+				style={style}
+			/>
+		);
+	}
+
+	return (
+		<span
+			{...(other as any)}
+			aria-hidden="true"
+			className={clsx("ds-skeleton", className)}
+			data-variant={dsVariant}
+			style={{ width, height, ...style }}
+		/>
+	);
+}
+
+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,
+};