@j2inn/fin5-ui-utils 3.0.6 → 4.0.0

package/dist/react/components/navigation/customRouting/Router.js

@@ -1,46 +1,46 @@
-"use strict";
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Router = void 0;
-const react_1 = __importStar(require("react"));
-const LoadingSpinner_1 = require("../../LoadingSpinner");
-const MenuPage_1 = require("../MenuPage");
-/**
- * Renders the currently selected page from a tree of pages
- */
-function Router({ pages = [], currentPage, onPageChange, fallbackComponent, }) {
-    const page = (0, react_1.useMemo)(() => (0, MenuPage_1.findPageByName)(pages, currentPage), [pages, currentPage]);
-    (0, react_1.useEffect)(() => {
-        onPageChange?.(page);
-    }, [page]);
-    return page?.component ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null) }, react_1.default.createElement(page.component, page?.props))) : (fallbackComponent ?? react_1.default.createElement("div", null,
-        currentPage,
-        " page not found"));
-}
-exports.Router = Router;
+"use strict";
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Router = void 0;
+const react_1 = __importStar(require("react"));
+const LoadingSpinner_1 = require("../../LoadingSpinner");
+const MenuPage_1 = require("../MenuPage");
+/**
+ * Renders the currently selected page from a tree of pages
+ */
+function Router({ pages = [], currentPage, onPageChange, fallbackComponent, }) {
+    const page = (0, react_1.useMemo)(() => (0, MenuPage_1.findPageByName)(pages, currentPage), [pages, currentPage]);
+    (0, react_1.useEffect)(() => {
+        onPageChange?.(page);
+    }, [page]);
+    return page?.component ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null) }, react_1.default.createElement(page.component, page?.props))) : (fallbackComponent ?? react_1.default.createElement("div", null,
+        currentPage,
+        " page not found"));
+}
+exports.Router = Router;
 //# sourceMappingURL=Router.js.map

package/dist/react/components/navigation/customRouting/RouterLayout.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { BasicLayoutProps } from '../BasicLayout';
-import { MenuPage } from '../MenuPage';
-export interface RouterLayoutProps extends BasicLayoutProps<MenuPage> {
-    page?: string;
-    onPageChange?: (page: string) => void;
-}
-/**
- * Basic layout that uses a custom router.
- */
-export declare const RouterLayout: React.FC<RouterLayoutProps>;
+import React from 'react';
+import { BasicLayoutProps } from '../BasicLayout';
+import { MenuPage } from '../MenuPage';
+export interface RouterLayoutProps extends BasicLayoutProps<MenuPage> {
+    page?: string;
+    onPageChange?: (page: string) => void;
+}
+/**
+ * Basic layout that uses a custom router.
+ */
+export declare const RouterLayout: React.FC<RouterLayoutProps>;

package/dist/react/components/navigation/customRouting/RouterLayout.js

@@ -1,62 +1,62 @@
-"use strict";
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RouterLayout = void 0;
-const ui_1 = require("@j2inn/ui");
-const react_1 = __importStar(require("react"));
-const ErrorDisplayer_1 = require("../../ErrorDisplayer");
-const BasicLayout_1 = require("../BasicLayout");
-const MenuPage_1 = require("../MenuPage");
-const Router_1 = require("./Router");
-/**
- * Basic layout that uses a custom router.
- */
-const RouterLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, page, ...otherProps }) => {
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(page ?? defaultPage);
-    (0, react_1.useEffect)(() => {
-        if (page) {
-            setCurrentPage(page);
-        }
-    }, [page]);
-    // Fire onChange
-    (0, react_1.useEffect)(() => {
-        onPageChange?.(currentPage);
-    }, [currentPage]);
-    const onSelect = (0, react_1.useCallback)((key) => {
-        const page = (0, MenuPage_1.findPageByName)(pages, key);
-        if (page?.component) {
-            setCurrentPage(key);
-        }
-    }, [pages]);
-    return (react_1.default.createElement(BasicLayout_1.BasicLayout, { ...otherProps, pages: pages, defaultPage: defaultPage, onSelect: onSelect, selectedPages: [currentPage] },
-        react_1.default.createElement(Router_1.Router, { pages: pages, currentPage: currentPage, fallbackComponent: react_1.default.createElement(ErrorDisplayer_1.ErrorDisplayer, { error: new Error('Page Not Found'), extra: [
-                    react_1.default.createElement(ui_1.Button, { type: 'primary', key: 'refresh', onClick: () => setCurrentPage(defaultPage) }, "Go Home"),
-                ] }) })));
-};
-exports.RouterLayout = RouterLayout;
+"use strict";
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterLayout = void 0;
+const ui_1 = require("@j2inn/ui");
+const react_1 = __importStar(require("react"));
+const ErrorDisplayer_1 = require("../../ErrorDisplayer");
+const BasicLayout_1 = require("../BasicLayout");
+const MenuPage_1 = require("../MenuPage");
+const Router_1 = require("./Router");
+/**
+ * Basic layout that uses a custom router.
+ */
+const RouterLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, page, ...otherProps }) => {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(page ?? defaultPage);
+    (0, react_1.useEffect)(() => {
+        if (page) {
+            setCurrentPage(page);
+        }
+    }, [page]);
+    // Fire onChange
+    (0, react_1.useEffect)(() => {
+        onPageChange?.(currentPage);
+    }, [currentPage]);
+    const onSelect = (0, react_1.useCallback)((key) => {
+        const page = (0, MenuPage_1.findPageByName)(pages, key);
+        if (page?.component) {
+            setCurrentPage(key);
+        }
+    }, [pages]);
+    return (react_1.default.createElement(BasicLayout_1.BasicLayout, { ...otherProps, pages: pages, defaultPage: defaultPage, onSelect: onSelect, selectedPages: [currentPage] },
+        react_1.default.createElement(Router_1.Router, { pages: pages, currentPage: currentPage, fallbackComponent: react_1.default.createElement(ErrorDisplayer_1.ErrorDisplayer, { error: new Error('Page Not Found'), extra: [
+                    react_1.default.createElement(ui_1.Button, { type: 'primary', key: 'refresh', onClick: () => setCurrentPage(defaultPage) }, "Go Home"),
+                ] }) })));
+};
+exports.RouterLayout = RouterLayout;
 //# sourceMappingURL=RouterLayout.js.map

package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts

@@ -1,27 +1,27 @@
-/// <reference types="react" />
-import { ParametersOfSection, UiElementData } from '@j2inn/resolvable-ui-elements';
-import { HDict } from 'haystack-core';
-declare type Layout = 'horizontal' | 'vertical';
-interface ConfigurationFormProps<T extends UiElementData> {
-    section: T;
-    params: ParametersOfSection<T>;
-    readOnlySection?: UiElementData;
-    onSave: (config: HDict) => void | Promise<unknown>;
-    saveText?: string;
-    formatKey?: (key: string) => string;
-    options?: HDict;
-    layout?: Layout;
-    className?: string;
-    entryClassName?: string;
-    saveBtnClassName?: string;
-    animateSaveButton?: boolean;
-}
-export declare const ConfigurationForm: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout, className, entryClassName, saveBtnClassName, animateSaveButton, }: ConfigurationFormProps<T>) => JSX.Element;
-interface ConfigurationFormReadOnlyEntriesProps<T extends UiElementData> {
-    params: ParametersOfSection<T>;
-    readOnlySection: T;
-    formatKey?: (key: string) => string;
-    className?: string;
-}
-export declare const ConfigurationFormReadOnlyEntries: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ readOnlySection, params, formatKey, className, }: ConfigurationFormReadOnlyEntriesProps<T>) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { ParametersOfSection, UiElementData } from '@j2inn/resolvable-ui-elements';
+import { HDict } from 'haystack-core';
+declare type Layout = 'horizontal' | 'vertical';
+interface ConfigurationFormProps<T extends UiElementData> {
+    section: T;
+    params: ParametersOfSection<T>;
+    readOnlySection?: UiElementData;
+    onSave: (config: HDict) => void | Promise<unknown>;
+    saveText?: string;
+    formatKey?: (key: string) => string;
+    options?: HDict;
+    layout?: Layout;
+    className?: string;
+    entryClassName?: string;
+    saveBtnClassName?: string;
+    animateSaveButton?: boolean;
+}
+export declare const ConfigurationForm: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout, className, entryClassName, saveBtnClassName, animateSaveButton, }: ConfigurationFormProps<T>) => JSX.Element;
+interface ConfigurationFormReadOnlyEntriesProps<T extends UiElementData> {
+    params: ParametersOfSection<T>;
+    readOnlySection: T;
+    formatKey?: (key: string) => string;
+    className?: string;
+}
+export declare const ConfigurationFormReadOnlyEntries: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ readOnlySection, params, formatKey, className, }: ConfigurationFormReadOnlyEntriesProps<T>) => JSX.Element;
+export {};

package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js

@@ -1,96 +1,96 @@
-"use strict";
-/*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigurationFormReadOnlyEntries = exports.ConfigurationForm = void 0;
-const resolvable_ui_elements_1 = require("@j2inn/resolvable-ui-elements");
-const ui_1 = require("@j2inn/ui");
-const classnames_1 = __importDefault(require("classnames"));
-const haystack_core_1 = require("haystack-core");
-const react_1 = __importStar(require("react"));
-const react_jss_1 = require("react-jss");
-const ConfigurationFormEntry_1 = require("./ConfigurationFormEntry");
-const getSectionDefault_1 = require("./getSectionDefault");
-const useStyles = (0, react_jss_1.createUseStyles)({
-    formGrid: ({ layout }) => ({
-        display: 'grid',
-        gridTemplateColumns: layout === 'horizontal' ? '1fr 1fr' : '1fr',
-        gap: '0.5em 2em',
-    }),
-    saveButtonRow: ({ layout }) => ({
-        gridColumn: layout === 'horizontal' ? 'span 2' : 'span 1',
-        transition: 'transform 0.75s, max-height 0.75s, opacity 0.75s',
-        maxHeight: 200,
-        transform: 'scaleY(1)',
-        marginTop: '1em',
-    }),
-    saveButtonRowNotVisible: {
-        transform: 'scaleY(0)',
-        maxHeight: 0,
-        opacity: 0,
-    },
-    saveButton: {
-        transition: 'all 0.75s',
-        width: 120,
-        float: 'right',
-    },
-});
-const ConfigurationForm = ({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout = 'horizontal', className, entryClassName, saveBtnClassName, animateSaveButton = true, }) => {
-    const classes = useStyles({ layout });
-    const [resolvedSection] = (0, resolvable_ui_elements_1.useResolveSection)(section, params);
-    const entries = (0, react_1.useMemo)(() => (0, getSectionDefault_1.getSectionDefault)(section), [section]);
-    const [changes, setChanges] = (0, react_1.useState)();
-    const [canSave, setCanSave] = (0, react_1.useState)(false);
-    const [isSaving, setIsSaving] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.formGrid, className) },
-        Object.entries(entries).map(([key, defaultValue]) => (react_1.default.createElement(ConfigurationFormEntry_1.ConfigurationFormEntry, { key: key, options: options?.get(key), name: formatKey ? formatKey(key) : key, value: resolvedSection[key] ?? defaultValue, onChange: (val) => {
-                setChanges({ ...changes, [key]: val });
-                setCanSave(true);
-            }, className: entryClassName }))),
-        readOnlySection && (react_1.default.createElement(exports.ConfigurationFormReadOnlyEntries, { readOnlySection: readOnlySection, formatKey: formatKey, params: params, className: entryClassName })),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.saveButtonRow, {
-                [classes.saveButtonRowNotVisible]: animateSaveButton && !canSave,
-            }) },
-            react_1.default.createElement(ui_1.Button, { disabled: !canSave, className: (0, classnames_1.default)(classes.saveButton, saveBtnClassName), type: 'primary', loading: isSaving, onClick: async () => {
-                    setIsSaving(true);
-                    await onSave(haystack_core_1.HDict.make(changes));
-                    setChanges(undefined); // Reset changes dict
-                    setIsSaving(false);
-                    setCanSave(false);
-                } }, saveText ?? 'Save'))));
-};
-exports.ConfigurationForm = ConfigurationForm;
-const ConfigurationFormReadOnlyEntries = ({ readOnlySection, params, formatKey, className, }) => {
-    const [resolvedReadOnlySection] = (0, resolvable_ui_elements_1.useResolveSection)(readOnlySection, params);
-    return (react_1.default.createElement(react_1.default.Fragment, null, resolvedReadOnlySection &&
-        Object.entries(resolvedReadOnlySection).map(([key, value]) => (react_1.default.createElement(ConfigurationFormEntry_1.ConfigurationFormEntry, { key: key, name: formatKey ? formatKey(key) : key, disabled: true, value: value, className: className })))));
-};
-exports.ConfigurationFormReadOnlyEntries = ConfigurationFormReadOnlyEntries;
+"use strict";
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurationFormReadOnlyEntries = exports.ConfigurationForm = void 0;
+const resolvable_ui_elements_1 = require("@j2inn/resolvable-ui-elements");
+const ui_1 = require("@j2inn/ui");
+const classnames_1 = __importDefault(require("classnames"));
+const haystack_core_1 = require("haystack-core");
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const ConfigurationFormEntry_1 = require("./ConfigurationFormEntry");
+const getSectionDefault_1 = require("./getSectionDefault");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    formGrid: ({ layout }) => ({
+        display: 'grid',
+        gridTemplateColumns: layout === 'horizontal' ? '1fr 1fr' : '1fr',
+        gap: '0.5em 2em',
+    }),
+    saveButtonRow: ({ layout }) => ({
+        gridColumn: layout === 'horizontal' ? 'span 2' : 'span 1',
+        transition: 'transform 0.75s, max-height 0.75s, opacity 0.75s',
+        maxHeight: 200,
+        transform: 'scaleY(1)',
+        marginTop: '1em',
+    }),
+    saveButtonRowNotVisible: {
+        transform: 'scaleY(0)',
+        maxHeight: 0,
+        opacity: 0,
+    },
+    saveButton: {
+        transition: 'all 0.75s',
+        width: 120,
+        float: 'right',
+    },
+});
+const ConfigurationForm = ({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout = 'horizontal', className, entryClassName, saveBtnClassName, animateSaveButton = true, }) => {
+    const classes = useStyles({ layout });
+    const [resolvedSection] = (0, resolvable_ui_elements_1.useResolveSection)(section, params);
+    const entries = (0, react_1.useMemo)(() => (0, getSectionDefault_1.getSectionDefault)(section), [section]);
+    const [changes, setChanges] = (0, react_1.useState)();
+    const [canSave, setCanSave] = (0, react_1.useState)(false);
+    const [isSaving, setIsSaving] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.formGrid, className) },
+        Object.entries(entries).map(([key, defaultValue]) => (react_1.default.createElement(ConfigurationFormEntry_1.ConfigurationFormEntry, { key: key, options: options?.get(key), name: formatKey ? formatKey(key) : key, value: resolvedSection[key] ?? defaultValue, onChange: (val) => {
+                setChanges({ ...changes, [key]: val });
+                setCanSave(true);
+            }, className: entryClassName }))),
+        readOnlySection && (react_1.default.createElement(exports.ConfigurationFormReadOnlyEntries, { readOnlySection: readOnlySection, formatKey: formatKey, params: params, className: entryClassName })),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.saveButtonRow, {
+                [classes.saveButtonRowNotVisible]: animateSaveButton && !canSave,
+            }) },
+            react_1.default.createElement(ui_1.Button, { disabled: !canSave, className: (0, classnames_1.default)(classes.saveButton, saveBtnClassName), type: 'primary', loading: isSaving, onClick: async () => {
+                    setIsSaving(true);
+                    await onSave(haystack_core_1.HDict.make(changes));
+                    setChanges(undefined); // Reset changes dict
+                    setIsSaving(false);
+                    setCanSave(false);
+                } }, saveText ?? 'Save'))));
+};
+exports.ConfigurationForm = ConfigurationForm;
+const ConfigurationFormReadOnlyEntries = ({ readOnlySection, params, formatKey, className, }) => {
+    const [resolvedReadOnlySection] = (0, resolvable_ui_elements_1.useResolveSection)(readOnlySection, params);
+    return (react_1.default.createElement(react_1.default.Fragment, null, resolvedReadOnlySection &&
+        Object.entries(resolvedReadOnlySection).map(([key, value]) => (react_1.default.createElement(ConfigurationFormEntry_1.ConfigurationFormEntry, { key: key, name: formatKey ? formatKey(key) : key, disabled: true, value: value, className: className })))));
+};
+exports.ConfigurationFormReadOnlyEntries = ConfigurationFormReadOnlyEntries;
 //# sourceMappingURL=ConfigurationForm.js.map

package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { HDict, HGrid, HNum, HRef, HStr, HVal } from 'haystack-core';
-export interface ConfigurationFormEntryOption extends HDict {
-    value: HStr | HNum | HRef;
-    label: HStr;
-}
-interface ConfigurationFormEntryProps {
-    name: string;
-    value: HVal | unknown;
-    onChange?: (val: HVal) => void;
-    disabled?: boolean;
-    options?: HGrid<ConfigurationFormEntryOption>;
-    className?: string;
-}
-export declare const ConfigurationFormEntry: ({ name, value, onChange, disabled, options, className, }: ConfigurationFormEntryProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { HDict, HGrid, HNum, HRef, HStr, HVal } from 'haystack-core';
+export interface ConfigurationFormEntryOption extends HDict {
+    value: HStr | HNum | HRef;
+    label: HStr;
+}
+interface ConfigurationFormEntryProps {
+    name: string;
+    value: HVal | unknown;
+    onChange?: (val: HVal) => void;
+    disabled?: boolean;
+    options?: HGrid<ConfigurationFormEntryOption>;
+    className?: string;
+}
+export declare const ConfigurationFormEntry: ({ name, value, onChange, disabled, options, className, }: ConfigurationFormEntryProps) => JSX.Element;
+export {};