@olenbetong/appframe-ds 0.4.1 → 0.5.0

package/es/AfLookup/Lookup.js

@@ -1,59 +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 { useRef } from "react";
-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]",
-    });
-    let initialSearchValueRef = useRef(undefined);
-    function handleChange(item) {
-        props.onChange?.(item);
-        dialogRef.current?.close();
-    }
-    function handleOpenDialog(searchValue) {
-        initialSearchValueRef.current = searchValue;
-        openDialog();
-    }
-    return {
-        open,
-        openDialog: handleOpenDialog,
-        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, initialSearchValue: initialSearchValueRef.current, 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);
-    function handleInputKeyDown(event) {
-        let hasModifier = event.ctrlKey || event.altKey || event.metaKey;
-        let isTypeaheadKey = event.key.length === 1 && !hasModifier && !event.nativeEvent.isComposing;
-        if (isTypeaheadKey) {
-            event.preventDefault();
-            event.stopPropagation();
-            openDialog(event.key);
-            return;
-        }
-        onKeyDown(event);
-    }
-    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, onClick: () => openDialog(), onKeyDown: handleInputKeyDown, 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>>;

package/es/binding/BoundSelect.js

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

package/es/binding/BoundSwitch.d.ts

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

package/es/binding/BoundSwitch.js

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

package/es/binding/BoundTextField.d.ts

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

package/es/binding/BoundTextField.js

@@ -1,22 +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 BoundTextField = forwardRef(function BoundTextField({ field, ...props }, ref) {
-    let { error, value, onChange, onKeyDown } = useField(field);
-    let inputValue = value;
-    if (props.type === "date" && value instanceof Date) {
-        inputValue = value.toISOString().split("T")[0];
-    }
-    else if (["datetime", "datetime-local"].includes(props.type ?? "") && value instanceof Date) {
-        inputValue = value.toISOString().replace("Z", "");
-    }
-    return (_jsx(Textfield, { name: field, error: error ?? undefined, ...props, value: inputValue ?? "", onChange: (evt) => {
-            if (["datetime", "datetime-local"].includes(props.type ?? "")) {
-                onChange(evt, evt.target.value ? `${evt.target.value}Z` : null);
-            }
-            else {
-                onChange(evt);
-            }
-        }, onKeyDown: (evt) => onKeyDown(evt), ref: ref }));
-});

package/es/binding/CancelButton.d.ts

@@ -1,3 +0,0 @@
-import { type ButtonProps } from "@digdir/designsystemet-react";
-import { type ForwardRefExoticComponent, type RefAttributes } from "react";
-export declare const CancelButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;

package/es/binding/CancelButton.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useCancelButton } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-export const CancelButton = forwardRef(function CancelButton({ onClick, children, ...props }, ref) {
-    let { cancelEdit } = useCancelButton();
-    return (_jsx(Button, { onClick: (evt) => {
-            onClick?.(evt);
-            if (!evt.defaultPrevented) {
-                cancelEdit();
-            }
-        }, variant: "secondary", ...props, ref: ref, children: children ?? getLocalizedString("Cancel") }));
-});

package/es/binding/CancelIconButton.d.ts

@@ -1,2 +0,0 @@
-import { type ButtonProps } from "@digdir/designsystemet-react";
-export declare const CancelIconButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "icon"> & import("react").RefAttributes<HTMLButtonElement>>;

package/es/binding/CancelIconButton.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@digdir/designsystemet-react";
-import UndoIcon from "@mui/icons-material/Undo";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useCancelButton } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-export const CancelIconButton = forwardRef(function CancelIconButton({ onClick, children, ...props }, ref) {
-    let { cancelEdit } = useCancelButton();
-    return (_jsx(Button, { icon: true, "aria-label": getLocalizedString("Revert unsaved changes"), variant: "tertiary", onClick: (evt) => {
-            onClick?.(evt);
-            if (!evt.defaultPrevented) {
-                cancelEdit();
-            }
-        }, ...props, ref: ref, children: children ?? _jsx(UndoIcon, {}) }));
-});

package/es/binding/DataEditToolbar.d.ts

@@ -1,13 +0,0 @@
-import type { DataObject } from "@olenbetong/appframe-data";
-export type DataEditToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * If different data objects are used for navigation and editing, you can set the data object
-     * used for navigation with this property.
-     */
-    navigationDataObject?: DataObject<any>;
-    /**
-     * If true, will add buttons to move to the next/previous index in the data object.
-     */
-    showNavigation?: boolean;
-};
-export declare function DataEditToolbar({ children, navigationDataObject, showNavigation, style, ...props }: DataEditToolbarProps): import("react").JSX.Element;

package/es/binding/DataEditToolbar.js

@@ -1,28 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Tooltip } from "@digdir/designsystemet-react";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useCurrentIndex, useDataLength, useDataObject } from "@olenbetong/appframe-react";
-import { CancelIconButton } from "./CancelIconButton.js";
-import { RefreshRowIconButton } from "./RefreshRowIconButton.js";
-import { SaveIconButton } from "./SaveIconButton.js";
-function IndexNavigator({ dataObject }) {
-    let count = useDataLength(dataObject);
-    let index = useCurrentIndex(dataObject);
-    if (count <= 1) {
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { icon: true, variant: "tertiary", "aria-label": getLocalizedString("Previous"), onClick: () => dataObject.setCurrentIndex(index - 1), disabled: index <= 0, children: _jsx(ChevronLeftIcon, {}) }), _jsx(Button, { icon: true, variant: "tertiary", "aria-label": getLocalizedString("Next"), onClick: () => dataObject.setCurrentIndex(index + 1), disabled: index >= count - 1, children: _jsx(ChevronRightIcon, {}) })] }));
-}
-export function DataEditToolbar({ children, navigationDataObject, showNavigation, style, ...props }) {
-    let dataObject = useDataObject();
-    return (_jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            minHeight: "48px",
-            borderBottom: "1px solid rgb(0 0 0 / 0.12)",
-            borderTop: "1px solid rgb(0 0 0 / 0.12)",
-            ...style,
-        }, ...props, children: [_jsx(Tooltip, { content: getLocalizedString("Save changes"), children: _jsx(SaveIconButton, {}) }), _jsx(Tooltip, { content: getLocalizedString("Revert unsaved changes"), children: _jsx(CancelIconButton, {}) }), _jsx(Tooltip, { content: getLocalizedString("Refresh record"), children: _jsx(RefreshRowIconButton, {}) }), children, showNavigation && (_jsx("div", { style: { marginLeft: "auto" }, children: _jsx(IndexNavigator, { dataObject: navigationDataObject ?? dataObject }) }))] }));
-}