xmlui 0.9.51 → 0.9.53

package/dist/scripts/src/components/ExpandableItem/ExpandableItemNative.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandableItem = exports.defaultExpandableItemProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const ExpandableItem_module_scss_1 = __importDefault(require("./ExpandableItem.module.scss"));
+const IconNative_1 = require("../Icon/IconNative");
+const Toggle_1 = require("../Toggle/Toggle");
+exports.defaultExpandableItemProps = {
+    initiallyExpanded: false,
+    enabled: true,
+    iconExpanded: "chevrondown",
+    iconCollapsed: "chevronright",
+    iconPosition: "end",
+    withSwitch: false,
+};
+exports.ExpandableItem = (0, react_1.forwardRef)(function ExpandableItem({ summary, children, className, style, initiallyExpanded = exports.defaultExpandableItemProps.initiallyExpanded, enabled = exports.defaultExpandableItemProps.enabled, iconExpanded = exports.defaultExpandableItemProps.iconExpanded, iconCollapsed = exports.defaultExpandableItemProps.iconCollapsed, iconPosition = exports.defaultExpandableItemProps.iconPosition, withSwitch = exports.defaultExpandableItemProps.withSwitch, onExpandedChange, registerComponentApi, }, ref) {
+    const [isOpen, setIsOpen] = (0, react_2.useState)(initiallyExpanded);
+    const toggleOpen = (0, react_1.useCallback)(() => {
+        if (!enabled)
+            return;
+        const newValue = !isOpen;
+        setIsOpen(newValue);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newValue);
+    }, [enabled, isOpen, onExpandedChange]);
+    // Register component API
+    const expand = (0, react_1.useCallback)(() => {
+        if (!isOpen && enabled) {
+            setIsOpen(true);
+            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(true);
+        }
+    }, [enabled, isOpen, onExpandedChange]);
+    const collapse = (0, react_1.useCallback)(() => {
+        if (isOpen && enabled) {
+            setIsOpen(false);
+            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(false);
+        }
+    }, [enabled, isOpen, onExpandedChange]);
+    const toggle = (0, react_1.useCallback)(() => {
+        toggleOpen();
+    }, [toggleOpen]);
+    const getIsExpanded = (0, react_1.useCallback)(() => isOpen, [isOpen]);
+    // Handle switch value change
+    const handleSwitchChange = (0, react_1.useCallback)((value) => {
+        if (!enabled)
+            return;
+        setIsOpen(value);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(value);
+    }, [enabled, onExpandedChange]);
+    // Register these functions with the component API using useEffect
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            expand,
+            collapse,
+            toggle,
+            isExpanded: getIsExpanded,
+        });
+    }, [registerComponentApi, expand, collapse, toggle, getIsExpanded]);
+    // Create refs for the Toggle components
+    const toggleStartRef = (0, react_1.useRef)();
+    const toggleEndRef = (0, react_1.useRef)();
+    // Handler for clicking on the summary when using a switch
+    const handleSummaryClick = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!enabled || !withSwitch)
+            return;
+        const newValue = !isOpen;
+        setIsOpen(newValue);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newValue);
+        // Update the toggle switch UI state too
+        if (iconPosition === "start" && ((_a = toggleStartRef.current) === null || _a === void 0 ? void 0 : _a.setValue)) {
+            toggleStartRef.current.setValue(newValue);
+        }
+        else if (iconPosition === "end" && ((_b = toggleEndRef.current) === null || _b === void 0 ? void 0 : _b.setValue)) {
+            toggleEndRef.current.setValue(newValue);
+        }
+    }, [enabled, withSwitch, isOpen, onExpandedChange, iconPosition]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ExpandableItem_module_scss_1.default.expandableItem, className, {
+            [ExpandableItem_module_scss_1.default.open]: isOpen,
+            [ExpandableItem_module_scss_1.default.disabled]: !enabled,
+            [ExpandableItem_module_scss_1.default.withSwitch]: withSwitch,
+        }), style: style, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ExpandableItem_module_scss_1.default.summary, {
+                    [ExpandableItem_module_scss_1.default.iconStart]: iconPosition === "start",
+                    [ExpandableItem_module_scss_1.default.iconEnd]: iconPosition === "end",
+                }), onClick: enabled ? (withSwitch ? handleSummaryClick : toggleOpen) : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: withSwitch ? ExpandableItem_module_scss_1.default.switch : ExpandableItem_module_scss_1.default.icon, children: withSwitch ? ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "switch", value: isOpen, enabled: enabled, onDidChange: handleSwitchChange })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: isOpen ? iconExpanded : iconCollapsed, fallback: isOpen ? "chevrondown" : "chevronright" })) }), (0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.summaryContent, children: summary })] }), isOpen && (0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.content, children: children })] }));
+});

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

@@ -35,17 +35,16 @@ exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
         buttonLabel: (0, ComponentDefs_1.d)(`This property is an optional string to set a label for the button part.`),
         buttonIcon: (0, ComponentDefs_1.d)(`The ID of the icon to display in the button. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.browse:FileInput" declaration in the app configuration file.`),
-        buttonIconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames),
-        acceptsFileType: (0, ComponentDefs_1.d)(`A list of file types the input controls accepts provided as a string array.`),
-        multiple: (0, ComponentDefs_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
+        buttonIconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames, "string", "start"),
+        acceptsFileType: (0, ComponentDefs_1.d)(`An optional list of file types the input controls accepts provided as a string array.`),
+        multiple: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
             `(\`true\`). This is done either by dragging onto the field or by selecting multiple files ` +
-            `in the browser menu after clicking the input field button.`, null, "boolean", false),
-        directory: (0, ComponentDefs_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
-            `or files only (\`false\`).`, null, "boolean", false),
-        buttonPosition: (0, ComponentDefs_1.d)(`This property determines the position of the button relative to the input field. ` +
-            `The default is "end".`, ["start", "end"]),
+            `in the browser menu after clicking the input field button.`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.multiple }),
+        directory: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
+            `or files only (\`false\`).`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.directory }),
+        buttonPosition: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This property determines the position of the button relative to the input field.`, ["start", "end"])), { defaultValue: FileInputNative_1.defaultProps.buttonPosition }),
         buttonSize: (0, ComponentDefs_1.d)("The size of the button (small, medium, large)", abstractions_1.sizeMd),
-        buttonThemeColor: (0, ComponentDefs_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames),
+        buttonThemeColor: (0, ComponentDefs_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames, "string", FileInputNative_1.defaultProps.buttonThemeColor),
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/FileInput/FileInputNative.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileInput = void 0;
+exports.FileInput = exports.defaultProps = void 0;
 exports.isFile = isFile;
 exports.isFileArray = isFileArray;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -52,7 +52,19 @@ const TextBoxNative_1 = require("../TextBox/TextBoxNative");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 // https://github.com/react-dropzone/react-dropzone/issues/1259
 const { useDropzone } = dropzone;
-const FileInput = ({ id, enabled = true, style, placeholder, buttonPosition = "end", buttonLabel = "Browse", buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, value, initialValue, acceptsFileType, multiple = false, directory = false, label, labelPosition, labelWidth, labelBreak, required, }) => {
+exports.defaultProps = {
+    enabled: true,
+    buttonPosition: "end",
+    buttonLabel: "Browse",
+    multiple: false,
+    directory: false,
+    buttonThemeColor: "primary",
+    updateState: constants_1.noop,
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+};
+const FileInput = ({ id, enabled = exports.defaultProps.enabled, style, placeholder, buttonPosition = exports.defaultProps.buttonPosition, buttonLabel = exports.defaultProps.buttonLabel, buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, value, initialValue, acceptsFileType, multiple = exports.defaultProps.multiple, directory = exports.defaultProps.directory, label, labelPosition, labelWidth, labelBreak, required, }) => {
     // Don't accept any (initial) value if it is not a File array explicitly
     const _initialValue = isFileArray(initialValue) ? initialValue : undefined;
     const _value = isFileArray(value) ? value : undefined;

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

@@ -18,7 +18,7 @@ exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
         text: {
             description: "With this property, you can change the default text to display when files " +
                 "are dragged over the drop zone.",
-            defaultValue: "Drop files here",
+            defaultValue: FileUploadDropZoneNative_1.defaultProps.text,
             type: "string",
         },
         allowPaste: {
@@ -26,7 +26,7 @@ exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
                 "clipboard (\`true\`) or " +
                 "only dragged files (\`false\`).",
             type: "boolean",
-            defaultValue: true,
+            defaultValue: FileUploadDropZoneNative_1.defaultProps.allowPaste,
         },
         enabled: (0, ComponentDefs_1.d)(`If set to \`false\`, the drop zone will be disabled and users will not be able to upload files.`, null, "boolean", true),
     },

package/dist/scripts/src/components/FileUploadDropZone/FileUploadDropZoneNative.js

@@ -45,7 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadDropZone = void 0;
+exports.FileUploadDropZone = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dropzone = __importStar(require("react-dropzone"));
@@ -55,7 +55,14 @@ const constants_1 = require("../../components-core/constants");
 const IconNative_1 = require("../Icon/IconNative");
 // https://github.com/react-dropzone/react-dropzone/issues/1259
 const { useDropzone } = dropzone;
-exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone({ children, onUpload = constants_1.asyncNoop, uid = "fileUploadDialog", registerComponentApi, style, allowPaste = true, text = "Drop files here", disabled = false, }, forwardedRef) {
+exports.defaultProps = {
+    onUpload: constants_1.asyncNoop,
+    uid: "fileUploadDialog",
+    allowPaste: true,
+    text: "Drop files here",
+    disabled: false,
+};
+exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone({ children, onUpload = exports.defaultProps.onUpload, uid = exports.defaultProps.uid, registerComponentApi, style, allowPaste = exports.defaultProps.allowPaste, text = exports.defaultProps.text, disabled = exports.defaultProps.disabled, }, forwardedRef) {
     const onDrop = (0, react_1.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
         if (!acceptedFiles.length) {
             return;

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

@@ -23,6 +23,7 @@ exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
         [`borderTop-${COMP}`]: `1px solid $borderColor`,
         [`padding-${COMP}`]: "$space-2 $space-4",
+        [`gap-${COMP}`]: "$space-normal",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
+exports.Footer = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -11,6 +11,9 @@ const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // =====================================================================================================================
 // React Footer component implementation
+exports.defaultProps = {
+// No default props needed currently, but adding object for consistency
+};
 exports.Footer = (0, react_1.forwardRef)(function Footer({ children, style, className, }, forwardedRef) {
     const { layout } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
     const canRestrictContentWidth = layout !== "vertical-full-header";

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

@@ -27,8 +27,10 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: FormNative_1.defaultProps.itemLabelPosition,
         },
         itemLabelWidth: {
-            description: `This property sets the width of the item labels within the form. Individual ` +
-                `\`FormItem\` instances can override this property.`,
+            description: "This property sets the width of the item labels within the form. Individual " +
+                "\`FormItem\` instances can override this property. If this property is not set, " +
+                "each form item nested in the form uses its calculated label width. These widths " +
+                "may be different for each item.",
             type: "string",
         },
         itemLabelBreak: {
@@ -44,8 +46,9 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: FormNative_1.defaultProps.keepModalOpenOnSubmit,
         },
         data: {
-            description: `This property sets the initial value of the form's data structure. The form infrastructure ` +
-                `uses this value to set the initial state of form items within the form.`,
+            description: "This property sets the initial value of the form's data structure. The form infrastructure " +
+                "uses this value to set the initial state of form items within the form. If this property is" +
+                "not set, the form does not have an initial value.",
         },
         cancelLabel: {
             description: "This property defines the label of the Cancel button.",
@@ -67,13 +70,14 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             description: `By default, the Cancel button is to the left of the Save button. Set this property to ` +
                 `\`true\` to swap them or \`false\` to keep their original location.`,
             type: "boolean",
+            defaultValue: FormNative_1.defaultProps.swapCancelAndSave,
         },
         submitUrl: (0, ComponentDefs_1.d)(`URL to submit the form data.`),
         submitMethod: {
             description: "This property sets the HTTP method to use when submitting the form data. If not " +
                 "defined, `put` is used when the form has initial data; otherwise, `post`.",
         },
-        enabled: (0, ComponentDefs_1.d)(`Whether the form is enabled or not. The default value is \`true\`.`),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
         _data_url: (0, metadata_helpers_1.dInternal)("when we have an api bound data prop, we inject the url here"),
     },
     events: {

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

@@ -170,6 +170,7 @@ exports.defaultProps = {
     itemLabelPosition: "top",
     itemLabelBreak: true,
     keepModalOpenOnSubmit: false,
+    swapCancelAndSave: false,
 };
 // --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
 function cleanUpSubject(subject) {
@@ -180,7 +181,7 @@ function cleanUpSubject(subject) {
         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 Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, }, ref) {
     const formRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_1.useState)(false);

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

@@ -35,14 +35,15 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         `component's data.`,
     props: {
         bindTo: {
-            description: `This property binds a particular input field to one of the attributes of the \`Form\` data. ` +
-                `It names the property of the form's \`data\` data to get the input's initial value.` +
-                `When the field is saved, its value will be stored in the \`data\` property with this name.`,
+            description: "This property binds a particular input field to one of the attributes of the \`Form\` data. " +
+                "It names the property of the form's \`data\` data to get the input's initial value." +
+                "When the field is saved, its value will be stored in the \`data\` property with this name. " +
+                "If the property is not set, the input will be bound to an internal data field but not submitted.",
         },
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)(),
-        labelWidth: (0, ComponentDefs_1.d)(`This property sets the width of the item label.`),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: {
             description: `This boolean value indicates if the label can be split into multiple lines if it would ` +
                 `overflow the available label width.`,
@@ -72,25 +73,28 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         required: (0, metadata_helpers_1.dRequired)(),
         requiredInvalidMessage: {
-            description: `This optional string property is used to customize the message that is displayed if the ` +
-                `field is not filled in.`,
+            description: "This optional string property is used to customize the message that is displayed if the " +
+                "field is not filled in. If not defined, the default message is used.",
             valueType: "string",
         },
         minLength: {
-            description: `Checks whether the input has a minimum length of a specified value.`,
+            description: "This property sets the minimum length of the input value. If the value is not set, " +
+                "no minimum length check is done.",
             valueType: "number",
         },
         maxLength: {
-            description: `Checks whether the input has a maximum length of a specified value.`,
+            description: "This property sets the maximum length of the input value. If the value is not set, " +
+                "no maximum length check is done.",
             valueType: "number",
         },
         maxTextLength: {
-            description: `The maximum length of the text in the input field`,
+            description: "The maximum length of the text in the input field. If this value is not set, " +
+                "no maximum length constraint is set for the input field.",
             valueType: "number",
         },
         lengthInvalidMessage: {
-            description: `This optional string property is used to customize the message that is displayed on a failed ` +
-                `length check: [minLength](#minlength) or [maxLength](#maxlength).`,
+            description: "This optional string property is used to customize the message that is displayed on a failed " +
+                "length check: [minLength](#minlength) or [maxLength](#maxlength).",
             valueType: "string",
         },
         lengthInvalidSeverity: {
@@ -100,11 +104,13 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: "error",
         },
         minValue: {
-            description: `Checks whether the input has the minimum specified value.`,
+            description: "The minimum value of the input. If this value is not specified, no minimum " +
+                "value check is done.",
             valueType: "number",
         },
         maxValue: {
-            description: `Checks whether the input has the maximum specified value.`,
+            description: "The maximum value of the input. If this value is not specified, no maximum " +
+                "value check is done.",
             valueType: "number",
         },
         rangeInvalidMessage: {
@@ -119,7 +125,8 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: "error",
         },
         pattern: {
-            description: `Checks whether the input fits a predefined regular expression.`,
+            description: "This value specifies a predefined regular expression to test the input value. " +
+                "If this value is not set, no pattern check is done.",
             valueType: "string",
         },
         patternInvalidMessage: {
@@ -134,7 +141,8 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: "error",
         },
         regex: {
-            description: `Checks whether the input fits the provided regular expression.`,
+            description: "This value specifies a custom regular expression to test the input value. If this value " +
+                "is not set, no regular expression pattern check is done.",
             valueType: "string",
         },
         regexInvalidMessage: {
@@ -153,6 +161,8 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         },
         gap: {
             description: "This property defines the gap between the adornments and the input area.",
+            valueType: "string",
+            defaultValue: FormItemNative_1.defaultProps.gap,
         },
     },
     events: {

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

@@ -46,6 +46,7 @@ exports.defaultProps = {
     labelBreak: true,
     enabled: true,
     customValidationsDebounce: 0,
+    gap: "0",
 };
 const FormItemContext = (0, react_1.createContext)({ parentFormItemId: null });
 function ArrayLikeFormItem({ children, formItemId, registerComponentApi, value = constants_1.EMPTY_ARRAY, updateState, }) {

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

@@ -26,16 +26,17 @@ const COMP = "Heading";
 const VALUE_DESC = (0, ComponentDefs_1.d)(`This property determines the text displayed in the heading. \`${COMP}\` also accepts nested ` +
     `text instead of specifying the \`value\`. If both \`value\` and a nested text are used, ` +
     `the \`value\` will be displayed.`);
-const MAX_LINES_DESC = (0, ComponentDefs_1.d)(`This property determines the maximum number of lines the component can wrap to. If there is ` +
-    `not enough space for all of the text, the component wraps the text up to as many ` +
-    `lines as specified.`);
+const MAX_LINES_DESC = (0, ComponentDefs_1.d)("This optional property determines the maximum number of lines the component can wrap to. " +
+    "If there is not enough space for all of the text, the component wraps the text up to as many " +
+    "lines as specified. If the value is not specified, there is no limit on the number of " +
+    "displayed lines.");
 const ELLIPSES_DESC = {
     description: `This property indicates whether ellipses should be displayed (\`true\`) when the heading ` +
         `text is cropped or not (\`false\`).`,
     type: "boolean",
     defaultValue: HeadingNative_1.defaultProps.ellipses,
 };
-const PRESERVE_DESC = (0, ComponentDefs_1.d)(`This property indicates whether linebreaks should be preserved when ` + `displaying text.`);
+const PRESERVE_DESC = (0, ComponentDefs_1.d)(`This property indicates whether linebreaks should be preserved when ` + `displaying text.`, undefined, "boolean", HeadingNative_1.defaultProps.preserveLinebreaks);
 const LEVEL_DESC = (level) => `Represents a heading level ${level} text`;
 const OMIT_FROM_TOC_DESC = {
     description: "If true, this heading will be excluded from the table of contents.",
@@ -55,6 +56,11 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
         ellipses: ELLIPSES_DESC,
         preserveLinebreaks: PRESERVE_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
+        showAnchor: {
+            description: "This property indicates whether an anchor link should be displayed next to the heading. " +
+                "If set to `true`, an anchor link will be displayed on hover next to the heading.",
+            type: "boolean",
+        }
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
@@ -219,10 +225,10 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-function renderHeading({ node, extractValue, layoutCss, level, renderChild }) {
+function renderHeading({ node, extractValue, layoutCss, level, showAnchor, renderChild }) {
     var _a, _b;
     const _c = node.props, { maxLines, preserveLinebreaks, ellipses } = _c, restProps = __rest(_c, ["maxLines", "preserveLinebreaks", "ellipses"]);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), style: layoutCss, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc) }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue, layoutCss), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: extractValue.asOptionalBoolean(showAnchor), style: layoutCss, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc) }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue, layoutCss), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
 }
 exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, layoutCss, renderChild }) => {
     return renderHeading({

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

@@ -24,13 +24,16 @@ const css_utils_1 = require("../../components-core/utils/css-utils");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
 const hooks_1 = require("../../components-core/utils/hooks");
 const react_2 = require("@remix-run/react");
+const AppContext_1 = require("../../components-core/AppContext");
 exports.defaultProps = {
     level: "h1",
     ellipses: true,
     omitFromToc: false,
     maxLines: 0,
+    preserveLinebreaks: false,
 };
 exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
+    var _b, _c;
     var { uid, level = exports.defaultProps.level, children, sx, style, title, maxLines = exports.defaultProps.maxLines, preserveLinebreaks, ellipses = exports.defaultProps.ellipses, className, omitFromToc = exports.defaultProps.omitFromToc, showAnchor } = _a, furtherProps = __rest(_a, ["uid", "level", "children", "sx", "style", "title", "maxLines", "preserveLinebreaks", "ellipses", "className", "omitFromToc", "showAnchor"]);
     const Element = level === null || level === void 0 ? void 0 : level.toLowerCase();
     const elementRef = (0, react_1.useRef)(null);
@@ -38,6 +41,10 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
     const anchorRef = (0, react_1.useRef)(null);
     const tableOfContentsContext = (0, react_1.useContext)(TableOfContentsContext_1.TableOfContentsContext);
     const registerHeading = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.registerHeading;
+    const appContext = (0, AppContext_1.useAppContext)();
+    if (showAnchor === undefined) {
+        showAnchor = (_c = (_b = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _b === void 0 ? void 0 : _b.showHeadingAnchors) !== null && _c !== void 0 ? _c : false;
+    }
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(elementRef, forwardedRef) : elementRef;
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;

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

@@ -15,15 +15,17 @@ exports.IconMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: `This component is the representation of an icon.`,
     props: {
-        name: (0, ComponentDefs_1.d)(`This string property specifies the name of the icon to display. All icons have unique names ` +
-            `and identifying the name is case-sensitive.`),
+        name: (0, ComponentDefs_1.d)("This string property specifies the name of the icon to display. All icons have " +
+            "unique, case-sensitive names identifying them. If the icon name is not set, the " +
+            "`fallback` value is used."),
         size: {
             description: `This property defines the size of the \`${COMP}\`. Note that setting the \`height\` and/or ` +
-                `the \`width\` of the component will override this property.`,
+                `the \`width\` of the component will override this property. You can use az explicit size ` +
+                "value (e.g., 32px) or one of these predefined values: `xs`, `sm`, `md`, `lg`.",
             availableValues: ["xs", "sm", "md", "lg"],
         },
-        fallback: (0, ComponentDefs_1.d)(`This optional property provides a way to handle situations when the provided ` +
-            `[icon name](#name) is not found in the registry.`),
+        fallback: (0, ComponentDefs_1.d)("This optional property provides a way to handle situations when the icon with the provided " +
+            "[icon name](#name) name does not exist. If the icon cannot be found, no icon is displayed."),
     },
     events: {
         click: (0, ComponentDefs_1.d)("This event is triggered when the icon is clicked."),

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

@@ -16,19 +16,29 @@ exports.ImageMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component represents or depicts an object, scene, idea, or other concept ` +
         `with a picture.`,
     props: {
-        src: (0, ComponentDefs_1.d)(`This property is used to indicate the source (path) of the image to display.`),
-        alt: (0, ComponentDefs_1.d)(`This property specifies an alternate text for the image.`),
+        src: (0, ComponentDefs_1.d)("This property is used to indicate the source (path) of the image to display. " +
+            "When not defined, no image is displayed."),
+        alt: (0, ComponentDefs_1.d)(`This optional property specifies an alternate text for the image.`),
         fit: {
             description: "This property sets how the image content should be resized to fit its container.",
             type: "string",
-            defaultValue: "contain",
+            defaultValue: ImageNative_1.defaultProps.fit,
         },
-        lazyLoad: (0, ComponentDefs_1.d)(`Lazy loading instructs the browser to load the image only when it is imminently needed ` +
-            `(e.g. user scrolls to it). The default value is eager (\`false\`).`),
-        aspectRatio: (0, ComponentDefs_1.d)(`This property sets a preferred aspect ratio for the image, which will be used in the ` +
-            `calculation of auto sizes and some other layout functions.`),
-        inline: (0, ComponentDefs_1.d)(`When set to true, the image will be displayed as an inline element instead of a block element.`),
-        animation: (0, ComponentDefs_1.d)(`The animation object to be applied to the component`),
+        lazyLoad: {
+            description: `Lazy loading instructs the browser to load the image only when it is imminently needed ` +
+                `(e.g. user scrolls to it).`,
+            type: "boolean",
+            defaultValue: ImageNative_1.defaultProps.lazyLoad,
+        },
+        aspectRatio: (0, ComponentDefs_1.d)("This property sets a preferred aspect ratio for the image, which will be used in " +
+            "calculating auto sizes and other layout functions. If this value is not used, the " +
+            'original aspect ratio is kept. The value can be a number of a string (such as "16/9").'),
+        inline: {
+            description: `When set to true, the image will be displayed as an inline element instead of a block element.`,
+            type: "boolean",
+            defaultValue: ImageNative_1.defaultProps.inline,
+        },
+        animation: (0, metadata_helpers_1.dInternal)(`The optional animation object to be applied to the component`),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),

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

@@ -3,12 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = void 0;
+exports.Image = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
 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, inline }, ref) {
+exports.defaultProps = {
+    fit: "contain",
+    lazyLoad: false,
+    inline: false,
+};
+exports.Image = (0, react_1.forwardRef)(function Img({ src, alt, fit = exports.defaultProps.fit, style, onClick, aspectRatio, lazyLoad = exports.defaultProps.lazyLoad, inline = exports.defaultProps.inline }, 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(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { flexShrink: 1, aspectRatio: aspectRatio }), (inline ? { display: 'inline' } : {})), onClick: onClick }));

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

@@ -16,6 +16,8 @@ exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
         data: (0, ComponentDefs_1.d)(`This property contains the list of data items (obtained from a data source) this component renders.`),
         reverse: {
             description: "This property reverses the order in which data is mapped to template components.",
+            type: "boolean",
+            defaultValue: ItemsNative_1.defaultProps.reverse,
         },
         itemTemplate: (0, metadata_helpers_1.dComponent)("The component template to display a single item"),
     },

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

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.Items = Items;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const lodash_es_1 = require("lodash-es");
-function Items({ items, renderItem, reverse = false }) {
+exports.defaultProps = {
+    reverse: false,
+};
+function Items({ items, renderItem, reverse = exports.defaultProps.reverse }) {
     const itemsToRender = (0, react_1.useMemo)(() => {
         if (!items) {
             return [];

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

@@ -17,22 +17,21 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     description: `A \`${COMP}\` component represents a navigation target within the app or a ` +
         `reference to an external web URL.`,
     props: {
-        to: (0, ComponentDefs_1.d)(`This property defines the URL of the link.`),
+        to: (0, ComponentDefs_1.d)("This property defines the URL of the link. If the value is not defined, the link cannot be activated."),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         active: {
             description: `Indicates whether this link is active or not. If so, it will have a distinct visual appearance.`,
             type: "boolean",
-            defaultValue: false,
+            defaultValue: LinkNative_1.defaultProps.active,
         },
         target: {
             description: `This property specifies where to open the link represented by the \`${COMP}\`. This ` +
                 `property accepts the following values (in accordance with the HTML standard):`,
             availableValues: abstractions_1.LinkTargetMd,
             type: "string",
-            defaultValue: "_self",
         },
         label: (0, metadata_helpers_1.dLabel)(),
-        icon: (0, ComponentDefs_1.d)(`This property allows you to add an icon (specify the icon's name) to the link.`),
+        icon: (0, ComponentDefs_1.d)(`This property allows you to add an optional icon (specify the icon's name) to the link.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Link_module_scss_1.default.themeVars),
     themeVarDescriptions: {