xmlui 0.7.26 → 0.7.27

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

@@ -16,16 +16,37 @@ const COMP = "Card";
 exports.CardMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component is a container for cohesive elements, often rendered visually as a card.`,
     props: {
-        avatarUrl: (0, ComponentDefs_1.d)(`Show the avatar (\`true\`) or not (\`false\`). If not specified, the ${COMP} will show the ` +
-            `first letters of the [\`title\`](#title).`),
-        showAvatar: (0, ComponentDefs_1.d)(`Indicates whether the ${COMP} should be displayed`, null, "boolean"),
-        title: (0, ComponentDefs_1.d)(`This prop sets the prestyled title.`),
-        subtitle: (0, ComponentDefs_1.d)(`This prop sets the prestyled subtitle.`),
-        linkTo: (0, ComponentDefs_1.d)(`This property wraps the title in a \`Link\` component that is clickable to navigate.`),
-        orientation: (0, ComponentDefs_1.d)(`An optional property that governs the ${COMP}'s orientation ` +
-            `(whether the ${COMP} lays out its children in a row or a column). ` +
-            `If the orientation is set to \`horizontal\`, the ${COMP} will display ` +
-            `its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`, abstractions_1.orientationOptionMd, "string", CardNative_1.DEFAULT_ORIENTATION),
+        avatarUrl: {
+            description: `Show the avatar (\`true\`) or not (\`false\`). If not specified, the ${COMP} will show the ` +
+                `first letters of the [\`title\`](#title).`,
+            type: "string",
+        },
+        showAvatar: {
+            description: `Indicates whether the ${COMP} should be displayed`,
+            valueType: "boolean",
+            defaultValue: CardNative_1.defaultProps.showAvatar,
+        },
+        title: {
+            description: `This prop sets the prestyled title.`,
+            valueType: "string",
+        },
+        subtitle: {
+            description: `This prop sets the prestyled subtitle.`,
+            valueType: "string",
+        },
+        linkTo: {
+            description: `This property wraps the title in a \`Link\` component that is clickable to navigate.`,
+            valueType: "string",
+        },
+        orientation: {
+            description: `An optional property that governs the ${COMP}'s orientation ` +
+                `(whether the ${COMP} lays out its children in a row or a column). ` +
+                `If the orientation is set to \`horizontal\`, the ${COMP} will display ` +
+                `its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
+            availableValues: abstractions_1.orientationOptionMd,
+            valueType: "string",
+            defaultValue: CardNative_1.defaultProps.orientation,
+        },
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),

package/dist/scripts/src/components/Card/CardNative.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = exports.DEFAULT_ORIENTATION = void 0;
+exports.Card = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -13,8 +13,11 @@ const LinkNative_1 = require("../Link/LinkNative");
 const HeadingNative_1 = require("../Heading/HeadingNative");
 const StackNative_1 = require("../Stack/StackNative");
 const TextNative_1 = require("../Text/TextNative");
-exports.DEFAULT_ORIENTATION = "vertical";
-exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.DEFAULT_ORIENTATION, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || false, onClick, }, forwardedRef) {
+exports.defaultProps = {
+    orientation: "vertical",
+    showAvatar: false,
+};
+exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.defaultProps.orientation, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || exports.defaultProps.showAvatar, onClick, }, forwardedRef) {
     const titleProps = {
         level: "h2",
     };

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

@@ -11,24 +11,71 @@ const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const CarouselNative_1 = require("./CarouselNative");
+const abstractions_1 = require("../abstractions");
 const COMP = "Carousel";
 exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
     status: "in progress",
     description: `This component displays a slideshow by cycling through elements (images, text, or ` +
         `custom slides) like a carousel.`,
     props: {
-        orientation: (0, ComponentDefs_1.d)("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.", ["horizontal", "vertical"], null, "horizontal"),
-        indicators: (0, ComponentDefs_1.d)("This property indicates whether the carousel displays the indicators.", null, null, "true"),
-        controls: (0, ComponentDefs_1.d)("This property indicates whether the carousel displays the controls.", null, null, "true"),
-        autoplay: (0, ComponentDefs_1.d)("This property indicates whether the carousel automatically scrolls.", null, null, "false"),
-        loop: (0, ComponentDefs_1.d)("This property indicates whether the carousel loops.", null, null, "false"),
-        startIndex: (0, ComponentDefs_1.d)("This property indicates the index of the first slide to display.", null, null, "0"),
-        transitionDuration: (0, ComponentDefs_1.d)("This property specifies the duration of the transition between slides."),
-        autoplayInterval: (0, ComponentDefs_1.d)("This property specifies the interval between autoplay transitions."),
-        stopAutoplayOnInteraction: (0, ComponentDefs_1.d)("This property indicates whether autoplay stops on interaction."),
-        prevIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the previous control."),
-        nextIcon: (0, ComponentDefs_1.d)("This property specifies the icon to display for the next control."),
-        keyboard: (0, ComponentDefs_1.d)("This property indicates whether the carousel responds to keyboard events."),
+        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.",
+            availableValues: abstractions_1.orientationOptionMd,
+            valueType: "string",
+            defaultValue: CarouselNative_1.defaultProps.orientation,
+        },
+        indicators: {
+            description: "This property indicates whether the carousel displays the indicators.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.indicators,
+        },
+        controls: {
+            description: "This property indicates whether the carousel displays the controls.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.controls,
+        },
+        autoplay: {
+            description: "This property indicates whether the carousel automatically scrolls.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.autoplay,
+        },
+        loop: {
+            description: "This property indicates whether the carousel loops.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.loop,
+        },
+        startIndex: {
+            description: "This property indicates the index of the first slide to display.",
+            valueType: "number",
+            defaultValue: CarouselNative_1.defaultProps.startIndex,
+        },
+        transitionDuration: {
+            description: "This property indicates the duration of the transition between slides.",
+            valueType: "number",
+            defaultValue: CarouselNative_1.defaultProps.transitionDuration,
+        },
+        autoplayInterval: {
+            description: "This property specifies the interval between autoplay transitions.",
+            valueType: "number",
+            defaultValue: CarouselNative_1.defaultProps.autoplayInterval,
+        },
+        stopAutoplayOnInteraction: {
+            description: "This property indicates whether autoplay stops on interaction.",
+            valueType: "boolean",
+            defaultValue: CarouselNative_1.defaultProps.stopAutoplayOnInteraction,
+        },
+        prevIcon: {
+            description: "This property specifies the icon to display for the previous control.",
+            valueType: "string",
+        },
+        nextIcon: {
+            description: "This property specifies the icon to display for the next control.",
+            valueType: "string",
+        },
+        keyboard: {
+            description: "This property indicates whether the carousel responds to keyboard events.",
+            valueType: "boolean",
+        },
     },
     events: {
         displayDidChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/Carousel/CarouselNative.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.CarouselComponent = void 0;
+exports.CarouselComponent = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const react_1 = require("react");
@@ -48,7 +48,18 @@ const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss")
 const constants_1 = require("../../components-core/constants");
 const CarouselContext_1 = require("./CarouselContext");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = "horizontal", children, style, indicators = true, onDisplayDidChange = constants_1.noop, autoplay = false, controls = true, loop = false, startIndex = 0, prevIcon, nextIcon, transitionDuration = 25, autoplayInterval = 5000, stopAutoplayOnInteraction = true, registerComponentApi, }, forwardedRef) {
+exports.defaultProps = {
+    orientation: "horizontal",
+    indicators: true,
+    autoplay: false,
+    controls: true,
+    loop: false,
+    startIndex: 0,
+    transitionDuration: 25,
+    autoplayInterval: 5000,
+    stopAutoplayOnInteraction: true,
+};
+exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = exports.defaultProps.orientation, children, style, indicators = exports.defaultProps.indicators, onDisplayDidChange = constants_1.noop, autoplay = exports.defaultProps.autoplay, controls = exports.defaultProps.controls, loop = exports.defaultProps.loop, startIndex = exports.defaultProps.startIndex, prevIcon, nextIcon, transitionDuration = exports.defaultProps.transitionDuration, autoplayInterval = exports.defaultProps.autoplayInterval, stopAutoplayOnInteraction = exports.defaultProps.stopAutoplayOnInteraction, registerComponentApi, }, forwardedRef) {
     const referenceElement = (0, react_1.useRef)(null);
     const [activeSlide, setActiveSlide] = (0, react_1.useState)(0);
     const [plugins, setPlugins] = (0, react_1.useState)([]);

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

@@ -11,9 +11,16 @@ exports.ChangeListenerMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a functional component (it renders no UI) to trigger an action when a ` +
         `particular value (component property, state, etc.) changes.`,
     props: {
-        listenTo: (0, ComponentDefs_1.d)(`Value to the changes of which this component listens.`),
-        throttleWaitInMs: (0, ComponentDefs_1.d)(`This variable sets a throttling time (in milliseconds) to apply when executing the \`didChange\` ` +
-            `event handler. All changes within that throttling time will only fire the \`didChange\` event once.`),
+        listenTo: {
+            description: `Value to the changes of which this component listens.`,
+            valueType: "any",
+        },
+        throttleWaitInMs: {
+            description: `This variable sets a throttling time (in milliseconds) to apply when executing the \`didChange\` ` +
+                `event handler. All changes within that throttling time will only fire the \`didChange\` event once.`,
+            valueType: "number",
+            defaultValue: ChangeListenerNative_1.defaultProps.throttleWaitInMs,
+        },
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/ChangeListener/ChangeListenerNative.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.ChangeListener = ChangeListener;
 const react_1 = require("react");
 const lodash_es_1 = require("lodash-es");
 const hooks_1 = require("../../components-core/utils/hooks");
-function ChangeListener({ listenTo, onChange, throttleWaitInMs = 0 }) {
+exports.defaultProps = {
+    throttleWaitInMs: 0,
+};
+function ChangeListener({ listenTo, onChange, throttleWaitInMs = exports.defaultProps.throttleWaitInMs }) {
     const prevValue = (0, hooks_1.usePrevious)(listenTo);
     const throttledOnChange = (0, react_1.useMemo)(() => {
         if (throttleWaitInMs !== 0 && onChange) {

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

@@ -18,20 +18,22 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component allows users to make binary choices, typically between checked or ` +
         `unchecked. It consists of a small box that can be toggled on or off by clicking on it.`,
     props: {
-        indeterminate: (0, metadata_helpers_1.dIndeterminate)(),
+        indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         required: (0, metadata_helpers_1.dRequired)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(false),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(Toggle_1.defaultProps.initialValue),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        description: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(Toggle_1.defaultProps.validationStatus),
+        description: (0, metadata_helpers_1.dInternal)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
             `of the ${COMP} besides its label.`),
-        inputTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom checkbox input template"),
+        inputTemplate: {
+            description: "This property is used to define a custom checkbox input template",
+        },
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),
@@ -70,5 +72,5 @@ exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
-            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, false), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
+            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
 });

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

@@ -17,14 +17,14 @@ exports.ColorPickerMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)(),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(ColorPickerNative_1.defaultProps.validationStatus),
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = void 0;
+exports.ColorPicker = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
@@ -12,7 +12,13 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
-exports.ColorPicker = (0, react_2.forwardRef)(({ style, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = true, value = "", autoFocus, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = "none", initialValue, }, forwardedRef) => {
+exports.defaultProps = {
+    initialValue: "",
+    value: "",
+    enabled: true,
+    validationStatus: "none",
+};
+exports.ColorPicker = (0, react_2.forwardRef)(({ style, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value = exports.defaultProps.value, autoFocus, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue, }, forwardedRef) => {
     const inputRef = (0, react_2.useRef)(null);
     const updateValue = (0, react_2.useCallback)((value) => {
         updateState({ value });

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

@@ -12,23 +12,45 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         bindTo: {
             description: `Indicates what part of the data to lay out in the column.`,
-            isRequired: true,
-        },
-        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.`),
+            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: {

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;
+};