xmlui 0.9.21 → 0.9.25

package/dist/scripts/src/components/Form/FormContext.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formControlTypesMd = exports.formControlTypes = exports.FormContext = exports.validationModeMd = exports.defaultValidationMode = exports.validationModeValues = exports.validationSeverityMd = exports.validationSeverityValues = void 0;
-exports.useFormContext = useFormContext;
 exports.useFormContextPart = useFormContextPart;
 const use_context_selector_1 = require("use-context-selector");
 exports.validationSeverityValues = ["error", "warning", "valid", "none"];
@@ -28,9 +27,6 @@ exports.validationModeMd = [
     }
 ];
 exports.FormContext = (0, use_context_selector_1.createContext)(undefined);
-function useFormContext() {
-    return (0, use_context_selector_1.useContext)(exports.FormContext);
-}
 function useFormContextPart(selector) {
     return (0, use_context_selector_1.useContextSelector)(exports.FormContext, selector);
 }
@@ -52,6 +48,7 @@ exports.formControlTypes = [
     "switch",
     "slider",
     "colorpicker",
+    "items",
 ];
 exports.formControlTypesMd = [
     {
@@ -110,6 +107,10 @@ exports.formControlTypesMd = [
         value: "colorpicker",
         description: "Renders ColorPicker",
     },
+    {
+        value: "items",
+        description: "Renders Items",
+    },
     {
         value: "custom",
         description: "Custom control specified in children",

package/dist/scripts/src/components/Form/FormNative.js

@@ -16,7 +16,6 @@ exports.defaultProps = exports.getByPath = void 0;
 exports.FormWithContextVar = FormWithContextVar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
 const react_dom_1 = require("react-dom");
 const immer_1 = __importDefault(require("immer"));
 const Form_module_scss_1 = __importDefault(require("./Form.module.scss"));
@@ -32,27 +31,9 @@ const ValidationSummary_1 = require("../ValidationSummary/ValidationSummary");
 const Validations_1 = require("../FormItem/Validations");
 const formActions_2 = require("../Form/formActions");
 const FormContext_1 = require("./FormContext");
-const setByPath = (obj, path, val) => {
-    const keys = path.split(".");
-    for (let i = 0; i < keys.length; i++) {
-        const currentKey = keys[i];
-        const nextKey = keys[i + 1];
-        if (typeof nextKey !== "undefined") {
-            obj[currentKey] = obj[currentKey] ? obj[currentKey] : {};
-        }
-        else {
-            obj[currentKey] = val;
-        }
-        obj = obj[currentKey];
-    }
-};
+const lodash_es_1 = require("lodash-es");
 const getByPath = (obj, path) => {
-    const keys = path.split(".");
-    let ret = obj;
-    for (let i = 0; i < keys.length; i++) {
-        ret = ret === null || ret === void 0 ? void 0 : ret[keys[i]];
-    }
-    return ret;
+    return (0, lodash_es_1.get)(obj, path);
 };
 exports.getByPath = getByPath;
 const formReducer = (0, immer_1.default)((state, action) => {
@@ -71,16 +52,17 @@ const formReducer = (0, immer_1.default)((state, action) => {
     switch (action.type) {
         case formActions_1.FormActionKind.FIELD_INITIALIZED: {
             if (!state.interactionFlags[uid].isDirty || action.payload.force) {
-                setByPath(state.subject, uid, action.payload.value);
+                (0, lodash_es_1.set)(state.subject, uid, action.payload.value);
             }
             break;
         }
         case formActions_1.FormActionKind.FIELD_REMOVED: {
             delete state.validationResults[uid];
+            delete state.interactionFlags[uid];
             break;
         }
         case formActions_1.FormActionKind.FIELD_VALUE_CHANGED: {
-            setByPath(state.subject, uid, action.payload.value);
+            (0, lodash_es_1.set)(state.subject, uid, action.payload.value);
             state.interactionFlags[uid].isDirty = true;
             state.interactionFlags[uid].forceShowValidationResult = false;
             break;
@@ -170,6 +152,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
             return Object.assign(Object.assign({}, initialState), { subject: originalSubject, resetVersion: ((_e = state.resetVersion) !== null && _e !== void 0 ? _e : 0) + 1 });
         }
         default:
+            break;
     }
 });
 const initialState = {
@@ -188,13 +171,22 @@ exports.defaultProps = {
     itemLabelBreak: true,
     keepModalOpenOnSubmit: false,
 };
-const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = "Cancel", saveLabel = "Save", saveInProgressLabel = "Saving...", swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = true, itemLabelWidth, itemLabelPosition = "top", keepModalOpenOnSubmit = false, }, ref) {
+// --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
+function cleanUpSubject(subject) {
+    return Object.entries(subject || {}).reduce((acc, [key, value]) => {
+        if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX)) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+}
+const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = "Cancel", saveLabel = "Save", saveInProgressLabel = "Saving...", swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = true, itemLabelWidth, itemLabelPosition = "top", keepModalOpenOnSubmit = false, }, ref) {
     const formRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
-    const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
+    const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_1.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
     const isEnabled = enabled && !formState.submitInProgress;
-    const formContextValue = (0, react_2.useMemo)(() => {
+    const formContextValue = (0, react_1.useMemo)(() => {
         return {
             itemLabelBreak,
             itemLabelWidth,
@@ -203,7 +195,6 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             originalSubject: initialValue,
             validationResults: formState.validationResults,
             interactionFlags: formState.interactionFlags,
-            resetVersion: formState.resetVersion,
             dispatch,
             enabled: isEnabled,
         };
@@ -212,7 +203,6 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         formState.interactionFlags,
         formState.subject,
         formState.validationResults,
-        formState.resetVersion,
         initialValue,
         isEnabled,
         itemLabelBreak,
@@ -242,13 +232,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         const prevFocused = document.activeElement;
         dispatch((0, formActions_1.formSubmitting)());
         try {
-            // --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
-            const filteredSubject = Object.entries(formState.subject).reduce((acc, [key, value]) => {
-                if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX)) {
-                    acc[key] = value;
-                }
-                return acc;
-            }, {});
+            const filteredSubject = cleanUpSubject(formState.subject);
             yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
                 passAsDefaultBody: true,
             }));
@@ -323,19 +307,19 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         });
     });
     const cancelButton = cancelLabel === "" ? null : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "button", themeColor: "secondary", variant: "ghost", onClick: doCancel, children: cancelLabel }, "cancel"));
-    const submitButton = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "submit", disabled: !isEnabled, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, formState.submitInProgress, saveInProgressLabel, saveLabel]);
-    (0, react_2.useEffect)(() => {
+    const submitButton = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "submit", disabled: !isEnabled, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, formState.submitInProgress, saveInProgressLabel, saveLabel]);
+    (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             reset: doReset,
             update: updateData,
         });
     }, [doReset, updateData, registerComponentApi]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }, formState.resetVersion), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
 });
 Form.displayName = "Form";
 function FormWithContextVar({ node, renderChild, extractValue, style, lookupEventHandler, registerComponentApi, }) {
-    const [formState, dispatch] = (0, react_2.useReducer)(formReducer, initialState);
-    const nodeWithItem = (0, react_2.useMemo)(() => {
+    const [formState, dispatch] = (0, react_1.useReducer)(formReducer, initialState);
+    const $data = (0, react_1.useMemo)(() => {
         const updateData = (change) => {
             if (typeof change !== "object" || change === null || change === undefined) {
                 return;
@@ -350,14 +334,17 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
                 });
             });
         };
+        return Object.assign(Object.assign({}, cleanUpSubject(formState.subject)), { update: updateData });
+    }, [formState.subject]);
+    const nodeWithItem = (0, react_1.useMemo)(() => {
         return {
             type: "Fragment",
             vars: {
-                $data: Object.assign(Object.assign({}, formState.subject), { update: updateData }),
+                $data: $data,
             },
             children: node.children,
         };
-    }, [formState.subject, node.children]);
+    }, [$data, node.children]);
     const initialValue = extractValue(node.props.data);
     const submitMethod = extractValue.asOptionalString(node.props.submitMethod) || (initialValue ? "put" : "post");
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
@@ -366,6 +353,17 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
             defaultHandler: submitUrl
                 ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs })`
                 : undefined,
-        }), onCancel: lookupEventHandler("cancel"), onReset: lookupEventHandler("reset"), initialValue: initialValue, buttonRow: renderChild(node.props.buttonRowTemplate), registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, true) &&
+            context: {
+                $data,
+            },
+        }), onCancel: lookupEventHandler("cancel", {
+            context: {
+                $data,
+            },
+        }), onReset: lookupEventHandler("reset", {
+            context: {
+                $data,
+            },
+        }), initialValue: initialValue, buttonRow: renderChild(node.props.buttonRowTemplate), registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, true) &&
             !extractValue.asOptionalBoolean(node.props.loading, false), children: renderChild(nodeWithItem) }));
 }

package/dist/scripts/src/components/Form/formActions.js

@@ -42,7 +42,7 @@ function fieldChanged(uid, value) {
         type: FormActionKind.FIELD_VALUE_CHANGED,
         payload: {
             uid,
-            value,
+            value
         },
     };
 }

package/dist/scripts/src/components/FormItem/FormItem.js

@@ -151,6 +151,9 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         inputTemplate: {
             description: "This property is used to define a custom input template.",
         },
+        gap: {
+            description: "This property defines the gap between the adornments and the input area.",
+        },
     },
     events: {
         validate: (0, ComponentDefs_1.d)(`This event is used to define a custom validation function.`),
@@ -174,7 +177,7 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
 });
 exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormItemMd, ({ node, renderChild, extractValue, layoutCss, layoutContext, lookupEventHandler, lookupAction, registerComponentApi, }) => {
     var _a;
-    const _b = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength } = _b, rest = __rest(_b, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength"]);
+    const _b = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength, gap } = _b, rest = __rest(_b, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength", "gap"]);
     //extractValue works as a memoization mechanism too (if there's nothing to resolve, it won't produce a new object every time)
     const resolvedValidationPropsAndEvents = extractValue({
         required: extractValue.asOptionalBoolean(required),
@@ -203,9 +206,9 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const formItemType = extractValue.asOptionalString(type);
     const isCustomFormItem = formItemType === undefined && !!node.children;
     const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
-    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), inputRenderer: inputTemplate
+    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
-            : undefined }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(FormItemNative_1.CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children, {
+            : undefined, gap: extractValue.asOptionalString(gap) }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(FormItemNative_1.CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children, {
             type: formItemType,
         })) })));
 });

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -36,6 +36,8 @@ const SliderNative_1 = require("../Slider/SliderNative");
 const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
 const HelperText_1 = require("./HelperText");
 const NumberBox2Native_1 = require("../NumberBox/NumberBox2Native");
+const ItemsNative_1 = require("../Items/ItemsNative");
+const constants_1 = require("../../components-core/constants");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
@@ -45,32 +47,63 @@ exports.defaultProps = {
     enabled: true,
     customValidationsDebounce: 0,
 };
+const FormItemContext = (0, react_1.createContext)({ parentFormItemId: null });
+function ArrayLikeFormItem({ children, formItemId, registerComponentApi, value = constants_1.EMPTY_ARRAY, updateState, }) {
+    const formContextValue = (0, react_1.useMemo)(() => {
+        return {
+            parentFormItemId: formItemId,
+        };
+    }, [formItemId]);
+    const addItem = (0, misc_1.useEvent)((item) => {
+        updateState({ value: [...value, item] });
+    });
+    const removeItem = (0, misc_1.useEvent)((index) => {
+        updateState({ value: value.filter((item, i) => i !== index) });
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            addItem: addItem,
+            removeItem: removeItem,
+        });
+    }, [addItem, registerComponentApi, removeItem]);
+    return (0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: formContextValue, children: children });
+}
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
-    var _b;
-    var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
+    var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps, gap } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue", "gap"]);
     const defaultId = (0, react_1.useId)();
-    const [formItemId, setFormItemId] = (0, react_1.useState)(bindTo);
+    const { parentFormItemId } = (0, react_1.useContext)(FormItemContext);
+    const formItemId = (0, react_1.useMemo)(() => {
+        const safeBindTo = bindTo || `${defaultId}${formActions_1.UNBOUND_FIELD_SUFFIX}`;
+        if (parentFormItemId) {
+            if (itemIndex !== undefined) {
+                let parentFieldReference = `${parentFormItemId}[${itemIndex}]`;
+                if (bindTo !== undefined && bindTo.trim() === "") {
+                    return parentFieldReference;
+                }
+                else {
+                    return `${parentFieldReference}.${safeBindTo}`;
+                }
+            }
+        }
+        else {
+            return safeBindTo;
+        }
+    }, [bindTo, defaultId, itemIndex, parentFormItemId]);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
     const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
     const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
-    const resetVersion = (_b = (0, FormContext_1.useFormContext)()) === null || _b === void 0 ? void 0 : _b.resetVersion;
     const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
-    const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
+    const initialValue = initialValueFromSubject === undefined ? initialValueFromProps : initialValueFromSubject;
     const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
     const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[formItemId]);
     const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
     const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value.enabled);
     const isEnabled = enabled && formEnabled;
     (0, react_1.useEffect)(() => {
-        const newId = bindTo || `${defaultId}${formActions_1.UNBOUND_FIELD_SUFFIX}`;
-        setFormItemId(newId);
-        dispatch((0, formActions_1.fieldInitialized)(newId, initialValue));
-    }, [bindTo, dispatch, initialValue]);
-    (0, react_1.useEffect)(() => {
-        if (resetVersion) {
-            dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue, true));
+        if (initialValue !== undefined) {
+            dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue));
         }
-    }, [resetVersion, formItemId, initialValue, dispatch]);
+    }, [dispatch, formItemId, initialValue]);
     (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
     const onStateChange = (0, react_1.useCallback)(({ value }, options) => {
         //we already handled the initial value in the useEffect with fieldInitialized(...);
@@ -108,7 +141,7 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         }
         case "number":
         case "integer": {
-            formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
             break;
         }
         // NOTE: This is a prototype for the new number field
@@ -131,7 +164,8 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             break;
         }
         case "text": {
-            formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            console.log("gap", gap);
+            formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
             break;
         }
         case "password": {
@@ -150,6 +184,10 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             formControl = ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus })));
             break;
         }
+        case "items": {
+            formControl = ((0, jsx_runtime_1.jsx)(ArrayLikeFormItem, { formItemId: formItemId, registerComponentApi: registerComponentApi, updateState: onStateChange, value: value, children: (0, jsx_runtime_1.jsx)(ItemsNative_1.Items, { items: value, renderItem: inputRenderer }) }));
+            break;
+        }
         case "custom": {
             formControl = children;
             break;
@@ -171,6 +209,9 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
                 (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations.map((singleValidation, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [singleValidation.isValid && !!singleValidation.validMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.validMessage, status: "valid", style: { opacity: singleValidation.stale ? 0.5 : undefined } })), !singleValidation.isValid && !!singleValidation.invalidMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.invalidMessage, status: singleValidation.severity, style: { opacity: singleValidation.stale ? 0.5 : undefined } }))] }, i)))) }), children: formControl }));
 });
 function CustomFormItem({ renderChild, node, bindTo, }) {
+    // IMPORTANT NOTE:
+    //  why we use useFormContextPart, and not useFormContext?
+    //  because we want to avoid re-rendering the whole form when the form state changes.
     const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, bindTo));
     const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[bindTo]);
     const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);

package/dist/scripts/src/components/FormItem/ItemWithLabel.js

@@ -14,7 +14,7 @@ const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, labelPosition = "top", style, label, labelBreak = true, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false, }, ref) {
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
-    if (label === undefined) {
+    if (label === undefined && !validationResult) {
         return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { style: style, id: inputId, ref: ref, children: children }));
         // return cloneElement(children as ReactElement, {
         //   ...mergeProps((children as ReactElement).props, {

package/dist/scripts/src/components/Heading/Heading.js

@@ -84,6 +84,9 @@ exports.H1Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H1}`]: "$fontSize-large",
         [`marginTop-${H1}`]: "0",
         [`marginBottom-${H1}`]: "0",
+        [`fontSize-${H1}-markdown`]: "$fontSize-larger",
+        [`marginTop-${H1}-markdown`]: "0",
+        [`marginBottom-${H1}-markdown`]: "$space-6",
         light: {
         // --- No light-specific theme vars
         },
@@ -106,6 +109,8 @@ exports.H2Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H2}`]: "$fontSize-medium",
         [`marginTop-${H2}`]: "0",
         [`marginBottom-${H2}`]: "0",
+        [`marginTop-${H2}-markdown`]: "$space-10",
+        [`marginBottom-${H2}-markdown`]: "$space-3",
         light: {
         // --- No light-specific theme vars
         },
@@ -128,6 +133,8 @@ exports.H3Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H3}`]: "$fontSize-normal",
         [`marginTop-${H3}`]: "0",
         [`marginBottom-${H3}`]: "0",
+        [`marginTop-${H3}-markdown`]: "$space-6",
+        [`marginBottom-${H3}-markdown`]: "$space-2",
         light: {
         // --- No light-specific theme vars
         },
@@ -150,6 +157,8 @@ exports.H4Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H4}`]: "$fontSize-small",
         [`marginTop-${H4}`]: "0",
         [`marginBottom-${H4}`]: "0",
+        [`marginTop-${H4}-markdown`]: "$space-5",
+        [`marginBottom-${H4}-markdown`]: "$space-1",
         light: {
         // --- No light-specific theme vars
         },
@@ -172,6 +181,8 @@ exports.H5Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H5}`]: "$fontSize-smaller",
         [`marginTop-${H5}`]: "0",
         [`marginBottom-${H5}`]: "0",
+        [`marginTop-${H5}-markdown`]: "0",
+        [`marginBottom-${H5}-markdown`]: "$space-0",
         light: {
         // --- No light-specific theme vars
         },
@@ -194,6 +205,8 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H6}`]: "$fontSize-tiny",
         [`marginTop-${H6}`]: "0",
         [`marginBottom-${H6}`]: "0",
+        [`marginTop-${H6}-markdown`]: "0",
+        [`marginBottom-${H6}-markdown`]: "$space-0",
         light: {
         // --- No light-specific theme vars
         },

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -59,5 +59,5 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
             [Heading_module_scss_1.default.truncateOverflow]: maxLines > 0,
             [Heading_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
             [Heading_module_scss_1.default.noEllipsis]: !ellipses,
-        }) }, furtherProps, { children: [anchorId && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 }, "data-anchor": true })), children] })));
+        }) }, furtherProps, { children: [anchorId && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, className: Heading_module_scss_1.default.anchorRef, "data-anchor": true })), children] })));
 });

package/dist/scripts/src/components/HtmlTags/HtmlTags.js

@@ -655,7 +655,7 @@ exports.HtmlImgMd = (0, ComponentDefs_1.createMetadata)({
         loading: (0, ComponentDefs_1.d)("Specifies the loading behavior of the image"),
         referrerPolicy: (0, ComponentDefs_1.d)("Specifies the referrer policy for the image"),
         sizes: (0, ComponentDefs_1.d)("Specifies image sizes for different page layouts"),
-    },
+    }
 });
 exports.htmlImgTagRenderer = (0, renderers_1.createComponentRenderer)("img", exports.HtmlImgMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
@@ -750,6 +750,10 @@ exports.HtmlLiMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: (0, ComponentDefs_1.d)("Specifies the value of the list item (if the parent is an ordered list)"),
     },
+    defaultThemeVars: {
+        "marginLeft-HtmlLi": "$space-6",
+        "paddingLeft-HtmlLi": "$space-1",
+    }
 });
 exports.htmlLiTagRenderer = (0, renderers_1.createComponentRenderer)("li", exports.HtmlLiMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
@@ -1362,8 +1366,8 @@ exports.HtmlUlMd = (0, ComponentDefs_1.createMetadata)({
     isHtmlTag: true,
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsList), // Use only themeVarsList
     defaultThemeVars: {
-        "marginTop-HtmlUl": "$space-4",
-        "marginBottom-HtmlUl": "$space-4",
+        "marginTop-HtmlUl": "$space-2",
+        "marginBottom-HtmlUl": "$space-2",
     },
 });
 exports.htmlUlTagRenderer = (0, renderers_1.createComponentRenderer)("ul", exports.HtmlUlMd, // Use HtmlOlMd instead of HtmlListMd

package/dist/scripts/src/components/Icon/DarkToLightIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkToLightIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dark_to_light_svg_react_1 = __importDefault(require("./svg/dark_to_light.svg?react"));
+const DarkToLightIcon = (props) => ((0, jsx_runtime_1.jsx)(dark_to_light_svg_react_1.default, Object.assign({}, props)));
+exports.DarkToLightIcon = DarkToLightIcon;

package/dist/scripts/src/components/Icon/LightToDark.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightToDarkIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const light_to_dark_svg_react_1 = __importDefault(require("./svg/light_to_dark.svg?react"));
+const LightToDarkIcon = (props) => ((0, jsx_runtime_1.jsx)(light_to_dark_svg_react_1.default, Object.assign({}, props)));
+exports.LightToDarkIcon = LightToDarkIcon;

package/dist/scripts/src/components/IconProvider.js

@@ -81,6 +81,8 @@ const TrendingLevelIcon_1 = require("./Icon/TrendingLevelIcon");
 const Inspect_1 = require("./Icon/Inspect");
 const MoonIcon_1 = require("./Icon/MoonIcon");
 const StarsIcon_1 = require("./Icon/StarsIcon");
+const LightToDark_1 = require("./Icon/LightToDark");
+const DarkToLightIcon_1 = require("./Icon/DarkToLightIcon");
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -143,6 +145,8 @@ registerIconRenderer("plus", (props) => (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIc
 registerIconRenderer("inspect", (props) => (0, jsx_runtime_1.jsx)(Inspect_1.InspectIcon, Object.assign({}, props)));
 registerIconRenderer("plus-circle", (props) => (0, jsx_runtime_1.jsx)(ai_1.AiOutlinePlusCircle, Object.assign({}, props)));
 registerIconRenderer("filledplus", (props) => (0, jsx_runtime_1.jsx)(FillPlusCricleIcon_1.FillPlusCircleIcon, Object.assign({}, props)));
+registerIconRenderer("darkToLight", (props) => (0, jsx_runtime_1.jsx)(DarkToLightIcon_1.DarkToLightIcon, Object.assign({}, props)));
+registerIconRenderer("lightToDark", (props) => (0, jsx_runtime_1.jsx)(LightToDark_1.LightToDarkIcon, Object.assign({}, props)));
 registerIconRenderer("checkmark", (props) => (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, Object.assign({}, props)));
 registerIconRenderer("valid", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiCheckCircle, Object.assign({}, props)));
 registerIconRenderer("info", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiAlertOctagon, Object.assign({}, props)));

package/dist/scripts/src/components/Image/ImageNative.js

@@ -11,5 +11,5 @@ const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
 exports.Image = (0, react_1.forwardRef)(function Img({ src, alt, fit = "contain", style, onClick, aspectRatio, lazyLoad }, ref) {
     return ((0, jsx_runtime_1.jsx)("img", { src: src, ref: ref, alt: alt, loading: lazyLoad ? "lazy" : "eager", className: (0, classnames_1.default)(Image_module_scss_1.default.img, {
             [Image_module_scss_1.default.clickable]: !!onClick,
-        }), style: Object.assign(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { aspectRatio: aspectRatio }), onClick: onClick }));
+        }), style: Object.assign(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { flexShrink: 1, aspectRatio: aspectRatio }), onClick: onClick }));
 });

package/dist/scripts/src/components/Items/ItemsNative.js

@@ -18,10 +18,12 @@ function Items({ items, renderItem, reverse = false }) {
     if (!itemsToRender || !Array.isArray(itemsToRender)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: itemsToRender.map((item, index) => renderItem({
-            $item: item,
-            $itemIndex: index,
-            $isFirst: index === 0,
-            $isLast: index === itemsToRender.length - 1,
-        }, index)) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: itemsToRender.map((item, index) => {
+            return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem === null || renderItem === void 0 ? void 0 : renderItem({
+                    $item: item,
+                    $itemIndex: index,
+                    $isFirst: index === 0,
+                    $isLast: index === itemsToRender.length - 1,
+                }, index) }, index);
+        }) }));
 }

package/dist/scripts/src/components/Link/Link.js

@@ -41,14 +41,14 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $borderColor",
         [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
-        [`textDecorationColor-${COMP}--hover`]: "$color-surface-400A80",
-        [`textDecorationColor-${COMP}--active`]: "$color-surface200",
+        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textColor-${COMP}--hover`]: `$color-primary-400`,
+        [`textDecorationColor-${COMP}--active`]: "$color-primary-200",
         [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
-        [`textDecorationColor-${COMP}`]: "$color-surface-400",
+        [`textDecorationColor-${COMP}`]: "$color-primary-400",
         [`textUnderlineOffset-${COMP}`]: "$space-1",
         [`textDecorationLine-${COMP}`]: "underline",
-        [`textDecorationStyle-${COMP}`]: "dashed",
-        [`textDecorationThickness-${COMP}`]: "$space-0_5",
+        [`textDecorationStyle-${COMP}`]: "solid",
         [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
         [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
         [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",

package/dist/scripts/src/components/List/ListNative.js

@@ -94,7 +94,7 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         if (!limit) {
             return sortedItems;
         }
-        return sortedItems.slice(0, limit - 1);
+        return sortedItems.slice(0, limit);
     }, [sortedItems, limit]);
     const sectionedItems = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {