@olenbetong/appframe-ds 1.7.1 → 1.8.0

package/src/autocomplete/utils.ts

@@ -1,183 +1,183 @@
-import { useCallback, useRef, useState } from "react";
-
-import type {
-	AutocompleteChangeReason,
-	AutocompleteFilterOptionsState,
-	AutocompleteInputChangeReason,
-} from "./types.js";
-
-/**
- * Default label resolver: uses `label`, then `name`, then the value itself.
- */
-export function defaultGetOptionLabel(option: unknown): string {
-	if (option == null) return "";
-	if (typeof option === "string") return option;
-	if (typeof option === "object") {
-		let record = option as Record<string, unknown>;
-		if (typeof record.label === "string") return record.label;
-		if (typeof record.name === "string") return record.name;
-	}
-
-	return String(option);
-}
-
-export interface CreateFilterOptionsConfig<Option> {
-	/**
-	 * Removes diacritics before matching.
-	 * @default true
-	 */
-	ignoreAccents?: boolean;
-	/**
-	 * Matches case insensitively.
-	 * @default true
-	 */
-	ignoreCase?: boolean;
-	/**
-	 * Where in the option label the query has to match.
-	 * @default "any"
-	 */
-	matchFrom?: "any" | "start";
-	/**
-	 * The maximum number of options returned.
-	 */
-	limit?: number;
-	/**
-	 * Trims the query before matching.
-	 * @default false
-	 */
-	trim?: boolean;
-	/**
-	 * Returns the string the query is matched against.
-	 */
-	stringify?: (option: Option) => string;
-}
-
-/**
- * Creates a filter function for the `filterOptions` prop, equivalent to MUI's
- * `createFilterOptions`.
- *
- * @example
- * ```jsx
- * let filterOptions = createFilterOptions({ matchFrom: "start", limit: 20 });
- * <Combobox options={options} filterOptions={filterOptions} />
- * ```
- */
-export function createFilterOptions<Option>(config: CreateFilterOptionsConfig<Option> = {}) {
-	let { ignoreAccents = true, ignoreCase = true, limit, matchFrom = "any", stringify, trim = false } = config;
-
-	return (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => {
-		let input = trim ? state.inputValue.trim() : state.inputValue;
-		if (ignoreCase) input = input.toLowerCase();
-		if (ignoreAccents) input = stripDiacritics(input);
-
-		let filtered = input
-			? options.filter((option) => {
-					let candidate = (stringify ?? state.getOptionLabel)(option);
-					if (ignoreCase) candidate = candidate.toLowerCase();
-					if (ignoreAccents) candidate = stripDiacritics(candidate);
-
-					return matchFrom === "start" ? candidate.startsWith(input) : candidate.includes(input);
-				})
-			: [...options];
-
-		return typeof limit === "number" ? filtered.slice(0, limit) : filtered;
-	};
-}
-
-function stripDiacritics(value: string) {
-	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-}
-
-export const defaultFilterOptions = createFilterOptions<unknown>();
-
-export interface OptionGroup<Option> {
-	/**
-	 * Group header text. Named `value` because Base UI uses it as the group key.
-	 */
-	value: string;
-	items: Option[];
-	[key: string]: unknown;
-}
-
-/**
- * Splits an already sorted list of options into consecutive groups, the same
- * way MUI's `groupBy` works.
- */
-export function groupOptions<Option>(options: readonly Option[], groupBy: (option: Option) => string) {
-	let groups: OptionGroup<Option>[] = [];
-
-	for (let option of options) {
-		let group = groupBy(option);
-		let last = groups[groups.length - 1];
-
-		if (last && last.value === group) {
-			last.items.push(option);
-		} else {
-			groups.push({ value: group, items: [option] });
-		}
-	}
-
-	return groups;
-}
-
-/**
- * State that is controlled when `controlled` is not `undefined`, and
- * uncontrolled otherwise.
- */
-export function useControlled<T>(controlled: T | undefined, defaultValue: T) {
-	let [uncontrolled, setUncontrolled] = useState(defaultValue);
-	let isControlled = useRef(controlled !== undefined).current;
-	let value = isControlled ? (controlled as T) : uncontrolled;
-
-	let setValue = useCallback(
-		(next: T) => {
-			if (!isControlled) setUncontrolled(next);
-		},
-		[isControlled],
-	);
-
-	return [value, setValue] as const;
-}
-
-/**
- * Compares two options, falling back to reference equality like MUI does.
- */
-export function areOptionsEqual<Option>(
-	a: Option,
-	b: Option,
-	isOptionEqualToValue?: (option: Option, value: Option) => boolean,
-) {
-	return isOptionEqualToValue ? isOptionEqualToValue(a, b) : Object.is(a, b);
-}
-
-/**
- * Maps a Base UI change reason to the MUI-style reason.
- */
-export function mapChangeReason(reason: string, next: unknown): AutocompleteChangeReason {
-	if (reason === "clear-press" || reason === "input-clear") return "clear";
-	if (reason === "chip-remove-press") return "removeOption";
-	if (next == null || (Array.isArray(next) && next.length === 0)) return "clear";
-
-	return "selectOption";
-}
-
-function mapInputChangeReason(reason: string): AutocompleteInputChangeReason {
-	if (reason === "input-change") return "input";
-	if (reason === "input-clear" || reason === "clear-press") return "clear";
-
-	return "reset";
-}
-
-/**
- * Keeps the input value state in sync and forwards the change to
- * `onInputChange` with a MUI-style reason.
- */
-export function handleInputValueChange(
-	next: string,
-	details: { event?: Event; reason: string },
-	setInputValue: (value: string) => void,
-	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void,
-) {
-	setInputValue(next);
-	onInputChange?.(details.event, next, mapInputChangeReason(details.reason));
-}
+import { useCallback, useRef, useState } from "react";
+
+import type {
+	AutocompleteChangeReason,
+	AutocompleteFilterOptionsState,
+	AutocompleteInputChangeReason,
+} from "./types.js";
+
+/**
+ * Default label resolver: uses `label`, then `name`, then the value itself.
+ */
+export function defaultGetOptionLabel(option: unknown): string {
+	if (option == null) return "";
+	if (typeof option === "string") return option;
+	if (typeof option === "object") {
+		let record = option as Record<string, unknown>;
+		if (typeof record.label === "string") return record.label;
+		if (typeof record.name === "string") return record.name;
+	}
+
+	return String(option);
+}
+
+export interface CreateFilterOptionsConfig<Option> {
+	/**
+	 * Removes diacritics before matching.
+	 * @default true
+	 */
+	ignoreAccents?: boolean;
+	/**
+	 * Matches case insensitively.
+	 * @default true
+	 */
+	ignoreCase?: boolean;
+	/**
+	 * Where in the option label the query has to match.
+	 * @default "any"
+	 */
+	matchFrom?: "any" | "start";
+	/**
+	 * The maximum number of options returned.
+	 */
+	limit?: number;
+	/**
+	 * Trims the query before matching.
+	 * @default false
+	 */
+	trim?: boolean;
+	/**
+	 * Returns the string the query is matched against.
+	 */
+	stringify?: (option: Option) => string;
+}
+
+/**
+ * Creates a filter function for the `filterOptions` prop, equivalent to MUI's
+ * `createFilterOptions`.
+ *
+ * @example
+ * ```jsx
+ * let filterOptions = createFilterOptions({ matchFrom: "start", limit: 20 });
+ * <Combobox options={options} filterOptions={filterOptions} />
+ * ```
+ */
+export function createFilterOptions<Option>(config: CreateFilterOptionsConfig<Option> = {}) {
+	let { ignoreAccents = true, ignoreCase = true, limit, matchFrom = "any", stringify, trim = false } = config;
+
+	return (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => {
+		let input = trim ? state.inputValue.trim() : state.inputValue;
+		if (ignoreCase) input = input.toLowerCase();
+		if (ignoreAccents) input = stripDiacritics(input);
+
+		let filtered = input
+			? options.filter((option) => {
+					let candidate = (stringify ?? state.getOptionLabel)(option);
+					if (ignoreCase) candidate = candidate.toLowerCase();
+					if (ignoreAccents) candidate = stripDiacritics(candidate);
+
+					return matchFrom === "start" ? candidate.startsWith(input) : candidate.includes(input);
+				})
+			: [...options];
+
+		return typeof limit === "number" ? filtered.slice(0, limit) : filtered;
+	};
+}
+
+function stripDiacritics(value: string) {
+	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+
+export const defaultFilterOptions = createFilterOptions<unknown>();
+
+export interface OptionGroup<Option> {
+	/**
+	 * Group header text. Named `value` because Base UI uses it as the group key.
+	 */
+	value: string;
+	items: Option[];
+	[key: string]: unknown;
+}
+
+/**
+ * Splits an already sorted list of options into consecutive groups, the same
+ * way MUI's `groupBy` works.
+ */
+export function groupOptions<Option>(options: readonly Option[], groupBy: (option: Option) => string) {
+	let groups: OptionGroup<Option>[] = [];
+
+	for (let option of options) {
+		let group = groupBy(option);
+		let last = groups[groups.length - 1];
+
+		if (last && last.value === group) {
+			last.items.push(option);
+		} else {
+			groups.push({ value: group, items: [option] });
+		}
+	}
+
+	return groups;
+}
+
+/**
+ * State that is controlled when `controlled` is not `undefined`, and
+ * uncontrolled otherwise.
+ */
+export function useControlled<T>(controlled: T | undefined, defaultValue: T) {
+	let [uncontrolled, setUncontrolled] = useState(defaultValue);
+	let isControlled = useRef(controlled !== undefined).current;
+	let value = isControlled ? (controlled as T) : uncontrolled;
+
+	let setValue = useCallback(
+		(next: T) => {
+			if (!isControlled) setUncontrolled(next);
+		},
+		[isControlled],
+	);
+
+	return [value, setValue] as const;
+}
+
+/**
+ * Compares two options, falling back to reference equality like MUI does.
+ */
+export function areOptionsEqual<Option>(
+	a: Option,
+	b: Option,
+	isOptionEqualToValue?: (option: Option, value: Option) => boolean,
+) {
+	return isOptionEqualToValue ? isOptionEqualToValue(a, b) : Object.is(a, b);
+}
+
+/**
+ * Maps a Base UI change reason to the MUI-style reason.
+ */
+export function mapChangeReason(reason: string, next: unknown): AutocompleteChangeReason {
+	if (reason === "clear-press" || reason === "input-clear") return "clear";
+	if (reason === "chip-remove-press") return "removeOption";
+	if (next == null || (Array.isArray(next) && next.length === 0)) return "clear";
+
+	return "selectOption";
+}
+
+function mapInputChangeReason(reason: string): AutocompleteInputChangeReason {
+	if (reason === "input-change") return "input";
+	if (reason === "input-clear" || reason === "clear-press") return "clear";
+
+	return "reset";
+}
+
+/**
+ * Keeps the input value state in sync and forwards the change to
+ * `onInputChange` with a MUI-style reason.
+ */
+export function handleInputValueChange(
+	next: string,
+	details: { event?: Event; reason: string },
+	setInputValue: (value: string) => void,
+	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void,
+) {
+	setInputValue(next);
+	onInputChange?.(details.event, next, mapInputChangeReason(details.reason));
+}

package/src/grid/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown } from "@digdir/designsystemet-react";
+import { Badge, BadgePosition, Button, Dropdown } from "@digdir/designsystemet-react";
 import {
 	type GridApi,
 	type GridExportMenuItemProps,
@@ -20,6 +20,8 @@ import {
 import { type DataObject, exportOptionsFromDataObject } from "@olenbetong/appframe-data";
 import { useDataObject, useLoading, usePermissions } from "@olenbetong/appframe-react";
 
+import { useState } from "react";
+
 import { openDataObjectReportWithProgress } from "../report-downloader/index.js";
 import { useAfGridContext } from "./AfGridContext.js";
 import { addRow } from "./editing.js";
@@ -45,16 +47,30 @@ export function GridToolbarAddIfAllowedButton({ disableInsert }: { disableInsert
 	) : null;
 }
 
-export function GridToolbarRefreshButton() {
+export type GridToolbarIconOnlyProps = {
+	/** Show the icon alone, with the label as its accessible name and tooltip. */
+	iconOnly?: boolean;
+};
+
+export function GridToolbarRefreshButton({ iconOnly }: GridToolbarIconOnlyProps = {}) {
 	let dataObject = useDataObject();
 	let isLoading = useLoading(dataObject);
+	let label = getLocalizedString("Refresh");
 
 	return (
-		<Button variant="tertiary" data-size="sm" loading={isLoading} onClick={() => dataObject.refreshDataSource()}>
+		<Button
+			variant="tertiary"
+			data-size="sm"
+			icon={iconOnly}
+			aria-label={iconOnly ? label : undefined}
+			title={iconOnly ? label : undefined}
+			loading={isLoading}
+			onClick={() => dataObject.refreshDataSource()}
+		>
 			{/* Designsystemet prepends the spinner rather than replacing the children, so
 			    the icon is hidden while loading to keep the button from changing width */}
 			{!isLoading && <ArrowsCirclepathIcon aria-hidden />}
-			{getLocalizedString("Refresh")}
+			{!iconOnly && label}
 		</Button>
 	);
 }
@@ -74,13 +90,26 @@ export function GridToolbarColumnsButton() {
  * Opens the filter builder instead of the grid's own filter panel. The count
  * reflects the conditions in the builder's filter, not the header filters.
  */
-export function GridToolbarFilterButton() {
+export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps = {}) {
 	let { openFilterBuilder, filterCount } = useAfGridContext();
+	let label = getLocalizedString("Filter");
+
+	if (iconOnly) {
+		let name = filterCount > 0 ? `${label} (${filterCount})` : label;
+		return (
+			<BadgePosition placement="top-right" overlap="circle">
+				{filterCount > 0 && <Badge data-color="brand" data-size="sm" count={filterCount} aria-hidden="true" />}
+				<Button variant="tertiary" data-size="sm" icon aria-label={name} title={name} onClick={openFilterBuilder}>
+					<FilterIcon aria-hidden />
+				</Button>
+			</BadgePosition>
+		);
+	}
 
 	return (
 		<Button variant="tertiary" data-size="sm" onClick={openFilterBuilder}>
 			<FilterIcon aria-hidden />
-			{getLocalizedString("Filter")}
+			{label}
 			{filterCount > 0 ? ` (${filterCount})` : ""}
 		</Button>
 	);
@@ -160,16 +189,52 @@ export function AfGridToolbarExcelExportButton({ fileName, title }: { fileName?:
 	);
 }
 
-export function GridToolbarMoreOptionsButton() {
+export type GridToolbarMoreOptionsButtonProps = React.PropsWithChildren<{
+	/** Offer the column panel in the menu, for toolbars without a Columns button. */
+	showColumns?: boolean;
+}>;
+
+/**
+ * The toolbar's "more" menu: exports, density and layout reset. `children` are extra
+ * `Dropdown.Item`s placed first. The menu closes when an item is chosen.
+ */
+export function GridToolbarMoreOptionsButton({ showColumns, children }: GridToolbarMoreOptionsButtonProps = {}) {
 	let apiRef = useGridApiContext();
+	let { openColumnsPanel } = useAfGridContext();
+	let [open, setOpen] = useState(false);
 
 	return (
 		<Dropdown.TriggerContext>
-			<Dropdown.Trigger variant="tertiary" icon data-size="sm" aria-label={getLocalizedString("More options")}>
+			<Dropdown.Trigger
+				variant="tertiary"
+				icon
+				data-size="sm"
+				aria-label={getLocalizedString("More options")}
+				title={getLocalizedString("More options")}
+			>
 				<MenuElipsisVerticalIcon aria-hidden />
 			</Dropdown.Trigger>
-			<Dropdown placement="bottom-end" data-size="sm">
-				<Dropdown.List>
+			<Dropdown
+				open={open}
+				onOpen={() => setOpen(true)}
+				onClose={() => setOpen(false)}
+				placement="bottom-end"
+				data-size="sm"
+			>
+				<Dropdown.List
+					onClick={(event) => {
+						if ((event.target as HTMLElement).closest("button, a")) setOpen(false);
+					}}
+				>
+					{children}
+					{showColumns && (
+						<Dropdown.Item>
+							<Dropdown.Button onClick={openColumnsPanel}>
+								<TableIcon aria-hidden />
+								{getLocalizedString("Columns")}
+							</Dropdown.Button>
+						</Dropdown.Item>
+					)}
 					<Dropdown.Item>
 						<Dropdown.Button onClick={() => apiRef.current.exportDataAsCsv()}>
 							<FileCsvIcon aria-hidden />

package/src/grid/index.tsx

@@ -41,7 +41,9 @@ import {
 	GridToolbarColumnsButton,
 	GridToolbarContainer,
 	GridToolbarFilterButton,
+	type GridToolbarIconOnlyProps,
 	GridToolbarMoreOptionsButton,
+	type GridToolbarMoreOptionsButtonProps,
 	GridToolbarRefreshButton,
 	GridToolbarResetLayoutButton,
 } from "./Toolbar.js";
@@ -109,6 +111,8 @@ export type {
 	AfGridColumn,
 	AfGridExcelExportOptions,
 	AfGridNewItemRowPosition,
+	GridToolbarIconOnlyProps,
+	GridToolbarMoreOptionsButtonProps,
 	AfGridRowAction,
 };
 export type { AfGridGrouping, AfGridGroupingProps } from "./useAfRowGrouping.js";