@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/autocomplete/AutocompleteFrame.tsx

@@ -1,168 +1,168 @@
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import { FieldDescription, Label, Spinner, ValidationMessage } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { XMarkIcon } from "@navikt/aksel-icons";
-import clsx from "clsx";
-import { type ReactNode, type Ref, useEffect, useRef, useState } from "react";
-
-import type { AutocompleteSize } from "./types.js";
-
-export interface AutocompleteFrameProps {
-	id?: string;
-	label?: ReactNode;
-	description?: ReactNode;
-	error?: ReactNode;
-	className?: string;
-	style?: React.CSSProperties;
-	controlClassName?: string;
-	popupClassName?: string;
-	fullWidth?: boolean;
-	size?: AutocompleteSize;
-	color?: string;
-	disabled?: boolean;
-	readOnly?: boolean;
-	required?: boolean;
-	placeholder?: string;
-	loading?: boolean;
-	disableClearable?: boolean;
-	inputRef?: Ref<HTMLInputElement>;
-	/**
-	 * Accessible name for the input. Use when the field has no visible label.
-	 */
-	"aria-label"?: string;
-	/**
-	 * Chips for the selected values, rendered above the input.
-	 */
-	chips?: ReactNode;
-	/**
-	 * The trigger button, which differs between `Autocomplete` and `Combobox`.
-	 */
-	trigger?: ReactNode;
-	/**
-	 * Rendered in the popup when the filtered list is empty.
-	 */
-	emptyContent?: ReactNode;
-	/**
-	 * Renders an entry of the filtered list. Receives either an option or, when
-	 * `groupBy` is used, a group.
-	 */
-	renderListItem: (item: any, index: number) => ReactNode;
-	onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-	onInputBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-}
-
-/**
- * Shared chrome for `Autocomplete` and `Combobox`: the Designsystemet field
- * (label, description, validation message), the bordered control holding the
- * chips and the input, and the popup with the option list.
- *
- * All the parts used here are shared between the Base UI `Autocomplete` and
- * `Combobox` namespaces, so they can be imported from `combobox` regardless of
- * which root the caller renders.
- */
-export function AutocompleteFrame({
-	id,
-	label,
-	description,
-	error,
-	className,
-	style,
-	controlClassName,
-	popupClassName,
-	fullWidth = true,
-	size,
-	color,
-	disabled,
-	readOnly,
-	required,
-	placeholder,
-	loading,
-	disableClearable,
-	inputRef,
-	"aria-label": ariaLabel,
-	chips,
-	trigger,
-	emptyContent,
-	renderListItem,
-	onInputKeyDown,
-	onInputBlur,
-}: AutocompleteFrameProps) {
-	let rootRef = useRef<HTMLDivElement>(null);
-	let [container, setContainer] = useState<HTMLElement | null>(null);
-
-	/*
-	 * A modal dialog is painted in the top layer, above everything else in the
-	 * document, so a popup portalled to the body ends up behind its backdrop and
-	 * is invisible. Portal into the dialog itself when there is one.
-	 */
-	useEffect(() => {
-		setContainer(rootRef.current?.closest("dialog") ?? null);
-	}, []);
-
-	return (
-		// Designsystemet's `Field` is a custom element that expects to own the
-		// layout, so the root here is a plain grid instead.
-		<div
-			ref={rootRef}
-			className={clsx("ObAutocomplete-root", className)}
-			style={style}
-			data-size={size}
-			data-color={color}
-			data-full-width={fullWidth}
-		>
-			{label && (
-				<Label htmlFor={id} data-size={size}>
-					{label}
-					{required && <span aria-hidden> *</span>}
-				</Label>
-			)}
-			{description && <FieldDescription data-size={size}>{description}</FieldDescription>}
-			<div
-				className={clsx("ObAutocomplete-control", controlClassName)}
-				data-invalid={error ? true : undefined}
-				data-disabled={disabled ? true : undefined}
-			>
-				{chips && <div className="ObAutocomplete-chips">{chips}</div>}
-				<BaseCombobox.InputGroup className="ObAutocomplete-inputGroup">
-					<BaseCombobox.Input
-						id={id}
-						ref={inputRef}
-						className="ObAutocomplete-input"
-						placeholder={placeholder}
-						aria-label={ariaLabel}
-						disabled={disabled}
-						readOnly={readOnly}
-						required={required}
-						aria-invalid={error ? true : undefined}
-						onKeyDown={onInputKeyDown}
-						onBlur={onInputBlur}
-					/>
-					{loading && (
-						<span className="ObAutocomplete-spinner">
-							<Spinner aria-label={getLocalizedString("Loading")} data-size="xs" />
-						</span>
-					)}
-					{!disableClearable && (
-						<BaseCombobox.Clear
-							className="ObAutocomplete-button ObAutocomplete-clear"
-							disabled={disabled || readOnly}
-							aria-label={getLocalizedString("Clear")}
-						>
-							<XMarkIcon aria-hidden fontSize="1.25em" />
-						</BaseCombobox.Clear>
-					)}
-					{trigger}
-				</BaseCombobox.InputGroup>
-			</div>
-			{error && <ValidationMessage data-size={size}>{error}</ValidationMessage>}
-			<BaseCombobox.Portal container={container ?? undefined}>
-				<BaseCombobox.Positioner className="ObAutocomplete-positioner" sideOffset={4}>
-					<BaseCombobox.Popup className={clsx("ObAutocomplete-popup", popupClassName)} data-size={size}>
-						<BaseCombobox.Empty className="ObAutocomplete-empty">{emptyContent}</BaseCombobox.Empty>
-						<BaseCombobox.List className="ObAutocomplete-list">{renderListItem}</BaseCombobox.List>
-					</BaseCombobox.Popup>
-				</BaseCombobox.Positioner>
-			</BaseCombobox.Portal>
-		</div>
-	);
-}
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { FieldDescription, Label, Spinner, ValidationMessage } from "@digdir/designsystemet-react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import clsx from "clsx";
+import { type ReactNode, type Ref, useEffect, useRef, useState } from "react";
+
+import type { AutocompleteSize } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
+
+export interface AutocompleteFrameProps {
+	id?: string;
+	label?: ReactNode;
+	description?: ReactNode;
+	error?: ReactNode;
+	className?: string;
+	style?: React.CSSProperties;
+	controlClassName?: string;
+	popupClassName?: string;
+	fullWidth?: boolean;
+	size?: AutocompleteSize;
+	color?: string;
+	disabled?: boolean;
+	readOnly?: boolean;
+	required?: boolean;
+	placeholder?: string;
+	loading?: boolean;
+	disableClearable?: boolean;
+	inputRef?: Ref<HTMLInputElement>;
+	/**
+	 * Accessible name for the input. Use when the field has no visible label.
+	 */
+	"aria-label"?: string;
+	/**
+	 * Chips for the selected values, rendered above the input.
+	 */
+	chips?: ReactNode;
+	/**
+	 * The trigger button, which differs between `Autocomplete` and `Combobox`.
+	 */
+	trigger?: ReactNode;
+	/**
+	 * Rendered in the popup when the filtered list is empty.
+	 */
+	emptyContent?: ReactNode;
+	/**
+	 * Renders an entry of the filtered list. Receives either an option or, when
+	 * `groupBy` is used, a group.
+	 */
+	renderListItem: (item: any, index: number) => ReactNode;
+	onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+	onInputBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * Shared chrome for `Autocomplete` and `Combobox`: the Designsystemet field
+ * (label, description, validation message), the bordered control holding the
+ * chips and the input, and the popup with the option list.
+ *
+ * All the parts used here are shared between the Base UI `Autocomplete` and
+ * `Combobox` namespaces, so they can be imported from `combobox` regardless of
+ * which root the caller renders.
+ */
+export function AutocompleteFrame({
+	id,
+	label,
+	description,
+	error,
+	className,
+	style,
+	controlClassName,
+	popupClassName,
+	fullWidth = true,
+	size,
+	color,
+	disabled,
+	readOnly,
+	required,
+	placeholder,
+	loading,
+	disableClearable,
+	inputRef,
+	"aria-label": ariaLabel,
+	chips,
+	trigger,
+	emptyContent,
+	renderListItem,
+	onInputKeyDown,
+	onInputBlur,
+}: AutocompleteFrameProps) {
+	let rootRef = useRef<HTMLDivElement>(null);
+	let [container, setContainer] = useState<HTMLElement | null>(null);
+
+	/*
+	 * A modal dialog is painted in the top layer, above everything else in the
+	 * document, so a popup portalled to the body ends up behind its backdrop and
+	 * is invisible. Portal into the dialog itself when there is one.
+	 */
+	useEffect(() => {
+		setContainer(rootRef.current?.closest("dialog") ?? null);
+	}, []);
+
+	return (
+		// Designsystemet's `Field` is a custom element that expects to own the
+		// layout, so the root here is a plain grid instead.
+		<div
+			ref={rootRef}
+			className={clsx("ObAutocomplete-root", className)}
+			style={style}
+			data-size={size}
+			data-color={color}
+			data-full-width={fullWidth}
+		>
+			{label && (
+				<Label htmlFor={id} data-size={size}>
+					{label}
+					{required && <span aria-hidden> *</span>}
+				</Label>
+			)}
+			{description && <FieldDescription data-size={size}>{description}</FieldDescription>}
+			<div
+				className={clsx("ObAutocomplete-control", controlClassName)}
+				data-invalid={error ? true : undefined}
+				data-disabled={disabled ? true : undefined}
+			>
+				{chips && <div className="ObAutocomplete-chips">{chips}</div>}
+				<BaseCombobox.InputGroup className="ObAutocomplete-inputGroup">
+					<BaseCombobox.Input
+						id={id}
+						ref={inputRef}
+						className="ObAutocomplete-input"
+						placeholder={placeholder}
+						aria-label={ariaLabel}
+						disabled={disabled}
+						readOnly={readOnly}
+						required={required}
+						aria-invalid={error ? true : undefined}
+						onKeyDown={onInputKeyDown}
+						onBlur={onInputBlur}
+					/>
+					{loading && (
+						<span className="ObAutocomplete-spinner">
+							<Spinner aria-label={getLocalizedString("Loading")} data-size="xs" />
+						</span>
+					)}
+					{!disableClearable && (
+						<BaseCombobox.Clear
+							className="ObAutocomplete-button ObAutocomplete-clear"
+							disabled={disabled || readOnly}
+							aria-label={getLocalizedString("Clear")}
+						>
+							<XMarkIcon aria-hidden fontSize="1.25em" />
+						</BaseCombobox.Clear>
+					)}
+					{trigger}
+				</BaseCombobox.InputGroup>
+			</div>
+			{error && <ValidationMessage data-size={size}>{error}</ValidationMessage>}
+			<BaseCombobox.Portal container={container ?? undefined}>
+				<BaseCombobox.Positioner className="ObAutocomplete-positioner" sideOffset={4}>
+					<BaseCombobox.Popup className={clsx("ObAutocomplete-popup", popupClassName)} data-size={size}>
+						<BaseCombobox.Empty className="ObAutocomplete-empty">{emptyContent}</BaseCombobox.Empty>
+						<BaseCombobox.List className="ObAutocomplete-list">{renderListItem}</BaseCombobox.List>
+					</BaseCombobox.Popup>
+				</BaseCombobox.Positioner>
+			</BaseCombobox.Portal>
+		</div>
+	);
+}