xmlui 0.7.27 → 0.7.28

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
+const abstractions_1 = require("../abstractions");
 const APICallNative_1 = require("./APICallNative");
 const COMP = "APICall";
 exports.APICallMd = (0, ComponentDefs_1.createMetadata)({
@@ -12,66 +13,67 @@ exports.APICallMd = (0, ComponentDefs_1.createMetadata)({
         `is similar in nature to the \`DataSource\` component which retrieves data from the backend.`,
     props: {
         method: {
-            description: `The method of data manipulation can be done via setting this property. The following ` +
-                `HTTP methods are available: \`post\`, \`put\`, and \`delete\`.`,
+            description: "The method of data manipulation can be done via setting this property.",
             valueType: "string",
+            availableValues: abstractions_1.httpMethodNames,
+            defaultValue: "get",
         },
         url: {
-            description: `Use this property to set the URL to send data to.`,
+            description: "Use this property to set the URL to send data to.",
             isRequired: true,
             valueType: "string",
         },
         rawBody: {
-            description: `This property sets the request body to the value provided here without any conversion. ` +
-                `Use the * \`body\` property if you want the object sent in JSON. When you define ` +
-                `\`body\` and \`rawBody\`, the latest one prevails.`,
+            description: "This property sets the request body to the value provided here without any conversion. " +
+                "Use the * \`body\` property if you want the object sent in JSON. When you define " +
+                "\`body\` and \`rawBody\`, the latest one prevails.",
             valueType: "string",
         },
         body: {
-            description: `This property sets the request body. The object you pass here will be serialized to ` +
-                `JSON when sending the request. Use the \`rawBody\` property to send another request ` +
-                `body using its native format. When you define \`body\` and \`rawBody\`, the latest ` +
-                `one prevails.`,
+            description: "This property sets the request body. The object you pass here will be serialized to " +
+                "JSON when sending the request. Use the \`rawBody\` property to send another request " +
+                "body using its native format. When you define \`body\` and \`rawBody\`, the latest " +
+                "one prevails.",
             valueType: "string",
         },
         queryParams: {
-            description: `This property sets the query parameters for the request. The object you pass here will ` +
-                `be serialized to a query string and appended to the request URL. You can specify key ` +
-                `and value pairs where the key is the name of a particular query parameter and the value ` +
-                `is that parameter's value.`,
+            description: "This property sets the query parameters for the request. The object you pass here will " +
+                "be serialized to a query string and appended to the request URL. You can specify key " +
+                "and value pairs where the key is the name of a particular query parameter and the value " +
+                "is that parameter's value.",
         },
         headers: {
-            description: `You can define request header values as key and value pairs, where the key is the ID of ` +
-                `the particular header and the value is that header's value.`,
+            description: "You can define request header values as key and value pairs, where the key is the ID of " +
+                "the particular header and the value is that header's value.",
         },
         confirmTitle: {
-            description: `This optional string sets the title in the confirmation dialog that is displayed before ` +
+            description: "This optional string sets the title in the confirmation dialog that is displayed before " +
                 `the \`${COMP}\` is executed.`,
             valueType: "string",
         },
         confirmMessage: {
-            description: `This optional string sets the message in the confirmation dialog that is displayed before ` +
+            description: "This optional string sets the message in the confirmation dialog that is displayed before " +
                 `the \`${COMP}\` is executed.`,
             valueType: "string",
         },
         confirmButtonLabel: {
-            description: `This optional string property enables the customization of the submit button in the ` +
+            description: "This optional string property enables the customization of the submit button in the " +
                 `confirmation dialog that is displayed before the \`${COMP}\` is executed.`,
             valueType: "string",
         },
         inProgressNotificationMessage: {
-            description: `This property customizes the message that is displayed in a toast while the API operation ` +
-                `is in progress.`,
+            description: "This property customizes the message that is displayed in a toast while the API operation " +
+                "is in progress.",
             valueType: "string",
         },
         errorNotificationMessage: {
-            description: `This property defines the message to display automatically when the operation results ` +
-                `in an error.`,
+            description: "This property defines the message to display automatically when the operation results " +
+                "in an error.",
             valueType: "string",
         },
         completedNotificationMessage: {
-            description: `This property defines the message to display automatically when the operation has ` +
-                `been completed.`,
+            description: "This property defines the message to display automatically when the operation has " +
+                "been completed.",
             valueType: "string",
         },
         payloadType: (0, metadata_helpers_1.dInternal)(),
@@ -81,14 +83,14 @@ exports.APICallMd = (0, ComponentDefs_1.createMetadata)({
         getOptimisticValue: (0, metadata_helpers_1.dInternal)(),
     },
     events: {
-        beforeRequest: (0, ComponentDefs_1.d)(`This event fires before the request is sent. Returning an explicit boolean` +
-            `'false' value will prevent the request from being sent.`),
-        success: (0, ComponentDefs_1.d)(`This event fires when a request results in a success.`),
+        beforeRequest: (0, ComponentDefs_1.d)("This event fires before the request is sent. Returning an explicit boolean" +
+            "\`false\` value will prevent the request from being sent."),
+        success: (0, ComponentDefs_1.d)("This event fires when a request results in a success."),
         /**
          * This event fires when a request results in an error.
          * @descriptionRef
          */
-        error: (0, ComponentDefs_1.d)(`This event fires when a request results in an error.`),
+        error: (0, ComponentDefs_1.d)("This event fires when a request results in an error."),
         progress: (0, metadata_helpers_1.dInternal)(),
     },
     contextVars: {

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

@@ -19,10 +19,10 @@ exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a placeholder within \`App\` to define a custom application header.`,
     props: {
         profileMenuTemplate: (0, metadata_helpers_1.dComponent)(`This property makes the profile menu slot of the \`${COMP}\` component customizable.`),
-        logoTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the template to use for the logo. With this property, you can ` +
-            `construct your custom logo instead of using a single image.`),
-        titleTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the template to use for the title. With this property, you can ` +
-            `construct your custom title instead of using a single image.`),
+        logoTemplate: (0, metadata_helpers_1.dComponent)("This property defines the template to use for the logo. With this property, you can " +
+            "construct your custom logo instead of using a single image."),
+        titleTemplate: (0, metadata_helpers_1.dComponent)("This property defines the template to use for the title. With this property, you can " +
+            "construct your custom title instead of using a single image."),
         title: {
             description: "Title for the application logo",
             valueType: "string",

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

@@ -22,8 +22,8 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
             isRequired: true,
         },
         variant: {
-            description: `Modifies the shape of the component. Comes in the regular \`badge\` variant or the \`pill\` variant ` +
-                `with fully rounded corners.`,
+            description: "Modifies the shape of the component. Comes in the regular \`badge\` variant or the \`pill\` variant " +
+                "with fully rounded corners.",
             type: "string",
             availableValues: BadgeNative_1.badgeVariantValues,
             defaultValue: "badge",

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

@@ -7,24 +7,24 @@ const renderers_1 = require("../../components-core/renderers");
 const BookmarkNative_1 = require("./BookmarkNative");
 const COMP = "Bookmark";
 exports.BookmarkMd = (0, ComponentDefs_1.createMetadata)({
-    description: `As its name suggests, this component places a bookmark into its parent component's view. The ` +
-        `component has an \`id\` that you can use in links to navigate (scroll to) the bookmark's location.`,
+    description: "As its name suggests, this component places a bookmark into its parent component's view. The " +
+        "component has an \`id\` that you can use in links to navigate (scroll to) the bookmark's location.",
     opaque: true,
     props: {
         uid: {
-            description: `The unique identifier of the bookmark. You can use this identifier in links to navigate ` +
-                `to this component's location.`,
+            description: "The unique identifier of the bookmark. You can use this identifier in links to navigate " +
+                "to this component's location.",
             valueType: "string",
         },
         level: {
-            description: `The level of the bookmark. The level is used to determine the bookmark's ` +
-                `position in the table of contents.`,
+            description: "The level of the bookmark. The level is used to determine the bookmark's " +
+                "position in the table of contents.",
             valueType: "number",
             defaultValue: 1,
         },
         title: {
             description: "Defines the text to display the bookmark in the table of contents. If this property is " +
-                "empty, the text falls back to the value of `id`.",
+                "empty, the text falls back to the value of \`id\`.",
             valueType: "string",
         },
         omitFromToc: {

package/dist/scripts/src/components/Bookmark/BookmarkNative.js

@@ -12,8 +12,8 @@ const Bookmark = ({ uid, level = exports.defaultProps.level, children, title, om
     const elementRef = (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 observeIntersection = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.observeIntersection;
-    (0, react_1.useEffect)(() => {
+    const observeIntersection = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.hasTableOfContents;
+    (0, react_1.useLayoutEffect)(() => {
         var _a, _b;
         if (observeIntersection && elementRef.current && uid && !omitFromToc) {
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({

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

@@ -15,7 +15,7 @@ const IconNative_1 = require("../Icon/IconNative");
 const ButtonNative_1 = require("./ButtonNative");
 const COMP = "Button";
 exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
-    description: `Button is an interactive element that triggers an action when clicked.`,
+    description: "Button is an interactive element that triggers an action when clicked.",
     status: "stable",
     props: {
         autoFocus: {
@@ -50,13 +50,11 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
                 `specified and an icon is set, the ${COMP} will modify its styling to look like a ` +
                 `small icon button. When the ${COMP} has nested children, it will display them and ` +
                 `ignore the value of the \`label\` prop.`,
-            isRequired: false,
             type: "string",
         },
         type: {
             description: `This optional string describes how the ${COMP} appears in an HTML context. You ` +
                 `rarely need to set this property explicitly.`,
-            isRequired: false,
             availableValues: abstractions_1.buttonTypesMd,
             valueType: "string",
             defaultValue: ButtonNative_1.propDefaults.type,
@@ -64,7 +62,6 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         enabled: {
             description: `The value of this property indicates whether the button accepts actions (\`true\`) ` +
                 `or does not react to them (\`false\`).`,
-            isRequired: false,
             type: "boolean",
             defaultValue: true,
         },
@@ -73,12 +70,10 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
             description: `This string value denotes an icon name. The framework will render an icon if XMLUI ` +
                 `recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP} ` +
                 `displays only that icon.`,
-            isRequired: false,
             type: "string",
         },
         iconPosition: {
             description: `This optional string determines the location of the icon in the ${COMP}.`,
-            isRequired: false,
             availableValues: abstractions_1.iconPositionMd,
             type: "string",
             defaultValue: ButtonNative_1.propDefaults.iconPosition,
@@ -86,7 +81,6 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         contentPosition: {
             description: `This optional value determines how the label and icon (or nested children) should be placed` +
                 `inside the ${COMP} component.`,
-            isRequired: false,
             availableValues: abstractions_1.alignmentOptionMd,
             type: "string",
             defaultValue: ButtonNative_1.propDefaults.contentPosition,

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

@@ -19,7 +19,9 @@ exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
         `custom slides) like a carousel.`,
     props: {
         orientation: {
-            description: "This property indicates the orientation of the carousel. The `horizontal` value indicates that the carousel moves horizontally, and the `vertical` value indicates that the carousel moves vertically.",
+            description: "This property indicates the orientation of the carousel. The `horizontal` " +
+                "value indicates that the carousel moves horizontally, and the `vertical` " +
+                "value indicates that the carousel moves vertically.",
             availableValues: abstractions_1.orientationOptionMd,
             valueType: "string",
             defaultValue: CarouselNative_1.defaultProps.orientation,

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

@@ -36,7 +36,6 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     events: {
-        click: (0, metadata_helpers_1.dClick)(COMP),
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

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

@@ -13,7 +13,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const COMP = "ColorPicker";
 exports.ColorPickerMd = (0, ComponentDefs_1.createMetadata)({
-    description: ``,
+    description: "This component allows the user to select a color with the browser's default color picker control.",
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         label: (0, metadata_helpers_1.dLabel)(),

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

@@ -21,7 +21,8 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
         label: (0, metadata_helpers_1.dLabel)(),
         triggerTemplate: (0, metadata_helpers_1.dTriggerTemplate)(DDMCOMP),
         alignment: {
-            description: `This property allows you to determine the alignment of the displayed menu items.`,
+            description: "This property allows you to determine the alignment of the dropdown panel with " +
+                "the displayed menu items.",
             valueType: "string",
             availableValues: abstractions_1.alignmentOptionMd,
             defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.alignment,

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

@@ -15,10 +15,19 @@ exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component allows users to upload files to a web application by dragging ` +
         `and dropping files from their local file system onto a designated area within the UI.`,
     props: {
-        text: (0, ComponentDefs_1.d)(`With this property, you can change the default text ("Drop files here") to display when files ` +
-            `are dragged over the drop zone.`),
-        allowPaste: (0, ComponentDefs_1.d)(`This property indicates if the drop zone accepts files pasted from the clipboard (\`true\`) or ` +
-            `only dragged files (\`false\`).`),
+        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",
+            type: "string",
+        },
+        allowPaste: {
+            description: "This property indicates if the drop zone accepts files pasted from the " +
+                "clipboard (\`true\`) or " +
+                "only dragged files (\`false\`).",
+            type: "boolean",
+            defaultValue: true,
+        },
         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),
     },
     events: {

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

@@ -14,15 +14,25 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const FlowLayoutNative_1 = require("./FlowLayoutNative");
 const COMP = "FlowLayout";
 exports.FlowLayoutMd = (0, ComponentDefs_1.createMetadata)({
-    description: `This layout component is used to position content in rows with an auto wrapping feature: if ` +
-        `the length of the items exceed the available space the layout will wrap into a new line.`,
+    description: "This layout component is used to position content in rows with an auto wrapping feature: if " +
+        "the length of the items exceed the available space the layout will wrap into a new line.",
     props: {
-        gap: (0, ComponentDefs_1.d)(`This property defines the gap between items in the same row and between rows. The ${COMP} ` +
-            `component creates a new row when an item is about to overflow the current row.`),
-        columnGap: (0, ComponentDefs_1.d)(`The \`columnGap\` property specifies the space between items in a single row; it overrides ` +
-            `the \`gap\` value.`),
-        rowGap: (0, ComponentDefs_1.d)(`The \`rowGap\` property specifies the space between the ${COMP} rows; it overrides ` +
-            `the \`gap\` value.`),
+        gap: {
+            description: `This property defines the gap between items in the same row and between rows. The ${COMP} ` +
+                `component creates a new row when an item is about to overflow the current row.`,
+            type: "string",
+            defaultValue: "$gap-normal",
+        },
+        columnGap: {
+            description: "The \`columnGap\` property specifies the space between items in a single row; it overrides " +
+                "the \`gap\` value.",
+            defaultValue: FlowLayoutNative_1.defaultProps.columnGap,
+        },
+        rowGap: {
+            description: `The \`rowGap\` property specifies the space between the ${COMP} rows; it overrides ` +
+                `the \`gap\` value.`,
+            defaultValue: FlowLayoutNative_1.defaultProps.rowGap,
+        },
         shadow: (0, ComponentDefs_1.d)(`${COMP} does not support shadow, we're waiting for a decent solution.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(FlowLayout_module_scss_1.default.themeVars),

package/dist/scripts/src/components/FlowLayout/FlowLayoutNative.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlowLayout = exports.FlowItemWrapper = exports.FlowItemBreak = void 0;
+exports.FlowLayout = exports.defaultProps = exports.FlowItemWrapper = exports.FlowItemBreak = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -97,6 +97,10 @@ exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, r
                     [FlowLayout_module_scss_1.default.starSized]: isStarSizing,
                 }), ref: ref, children: children }), isStarSizing && (0, jsx_runtime_1.jsx)(exports.FlowItemBreak, {})] }));
 });
+exports.defaultProps = {
+    columnGap: "$gap-normal",
+    rowGap: "$gap-normal",
+};
 exports.FlowLayout = (0, react_1.forwardRef)(function FlowLayout({ style, columnGap = 0, rowGap = 0, children }, forwardedRef) {
     const [numberOfChildren, setNumberOfChildren] = (0, react_1.useState)(0);
     const safeColumnGap = numberOfChildren === 1 ? 0 : columnGap;

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

@@ -19,24 +19,60 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
         `(or change) data and submit it to the app (a server) for further processing.`,
     props: {
         buttonRowTemplate: (0, metadata_helpers_1.dComponent)(`This property allows defining a custom component to display the buttons at the bottom of the form.`),
-        itemLabelPosition: (0, ComponentDefs_1.d)(`This property sets the position of the item labels within the form.` +
-            `Individual \`FormItem\` instances can override this property.`, abstractions_1.labelPositionMd, "string", "top"),
-        itemLabelWidth: (0, ComponentDefs_1.d)(`This property sets the width of the item labels within the form. Individual ` +
-            `\`FormItem\` instances can override this property.`),
-        itemLabelBreak: (0, ComponentDefs_1.d)(`This boolean value indicates if form item labels can be split into multiple ` +
-            `lines if it would overflow the available label width. Individual \`FormItem\` ` +
-            `instances can override this property.`),
-        keepModalOpenOnSubmit: (0, ComponentDefs_1.d)("This property prevents the modal from closing when the form is submitted."),
-        data: (0, ComponentDefs_1.d)(`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.`),
-        cancelLabel: (0, ComponentDefs_1.d)(`This property defines the label of the Cancel button, by default, "Cancel".`),
-        saveLabel: (0, ComponentDefs_1.d)(`This property defines the label of the Save button, by default, "Save".`),
-        saveInProgressLabel: (0, ComponentDefs_1.d)("This property defines the label of the Save button to display during the " +
-            "form data submit (save) operation. By default, the value of `saveLabel`."),
-        swapCancelAndSave: (0, ComponentDefs_1.d)(`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.`),
+        itemLabelPosition: {
+            description: `This property sets the position of the item labels within the form.` +
+                `Individual \`FormItem\` instances can override this property.`,
+            availableValues: abstractions_1.labelPositionMd,
+            type: "string",
+            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.`,
+            type: "string",
+        },
+        itemLabelBreak: {
+            description: `This boolean value indicates if form item labels can be split into multiple ` +
+                `lines if it would overflow the available label width. Individual \`FormItem\` ` +
+                `instances can override this property.`,
+            type: "boolean",
+            defaultValue: FormNative_1.defaultProps.itemLabelBreak,
+        },
+        keepModalOpenOnSubmit: {
+            description: "This property prevents the modal from closing when the form is submitted.",
+            type: "boolean",
+            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.`,
+        },
+        cancelLabel: {
+            description: "This property defines the label of the Cancel button.",
+            type: "string",
+            defaultValue: FormNative_1.defaultProps.cancelLabel,
+        },
+        saveLabel: {
+            description: `This property defines the label of the Save button.`,
+            type: "string",
+            defaultValue: FormNative_1.defaultProps.saveLabel,
+        },
+        saveInProgressLabel: {
+            description: "This property defines the label of the Save button to display during the " +
+                "form data submit (save) operation.",
+            type: "string",
+            defaultValue: FormNative_1.defaultProps.saveInProgressLabel,
+        },
+        swapCancelAndSave: {
+            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",
+        },
         submitUrl: (0, ComponentDefs_1.d)(`URL to submit the form data.`),
-        submitMethod: (0, ComponentDefs_1.d)(`HTTP method to use when submitting 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\`.`),
         _data_url: (0, metadata_helpers_1.dInternal)("when we have an api bound data prop, we inject the url here"),
     },

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

@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getByPath = void 0;
+exports.defaultProps = exports.getByPath = void 0;
 exports.FormWithContextVar = FormWithContextVar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -172,6 +172,14 @@ const initialState = {
     interactionFlags: {},
     submitInProgress: false,
 };
+exports.defaultProps = {
+    cancelLabel: "Cancel",
+    saveLabel: "Save",
+    saveInProgressLabel: "Saving...",
+    itemLabelPosition: "top",
+    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) {
     const formRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);

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

@@ -31,15 +31,21 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         `the \`${COMP}\` may be associated with a particular property within the encapsulating \`Form\` ` +
         `component's data.`,
     props: {
-        bindTo: (0, ComponentDefs_1.d)(`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.`),
+        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.`,
+        },
         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.`),
-        labelBreak: (0, ComponentDefs_1.d)(`This boolean value indicates if the label can be split into multiple lines if it would ` +
-            `overflow the available label width.`),
+        labelBreak: {
+            description: `This boolean value indicates if the label can be split into multiple lines if it would ` +
+                `overflow the available label width.`,
+            type: "boolean",
+            defaultValue: FormItemNative_1.defaultProps.labelBreak,
+        },
         enabled: (0, metadata_helpers_1.dEnabled)(),
         type: (0, ComponentDefs_1.d)(`This property is used to determine the specific input control the FormItem will wrap ` +
             `around. Note that the control names start with a lowercase letter and map to input ` +

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormItem = void 0;
+exports.FormItem = exports.defaultProps = void 0;
 exports.CustomFormItem = CustomFormItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -38,6 +38,11 @@ const HelperText_1 = require("./HelperText");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
+exports.defaultProps = {
+    type: "text",
+    labelBreak: true,
+    enabled: true,
+};
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
     var { style, bindTo, type = "text", label, enabled = true, labelPosition, labelWidth, labelBreak = true, children, validations, onValidate, 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"]);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);

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

@@ -29,19 +29,32 @@ const VALUE_DESC = (0, ComponentDefs_1.d)(`This property determines the text dis
 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 ELLIPSES_DESC = (0, ComponentDefs_1.d)(`This property indicates whether ellipses should be displayed (\`true\`) when the heading ` +
-    `text is cropped or not (\`false\`).`);
+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 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.",
+    type: "boolean",
+    defaultValue: HeadingNative_1.defaultProps.omitFromToc,
+};
 exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
     description: "Represents a heading text",
     props: {
         value: VALUE_DESC,
-        level: (0, ComponentDefs_1.d)(`This property sets the visual significance (level) of the heading.`),
+        level: {
+            description: "This property sets the visual significance (level) of the heading.",
+            availableValues: ["h1", "h2", "h3", "h4", "h5", "h6"],
+            defaultValue: HeadingNative_1.defaultProps.level,
+        },
         maxLines: MAX_LINES_DESC,
         ellipses: ELLIPSES_DESC,
         preserveLinebreaks: PRESERVE_DESC,
-        omitFromToc: (0, ComponentDefs_1.d)("If true, this heading will be excluded from the table of contents.", null, "boolean", false),
+        omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -64,6 +77,7 @@ exports.H1Md = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -86,6 +100,7 @@ exports.H2Md = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -108,6 +123,7 @@ exports.H3Md = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -130,6 +146,7 @@ exports.H4Md = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -152,6 +169,7 @@ exports.H5Md = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -174,6 +192,7 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {