@olenbetong/appframe-ds 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 0.3.0
+
+### Minor Changes
+
+- 8487660: Add `AppLayout`, `AppMenu`, `AppMenuItem`, `AppMenuItemExternalLink`, `AppMenuItemButton`, `AppMenuSubheader` layout components — ported from `appframe-mui` with all MUI dependencies removed and replaced with plain HTML + Designsystemet CSS tokens.
+
 ## 0.2.0
 
 ### Minor Changes

package/es/AfLookup/BoundLookup.d.ts

@@ -0,0 +1,9 @@
+import type { CurrentRow, DataObject } from "@olenbetong/appframe-data";
+import { type AfLookupProps } from "./Lookup.js";
+export interface BoundLookupProps<TBoundData extends Record<string, unknown>, TLookupData extends Record<string, unknown>> extends Omit<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-runtime").JSX.Element;

package/es/AfLookup/BoundLookup.js

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,78 @@
+.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;
+	height: 372px;
+	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

@@ -0,0 +1,15 @@
+import "./Combobox.css";
+import type { DataObject } from "@olenbetong/appframe-data";
+export interface ComboboxProps<T extends Record<string, unknown>> {
+    nullable?: boolean;
+    dataObject: DataObject<T>;
+    uniqueIdField?: string;
+    isItemSelected?: (item: T) => boolean;
+    renderItem: (props: React.ComponentPropsWithRef<"li"> & {
+        item: T;
+    }) => React.ReactNode;
+    onChange?: (item: T | null) => void;
+    value?: T;
+    onClose?: () => void;
+}
+export declare function Combobox<T extends Record<string, unknown>>({ nullable, dataObject, isItemSelected, uniqueIdField, renderItem: Component, onChange, onClose, }: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;

package/es/AfLookup/Combobox.js

@@ -0,0 +1,124 @@
+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 { useDataWithFilter, useDebounce, useLoading } from "@olenbetong/appframe-react";
+import clsx from "clsx";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { VariableSizeList as VirtualList } from "react-window";
+export function Combobox({ nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", renderItem: Component, onChange, onClose, }) {
+    let id = useId();
+    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 [currentIndex, setCurrentIndex] = useState(0);
+    let listRef = useRef(null);
+    let [inputValue, setInputValue] = useState(() => {
+        // Preserve filter even if the lookup is unmounted
+        let currentFilter = dataObject.getParameter("filterString") ?? "";
+        let filters = currentFilter.split(/\s+AND\s+/g);
+        let wordFilters = filters.filter((filter) => filter.includes("[SearchColumn]"));
+        let words = wordFilters.map((filter) => filter.match(/'%([^']*)%'/)?.[1] ?? "").filter(Boolean);
+        return words.join(" ");
+    });
+    let query = useDebounce(inputValue, 300);
+    let loading = useLoading(dataObject);
+    let data = useDataWithFilter(dataObject, query
+        .split(/\s+/g)
+        .map((word) => `[SearchColumn] LIKE '%${word}%'`)
+        .join(" AND "));
+    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();
+    }, []);
+    // Reset current index when new data is loaded
+    // biome-ignore lint/correctness/useExhaustiveDependencies: isn't it obvious?
+    useEffect(() => {
+        setCurrentIndex(0);
+    }, [data]);
+    let getItemId = useCallback((item) => {
+        if (!item) {
+            return;
+        }
+        let itemId = item[uniqueIdField];
+        return `${id}-${itemId}`;
+    }, [id, uniqueIdField]);
+    function handleSelectItem(item) {
+        onChange?.(item);
+        setInputValue("");
+    }
+    function handleKeyDown(event) {
+        let newIndex = null;
+        if (event.key === "ArrowDown") {
+            newIndex = currentIndex + 1;
+        }
+        else if (event.key === "ArrowUp") {
+            newIndex = currentIndex - 1;
+        }
+        else if (event.key === "Home" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+            newIndex = 0;
+        }
+        else if (event.key === "End" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+            newIndex = data.length - 1;
+        }
+        else if (event.key === "Enter") {
+            event.stopPropagation();
+            event.preventDefault();
+            handleSelectItem(data[currentIndex]);
+            return;
+        }
+        if (newIndex !== null) {
+            event.stopPropagation();
+            event.preventDefault();
+            if (newIndex < 0) {
+                newIndex = data.length - 1;
+            }
+            else if (newIndex >= data.length) {
+                newIndex = 0;
+            }
+            setCurrentIndex(newIndex);
+        }
+    }
+    let sizeMap = useRef(new Map());
+    let getItemSize = (index) => sizeMap.current.get(index) ?? 56;
+    let setSize = (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));
+        }
+    };
+    // biome-ignore lint: nested component defined for performance reasons inside render
+    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;
+        return (_jsx(Component, { 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]);
+    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", label: 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 && (_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

@@ -0,0 +1,104 @@
+.ObLookup-dialog {
+	border: 0;
+	margin-block-start: 0;
+	padding: 1rem;
+
+	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

@@ -0,0 +1,34 @@
+import "./Lookup.css";
+import { type TextfieldProps } from "@digdir/designsystemet-react";
+import { type ComboboxProps } from "./Combobox.js";
+export interface AfLookupProps<T extends Record<string, unknown>> extends Omit<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 interface LookupProps<T extends Record<string, unknown>> extends Omit<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: () => 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-runtime").JSX.Element;

package/es/AfLookup/Lookup.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Lookup.css";
+import { Button, Textfield } from "@digdir/designsystemet-react";
+import ClearIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import clsx from "clsx";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal, flushSync } from "react-dom";
+import { Combobox } from "./Combobox.js";
+export function useLookup({ getAnchorElement, slotProps, ...props }) {
+    let [open, setOpen] = useState(false);
+    let anchorName = `--anchor-${CSS.escape(useId())}`;
+    let dialogRef = useRef(null);
+    let inputId = useId();
+    let resetManualAnchor = useCallback(() => {
+        let $dialog = dialogRef.current;
+        if ($dialog) {
+            $dialog.style.removeProperty("--lookup-anchor-inline-start");
+            $dialog.style.removeProperty("--lookup-anchor-block-start");
+            delete $dialog.dataset.anchor;
+        }
+    }, []);
+    let updateManualAnchor = useCallback(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        if (!window.matchMedia?.("(pointer: fine)").matches) {
+            resetManualAnchor();
+            return;
+        }
+        let anchorElement = getAnchorElement?.() ?? null;
+        let $dialog = dialogRef.current;
+        if (!$dialog || !anchorElement) {
+            resetManualAnchor();
+            return;
+        }
+        let rect = anchorElement.getBoundingClientRect();
+        let dialogHeight = $dialog.offsetHeight || 0;
+        let dialogWidth = $dialog.offsetWidth || 0;
+        let top = rect.bottom + 8;
+        let availableBelow = window.innerHeight - rect.bottom - 16;
+        if (availableBelow < dialogHeight) {
+            top = Math.max(16, rect.top - dialogHeight - 8);
+        }
+        let left = rect.left;
+        let minInline = 16;
+        let maxInline = window.innerWidth - dialogWidth - 16;
+        if (Number.isFinite(maxInline)) {
+            left = Math.min(Math.max(left, minInline), Math.max(minInline, maxInline));
+        }
+        $dialog.style.setProperty("--lookup-anchor-inline-start", `${Math.round(left)}px`);
+        $dialog.style.setProperty("--lookup-anchor-block-start", `${Math.round(top)}px`);
+        $dialog.dataset.anchor = "manual";
+    }, [getAnchorElement, resetManualAnchor]);
+    function handleOpen() {
+        let $dialog = dialogRef.current;
+        if ($dialog) {
+            flushSync(() => {
+                $dialog.showModal();
+                setOpen(true);
+            });
+            $dialog.querySelector('input[type="search"]')?.focus();
+        }
+    }
+    function handleKeyDown(event) {
+        if (event.key === "ArrowDown" || event.key === "F4") {
+            event.preventDefault();
+            event.stopPropagation();
+            handleOpen();
+        }
+    }
+    let handleClose = useCallback(() => {
+        setOpen(false);
+        document.getElementById(inputId)?.focus();
+    }, [inputId]);
+    function handleChange(item) {
+        props.onChange?.(item);
+        dialogRef.current?.close();
+    }
+    useEffect(() => {
+        if (!open) {
+            resetManualAnchor();
+            return;
+        }
+        let frame = requestAnimationFrame(() => {
+            updateManualAnchor();
+        });
+        updateManualAnchor();
+        let cleanupTargets = [];
+        let listener = () => updateManualAnchor();
+        cleanupTargets.push([window, "resize", listener, undefined]);
+        cleanupTargets.push([window, "scroll", listener, true]);
+        let anchorElement = getAnchorElement?.() ?? null;
+        let scrollParent = anchorElement?.closest("[data-virtualized-scroller]") ?? null;
+        if (scrollParent) {
+            cleanupTargets.push([scrollParent, "scroll", listener, { passive: true }]);
+        }
+        for (let [target, type, handler, options] of cleanupTargets) {
+            target.addEventListener(type, handler, options);
+        }
+        return () => {
+            cancelAnimationFrame(frame);
+            for (let [target, type, handler, options] of cleanupTargets) {
+                target.removeEventListener(type, handler, options);
+            }
+        };
+    }, [getAnchorElement, open, resetManualAnchor, updateManualAnchor]);
+    useEffect(() => {
+        let $dialog = dialogRef.current;
+        if ($dialog) {
+            let controller = new AbortController();
+            let signal = controller.signal;
+            let closeEvent = () => {
+                // Wait for transition to finish before closing
+                setTimeout(() => {
+                    handleClose();
+                }, 150);
+            };
+            $dialog.addEventListener("close", closeEvent, { signal });
+            $dialog.addEventListener("cancel", closeEvent, { signal });
+            $dialog.addEventListener("click", (event) => {
+                let rect = $dialog.getBoundingClientRect();
+                if (rect.left > event.clientX ||
+                    rect.right < event.clientX ||
+                    rect.top > event.clientY ||
+                    rect.bottom < event.clientY) {
+                    $dialog.close();
+                }
+            }, { signal });
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [handleClose]);
+    return {
+        open,
+        openDialog: handleOpen,
+        onKeyDown: handleKeyDown,
+        onChange: handleChange,
+        dialogRef,
+        anchorName,
+        inputId,
+        dialog: createPortal(_jsx("dialog", { ref: dialogRef, className: clsx("ObLookup-dialog", slotProps?.dialog?.className), onKeyDown: (evt) => evt.stopPropagation(), style: { positionAnchor: anchorName, ...slotProps?.dialog?.style }, children: open && _jsx(Combobox, { ...props, onClose: () => dialogRef.current?.close(), onChange: handleChange }) }), document.body, inputId),
+    };
+}
+export function AfLookup({ fullWidth = false, label, slotProps, value, ...props }) {
+    let { inputId, open: _open, dialog, anchorName, openDialog, onKeyDown } = useLookup(props);
+    return (_jsxs("div", { style: { anchorName }, children: [_jsxs("div", { style: { position: "relative", display: fullWidth ? "block" : "inline-block" }, children: [_jsx(Textfield, { id: inputId, value: value ?? "", label: label, readOnly: true, onClick: openDialog, onKeyDown: onKeyDown, className: clsx(slotProps?.textField?.className, "ObLookup-input"), ...slotProps?.textField, style: { width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style } }), _jsxs("div", { style: {
+                            position: "absolute",
+                            right: 0,
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            display: "flex",
+                            alignItems: "center",
+                        }, children: [props.nullable && value && props.onChange && (_jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Clear"), onKeyDown: (evt) => evt.stopPropagation(), onClick: (evt) => {
+                                    evt.stopPropagation();
+                                    props.onChange?.(null);
+                                    document.getElementById(inputId)?.focus();
+                                }, children: _jsx(ClearIcon, {}) })), _jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Search"), onClick: openDialog, children: _jsx(SearchIcon, {}) })] })] }), dialog] }));
+}

package/es/AfLookup/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./BoundLookup.js";
+export * from "./Combobox.js";
+export * from "./Lookup.js";

package/es/AfLookup/index.js

@@ -0,0 +1,3 @@
+export * from "./BoundLookup.js";
+export * from "./Combobox.js";
+export * from "./Lookup.js";

package/es/binding/BoundCheckbox.d.ts

@@ -0,0 +1,9 @@
+import { type CheckboxProps } from "@digdir/designsystemet-react";
+export type BoundCheckboxProps = Omit<CheckboxProps, "onChange" | "onKeyDown"> & {
+    field: string;
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const BoundCheckbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "onChange" | "onKeyDown"> & {
+    field: string;
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundCheckbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const BoundCheckbox = forwardRef(function BoundCheckbox({ field, onChange: onChangeProp, checked: _checked, ...props }, ref) {
+    let { value, setValue, onKeyDown } = useField(field);
+    return (_jsx(Checkbox, { checked: value ?? false, onChange: (evt) => {
+            onChangeProp?.(evt);
+            if (!evt.defaultPrevented) {
+                setValue(evt.target.checked);
+            }
+        }, onKeyDown: (evt) => onKeyDown(evt), ref: ref, name: field, ...props }));
+});

package/es/binding/BoundDatePicker.d.ts

@@ -0,0 +1,7 @@
+import { type TextfieldProps } from "@digdir/designsystemet-react";
+export type BoundDatePickerProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown" | "type"> & {
+    field: string;
+};
+export declare const BoundDatePicker: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "value" | "onKeyDown" | "type"> & {
+    field: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundDatePicker.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Textfield } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const BoundDatePicker = forwardRef(function BoundDatePicker({ field, ...props }, ref) {
+    let { error, value, onChange, onKeyDown } = useField(field);
+    let inputValue = value;
+    if (value instanceof Date) {
+        inputValue = value.toISOString().split("T")[0];
+    }
+    return (_jsx(Textfield, { type: "date", name: field, error: error ?? undefined, ...props, value: inputValue ?? "", onChange: (evt) => onChange(evt), onKeyDown: (evt) => onKeyDown(evt), ref: ref }));
+});

package/es/binding/BoundDateTimePicker.d.ts

@@ -0,0 +1,7 @@
+import { type TextfieldProps } from "@digdir/designsystemet-react";
+export type BoundDateTimePickerProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown" | "type"> & {
+    field: string;
+};
+export declare const BoundDateTimePicker: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "value" | "onKeyDown" | "type"> & {
+    field: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundDateTimePicker.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Textfield } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const BoundDateTimePicker = forwardRef(function BoundDateTimePicker({ field, ...props }, ref) {
+    let { error, value, onChange, onKeyDown } = useField(field);
+    let inputValue = value;
+    if (value instanceof Date) {
+        inputValue = value.toISOString().replace("Z", "");
+    }
+    return (_jsx(Textfield, { type: "datetime-local", name: field, error: error ?? undefined, ...props, value: inputValue ?? "", onChange: (evt) => {
+            onChange(evt, evt.target.value ? `${evt.target.value}Z` : null);
+        }, onKeyDown: (evt) => onKeyDown(evt), ref: ref }));
+});

package/es/binding/BoundInput.d.ts

@@ -0,0 +1,6 @@
+import { type InputProps } from "@digdir/designsystemet-react";
+export type BoundInputProps = Omit<InputProps, "onChange" | "onKeyDown" | "onBlur"> & {
+    field: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare function BoundInput({ field, onChange: onChangeProp, ...props }: BoundInputProps): import("react/jsx-runtime").JSX.Element;

package/es/binding/BoundInput.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+export function BoundInput({ field, onChange: onChangeProp, ...props }) {
+    let { value, onChange, onKeyDown } = useField(field);
+    return (_jsx(Input, { name: field, ...props, value: value ?? "", onChange: (event) => {
+            onChangeProp?.(event);
+            if (!event.defaultPrevented) {
+                onChange(event);
+            }
+        }, onKeyDown: (evt) => onKeyDown(evt) }));
+}