@olenbetong/appframe-ds 0.4.0 → 0.5.0

package/es/AfLookup/Combobox.js

@@ -1,71 +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", 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]);
-    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: () => 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;

package/es/AfLookup/Lookup.js

@@ -1,42 +0,0 @@
-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 { useLookupState } from "@olenbetong/appframe-react";
-import clsx from "clsx";
-import { createPortal } from "react-dom";
-import { Combobox } from "./Combobox.js";
-export function useLookup({ getAnchorElement, slotProps, ...props }) {
-    let { open, openDialog, onKeyDown, dialogRef, anchorName, inputId } = useLookupState({
-        getAnchorElement,
-        scrollParentSelector: "[data-virtualized-scroller]",
-    });
-    function handleChange(item) {
-        props.onChange?.(item);
-        dialogRef.current?.close();
-    }
-    return {
-        open,
-        openDialog,
-        onKeyDown,
-        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);
-    let hasClear = !!(props.nullable && value && props.onChange);
-    return (_jsxs("div", { style: { anchorName }, children: [_jsxs("div", { className: "ObLookup-inputWrap", style: {
-                    display: fullWidth ? "block" : "inline-block",
-                    "--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
-                }, 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", { className: "ObLookup-buttons", children: [hasClear && (_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/LookupEdit.d.ts

@@ -1,21 +0,0 @@
-import "./Lookup.css";
-import { type TextfieldProps } from "@digdir/designsystemet-react";
-import type { DistributiveOmit } from "@olenbetong/appframe-react";
-import type React from "react";
-import type { ComboboxProps } from "./Combobox.js";
-export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value" | "onChange"> & {
-    /**
-     * Allows the user to enter a value manually that might not be in the list.
-     */
-    editable?: boolean;
-    fullWidth?: boolean;
-    label?: string;
-    value?: string | null;
-    lookupField: keyof T;
-    onChange?: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    slotProps?: {
-        dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
-        textField?: Partial<TextfieldProps>;
-    };
-};
-export declare function AfLookupEdit<T extends Record<string, unknown>>({ fullWidth, label, onChange, slotProps, nullable, lookupField, value, ...props }: AfLookupEditProps<T>): React.JSX.Element;

package/es/AfLookup/LookupEdit.js

@@ -1,49 +0,0 @@
-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 { useLookup } from "./Lookup.js";
-export function AfLookupEdit({ fullWidth = false, label, onChange, slotProps, nullable, lookupField, value, ...props }) {
-    let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup({
-        ...props,
-        nullable,
-        slotProps: { dialog: slotProps?.dialog },
-        onChange: (item) => applyValue(item),
-    });
-    // The popup selects a single value from the dataset: the item's lookupField
-    // is written to the input through the native value setter so the same
-    // change event fires whether the user types or picks from the list/grid.
-    function applyValue(item) {
-        let input = document.getElementById(inputId);
-        let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-        if (input && nativeInputValueSetter) {
-            nativeInputValueSetter.call(input, item ? String(item[lookupField]) : "");
-            input.dispatchEvent(new Event("input", { bubbles: true }));
-        }
-    }
-    function handleKeyDown(event) {
-        if (event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-            openDialog();
-        }
-        else {
-            onKeyDown(event);
-        }
-    }
-    let hasClear = !!(nullable && value && onChange);
-    return (_jsxs("div", { style: { anchorName }, children: [_jsxs("div", { className: "ObLookup-inputWrap", style: {
-                    display: fullWidth ? "block" : "inline-block",
-                    "--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
-                }, children: [_jsx(Textfield, { id: inputId, value: value ?? "", label: label, onChange: onChange, onKeyDown: handleKeyDown, className: clsx(slotProps?.textField?.className, "ObLookup-input"), ...slotProps?.textField, style: { width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style } }), _jsxs("div", { className: "ObLookup-buttons", children: [hasClear && (_jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Clear"), onKeyDown: (evt) => evt.stopPropagation(), onClick: (evt) => {
-                                    evt.stopPropagation();
-                                    applyValue(null);
-                                    document.getElementById(inputId)?.focus();
-                                }, children: _jsx(ClearIcon, {}) })), _jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Search"), onClick: (evt) => {
-                                    evt.stopPropagation();
-                                    openDialog();
-                                }, children: _jsx(SearchIcon, {}) })] })] }), dialog] }));
-}

package/es/AfLookup/LookupGrid.css

@@ -1,57 +0,0 @@
-.ObLookupGrid-root {
-	height: 100%;
-	overflow: hidden;
-	overscroll-behavior: contain;
-	border: 1px solid rgb(0 0 0 / 0.06);
-}
-
-.ObLookupGrid-header {
-	display: grid;
-	height: 40px;
-	align-items: center;
-	border-bottom: 1px solid rgb(0 0 0 / 0.12);
-	background-color: rgb(0 0 0 / 0.03);
-	font-weight: 600;
-}
-
-.ObLookupGrid-headerCell {
-	padding: 0 8px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.ObLookupGrid-row {
-	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
-	display: grid;
-	align-items: center;
-	cursor: pointer;
-	border-bottom: 1px solid rgb(0 0 0 / 0.06);
-
-	&.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);
-	}
-}
-
-.ObLookupGrid-cell {
-	padding: 0 8px;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	&.active {
-		outline: 2px solid oklch(from var(--brand-secondary, #666) calc(l - 0.2) c h);
-		outline-offset: -2px;
-	}
-}

package/es/AfLookup/LookupGrid.d.ts

@@ -1,13 +0,0 @@
-import "./LookupGrid.css";
-import type { LookupColumn } from "@olenbetong/appframe-react";
-export interface LookupGridProps<T extends Record<string, unknown>> {
-    columns: LookupColumn<T>[];
-    data: T[];
-    height: number;
-    currentIndex: number;
-    currentColumn: number;
-    getItemId: (item: T | undefined) => string | undefined;
-    isItemSelected?: (item: T) => boolean;
-    onSelectItem: (item: T) => void;
-}
-export declare function LookupGrid<T extends Record<string, unknown>>({ columns, data, height, currentIndex, currentColumn, getItemId, isItemSelected, onSelectItem, }: LookupGridProps<T>): import("react").JSX.Element;

package/es/AfLookup/LookupGrid.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./LookupGrid.css";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import clsx from "clsx";
-import { useEffect, useMemo, useRef } from "react";
-import { FixedSizeList as VirtualList } from "react-window";
-const ROW_HEIGHT = 40;
-const HEADER_HEIGHT = 40;
-function getColumnWidth(column) {
-    if (typeof column.width === "number") {
-        return `${column.width}px`;
-    }
-    return column.width ?? "minmax(80px, 1fr)";
-}
-export function LookupGrid({ columns, data, height, currentIndex, currentColumn, getItemId, isItemSelected, onSelectItem, }) {
-    let listRef = useRef(null);
-    let gridTemplateColumns = useMemo(() => columns.map(getColumnWidth).join(" "), [columns]);
-    useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
-    // oxlint-disable-next-line react/no-nested-component-definitions -- react-window row renderer
-    let Row = ({ index, style }) => {
-        let item = data[index];
-        let itemId = getItemId(item);
-        let active = index === currentIndex;
-        return (_jsx("div", { role: "row", "aria-selected": active, className: clsx("ObLookupGrid-row", active && "active", isItemSelected?.(item) && "selected"), style: { ...style, gridTemplateColumns }, onClick: () => onSelectItem(item), id: itemId, children: columns.map((column, columnIndex) => (_jsx("div", { role: "gridcell", className: clsx("ObLookupGrid-cell", active && columnIndex === currentColumn && "active"), title: String(item[column.field] ?? ""), children: column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "") }, column.field))) }, itemId));
-    };
-    return (_jsxs("div", { role: "grid", "aria-label": getLocalizedString("Search results"), className: "ObLookupGrid-root", children: [_jsx("div", { role: "row", className: "ObLookupGrid-header", style: { gridTemplateColumns }, children: columns.map((column) => (_jsx("div", { role: "columnheader", className: "ObLookupGrid-headerCell", children: column.headerName ?? column.field }, column.field))) }), _jsx(VirtualList, { ref: listRef, height: Math.max(0, height - HEADER_HEIGHT), width: "100%", itemCount: data.length, itemSize: ROW_HEIGHT, overscanCount: 5, children: Row })] }));
-}

package/es/AfLookup/index.d.ts

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

package/es/AfLookup/index.js

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

package/es/binding/BoundCheckbox.d.ts

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

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

@@ -1,7 +0,0 @@
-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" | "onKeyDown" | "type" | "value"> & {
-    field: string;
-} & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundDatePicker.js

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

@@ -1,7 +0,0 @@
-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" | "onKeyDown" | "type" | "value"> & {
-    field: string;
-} & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundDateTimePicker.js

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

@@ -1,6 +0,0 @@
-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.Element;

package/es/binding/BoundInput.js

@@ -1,12 +0,0 @@
-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) }));
-}

package/es/binding/BoundNumericTextField.d.ts

@@ -1,20 +0,0 @@
-import { type TextfieldProps } from "@digdir/designsystemet-react";
-/**
- * A Designsystemet `Textfield` bound to an Appframe data source field via `useField`.
- *
- * Adds client-side numeric validation: rejects non-numeric characters and enforces
- * optional `precision` (total digits) and `scale` (decimal places) constraints.
- * Validation errors are reported to the parent via the `onError` callback so the
- * parent can track whether any field is in an error state (e.g., to disable Save).
- *
- * On blur the displayed value is normalized to a JS `Number` (comma decimal separators
- * are converted to dots) so the data source always stores a proper numeric value.
- */
-export type BoundNumericTextFieldProps = Omit<TextfieldProps, "onChange" | "onKeyDown" | "onError"> & {
-    field: string;
-    precision?: number;
-    scale?: number;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onError?: (error: string | null) => void;
-};
-export declare function BoundNumericTextField({ field, precision, scale, onChange: onChangeProp, onError, ...props }: BoundNumericTextFieldProps): import("react").JSX.Element;

package/es/binding/BoundNumericTextField.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Textfield } from "@digdir/designsystemet-react";
-import { getLocalizedString, localize } from "@olenbetong/appframe-core";
-import { useField } from "@olenbetong/appframe-react";
-import { useEffect, useState } from "react";
-export function BoundNumericTextField({ field, precision, scale, onChange: onChangeProp, onError, ...props }) {
-    let { value, setValue, onChange, onKeyDown } = useField(field);
-    let [error, setError] = useState(null);
-    function checkNumber(value, precision, scale) {
-        if (value[0] === "0") {
-            value = value[0].replace("0", "");
-        }
-        let [integer, decimal] = value.split(",");
-        if (value.includes(".")) {
-            [integer, decimal] = value.split(".");
-        }
-        integer = integer.replace("-", "");
-        if (integer.length > precision - scale) {
-            setError(localize `The amount of whole numbers is too high. Allowed limit is ${precision - scale}`);
-            return;
-        }
-        if (decimal && decimal.length > scale) {
-            setError(localize `The amount of decimal places is too high. Allowed limit is ${scale}`);
-            return;
-        }
-        setError(null);
-    }
-    function checkError(value, precision, scale) {
-        let regExp = /[a-zA-Z `!@#$%^&*()_+=[\]{};':"\\|<>/?~]/;
-        if (regExp.test(value)) {
-            setError(getLocalizedString("Please enter a valid number"));
-        }
-        else if (value.substring(1).includes("-")) {
-            setError(getLocalizedString("Please enter a valid number"));
-        }
-        else if (precision !== undefined && scale !== undefined) {
-            checkNumber(value, precision, scale);
-        }
-        else {
-            setError(null);
-        }
-    }
-    useEffect(() => {
-        onError?.(error);
-    }, [error, onError]);
-    return (_jsx(Textfield, { name: field, error: error ?? undefined, ...props, value: value ?? "", onChange: (event) => {
-            onChangeProp?.(event);
-            if (!event.defaultPrevented) {
-                checkError(event.target.value, precision, scale);
-                onChange(event);
-            }
-        }, onKeyDown: (evt) => onKeyDown(evt), onBlur: (evt) => {
-            const raw = evt.target.value;
-            if (raw !== "") {
-                setValue(Number(raw.replaceAll(",", ".")));
-            }
-        } }));
-}

package/es/binding/BoundSelect.d.ts

@@ -1,9 +0,0 @@
-import { type SelectProps } from "@digdir/designsystemet-react";
-export type BoundSelectProps = Omit<SelectProps, "onChange" | "value"> & {
-    field: string;
-    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-};
-export declare const BoundSelect: import("react").ForwardRefExoticComponent<Omit<SelectProps, "onChange" | "value"> & {
-    field: string;
-    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-} & import("react").RefAttributes<HTMLSelectElement>>;