@olenbetong/appframe-ds 0.4.1 → 0.5.0

package/src/page/PageHeader.tsx

@@ -0,0 +1,184 @@
+import "./PageHeader.css";
+
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+import clsx from "clsx";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router";
+
+import { AppMenu, type AppMenuProps } from "../layout/AppMenu.js";
+import { PageBlock, type PageBlockWidth } from "./PageBlock.js";
+
+export type PageHeaderVariant = "appbar" | "plain";
+
+export type PageHeaderProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+	/**
+	 * Actions displayed at the end of the header (buttons, search, etc.)
+	 */
+	actions?: React.ReactNode;
+	/**
+	 * Props passed to the `AppMenu` wrapping the `menu` content
+	 */
+	AppMenuProps?: AppMenuProps;
+	children?: React.ReactNode;
+	/**
+	 * App menu (navigation) content. When provided, the `appbar` variant
+	 * renders a menu toggle button and a drawer hosting the menu — docked on
+	 * desktop (≥1200px), overlay on smaller screens.
+	 */
+	menu?: React.ReactNode;
+	/**
+	 * Application title
+	 */
+	title?: React.ReactNode;
+	/**
+	 * Adds a standardised responsive inline padding to the header content.
+	 * See `Page.Block`.
+	 * @default false
+	 */
+	gutters?: boolean;
+	/**
+	 * Constrains and centers the header content to a predefined max-width,
+	 * so it can align with a `Page.Block` of the same width. See `Page.Block`.
+	 */
+	width?: PageBlockWidth;
+	/**
+	 * - `"appbar"` (default): a top app bar with menu toggle, title and
+	 *   actions. For apps that have an app menu.
+	 * - `"plain"`: no app bar chrome — for simple apps without an app menu
+	 *   (e.g. report-issue). Renders the title as a regular heading block.
+	 *
+	 * Both variants reserve an end-slot (`.ObPageHeader-end`) that will host
+	 * the app-launcher and user profile menu in the future sidebar-free site
+	 * layout. It is hidden under the current sidebar layout.
+	 * @default "appbar"
+	 */
+	variant?: PageHeaderVariant;
+};
+
+function useIsMobile() {
+	let [isMobile, setIsMobile] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia("(max-width: 1199px)").matches;
+	});
+
+	useEffect(() => {
+		let mq = window.matchMedia("(max-width: 1199px)");
+		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	return isMobile;
+}
+
+type PageHeaderDrawerProps = {
+	AppMenuProps?: AppMenuProps;
+	menu: React.ReactNode;
+	onClose: () => void;
+	isMobile: boolean;
+	open: boolean;
+};
+
+function PageHeaderDrawer({ AppMenuProps, menu, onClose, isMobile, open }: PageHeaderDrawerProps) {
+	let location = useLocation();
+	let prevLocation = useRef(location);
+
+	useEffect(() => {
+		if (location !== prevLocation.current) {
+			prevLocation.current = location;
+			if (isMobile) onClose();
+		}
+	}, [location, isMobile, onClose]);
+
+	return (
+		<>
+			{isMobile && (
+				<div
+					className={clsx("ObPageHeader-drawerOverlay", open && "ObPageHeader-drawerOpen")}
+					onClick={onClose}
+					aria-hidden="true"
+				/>
+			)}
+			<div
+				className={clsx(
+					"ObPageHeader-drawer",
+					"AppMenu-drawer",
+					isMobile ? "ObPageHeader-drawerOverlayMode" : "ObPageHeader-drawerDocked",
+					open && "ObPageHeader-drawerOpen",
+				)}
+			>
+				<AppMenu {...AppMenuProps}>{menu}</AppMenu>
+			</div>
+		</>
+	);
+}
+
+/**
+ * Page header for use inside `Page`. See the `variant` prop for the two
+ * supported header styles.
+ */
+export function PageHeader({
+	actions,
+	AppMenuProps,
+	children,
+	className,
+	gutters,
+	menu,
+	title,
+	variant = "appbar",
+	width,
+	...props
+}: PageHeaderProps) {
+	let isMobile = useIsMobile();
+	let [desktopOpen, setDesktopOpen] = useState(true);
+	let [mobileOpen, setMobileOpen] = useState(false);
+
+	let open = isMobile ? mobileOpen : desktopOpen;
+	let toggle = () => (isMobile ? setMobileOpen((o) => !o) : setDesktopOpen((o) => !o));
+
+	if (variant === "plain") {
+		return (
+			<header className={clsx("ObPageHeader-root", "ObPageHeader-plain", className)} {...props}>
+				<PageBlock className="ObPageHeader-plainInner" width={width} gutters={gutters}>
+					{title && <h1 className="ObPageHeader-plainTitle">{title}</h1>}
+					{actions && <div className="ObPageHeader-actions">{actions}</div>}
+					{children}
+					<div className="ObPageHeader-end" />
+				</PageBlock>
+			</header>
+		);
+	}
+
+	return (
+		<header className={clsx("ObPageHeader-root", "ObPageHeader-appbar", className)} {...props}>
+			<PageBlock className="ObPageHeader-bar" width={width} gutters={gutters}>
+				{menu && (
+					<button
+						type="button"
+						className="ObPageHeader-toggle"
+						onClick={toggle}
+						aria-label={getLocalizedString("Toggle menu")}
+						aria-expanded={open}
+					>
+						☰
+					</button>
+				)}
+				{title && <h1 className="ObPageHeader-title">{title}</h1>}
+				{actions && <div className="ObPageHeader-actions">{actions}</div>}
+				<div className="ObPageHeader-end" />
+			</PageBlock>
+			{children}
+			{menu && (
+				<PageHeaderDrawer
+					AppMenuProps={AppMenuProps}
+					menu={menu}
+					onClose={() => setMobileOpen(false)}
+					isMobile={isMobile}
+					open={open}
+				/>
+			)}
+		</header>
+	);
+}

package/src/page/index.ts

@@ -0,0 +1,3 @@
+export * from "./Page.js";
+export * from "./PageBlock.js";
+export * from "./PageHeader.js";

package/src/paper/Paper.css

@@ -0,0 +1,35 @@
+.ObPaper-root {
+	background-color: var(--ds-color-neutral-surface-default, #fff);
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+}
+
+.ObPaper-shadow-xs {
+	box-shadow: var(--ds-shadow-xs);
+}
+
+.ObPaper-shadow-sm {
+	box-shadow: var(--ds-shadow-sm);
+}
+
+.ObPaper-shadow-md {
+	box-shadow: var(--ds-shadow-md);
+}
+
+.ObPaper-shadow-lg {
+	box-shadow: var(--ds-shadow-lg);
+}
+
+.ObPaper-shadow-xl {
+	box-shadow: var(--ds-shadow-xl);
+}
+
+.ObPaper-border {
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #dfdfdf);
+}
+
+@media print {
+	.ObPaper-root {
+		box-shadow: none;
+	}
+}

package/src/paper/Paper.tsx

@@ -0,0 +1,50 @@
+import "./Paper.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const paperShadows = ["none", "xs", "sm", "md", "lg", "xl"] as const;
+
+export type PaperShadow = (typeof paperShadows)[number];
+
+export type PaperProps = React.HTMLAttributes<HTMLElement> & {
+	/**
+	 * Overrides the rendered element (e.g. `"section"`, `"ul"`)
+	 * @default "div"
+	 */
+	as?: React.ElementType;
+	/**
+	 * Adds a subtle border. Combine with `shadow="none"` for an outlined
+	 * variant (MUI `variant="outlined"` equivalent).
+	 * @default false
+	 */
+	border?: boolean;
+	children?: React.ReactNode;
+	/**
+	 * Elevation shadow, using the designsystemet `--ds-shadow-*` tokens.
+	 * @default "sm"
+	 */
+	shadow?: PaperShadow;
+};
+
+/**
+ * Surface component equivalent to MUI `Paper`: a neutral surface with
+ * rounded corners and an elevation shadow. Use it instead of hand-rolled
+ * `background` + `box-shadow` CSS so surfaces stay consistent with the
+ * designsystemet tokens (and adapt to dark mode).
+ */
+export function Paper({ as: Component = "div", border, children, className, shadow = "sm", ...props }: PaperProps) {
+	return (
+		<Component
+			className={clsx(
+				"ObPaper-root",
+				shadow !== "none" && `ObPaper-shadow-${shadow}`,
+				border && "ObPaper-border",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/paper/index.ts

@@ -0,0 +1 @@
+export * from "./Paper.js";

package/es/AfLookup/BoundLookup.d.ts

@@ -1,10 +0,0 @@
-import type { CurrentRow, DataObject } from "@olenbetong/appframe-data";
-import { type DistributiveOmit } from "@olenbetong/appframe-react";
-import { type AfLookupProps } from "./Lookup.js";
-export type BoundLookupProps<TBoundData extends Record<string, unknown>, TLookupData extends Record<string, unknown>> = DistributiveOmit<AfLookupProps<TLookupData>, "onChange"> & {
-    dataObject: DataObject<TLookupData>;
-    displayField?: keyof TBoundData;
-    getChanges: (selectedItem: TLookupData | null) => Partial<TBoundData>;
-    getDisplayValue?: (currentRow: CurrentRow<TBoundData>) => string;
-};
-export declare function BoundLookup<TBoundData extends Record<string, unknown>, TLookupData extends Record<string, unknown> = any>({ dataObject, displayField, getChanges, getDisplayValue, ...props }: BoundLookupProps<TBoundData, TLookupData>): import("react").JSX.Element;

package/es/AfLookup/BoundLookup.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCurrentRow, useDataObject } from "@olenbetong/appframe-react";
-import { AfLookup } from "./Lookup.js";
-export function BoundLookup({ dataObject, displayField, getChanges, getDisplayValue, ...props }) {
-    let boundDataObject = useDataObject();
-    let row = useCurrentRow(boundDataObject);
-    function handleChange(item) {
-        let changes = getChanges(item);
-        for (let key in changes) {
-            let newValue = changes[key];
-            boundDataObject.currentRow(key, newValue);
-        }
-    }
-    let displayValue = getDisplayValue ? getDisplayValue(row) : displayField ? String(row[displayField] ?? "") : "";
-    return _jsx(AfLookup, { dataObject: dataObject, value: displayValue, onChange: handleChange, ...props });
-}

package/es/AfLookup/Combobox.css

@@ -1,78 +0,0 @@
-.ObCombobox-root {
-	height: 100%;
-	display: grid;
-	grid-template-rows: min-content auto 1fr;
-	gap: 0.5rem;
-
-	overscroll-behavior: contain;
-}
-
-.ObCombobox-actions {
-	display: flex;
-	justify-content: space-between;
-}
-
-.ObCombobox-listWrap {
-	overflow: hidden;
-	min-height: 0;
-	border: 1px solid rgb(0 0 0 / 0.12);
-	border-radius: 0.25rem;
-	background-color: white;
-}
-
-.ObCombobox-list {
-	border: 1px solid rgb(0 0 0 / 0.06);
-	height: 100%;
-	overflow-y: hidden;
-	overscroll-behavior: contain;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-.ObCombobox-input {
-	background-color: white;
-}
-
-.ObCombobox-listItem {
-	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
-	cursor: pointer;
-
-	&.active {
-		background-color: var(--active-color);
-	}
-
-	&:hover {
-		background-color: rgb(0 0 0 / 0.06);
-	}
-
-	&.active:hover {
-		background-color: oklch(from var(--active-color) calc(l + 0.1) calc(c - 0.04) h);
-	}
-}
-
-.ObCombobox-progress {
-	position: relative;
-	height: 4px;
-	overflow: hidden;
-	background-color: rgb(0 0 0 / 0.08);
-}
-
-.ObCombobox-progress-bar {
-	position: absolute;
-	top: 0;
-	left: -100%;
-	height: 100%;
-	width: 50%;
-	background-color: var(--ds-color-accent-base-default, #0062ba);
-	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
-}
-
-@keyframes ObCombobox-progress-anim {
-	0% {
-		left: -100%;
-	}
-	100% {
-		left: 200%;
-	}
-}

package/es/AfLookup/Combobox.d.ts

@@ -1,32 +0,0 @@
-import "./Combobox.css";
-import type { DataObject } from "@olenbetong/appframe-data";
-import { type LookupColumn } from "@olenbetong/appframe-react";
-export interface ComboboxBaseProps<T extends Record<string, unknown>> {
-    nullable?: boolean;
-    dataObject: DataObject<T>;
-    uniqueIdField?: string;
-    initialSearchValue?: string;
-    isItemSelected?: (item: T) => boolean;
-    onChange?: (item: T | null) => void;
-    value?: T;
-    onClose?: () => void;
-}
-export interface ComboboxListProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
-    /**
-     * Renders the popup content as a list (default).
-     */
-    variant?: "list";
-    renderItem: (props: React.ComponentPropsWithRef<"li"> & {
-        item: T;
-    }) => React.ReactNode;
-}
-export interface ComboboxGridProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
-    /**
-     * Renders the popup content as a grid with a header row and one column per
-     * entry in `columns`.
-     */
-    variant: "grid";
-    columns: LookupColumn<T>[];
-}
-export type ComboboxProps<T extends Record<string, unknown>> = ComboboxListProps<T> | ComboboxGridProps<T>;
-export declare function Combobox<T extends Record<string, unknown>>(props: ComboboxProps<T>): import("react").JSX.Element;

package/es/AfLookup/Combobox.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./Combobox.css";
-import { Button, Textfield } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useComboboxData } from "@olenbetong/appframe-react";
-import clsx from "clsx";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { VariableSizeList as VirtualList } from "react-window";
-import { LookupGrid } from "./LookupGrid.js";
-export function Combobox(props) {
-    let { nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", initialSearchValue, onChange, onClose, } = props;
-    let isGrid = props.variant === "grid";
-    let columns = isGrid ? props.columns : undefined;
-    let listRef = useRef(null);
-    let [isDesktop, setIsDesktop] = useState(() => typeof window !== "undefined" && window.matchMedia("(width >= 768px) and (pointer: fine)").matches);
-    useEffect(() => {
-        let mq = window.matchMedia("(width >= 768px) and (pointer: fine)");
-        let handler = (e) => setIsDesktop(e.matches);
-        mq.addEventListener("change", handler);
-        return () => mq.removeEventListener("change", handler);
-    }, []);
-    let { id, data, loading, inputValue, setInputValue, currentIndex, currentColumn, getItemId, handleSelectItem, handleKeyDown, } = useComboboxData({
-        dataObject,
-        uniqueIdField,
-        columnCount: columns?.length ?? 1,
-        onChange,
-    });
-    let wrapperRef = useRef(null);
-    let [height, setHeight] = useState(0);
-    useLayoutEffect(() => {
-        if (!wrapperRef.current)
-            return;
-        let resizeObserver = new ResizeObserver(() => {
-            let newHeight = wrapperRef.current.offsetHeight;
-            if (newHeight > 0)
-                setHeight(newHeight);
-        });
-        resizeObserver.observe(wrapperRef.current);
-        return () => resizeObserver.disconnect();
-    }, []);
-    let sizeMap = useRef(new Map());
-    let getItemSize = (index) => sizeMap.current.get(index) ?? 56;
-    let setSize = useCallback((index, size) => {
-        if (sizeMap.current.get(index) !== size) {
-            sizeMap.current.set(index, size);
-            // listRef will not be set on the initial render, so delay resetting
-            setTimeout(() => listRef.current?.resetAfterIndex(index, true));
-        }
-    }, []);
-    let Row = ({ index, style: { height, ...style } }) => {
-        let rowRef = useRef(null);
-        useLayoutEffect(() => {
-            if (!rowRef.current)
-                return;
-            setSize(index, rowRef.current.offsetHeight);
-        }, [index]);
-        let item = data[index];
-        let itemId = getItemId(item);
-        let active = index === currentIndex;
-        let ItemComponent = props.renderItem;
-        return (_jsx(ItemComponent, { className: clsx("ObCombobox-listItem", active && "active", isItemSelected?.(item) && "selected"), "aria-selected": active, onClick: () => handleSelectItem(item), item: item, style: {
-                ...style,
-                padding: isDesktop ? "0 8px" : "8px",
-            }, ref: rowRef, id: itemId }, itemId));
-    };
-    useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
-    useEffect(() => {
-        if (initialSearchValue !== undefined) {
-            setInputValue(initialSearchValue);
-        }
-    }, [initialSearchValue, setInputValue]);
-    return (_jsxs("div", { className: "ObCombobox-root", id: id, onClick: (evt) => evt.stopPropagation(), children: [_jsxs("div", { className: "ObCombobox-actions", children: [nullable && (_jsx(Button, { className: "ObCombobox-clear", "data-size": isDesktop ? "sm" : "md", variant: "tertiary", onClick: () => {
-                            onChange?.(null);
-                        }, children: getLocalizedString("Clear") })), onClose && (_jsx(Button, { "data-size": isDesktop ? "sm" : "md", variant: "tertiary", className: "ObCombobox-close", onClick: onClose, children: getLocalizedString("Close") }))] }), _jsx(Textfield, { type: "search", className: "ObCombobox-input", "aria-label": getLocalizedString("Search"), placeholder: getLocalizedString("Search"), onKeyDown: handleKeyDown, "aria-activedescendant": getItemId(data[currentIndex]) ?? "", value: inputValue, onChange: (event) => setInputValue(event.target.value) }), _jsxs("div", { className: "ObCombobox-listWrap", ref: wrapperRef, children: [loading && (_jsx("div", { className: "ObCombobox-progress", children: _jsx("div", { className: "ObCombobox-progress-bar" }) })), height > 0 &&
-                        (columns ? (_jsx(LookupGrid, { columns: columns, data: data, height: height, currentIndex: currentIndex, currentColumn: currentColumn, getItemId: getItemId, isItemSelected: isItemSelected, onSelectItem: handleSelectItem })) : (_jsx("div", { className: "ObCombobox-list", role: "listbox", children: _jsx(VirtualList, { ref: listRef, height: height, width: "100%", itemCount: data.length, itemSize: getItemSize, overscanCount: 5, children: Row }) })))] })] }));
-}

package/es/AfLookup/Lookup.css

@@ -1,125 +0,0 @@
-.ObLookup-inputWrap {
-	position: relative;
-
-	.ds-input {
-		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
-	}
-}
-
-.ObLookup-buttons {
-	position: absolute;
-	inset-inline-end: 0;
-	inset-block-end: 0;
-	/* Match the .ds-input height so the buttons center on the input row,
-	   also when a label or description is rendered above the input */
-	height: var(--ds-size-12, 3rem);
-	display: flex;
-	align-items: center;
-	padding-inline-end: var(--ds-size-1, 0.25rem);
-}
-
-.ObLookup-dialog {
-	border: 0;
-	margin-block-start: 0;
-	padding: 1rem;
-	overflow: hidden;
-
-	background-color: whitesmoke;
-
-	transition:
-		display 0.2s allow-discrete,
-		transform 0.2s ease-out,
-		scale 0.2s ease-out,
-		opacity 0.2s ease-out;
-
-	&::backdrop {
-		opacity: 0;
-		background: rgb(0 0 0 / 0.2);
-		transition:
-			display 0.2s allow-discrete,
-			opacity 0.2s ease-out;
-	}
-
-	&[open]::backdrop {
-		opacity: 1;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-
-	@media (width < 768px) {
-		inset: 10vh 0.5rem 0;
-
-		border-radius: 1rem 1rem 0 0;
-		height: 90vh;
-		width: calc(100vw - 1rem);
-		max-width: 100vw;
-		transform: translateY(100%);
-		z-index: 1500;
-
-		opacity: 0;
-
-		&[open] {
-			transform: translateY(0);
-			opacity: 1;
-
-			@starting-style {
-				transform: translateY(100%);
-				opacity: 0;
-			}
-		}
-	}
-
-	@media (width >= 768px) {
-		inset-block-start: 50%;
-		inset-inline-start: 50%;
-		translate: -50% -50%;
-		scale: 1 0;
-		opacity: 0;
-
-		border-radius: 0.25rem;
-
-		height: clamp(300px, 80vh, 500px);
-		min-width: 320px;
-		width: var(--default-width, 400px);
-
-		&[open] {
-			scale: 1;
-			opacity: 1;
-
-			@starting-style {
-				scale: 1 0;
-				opacity: 0;
-			}
-		}
-	}
-
-	@supports (inset-block-start: anchor(bottom)) {
-		@media (width < 768px) or (pointer: coarse) {
-			anchor-name: unset !important;
-		}
-
-		@media screen and (width >= 768px) and (pointer: fine) {
-			inset-block-start: anchor(bottom);
-			inset-block-end: unset;
-
-			inset-inline-start: anchor(left);
-			inset-inline-end: unset;
-
-			translate: unset;
-			transform-origin: top left;
-
-			resize: both;
-		}
-	}
-
-	&[data-anchor="manual"] {
-		inset: unset;
-		position: fixed;
-		inset-inline-start: var(--lookup-anchor-inline-start, 50%);
-		inset-block-start: var(--lookup-anchor-block-start, 50%);
-		translate: unset;
-		transform: none;
-	}
-}

package/es/AfLookup/Lookup.d.ts

@@ -1,35 +0,0 @@
-import "./Lookup.css";
-import { type TextfieldProps } from "@digdir/designsystemet-react";
-import { type DistributiveOmit } from "@olenbetong/appframe-react";
-import { type ComboboxProps } from "./Combobox.js";
-export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
-    /**
-     * Allows the user to enter a value manually that might not be in the list.
-     */
-    editable?: boolean;
-    fullWidth?: boolean;
-    label?: string;
-    value?: string | null;
-    onChange?: (item: T | null) => void;
-    slotProps?: {
-        dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
-        textField?: Partial<TextfieldProps>;
-    };
-};
-export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
-    slotProps?: {
-        dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
-    };
-    getAnchorElement?: () => Element | null;
-};
-export declare function useLookup<T extends Record<string, unknown>>({ getAnchorElement, slotProps, ...props }: LookupProps<T>): {
-    open: boolean;
-    openDialog: (searchValue?: string) => void;
-    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    onChange: (item: T | null) => void;
-    dialogRef: import("react").RefObject<HTMLDialogElement | null>;
-    anchorName: string;
-    inputId: string;
-    dialog: import("react").ReactPortal;
-};
-export declare function AfLookup<T extends Record<string, unknown>>({ fullWidth, label, slotProps, value, ...props }: AfLookupProps<T>): import("react").JSX.Element;