xmlui 0.7.27 → 0.7.29

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/FormContext.js

@@ -1,9 +1,111 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormContext = void 0;
+exports.formControlTypesMd = exports.formControlTypes = exports.FormContext = exports.validationModeMd = exports.defaultValidationMode = exports.validationModeValues = exports.validationSeverityMd = exports.validationSeverityValues = void 0;
 exports.useFormContextPart = useFormContextPart;
 const use_context_selector_1 = require("use-context-selector");
+exports.validationSeverityValues = ["error", "warning", "valid", "none"];
+exports.validationSeverityMd = [
+    { value: "valid", description: "Visual indicator for an input that is accepted" },
+    { value: "warning", description: "Visual indicator for an input that produced a warning" },
+    { value: "error", description: "Visual indicator for an input that produced an error" },
+];
+exports.validationModeValues = ["errorLate", "onChanged", "onLostFocus"];
+exports.defaultValidationMode = "errorLate";
+exports.validationModeMd = [
+    {
+        value: "errorLate",
+        description: "Display the error when the field loses focus." +
+            "If an error is already displayed, continue for every keystroke until input is accepted.",
+    },
+    {
+        value: "onChanged",
+        description: "Display error (if present) for every keystroke.",
+    },
+    {
+        value: "onLostFocus",
+        description: "Show/hide error (if present) only if the field loses focus.",
+    }
+];
 exports.FormContext = (0, use_context_selector_1.createContext)(undefined);
 function useFormContextPart(selector) {
     return (0, use_context_selector_1.useContextSelector)(exports.FormContext, selector);
 }
+exports.formControlTypes = [
+    "text",
+    "password",
+    "textarea",
+    "checkbox",
+    "number",
+    "integer",
+    "file",
+    "select",
+    "autocomplete",
+    "datePicker",
+    "radioGroup",
+    "custom",
+    "switch",
+    "slider",
+    "colorpicker",
+];
+exports.formControlTypesMd = [
+    {
+        value: "text",
+        description: "Renders TextBox",
+    },
+    {
+        value: "password",
+        description: "Renders TextBox with `password` type",
+    },
+    {
+        value: "textarea",
+        description: "Renders Textarea",
+    },
+    {
+        value: "checkbox",
+        description: "Renders Checkbox",
+    },
+    {
+        value: "number",
+        description: "Renders NumberBox",
+    },
+    {
+        value: "integer",
+        description: "Renders NumberBox with `integersOnly` set to true",
+    },
+    {
+        value: "file",
+        description: "Renders FileInput",
+    },
+    {
+        value: "datePicker",
+        description: "Renders DatePicker",
+    },
+    {
+        value: "radioGroup",
+        description: "Renders RadioGroup",
+    },
+    {
+        value: "switch",
+        description: "Renders Switch",
+    },
+    {
+        value: "select",
+        description: "Renders Select",
+    },
+    {
+        value: "autocomplete",
+        description: "Renders AutoComplete",
+    },
+    {
+        value: "slider",
+        description: "Renders Slider",
+    },
+    {
+        value: "colorpicker",
+        description: "Renders ColorPicker",
+    },
+    {
+        value: "custom",
+        description: "Custom control specified in children",
+    }
+];

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);