@olenbetong/appframe-ds 0.2.0 → 0.4.0

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" | "onKeyDown" | "type" | "value"> & {
+    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.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) }));
+}

package/es/binding/BoundNumericTextField.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/es/binding/DataObjectSelect.d.ts

@@ -0,0 +1,50 @@
+import type { DataObject } from "@olenbetong/appframe-data";
+export type DataObjectSelectProps<T extends Record<string, unknown>> = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    /**
+     * Data object to get options from. Only the data handler is used, so the component
+     * will not affect the state of the data object.
+     */
+    dataObject: DataObject<T>;
+    /**
+     * Filter to use when getting options.
+     */
+    filter?: string;
+    /**
+     * The label displayed above the select.
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether the user is allowed to clear the value. Will add an empty option at the
+     * start of the options list.
+     */
+    nullable?: boolean;
+    /**
+     * If nullable is true, this is the label for the empty option. Default is an empty string.
+     */
+    blankLabel?: string;
+    /**
+     * The field in the options record to use as the value.
+     */
+    valueField?: string;
+    /**
+     * The field in the options record to use as the label.
+     */
+    labelField?: string;
+    /**
+     * If the value isn't simply a record field, you can pass a function here to
+     * get the value from the record.
+     */
+    getOptionValue?: (option: T) => string;
+    /**
+     * If you want to display labels that are not simply a record field, you can
+     * pass a function that takes a record and returns a label.
+     */
+    getOptionLabel?: (item: T) => string;
+};
+export declare function DataObjectSelect<T extends Record<string, unknown>>({ nullable, blankLabel, dataObject, filter, id: idProp, label, name, getOptionLabel, getOptionValue, valueField, labelField, value, defaultValue, ...props }: DataObjectSelectProps<T>): import("react").JSX.Element;
+export declare function BoundDataObjectSelect<T extends Record<string, unknown>>({ field, ...props }: DataObjectSelectProps<T> & {
+    /**
+     * Field to bind the value of the select component to.
+     */
+    field: string;
+}): import("react").JSX.Element;

package/es/binding/DataObjectSelect.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, Label, Select } from "@digdir/designsystemet-react";
+import { useFetchData, useField } from "@olenbetong/appframe-react";
+import { useEffect, useId, useRef } from "react";
+export function DataObjectSelect({ nullable = false, blankLabel = "", dataObject, filter, id: idProp, label, name, getOptionLabel, getOptionValue, valueField = "ID", labelField = "Description", value, defaultValue, ...props }) {
+    let { data } = useFetchData(dataObject, filter ?? "");
+    let fallbackId = useId();
+    let id = idProp ?? fallbackId;
+    let inputRef = useRef(null);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- default value should only affect the initial value
+    useEffect(() => {
+        let defaultExists = data.find((r) => String(getOptionValue?.(r) ?? r[valueField]) === defaultValue);
+        if (inputRef.current && defaultExists) {
+            inputRef.current.value = defaultValue;
+        }
+    }, [data]);
+    return (_jsxs(Field, { children: [label && (_jsxs(Label, { htmlFor: id, children: [label, props.required && " *"] })), _jsxs(Select, { id: id, name: name, ...props, value: value === undefined ? undefined : (value ?? ""), ref: inputRef, children: [nullable && _jsx("option", { value: "", children: blankLabel }), data.map((t) => {
+                        let optionValue = getOptionValue?.(t) ?? t[valueField];
+                        let optionLabel = getOptionLabel?.(t) ?? t[labelField];
+                        return (_jsx("option", { value: optionValue, children: optionLabel }, optionValue));
+                    })] })] }));
+}
+export function BoundDataObjectSelect({ field, ...props }) {
+    let { value, setValue } = useField(field);
+    return (_jsx(DataObjectSelect, { value: (value ?? ""), onChange: (event) => setValue(event.target.value), ...props }));
+}

package/es/binding/DeleteButton.d.ts

@@ -0,0 +1,8 @@
+import { type ButtonProps } from "@digdir/designsystemet-react";
+import { type DeletePrompt } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, type RefAttributes } from "react";
+export type DeleteButtonProps = ButtonProps & {
+    index?: number;
+    prompt?: DeletePrompt;
+};
+export declare const DeleteButton: ForwardRefExoticComponent<DeleteButtonProps & RefAttributes<HTMLButtonElement>>;

package/es/binding/DeleteButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useDeleteButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const DeleteButton = forwardRef(function DeleteButton({ prompt, onClick, index, children, ...props }, ref) {
+    let { deleting, deleteRow } = useDeleteButton(prompt);
+    return (_jsx(Button, { loading: deleting, "data-color": "danger", variant: "secondary", onClick: (evt) => {
+            onClick?.(evt);
+            if (!evt.defaultPrevented) {
+                deleteRow(index);
+            }
+        }, ...props, ref: ref, children: children ?? getLocalizedString("Delete") }));
+});

package/es/binding/DeleteIconButton.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps } from "@digdir/designsystemet-react";
+import { type DeletePrompt } from "@olenbetong/appframe-react";
+export type DeleteIconButtonProps = Omit<ButtonProps, "icon"> & {
+    index?: number;
+    prompt?: DeletePrompt;
+};
+export declare const DeleteIconButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "icon"> & {
+    index?: number;
+    prompt?: DeletePrompt;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/es/binding/DeleteIconButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@digdir/designsystemet-react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useDeleteButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const DeleteIconButton = forwardRef(function DeleteIconButton({ prompt, onClick, index, children, ...props }, ref) {
+    let { isDeleting, deleteRow } = useDeleteButton(prompt);
+    return (_jsx(Button, { icon: true, loading: isDeleting, "data-color": "danger", "aria-label": getLocalizedString("Delete"), variant: "tertiary", onClick: (evt) => {
+            onClick?.(evt);
+            if (!evt.defaultPrevented) {
+                deleteRow(index);
+            }
+        }, ...props, ref: ref, children: children ?? _jsx(DeleteIcon, {}) }));
+});

package/es/binding/RefreshButton.d.ts

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

package/es/binding/RefreshButton.js

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

package/es/binding/RefreshIconButton.d.ts

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

package/es/binding/RefreshIconButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@digdir/designsystemet-react";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useDataObject, useLoading } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const RefreshIconButton = forwardRef(function RefreshIconButton({ onClick, children, ...props }, ref) {
+    let dataObject = useDataObject();
+    let loading = useLoading(dataObject);
+    return (_jsx(Button, { icon: true, loading: loading, "aria-label": getLocalizedString("Refresh data"), variant: "tertiary", onClick: (evt) => {
+            onClick?.(evt);
+            if (!evt.defaultPrevented) {
+                dataObject.refreshDataSource();
+            }
+        }, ...props, ref: ref, children: children ?? _jsx(RefreshIcon, {}) }));
+});

package/es/binding/RefreshRowIconButton.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps } from "@digdir/designsystemet-react";
+export type RefreshRowIconButtonProps = Omit<ButtonProps, "icon"> & {
+    index?: number;
+};
+export declare const RefreshRowIconButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "icon"> & {
+    index?: number;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/es/binding/RefreshRowIconButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@digdir/designsystemet-react";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useRefreshRowButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const RefreshRowIconButton = forwardRef(function RefreshRowIconButton({ onClick, index, children, ...props }, ref) {
+    let { loading, refreshRow } = useRefreshRowButton();
+    return (_jsx(Button, { icon: true, loading: loading, "aria-label": getLocalizedString("Refresh current row"), variant: "tertiary", onClick: (evt) => {
+            onClick?.(evt);
+            if (!evt.defaultPrevented) {
+                refreshRow(index);
+            }
+        }, ...props, ref: ref, children: children ?? _jsx(RefreshIcon, {}) }));
+});

package/es/binding/SaveButton.d.ts

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

package/es/binding/SaveButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const SaveButton = forwardRef(function SaveButton({ onClick, children, ...props }, ref) {
+    let { saving, save } = useSaveButton();
+    return (_jsx(Button, { loading: saving, onClick: (evt) => {
+            onClick?.(evt);
+            if (!evt.defaultPrevented) {
+                save();
+            }
+        }, ...props, ref: ref, children: children ?? getLocalizedString("Save") }));
+});

package/es/binding/SaveIconButton.d.ts

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

package/es/binding/SaveIconButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@digdir/designsystemet-react";
+import SaveIcon from "@mui/icons-material/Save";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const SaveIconButton = forwardRef(function SaveIconButton({ onClick, children, ...props }, ref) {
+    let { saving, save } = useSaveButton();
+    return (_jsx(Button, { icon: true, loading: saving, "aria-label": getLocalizedString("Save"), variant: "tertiary", onClick: (evt) => {
+            onClick?.(evt);
+            if (!evt.defaultPrevented) {
+                save();
+            }
+        }, ...props, ref: ref, children: children ?? _jsx(SaveIcon, {}) }));
+});

package/es/binding/index.d.ts

@@ -0,0 +1,19 @@
+export * from "./BoundCheckbox.js";
+export * from "./BoundDatePicker.js";
+export * from "./BoundDateTimePicker.js";
+export * from "./BoundInput.js";
+export * from "./BoundNumericTextField.js";
+export * from "./BoundSelect.js";
+export * from "./BoundSwitch.js";
+export * from "./BoundTextField.js";
+export * from "./CancelButton.js";
+export * from "./CancelIconButton.js";
+export * from "./DataEditToolbar.js";
+export * from "./DataObjectSelect.js";
+export * from "./DeleteButton.js";
+export * from "./DeleteIconButton.js";
+export * from "./RefreshButton.js";
+export * from "./RefreshIconButton.js";
+export * from "./RefreshRowIconButton.js";
+export * from "./SaveButton.js";
+export * from "./SaveIconButton.js";

package/es/binding/index.js

@@ -0,0 +1,19 @@
+export * from "./BoundCheckbox.js";
+export * from "./BoundDatePicker.js";
+export * from "./BoundDateTimePicker.js";
+export * from "./BoundInput.js";
+export * from "./BoundNumericTextField.js";
+export * from "./BoundSelect.js";
+export * from "./BoundSwitch.js";
+export * from "./BoundTextField.js";
+export * from "./CancelButton.js";
+export * from "./CancelIconButton.js";
+export * from "./DataEditToolbar.js";
+export * from "./DataObjectSelect.js";
+export * from "./DeleteButton.js";
+export * from "./DeleteIconButton.js";
+export * from "./RefreshButton.js";
+export * from "./RefreshIconButton.js";
+export * from "./RefreshRowIconButton.js";
+export * from "./SaveButton.js";
+export * from "./SaveIconButton.js";

package/es/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AfLookup/index.js";
+export * from "./binding/index.js";
+export * from "./layout/index.js";

package/es/index.js

@@ -0,0 +1,3 @@
+export * from "./AfLookup/index.js";
+export * from "./binding/index.js";
+export * from "./layout/index.js";