xmlui 0.9.21 → 0.9.23

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

@@ -77,6 +77,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     themeVarDescriptions: {
         "maxWidth‑content‑App": "This theme variable defines the maximum width of the main content. If the main " +
             "content is broader, the engine adds margins to keep the expected maximum size.",
+        "maxWidth-App-vertical": "This theme variable defines the app's full width in vertical layouts.",
         "boxShadow‑header‑App": "This theme variable sets the shadow of the app's header section.",
         "boxShadow‑navPanel‑App": "This theme variable sets the shadow of the app's navigation panel section " +
             "(visible only in vertical layouts).",
@@ -86,6 +87,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`width-navPanel-${COMP}`]: "$space-64",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
+        [`maxWidth-${COMP}-vertical`]: "100%",
         [`boxShadow-header-${COMP}`]: "$boxShadow-spread",
         [`boxShadow-navPanel-${COMP}`]: "$boxShadow-spread",
         [`scroll-padding-block-Pages`]: "$space-4",

package/dist/scripts/src/components/App/AppLayoutContext.js

@@ -7,7 +7,6 @@ const appLayoutNames = [
     "vertical",
     "vertical-sticky",
     "vertical-full-header",
-    "vertical-constrained-width",
     "condensed",
     "condensed-sticky",
     "horizontal",

package/dist/scripts/src/components/App/AppNative.js

@@ -36,6 +36,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);
     const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
+    const isFullVerticalWidth = getThemeVar("maxWidth-App-vertical") === "100%";
+    console.log("isVerticalMaxWidth", isFullVerticalWidth);
     const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all – (–) and — (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
     const { setLoggedInUser, mediaSize } = (0, AppContext_1.useAppContext)();
     const hasRegisteredHeader = header !== undefined;
@@ -138,6 +140,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             logoContentDef,
             registerSubNavPanelSlot,
             subNavPanelSlot,
+            isFullVerticalWidth,
+            scrollWholePage,
         };
     }, [
         hasRegisteredNavPanel,
@@ -153,6 +157,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
         logoContentDef,
         registerSubNavPanelSlot,
         subNavPanelSlot,
+        isFullVerticalWidth,
+        scrollWholePage,
     ]);
     (0, react_1.useEffect)(() => {
         if (navPanelVisible) {
@@ -183,10 +189,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] }));
             break;
         case "vertical-full-header":
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
-            break;
-        case "vertical-constrained-width":
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalConstrained), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.header, style: { paddingInline: 0 }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.content, App_module_scss_1.default.verticalConstrained), children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.contentScroller, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.contentAligner, children: (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
             break;
         case "condensed":
         case "condensed-sticky":
@@ -213,7 +216,6 @@ function getAppLayoutOrientation(appLayout) {
         case "vertical":
         case "vertical-sticky":
         case "vertical-full-header":
-        case "vertical-constrained-width":
             return "vertical";
         default:
             return "horizontal";

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -40,16 +40,18 @@ function useLogoUrl() {
     const toneLogoUrl = (0, ThemeContext_1.useResourceUrl)(`resource:logo-${activeThemeTone}`) || logoUrlByTone[activeThemeTone];
     return toneLogoUrl || baseLogoUrl;
 }
-const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot, }) => {
+const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot, }) => {
     const { mediaSize } = (0, AppContext_1.useAppContext)();
     const logoUrl = useLogoUrl();
     const subNavPanelSlot = (0, react_1.useRef)(null);
     const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
+    const layoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
-                [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
+                [AppHeader_module_scss_1.default.verticalFullHeader]: (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.layout) === "vertical-full-header",
+                [AppHeader_module_scss_1.default.scrollWholePage]: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.scrollWholePage,
             }), children: [!navPanelVisible && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { padding: 0, height: "100%" }, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) }));
 };
@@ -59,6 +61,5 @@ function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, c
     const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, registerSubNavPanelSlot, } = appLayoutContext || {};
     // console.log("APP LAYOUT CONTEXT", appLayoutContext);
     const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
-    const canRestrictContentWidth = layout !== "vertical-full-header";
-    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
 }

package/dist/scripts/src/components/Footer/FooterNative.js

@@ -13,8 +13,7 @@ const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // React Footer component implementation
 exports.Footer = (0, react_1.forwardRef)(function Footer({ children, style, className, }, forwardedRef) {
     const { layout } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
-    const canRestrictContentWidth = layout !== "vertical-full-header";
     return ((0, jsx_runtime_1.jsx)("div", { className: Footer_module_scss_1.default.outerWrapper, ref: forwardedRef, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className, {
-                [Footer_module_scss_1.default.full]: !canRestrictContentWidth,
+                [Footer_module_scss_1.default.verticalFullHeader]: layout === "vertical-full-header",
             }), children: children }) }));
 });

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

@@ -32,27 +32,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 +53,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 +153,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 = {
@@ -203,7 +187,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 +195,6 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         formState.interactionFlags,
         formState.subject,
         formState.validationResults,
-        formState.resetVersion,
         initialValue,
         isEnabled,
         itemLabelBreak,
@@ -330,7 +312,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             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, }) {

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

@@ -203,7 +203,7 @@ 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, {
             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 } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue"]);
     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(...);
@@ -150,6 +183,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 +208,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/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/NavGroup/NavGroupNative.js

@@ -34,8 +34,7 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
     let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
         (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky" ||
-        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header" ||
-        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header";
     if (navPanelContext !== null) {
         inline = navPanelContext.inDrawer;
     }
@@ -47,7 +46,7 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
             iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : exports.defaultProps.iconVerticalCollapsed,
             iconVerticalExpanded: iconVerticalExpanded !== null && iconVerticalExpanded !== void 0 ? iconVerticalExpanded : exports.defaultProps.iconVerticalExpanded,
         };
-    }, [level]);
+    }, [iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, level]);
     return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to })) }));
 });
 const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, }, ref) {

package/dist/scripts/src/components/Select/SelectNative.js

@@ -69,7 +69,9 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
                         [Select_module_scss_1.default.error]: validationStatus === "error",
                         [Select_module_scss_1.default.warning]: validationStatus === "warning",
                         [Select_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: (0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.Viewport, { className: (0, classnames_1.default)(Select_module_scss_1.default.selectViewport), children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }) }));
+                    }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: (0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, 
+                        // position="popper"
+                        style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.Viewport, { className: (0, classnames_1.default)(Select_module_scss_1.default.selectViewport), children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }) }));
 });
 exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, inProgress = false, inProgressNotificationMessage = "Loading...", }, ref) {
     var _a;