@olenbetong/appframe-ds 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @olenbetong/appframe-ds
 
+## 0.7.0
+
+### Minor Changes
+
+- 52e2e10: Add `Autocomplete` and `Combobox`, built on the Base UI components of the same name and styled with Designsystemet tokens. Both expose an API close to MUI's `Autocomplete` (`options`, `value`/`onChange`, `inputValue`/`onInputChange`, `getOptionLabel`, `isOptionEqualToValue`, `filterOptions`, `renderOption`, `groupBy`, `multiple`), plus Designsystemet field props (`label`, `description`, `error`, `data-size`). Use `Combobox` when the user must pick one of the options and `Autocomplete` when free text is allowed (`freeSolo`). Multiple selection renders the selected options as chips above the input, like Designsystemet's `Suggestion`. `createFilterOptions` is exported for custom filtering.
+
+  **Breaking:** the data object bound `Combobox` used internally by `AfLookup` is renamed to `LookupCombobox` (`ComboboxProps` → `LookupComboboxProps`) to free up the `Combobox` name.
+
+- 77e96aa: Add `SortableItemList`, an `ItemList` variant bound to a data object where items can be reordered by dragging or through a menu on the drag handle. The building blocks are exported as well (`useSortableList`, `useSortableItem`, `useSortableContainer`, `DropIndicator`, `reorderSortOrder`, `getNextSortOrder`, `ensureNonZeroSortOrder`) for lists that need custom item markup.
+
 ## 0.6.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -23,18 +23,21 @@
     "react-router": ">=8.3.0"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "2.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.0.0",
+    "@base-ui/react": "1.7.0",
     "@olenbetong/appframe-core": "2.11.10",
     "@olenbetong/appframe-data": "1.5.0",
     "@olenbetong/appframe-react": "2.0.0",
-    "react-window": "^1.8.11",
+    "clsx": "^2.1.1",
     "react-virtualized-auto-sizer": "^1.0.26",
-    "clsx": "^2.1.1"
+    "react-window": "^1.8.11"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.18.0",
     "@navikt/aksel-icons": "8.16.1",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
     "@types/react-window": "^1.8.8",
     "react": "19.2.8",
     "react-dom": "19.2.8",
@@ -42,7 +45,6 @@
     "react-router": "8.3.0",
     "typescript": "7.0.2"
   },
-  "optionalDependencies": {},
   "scripts": {
     "build": "pnpm run build:tsc && pnpm run build:css",
     "build:tsc": "node --no-warnings ../../scripts/clean.ts ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",

package/scripts/copyAssets.mjs

@@ -3,7 +3,7 @@ import { cpSync, mkdirSync } from "node:fs";
 const files = [
 	["src/AfLookup/Lookup.css", "es/AfLookup/Lookup.css"],
 	["src/AfLookup/LookupGrid.css", "es/AfLookup/LookupGrid.css"],
-	["src/AfLookup/Combobox.css", "es/AfLookup/Combobox.css"],
+	["src/AfLookup/LookupCombobox.css", "es/AfLookup/LookupCombobox.css"],
 	["src/layout/AppMenu.css", "es/layout/AppMenu.css"],
 	["src/layout/AppMenuItem.css", "es/layout/AppMenuItem.css"],
 	["src/layout/AppMenuSubheader.css", "es/layout/AppMenuSubheader.css"],
@@ -19,6 +19,9 @@ const files = [
 	["src/input/InputAdornments.css", "es/input/InputAdornments.css"],
 	["src/paper/Paper.css", "es/paper/Paper.css"],
 	["src/progress/LinearProgress.css", "es/progress/LinearProgress.css"],
+	["src/sortable/DropIndicator.css", "es/sortable/DropIndicator.css"],
+	["src/sortable/SortableItemList.css", "es/sortable/SortableItemList.css"],
+	["src/autocomplete/Autocomplete.css", "es/autocomplete/Autocomplete.css"],
 ];
 
 mkdirSync("es/layout", { recursive: true });
@@ -27,6 +30,8 @@ mkdirSync("es/list", { recursive: true });
 mkdirSync("es/page", { recursive: true });
 mkdirSync("es/paper", { recursive: true });
 mkdirSync("es/progress", { recursive: true });
+mkdirSync("es/sortable", { recursive: true });
+mkdirSync("es/autocomplete", { recursive: true });
 
 for (let [src, dest] of files) {
 	cpSync(src, dest);

package/src/AfLookup/Lookup.tsx

@@ -9,9 +9,9 @@ import clsx from "clsx";
 import { useRef } from "react";
 import { createPortal } from "react-dom";
 
-import { Combobox, type ComboboxProps } from "./Combobox.js";
+import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
 
-export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
+export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
 	/**
 	 * Allows the user to enter a value manually that might not be in the list.
 	 */
@@ -26,7 +26,7 @@ export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<
 	};
 };
 
-export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
+export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
 	slotProps?: {
 		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
 	};
@@ -70,7 +70,7 @@ export function useLookup<T extends Record<string, unknown>>({
 				style={{ positionAnchor: anchorName, ...slotProps?.dialog?.style } as React.CSSProperties}
 			>
 				{open && (
-					<Combobox
+					<LookupCombobox
 						{...props}
 						initialSearchValue={initialSearchValueRef.current}
 						onClose={() => dialogRef.current?.close()}

package/src/AfLookup/{Combobox.tsx → LookupCombobox.tsx}

@@ -1,4 +1,4 @@
-import "./Combobox.css";
+import "./LookupCombobox.css";
 
 import { Button, Textfield } from "@digdir/designsystemet-react";
 import { getLocalizedString } from "@olenbetong/appframe-core";
@@ -11,7 +11,7 @@ import { VariableSizeList as VirtualList } from "react-window";
 
 import { LookupGrid } from "./LookupGrid.js";
 
-export interface ComboboxBaseProps<T extends Record<string, unknown>> {
+export interface LookupComboboxBaseProps<T extends Record<string, unknown>> {
 	nullable?: boolean;
 	dataObject: DataObject<T>;
 	uniqueIdField?: string;
@@ -22,7 +22,7 @@ export interface ComboboxBaseProps<T extends Record<string, unknown>> {
 	onClose?: () => void;
 }
 
-export interface ComboboxListProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
+export interface LookupComboboxListProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
 	/**
 	 * Renders the popup content as a list (default).
 	 */
@@ -30,7 +30,7 @@ export interface ComboboxListProps<T extends Record<string, unknown>> extends Co
 	renderItem: (props: React.ComponentPropsWithRef<"li"> & { item: T }) => React.ReactNode;
 }
 
-export interface ComboboxGridProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
+export interface LookupComboboxGridProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
 	/**
 	 * Renders the popup content as a grid with a header row and one column per
 	 * entry in `columns`.
@@ -39,9 +39,9 @@ export interface ComboboxGridProps<T extends Record<string, unknown>> extends Co
 	columns: LookupColumn<T>[];
 }
 
-export type ComboboxProps<T extends Record<string, unknown>> = ComboboxListProps<T> | ComboboxGridProps<T>;
+export type LookupComboboxProps<T extends Record<string, unknown>> = LookupComboboxListProps<T> | LookupComboboxGridProps<T>;
 
-export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps<T>) {
+export function LookupCombobox<T extends Record<string, unknown>>(props: LookupComboboxProps<T>) {
 	let {
 		nullable,
 		dataObject,
@@ -52,7 +52,7 @@ export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps
 		onClose,
 	} = props;
 	let isGrid = props.variant === "grid";
-	let columns = isGrid ? (props as ComboboxGridProps<T>).columns : undefined;
+	let columns = isGrid ? (props as LookupComboboxGridProps<T>).columns : undefined;
 	let listRef = useRef<VirtualList>(null);
 
 	let [isDesktop, setIsDesktop] = useState(
@@ -121,7 +121,7 @@ export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps
 		let item = data[index];
 		let itemId = getItemId(item);
 		let active = index === currentIndex;
-		let ItemComponent = (props as ComboboxListProps<T>).renderItem;
+		let ItemComponent = (props as LookupComboboxListProps<T>).renderItem;
 
 		return (
 			<ItemComponent

package/src/AfLookup/LookupEdit.tsx

@@ -8,11 +8,11 @@ import type { DistributiveOmit } from "@olenbetong/appframe-react";
 import clsx from "clsx";
 import type React from "react";
 
-import type { ComboboxProps } from "./Combobox.js";
+import type { LookupComboboxProps } from "./LookupCombobox.js";
 import { useLookup } from "./Lookup.js";
 
 export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
-	ComboboxProps<T>,
+	LookupComboboxProps<T>,
 	"value" | "onChange"
 > & {
 	/**

package/src/AfLookup/index.ts

@@ -1,5 +1,5 @@
 export * from "./BoundLookup.js";
-export * from "./Combobox.js";
+export * from "./LookupCombobox.js";
 export * from "./Lookup.js";
 export * from "./LookupEdit.js";
 export * from "./LookupGrid.js";

package/src/autocomplete/Autocomplete.css

@@ -0,0 +1,222 @@
+.ObAutocomplete-root {
+	--obAutocomplete-padding: 0.25rem;
+	--obAutocomplete-gap: 0.25rem;
+	--obAutocomplete-fontSize: var(--ds-font-size-3, 1rem);
+
+	display: inline-grid;
+}
+
+.ObAutocomplete-root[data-full-width="true"] {
+	display: grid;
+	inline-size: 100%;
+}
+
+.ObAutocomplete-root[data-size="xs"] {
+	--obAutocomplete-padding: 0.125rem;
+	--obAutocomplete-fontSize: var(--ds-font-size-1, 0.75rem);
+}
+
+.ObAutocomplete-root[data-size="sm"] {
+	--obAutocomplete-padding: 0.25rem;
+	--obAutocomplete-fontSize: var(--ds-font-size-2, 0.875rem);
+}
+
+.ObAutocomplete-root[data-size="md"] {
+	--obAutocomplete-padding: 0.25rem;
+	--obAutocomplete-fontSize: var(--ds-font-size-3, 1rem);
+}
+
+.ObAutocomplete-root[data-size="lg"] {
+	--obAutocomplete-padding: 0.375rem;
+	--obAutocomplete-fontSize: var(--ds-font-size-4, 1.125rem);
+}
+
+/*
+ * The control is the visual input: it owns the border, background, hover and
+ * focus styling, so the chips, the bare input and the buttons read as a single
+ * control. Mirrors how Designsystemet's Suggestion renders selected chips
+ * above the input.
+ */
+.ObAutocomplete-control {
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	gap: var(--obAutocomplete-gap);
+	padding: var(--obAutocomplete-padding);
+	inline-size: 100%;
+	font-size: var(--obAutocomplete-fontSize);
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	background-color: var(--ds-color-neutral-surface-default, #fff);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+}
+
+.ObAutocomplete-control:hover:not(:focus-within) {
+	border-color: var(--ds-color-neutral-border-strong, #767676);
+}
+
+.ObAutocomplete-control:has(.ObAutocomplete-input:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus, 3px);
+}
+
+.ObAutocomplete-control[data-invalid="true"] {
+	border-color: var(--ds-color-danger-border-default, #b3253a);
+}
+
+.ObAutocomplete-control[data-disabled="true"] {
+	cursor: not-allowed;
+	opacity: var(--ds-disabled-opacity, 0.3);
+}
+
+.ObAutocomplete-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--obAutocomplete-gap);
+	padding: var(--obAutocomplete-padding);
+	padding-block-end: 0;
+}
+
+.ObAutocomplete-inputGroup {
+	display: flex;
+	align-items: center;
+	gap: var(--obAutocomplete-gap);
+	min-inline-size: 0;
+}
+
+.ObAutocomplete-input {
+	flex: 1;
+	min-inline-size: 0;
+	padding: var(--ds-size-1, 0.25rem);
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: none;
+	outline: none;
+}
+
+.ObAutocomplete-input:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	padding: var(--ds-size-1, 0.25rem);
+	font-size: var(--obAutocomplete-fontSize);
+	color: inherit;
+	background: transparent;
+	border: none;
+	border-radius: var(--ds-border-radius-sm, 0.25rem);
+	cursor: pointer;
+}
+
+.ObAutocomplete-button:hover:not(:disabled) {
+	background-color: var(--ds-color-neutral-surface-hover, #e6e6e6);
+}
+
+.ObAutocomplete-button:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button[data-visible="false"] {
+	display: none;
+}
+
+.ObAutocomplete-trigger[data-popup-open] svg {
+	rotate: 180deg;
+}
+
+.ObAutocomplete-spinner {
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	padding-inline: var(--ds-size-1, 0.25rem);
+}
+
+.ObAutocomplete-positioner {
+	z-index: 1500;
+	/* Base UI renders the positioner even while closed */
+	outline: none;
+}
+
+.ObAutocomplete-popup {
+	box-sizing: border-box;
+	inline-size: var(--anchor-width);
+	max-block-size: min(24rem, var(--available-height));
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	padding: var(--ds-size-1, 0.25rem);
+	font-size: var(--obAutocomplete-fontSize, var(--ds-font-size-3, 1rem));
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	background-color: var(--ds-color-neutral-background-default, #fff);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e0e0e0);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+	box-shadow: var(--ds-shadow-md, 0 2px 8px 0 rgb(0 0 0 / 0.12));
+	transform-origin: var(--transform-origin);
+	transition:
+		opacity 0.12s ease-out,
+		scale 0.12s ease-out;
+}
+
+.ObAutocomplete-popup[data-starting-style],
+.ObAutocomplete-popup[data-ending-style] {
+	opacity: 0;
+	scale: 0.98;
+}
+
+.ObAutocomplete-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.ObAutocomplete-item {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2, 0.5rem);
+	padding: var(--ds-size-2, 0.5rem);
+	border-radius: var(--ds-border-radius-sm, 0.25rem);
+	cursor: default;
+	user-select: none;
+	scroll-margin-block: var(--ds-size-1, 0.25rem);
+}
+
+.ObAutocomplete-item[data-highlighted] {
+	background-color: var(--ds-color-accent-surface-hover, #d6e2f2);
+}
+
+.ObAutocomplete-item[data-selected] {
+	font-weight: var(--ds-font-weight-medium, 500);
+	background-color: var(--ds-color-accent-surface-default, #e6effa);
+}
+
+.ObAutocomplete-item[data-selected][data-highlighted] {
+	background-color: var(--ds-color-accent-surface-active, #c2d5ec);
+}
+
+.ObAutocomplete-item[data-disabled] {
+	cursor: not-allowed;
+	opacity: var(--ds-disabled-opacity, 0.3);
+}
+
+.ObAutocomplete-itemIndicator {
+	display: inline-flex;
+	flex: none;
+	inline-size: 1em;
+}
+
+.ObAutocomplete-groupLabel {
+	padding: var(--ds-size-2, 0.5rem);
+	font-size: var(--ds-font-size-1, 0.75rem);
+	font-weight: var(--ds-font-weight-semibold, 600);
+	color: var(--ds-color-neutral-text-subtle, #4c5866);
+	text-transform: uppercase;
+}
+
+.ObAutocomplete-empty:not(:empty) {
+	padding: var(--ds-size-2, 0.5rem);
+	color: var(--ds-color-neutral-text-subtle, #4c5866);
+}