xmlui 0.7.25 → 0.7.27

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

@@ -10,23 +10,68 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component can be used within a \`Table\` to define a particular table ` +
         `column's visual properties and data bindings.`,
     props: {
-        bindTo: (0, ComponentDefs_1.d)(`Indicates what part of the data to lay out in the column.`),
-        header: (0, ComponentDefs_1.d)(`Adds a label for a particular column.`),
-        width: (0, ComponentDefs_1.d)(`This property defines the width of the column. You can use a numeric value, a pixel ` +
-            `value (such as \`100px\`), or a star size value (such as \`*\`, \`2*\`, etc.). ` +
-            `You will get an error if you use any other unit (or value).`),
-        minWidth: (0, ComponentDefs_1.d)(`Indicates the minimum width a particular column can have.`),
-        maxWidth: (0, ComponentDefs_1.d)(`Indicates the maximum width a particular column can have.`),
-        canSort: (0, ComponentDefs_1.d)(`This property sets whether the user can sort by a column by clicking on its header ` +
-            `(\`true\`) or not (\`false\`).`),
-        pinTo: (0, ComponentDefs_1.d)(`This property allows the column to be pinned to ` +
-            `the \`left\` (left-to-right writing style) or \`right\` (left-to-right writing style) edge ` +
-            `of the table. If the writing style is right-to-left, the locations are switched.`, ["left", "right"], "string"),
-        canResize: (0, ComponentDefs_1.d)(`This property indicates whether the user can resize the column. If set to ` +
-            `\`true\`, the column can be resized by dragging the column border. If set to ` +
-            `\`false\`, the column cannot be resized. Double-clicking the column border ` +
-            `resets to the original size.`),
+        bindTo: {
+            description: `Indicates what part of the data to lay out in the column.`,
+            valueType: "string",
+        },
+        header: {
+            description: `Adds a label for a particular column.`,
+            valueType: "string",
+        },
+        width: {
+            description: `This property defines the width of the column. You can use a numeric value, a pixel ` +
+                `value (such as \`100px\`), or a star size value (such as \`*\`, \`2*\`, etc.). ` +
+                `You will get an error if you use any other unit (or value).`,
+            valueType: "any",
+        },
+        minWidth: {
+            description: `Indicates the minimum width a particular column can have. Same rules apply as with [width](#width).`,
+            valueType: "any",
+        },
+        maxWidth: {
+            description: `Indicates the maximum width a particular column can have. Same rules apply as with [width](#width).`,
+            valueType: "any",
+        },
+        canSort: {
+            description: `This property sets whether the user can sort by a column by clicking on its header ` +
+                `(\`true\`) or not (\`false\`).`,
+            valueType: "boolean",
+        },
+        pinTo: {
+            description: `This property allows the column to be pinned to ` +
+                `the \`left\` (left-to-right writing style) or \`right\` (left-to-right writing style) edge ` +
+                `of the table. If the writing style is right-to-left, the locations are switched.`,
+            availableValues: ["left", "right"],
+            valueType: "string",
+        },
+        canResize: {
+            description: `This property indicates whether the user can resize the column. If set to ` +
+                `\`true\`, the column can be resized by dragging the column border. If set to ` +
+                `\`false\`, the column cannot be resized. Double-clicking the column border ` +
+                `resets to the original size.`,
+            valueType: "boolean",
+        },
     },
+    contextVars: {
+        $item: {
+            description: "The data item being rendered.",
+        },
+        $row: {
+            description: "The data item being rendered (the same as \`$item\`).",
+        },
+        $itemIndex: {
+            description: "The index of the data item being rendered.",
+        },
+        $rowIndex: {
+            description: "The index of the data item being rendered (the same as \`$itemIndex\`).",
+        },
+        $colIndex: {
+            description: "The index of the column being rendered.",
+        },
+        $cell: {
+            description: "The value of the cell being rendered.",
+        },
+    }
 });
 exports.columnComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ColumnMd, (rendererContext) => {
     const { node, renderChild, extractValue, layoutCss } = rendererContext;

package/dist/scripts/src/components/Column/ColumnNative.js

@@ -20,8 +20,14 @@ function Column(_a) {
     var { nodeChildren, renderChild } = _a, columnMetadata = __rest(_a, ["nodeChildren", "renderChild"]);
     const id = (0, react_1.useId)();
     const { registerColumn, unRegisterColumn } = (0, TableContext_1.useTableContext)();
-    const cellRenderer = (0, react_1.useCallback)((row) => {
-        return (0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: nodeChildren, item: row, renderChild: renderChild });
+    const cellRenderer = (0, react_1.useCallback)((row, rowIndex, colIndex, value) => {
+        return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: nodeChildren, item: row, contextVars: {
+                $rowIndex: rowIndex,
+                $colIndex: colIndex,
+                $row: row,
+                $itemIndex: rowIndex,
+                $cell: value,
+            }, renderChild: renderChild }));
     }, [nodeChildren, renderChild]);
     const safeCellRenderer = (0, react_1.useMemo)(() => {
         return nodeChildren ? cellRenderer : undefined;

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

@@ -17,9 +17,17 @@ exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
         `It serves as a visual cue to distinguish between different sections or groups of content, ` +
         `helping to improve readability and organization.`,
     props: {
-        size: (0, ComponentDefs_1.d)(`This property defines the component's height (if the \`orientation\` is horizontal) ` +
-            `or the width (if the \`orientation\` is vertical).`),
-        orientation: (0, ComponentDefs_1.d)("Sets the main axis of the component", abstractions_1.orientationOptionMd),
+        size: {
+            description: `This property defines the component's height (if the \`orientation\` is horizontal) ` +
+                `or the width (if the \`orientation\` is vertical).`,
+            valueType: "any",
+        },
+        orientation: {
+            description: "Sets the main axis of the component",
+            availableValues: abstractions_1.orientationOptionMd,
+            defaultValue: ContentSeparatorNative_1.defaultProps.orientation,
+            valueType: "string",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(ContentSeparator_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/ContentSeparator/ContentSeparatorNative.js

@@ -3,11 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentSeparator = void 0;
+exports.ContentSeparator = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
-const ContentSeparator = ({ orientation = "horizontal", size, style, }) => {
+exports.defaultProps = {
+    orientation: "horizontal",
+};
+const ContentSeparator = ({ orientation = exports.defaultProps.orientation, size, style, }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ContentSeparator_module_scss_1.default.separator, {
             [ContentSeparator_module_scss_1.default.horizontal]: orientation === "horizontal",
             [ContentSeparator_module_scss_1.default.vertical]: orientation === "vertical",

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

@@ -20,16 +20,48 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        mode: (0, ComponentDefs_1.d)("The mode of the datepicker (single or range)"),
-        dateFormat: (0, ComponentDefs_1.d)("The format of the date displayed in the input field"),
-        showWeekNumber: (0, ComponentDefs_1.d)("Whether to show the week number in the calendar"),
-        weekStartsOn: (0, ComponentDefs_1.d)("The first day of the week. 0 is Sunday, 1 is Monday, etc."),
-        fromDate: (0, ComponentDefs_1.d)("The start date of the range of selectable dates"),
-        toDate: (0, ComponentDefs_1.d)("The end date of the range of selectable dates"),
-        disabledDates: (0, ComponentDefs_1.d)("An array of dates that are disabled"),
-        inline: (0, ComponentDefs_1.d)("The datepicker is displayed inline"),
+        enabled: (0, metadata_helpers_1.dEnabled)(DatePickerNative_1.defaultProps.enabled),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(DatePickerNative_1.defaultProps.validationStatus),
+        mode: {
+            description: "The mode of the datepicker (single or range)",
+            valueType: "string",
+            availableValues: DatePickerNative_1.DatePickerModeValues,
+            defaultValue: DatePickerNative_1.defaultProps.mode,
+        },
+        dateFormat: {
+            description: "The format of the date displayed in the input field",
+            valueType: "string",
+            defaultValue: DatePickerNative_1.defaultProps.dateFormat,
+            availableValues: DatePickerNative_1.dateFormats,
+        },
+        showWeekNumber: {
+            description: "Whether to show the week number in the calendar",
+            valueType: "boolean",
+            defaultValue: DatePickerNative_1.defaultProps.showWeekNumber,
+        },
+        weekStartsOn: {
+            description: "The first day of the week. 0 is Sunday, 1 is Monday, etc.",
+            valueType: "number",
+            defaultValue: DatePickerNative_1.defaultProps.weekStartsOn,
+            availableValues: DatePickerNative_1.weekDaysMd,
+        },
+        fromDate: {
+            description: "The start date of the range of selectable dates",
+            valueType: "string",
+        },
+        toDate: {
+            description: "The end date of the range of selectable dates",
+            valueType: "string",
+        },
+        disabledDates: {
+            description: "An array of dates that are disabled",
+            valueType: "any",
+        },
+        inline: {
+            description: "Whether to display the datepicker inline",
+            valueType: "boolean",
+            defaultValue: DatePickerNative_1.defaultProps.inline,
+        },
         startText: (0, metadata_helpers_1.dStartText)(),
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),

package/dist/scripts/src/components/DatePicker/DatePickerNative.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.DatePicker = void 0;
+exports.DatePicker = exports.defaultProps = exports.dateFormats = exports.weekDaysMd = exports.DatePickerModeValues = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_day_picker_1 = require("react-day-picker");
@@ -49,6 +49,7 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
+exports.DatePickerModeValues = ["single", "range"];
 var WeekDays;
 (function (WeekDays) {
     WeekDays[WeekDays["Sunday"] = 0] = "Sunday";
@@ -59,7 +60,38 @@ var WeekDays;
     WeekDays[WeekDays["Friday"] = 5] = "Friday";
     WeekDays[WeekDays["Saturday"] = 6] = "Saturday";
 })(WeekDays || (WeekDays = {}));
-const dateFormats = [
+;
+exports.weekDaysMd = [
+    {
+        value: WeekDays.Sunday,
+        description: "Sunday",
+    },
+    {
+        value: WeekDays.Monday,
+        description: "Monday",
+    },
+    {
+        value: WeekDays.Tuesday,
+        description: "Tuesday",
+    },
+    {
+        value: WeekDays.Wednesday,
+        description: "Wednesday",
+    },
+    {
+        value: WeekDays.Thursday,
+        description: "Thursday",
+    },
+    {
+        value: WeekDays.Friday,
+        description: "Friday",
+    },
+    {
+        value: WeekDays.Saturday,
+        description: "Saturday",
+    },
+];
+exports.dateFormats = [
     "MM/dd/yyyy",
     "MM-dd-yyyy",
     "yyyy/MM/dd",
@@ -69,29 +101,17 @@ const dateFormats = [
     "yyyyMMdd",
     "MMddyyyy",
 ];
-const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
-const parseISODate = (dateString) => {
-    if (dateString && isoRegex.test(dateString)) {
-        const parsedDate = (0, date_fns_1.parseISO)(dateString);
-        if ((0, date_fns_1.isValid)(parsedDate)) {
-            return parsedDate;
-        }
-    }
-    return undefined;
-};
-const parseDate = (dateString) => {
-    if (dateString) {
-        for (const format of dateFormats) {
-            const parsedDate = (0, date_fns_1.parse)(dateString, format, new Date());
-            if ((0, date_fns_1.isValid)(parsedDate)) {
-                return parsedDate;
-            }
-        }
-    }
-    return undefined;
+exports.defaultProps = {
+    mode: "single",
+    validationStatus: "none",
+    enabled: true,
+    inline: false,
+    dateFormat: "MM/dd/yyyy",
+    showWeekNumber: false,
+    weekStartsOn: WeekDays.Sunday,
+    disabledDates: [],
 };
-exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialValue, value, mode = "single", enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = "MM/dd/yyyy", // Default dateFormat
-showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabledDates = [], style, registerComponentApi, inline = false, startText, startIcon, endText, endIcon, }, forwardedRef) {
+exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, fromDate, toDate, disabledDates = exports.defaultProps.disabledDates, style, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, }, forwardedRef) {
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
     const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
     const [isMenuFocused, setIsMenuFocused] = (0, react_1.useState)(false);
@@ -110,8 +130,8 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
         return undefined;
     }, [value, mode]);
     (0, react_1.useEffect)(() => {
-        if (!dateFormats.includes(dateFormat)) {
-            throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${dateFormats.join(", ")}`);
+        if (!exports.dateFormats.includes(dateFormat)) {
+            throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${exports.dateFormats.join(", ")}`);
         }
     }, [dateFormat]);
     const startDate = (0, react_1.useMemo)(() => {
@@ -194,3 +214,24 @@ showWeekNumber = false, weekStartsOn = WeekDays.Sunday, fromDate, toDate, disabl
                         [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
                     }), onFocus: handleOnButtonFocus, onBlur: handleOnButtonBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: "start", className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { fixedWeeks: true, fromDate: startDate, toDate: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, initialFocus: true, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] }));
 });
+const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
+const parseISODate = (dateString) => {
+    if (dateString && isoRegex.test(dateString)) {
+        const parsedDate = (0, date_fns_1.parseISO)(dateString);
+        if ((0, date_fns_1.isValid)(parsedDate)) {
+            return parsedDate;
+        }
+    }
+    return undefined;
+};
+const parseDate = (dateString) => {
+    if (dateString) {
+        for (const format of exports.dateFormats) {
+            const parsedDate = (0, date_fns_1.parse)(dateString, format, new Date());
+            if ((0, date_fns_1.isValid)(parsedDate)) {
+                return parsedDate;
+            }
+        }
+    }
+    return undefined;
+};

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

@@ -20,14 +20,38 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
         triggerTemplate: (0, metadata_helpers_1.dTriggerTemplate)(DDMCOMP),
-        alignment: (0, ComponentDefs_1.d)(`This property allows you to determine the alignment of the displayed menu items.`),
+        alignment: {
+            description: `This property allows you to determine the alignment of the displayed menu items.`,
+            valueType: "string",
+            availableValues: abstractions_1.alignmentOptionMd,
+            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.alignment,
+        },
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        triggerButtonVariant: (0, ComponentDefs_1.d)(`This property defines the theme variant of the \`Button\` as the dropdown menu's trigger. ` +
-            `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`),
-        triggerButtonThemeColor: (0, ComponentDefs_1.d)(`This property defines the theme color of the \`Button\` as the dropdown menu's trigger. ` +
-            `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`),
-        triggerButtonIcon: (0, ComponentDefs_1.d)(`This property defines the icon to display on the trigger button.`),
-        triggerButtonIconPosition: (0, ComponentDefs_1.d)(`This property defines the position of the icon on the trigger button.`, abstractions_1.iconPositionNames),
+        triggerButtonVariant: {
+            description: `This property defines the theme variant of the \`Button\` as the dropdown menu's trigger. ` +
+                `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`,
+            valueType: "string",
+            availableValues: abstractions_1.buttonVariantMd,
+            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonVariant,
+        },
+        triggerButtonThemeColor: {
+            description: `This property defines the theme color of the \`Button\` as the dropdown menu's trigger. ` +
+                `It has no effect when a custom trigger is defined with \`triggerTemplate\`.`,
+            valueType: "string",
+            availableValues: abstractions_1.buttonThemeMd,
+            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonThemeColor,
+        },
+        triggerButtonIcon: {
+            description: `This property defines the icon to display on the trigger button.`,
+            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonIcon,
+            valueType: "string",
+        },
+        triggerButtonIconPosition: {
+            description: `This property defines the position of the icon on the trigger button.`,
+            defaultValue: DropdownMenuNative_1.defaultDropdownMenuProps.triggerButtonIconPosition,
+            valueType: "string",
+            availableValues: abstractions_1.iconPositionMd,
+        },
     },
     events: {
         willOpen: (0, ComponentDefs_1.d)(`This event fires when the \`${DDMCOMP}\` component is opened.`),
@@ -53,12 +77,27 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
     description: `This property represents a leaf item in a menu hierarchy. Clicking the item triggers an action.`,
     docFolder: DDMCOMP,
     props: {
-        iconPosition: (0, ComponentDefs_1.d)(`This property allows you to determine the position of the icon displayed in the menu item.`, abstractions_1.iconPositionMd.filter(p => p.value === "start" || p.value === "end")),
-        icon: (0, ComponentDefs_1.d)(`This property names an optional icon to display with the menu item.`),
+        iconPosition: {
+            description: `This property allows you to determine the position of the icon displayed in the menu item.`,
+            valueType: "string",
+            availableValues: abstractions_1.iconPositionMd,
+            defaultValue: DropdownMenuNative_1.defaultMenuItemProps.iconPosition,
+        },
+        icon: {
+            description: `This property names an optional icon to display with the menu item.`,
+            valueType: "string",
+        },
         label: (0, metadata_helpers_1.dLabel)(),
-        to: (0, ComponentDefs_1.d)(`This property defines the URL of the menu item. If this property is defined (and the \`click\` ` +
-            `event does not have an event handler), clicking the menu item navigates to this link.`),
-        active: (0, ComponentDefs_1.d)(`This property indicates if the specified menu item is active.`),
+        to: {
+            description: `This property defines the URL of the menu item. If this property is defined (and the \`click\` ` +
+                `event does not have an event handler), clicking the menu item navigates to this link.`,
+            valueType: "string",
+        },
+        active: {
+            description: `This property indicates if the specified menu item is active.`,
+            valueType: "boolean",
+            defaultValue: DropdownMenuNative_1.defaultMenuItemProps.active,
+        },
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(MICOMP),

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.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.DropdownMenu = void 0;
+exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
 exports.MenuItem = MenuItem;
 exports.SubMenuItem = SubMenuItem;
 exports.MenuSeparator = MenuSeparator;
@@ -59,7 +59,14 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const IconNative_1 = require("../Icon/IconNative");
-exports.DropdownMenu = (0, react_1.forwardRef)(function DropdownMenu({ triggerTemplate, children, label, registerComponentApi, style, onWillOpen, alignment = "start", disabled = false, triggerButtonVariant = "ghost", triggerButtonThemeColor = "primary", triggerButtonIcon = "chevrondown", triggerButtonIconPosition = "end", }, ref) {
+exports.defaultDropdownMenuProps = {
+    alignment: "start",
+    triggerButtonVariant: "ghost",
+    triggerButtonThemeColor: "primary",
+    triggerButtonIcon: "chevrondown",
+    triggerButtonIconPosition: "end",
+};
+exports.DropdownMenu = (0, react_1.forwardRef)(function DropdownMenu({ triggerTemplate, children, label, registerComponentApi, style, onWillOpen, alignment = exports.defaultDropdownMenuProps.alignment, disabled = false, triggerButtonVariant = exports.defaultDropdownMenuProps.triggerButtonVariant, triggerButtonThemeColor = exports.defaultDropdownMenuProps.triggerButtonThemeColor, triggerButtonIcon = exports.defaultDropdownMenuProps.triggerButtonIcon, triggerButtonIconPosition = exports.defaultDropdownMenuProps.triggerButtonIconPosition, }, ref) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [open, setOpen] = (0, react_2.useState)(false);
     (0, react_2.useEffect)(() => {
@@ -77,7 +84,11 @@ exports.DropdownMenu = (0, react_1.forwardRef)(function DropdownMenu({ triggerTe
             setOpen(isOpen);
         }), children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, disabled: disabled, ref: ref, children: triggerTemplate ? (triggerTemplate) : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: triggerButtonIcon }), iconPosition: triggerButtonIconPosition, type: "button", variant: triggerButtonVariant, themeColor: triggerButtonThemeColor, disabled: disabled, children: label })) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: alignment, style: style, className: DropdownMenu_module_scss_1.default.DropdownMenuContent, children: children }) })] }));
 });
-function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = "start", active = false, }) {
+exports.defaultMenuItemProps = {
+    iconPosition: "start",
+    active: false,
+};
+function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, }) {
     const iconToStart = iconPosition === "start";
     return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Item, { style: style, className: (0, classnames_1.default)(DropdownMenu_module_scss_1.default.DropdownMenuItem, {
             [DropdownMenu_module_scss_1.default.active]: active,

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

@@ -9,23 +9,26 @@ const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
-const base_utils_1 = require("../../components-core/theming/themes/base-utils");
 const FooterNative_1 = require("./FooterNative");
 const COMP = "Footer";
 exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is a component that acts as a placeholder within \`App\`.`,
     themeVars: (0, themeVars_1.parseScssVar)(Footer_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign({ [`color-bg-${COMP}`]: "$color-bg-AppHeader", [`align-vertical-${COMP}`]: "center", [`font-size-${COMP}`]: "$font-size-small", [`color-text-${COMP}`]: "$color-text-secondary", [`max-content-width-${COMP}`]: "$max-content-width", [`padding-${COMP}`]: "$space-4 $space-2" }, (0, base_utils_1.borderSubject)(COMP, {
-        top: {
-            color: "$color-border",
-            thickness: "1px",
-            style: "solid",
-        },
-    })), { light: {
+    defaultThemeVars: {
+        [`color-bg-${COMP}`]: "$color-bg-AppHeader",
+        [`align-vertical-${COMP}`]: "center",
+        [`font-size-${COMP}`]: "$font-size-small",
+        [`color-text-${COMP}`]: "$color-text-secondary",
+        [`max-content-width-${COMP}`]: "$max-content-width",
+        [`border-${COMP}`]: `1px solid $color-border`,
+        [`padding-${COMP}`]: "$space-2 $space-4",
+        light: {
         // --- No light-specific theme vars
-        }, dark: {
+        },
+        dark: {
         // --- No dark-specific theme vars
-        } }),
+        },
+    },
 });
 exports.footerRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FooterMd, ({ node, renderChild, layoutCss, layoutContext }) => {
     return ((0, jsx_runtime_1.jsx)(FooterNative_1.Footer, { style: layoutCss, className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, children: renderChild(node.children, {

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

@@ -48,7 +48,13 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
     },
     contextVars: {
         $data: (0, ComponentDefs_1.d)(`This property represents the value of the form data. You can access the fields of the form ` +
-            `using the IDs in the \`bindTo\` property of nested \`FormItem\` instances.`),
+            `using the IDs in the \`bindTo\` property of nested \`FormItem\` instances. \`$data\` also ` +
+            `provides an \`update\` method as a shortcut to the Form's exposed \`update\` method.`),
+    },
+    apis: {
+        reset: (0, ComponentDefs_1.d)(`Call this event to reset the form to its initial state.`),
+        update: (0, ComponentDefs_1.d)("You can pass a data object to update the form data. The properties in the passed data " +
+            "object are updated to their values accordingly. Other form properties remain intact."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Form_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -283,23 +283,52 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         dispatch((0, formActions_2.formReset)(initialValue));
         onReset === null || onReset === void 0 ? void 0 : onReset();
     });
+    const updateData = (0, misc_1.useEvent)((change) => {
+        if (typeof change !== "object" || change === null || change === undefined) {
+            return;
+        }
+        Object.entries(change).forEach(([key, value]) => {
+            dispatch({
+                type: formActions_1.FormActionKind.FIELD_VALUE_CHANGED,
+                payload: {
+                    uid: key,
+                    value: value,
+                },
+            });
+        });
+    });
     const cancelButton = cancelLabel === "" ? null : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "button", themeColor: "secondary", variant: "ghost", onClick: doCancel, children: cancelLabel }, "cancel"));
     const submitButton = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "submit", disabled: !isEnabled, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, formState.submitInProgress, saveInProgressLabel, saveLabel]);
     (0, react_2.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             reset: doReset,
+            update: updateData,
         });
-    }, [doReset, registerComponentApi]);
+    }, [doReset, updateData, registerComponentApi]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
 });
 Form.displayName = "Form";
 function FormWithContextVar({ node, renderChild, extractValue, style, lookupEventHandler, registerComponentApi, }) {
     const [formState, dispatch] = (0, react_2.useReducer)(formReducer, initialState);
     const nodeWithItem = (0, react_2.useMemo)(() => {
+        const updateData = (change) => {
+            if (typeof change !== "object" || change === null || change === undefined) {
+                return;
+            }
+            Object.entries(change).forEach(([key, value]) => {
+                dispatch({
+                    type: formActions_1.FormActionKind.FIELD_VALUE_CHANGED,
+                    payload: {
+                        uid: key,
+                        value: value,
+                    },
+                });
+            });
+        };
         return {
             type: "Fragment",
             vars: {
-                $data: formState.subject,
+                $data: Object.assign(Object.assign({}, formState.subject), { update: updateData }),
             },
             children: node.children,
         };

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

@@ -41,11 +41,12 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
         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),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`font-family-${COMP}`]: "$font-family",
-        [`color-text-${COMP}`]: "$color-text-primary",
+        [`color-text-${COMP}`]: "inherit",
         [`font-weight-${COMP}`]: "$font-weight-bold",
         [`letter-spacing-${COMP} `]: "0",
         light: {
@@ -189,9 +190,9 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
     },
 });
 function renderHeading({ node, extractValue, layoutCss, level, renderChild }) {
-    var _a;
-    const _b = node.props, { maxLines, preserveLinebreaks, ellipses } = _b, restProps = __rest(_b, ["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 }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue, layoutCss), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
+    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) })));
 }
 exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, layoutCss, renderChild }) => {
     return renderHeading({