xmlui 0.7.28 → 0.7.30

package/dist/scripts/bin/start.js

@@ -42,6 +42,7 @@ const start = (_a) => __awaiter(void 0, [_a], void 0, function* ({ port, withMoc
                 "process.env.VITE_STANDALONE": process.env.VITE_STANDALONE,
                 "process.env.VITE_MOCK_ENABLED": withMock,
                 "process.env.VITE_INCLUDE_ALL_COMPONENTS": JSON.stringify("true"),
+                "process.env.VITE_USER_COMPONENTS_Inspect": JSON.stringify("true"),
             } }));
         // server.
         if (!server.httpServer) {

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

@@ -55,7 +55,6 @@ const FileInput_1 = require("./FileInput/FileInput");
 const Spinner_1 = require("./Spinner/Spinner");
 const Markdown_1 = require("./Markdown/Markdown");
 const Select_1 = require("./Select/Select");
-const ThemeChanger_1 = require("./ThemeChanger/ThemeChanger");
 const FormSection_1 = require("./FormSection/FormSection");
 const Checkbox_1 = require("./Checkbox/Checkbox");
 const Switch_1 = require("./Switch/Switch");
@@ -79,12 +78,6 @@ const Redirect_1 = require("./Redirect/Redirect");
 const Tabs_1 = require("./Tabs/Tabs");
 const Bookmark_1 = require("./Bookmark/Bookmark");
 const AppState_1 = require("./AppState/AppState");
-const PageHeader_1 = require("./PageHeader/PageHeader");
-const TrendLabel_1 = require("./TrendLabel/TrendLabel");
-const IconInfoCard_1 = require("./IconInfoCard/IconInfoCard");
-const TableHeader_1 = require("./TableHeader/TableHeader");
-const Toolbar_1 = require("./Toolbar/Toolbar");
-const ToolbarButton_1 = require("./ToolbarButton/ToolbarButton");
 const TableOfContents_1 = require("./TableOfContents/TableOfContents");
 const Accordion_1 = require("./Accordion/Accordion");
 const Alert_1 = require("./Alert/Alert");
@@ -98,7 +91,7 @@ const Carousel_1 = require("./Carousel/Carousel");
 const CarouselItem_1 = require("./Carousel/CarouselItem");
 const renderers_1 = require("../components-core/renderers");
 const Breakout_1 = require("./Breakout/Breakout");
-const ToneChangerButton_1 = require("./ThemeChanger/ToneChangerButton");
+const ToneChangerButton_1 = require("./ToneChangerButton/ToneChangerButton");
 const APICall_2 = require("./APICall/APICall");
 const Option_1 = require("./Option/Option");
 const AutoComplete_1 = require("./AutoComplete/AutoComplete");
@@ -367,7 +360,6 @@ class ComponentRegistry {
             this.registerCoreComponent(Select_1.selectComponentRenderer);
             this.registerCoreComponent(AutoComplete_1.autoCompleteComponentRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
-            this.registerCoreComponent(ThemeChanger_1.themeChangerButtonComponentRenderer);
             this.registerCoreComponent(ToneChangerButton_1.toneChangerButtonComponentRenderer);
             this.registerCoreComponent(FormSection_1.formSectionRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
@@ -382,13 +374,6 @@ class ComponentRegistry {
         this.registerCoreComponent(Theme_1.themeComponentRenderer);
         this.registerCoreComponent(AppState_1.appStateComponentRenderer);
         this.registerCoreComponent(APICall_2.apiCallRenderer);
-        // --- Added after tabler-clone review
-        this.registerCoreComponent(PageHeader_1.pageHeaderRenderer);
-        this.registerCoreComponent(TrendLabel_1.trendLabelRenderer);
-        this.registerCoreComponent(IconInfoCard_1.iconInfoCardRenderer);
-        this.registerCoreComponent(TableHeader_1.tableHeaderRenderer);
-        this.registerCoreComponent(Toolbar_1.toolbarRenderer);
-        this.registerCoreComponent(ToolbarButton_1.toolbarButtonRenderer);
         // --- New Bootstrap-inspired components
         this.registerCoreComponent(Carousel_1.carouselComponentRenderer);
         this.registerCoreComponent(Accordion_1.accordionComponentRenderer);

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

@@ -207,7 +207,7 @@ exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialVa
             setOpen(false);
         }
     }, [onDidChange, updateState, mode, dateFormat]);
-    return inline ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, 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 }) }) })) : ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { disabled: !enabled, id: id, ref: ref, style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
+    return inline ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, 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: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })) : ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { disabled: !enabled, id: id, ref: ref, style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
                         [DatePicker_module_scss_1.default.disabled]: !enabled,
                         [DatePicker_module_scss_1.default.error]: validationStatus === "error",
                         [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",

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

@@ -20,11 +20,14 @@ const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss")
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
+const FormContext_1 = require("../Form/FormContext");
 const metadata_helpers_1 = require("../metadata-helpers");
 const Validations_1 = require("./Validations");
 const FormItemNative_1 = require("./FormItemNative");
 const container_helpers_1 = require("../container-helpers");
 const COMP = "FormItem";
+// NOTE: We need to filter the "none" value out so that it doesn't show up in the docs.
+const filteredValidationSeverityValues = FormContext_1.validationSeverityValues.filter((value) => value !== "none");
 exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: `A \`${COMP}\` component represents a single input element within a \`Form\`. The value within ` +
@@ -47,36 +50,107 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: FormItemNative_1.defaultProps.labelBreak,
         },
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        type: (0, ComponentDefs_1.d)(`This property is used to determine the specific input control the FormItem will wrap ` +
-            `around. Note that the control names start with a lowercase letter and map to input ` +
-            `components found in XMLUI.`),
-        customValidationsDebounce: (0, ComponentDefs_1.d)(`This optional number prop determines the time interval between two runs of a custom validation.`),
-        validationMode: (0, ComponentDefs_1.d)(`This property sets what kind of validation mode or strategy to employ for a particular ` +
-            `input field.`),
+        type: {
+            description: `This property is used to determine the specific input control the FormItem will wrap ` +
+                `around. Note that the control names start with a lowercase letter and map to input ` +
+                `components found in XMLUI.`,
+            availableValues: FormContext_1.formControlTypesMd,
+            defaultValue: FormItemNative_1.defaultProps.type,
+            valueType: "string",
+        },
+        customValidationsDebounce: {
+            description: `This optional number prop determines the time interval between two runs of a custom validation.`,
+            type: "number",
+            defaultValue: FormItemNative_1.defaultProps.customValidationsDebounce,
+        },
+        validationMode: {
+            description: `This property sets what kind of validation mode or strategy to employ for a particular ` +
+                `input field.`,
+            availableValues: FormContext_1.validationModeMd,
+            defaultValue: FormContext_1.defaultValidationMode,
+        },
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         required: (0, metadata_helpers_1.dRequired)(),
-        requiredInvalidMessage: (0, ComponentDefs_1.d)(`This optional string property is used to customize the message that is displayed if the ` +
-            `field is not filled in.`),
-        minLength: (0, ComponentDefs_1.d)(`Checks whether the input has a minimum length of a specified value.`),
-        maxLength: (0, ComponentDefs_1.d)(`Checks whether the input has a maximum length of a specified value.`),
-        maxTextLength: (0, ComponentDefs_1.d)(`The maximum length of the text in the input field`),
-        lengthInvalidMessage: (0, ComponentDefs_1.d)(`This optional string property is used to customize the message that is displayed on a failed ` +
-            `length check: [minLength](#minlength) or [maxLength](#maxlength).`),
-        lengthInvalidSeverity: (0, ComponentDefs_1.d)(`This property sets the severity level of length validations.`),
-        minValue: (0, ComponentDefs_1.d)(`Checks whether the input has the minimum specified value.`),
-        maxValue: (0, ComponentDefs_1.d)(`Checks whether the input has the maximum specified value.`),
-        rangeInvalidMessage: (0, ComponentDefs_1.d)(`This optional string property is used to customize the message that is displayed when ` +
-            `a value is out of range.`),
-        rangeInvalidSeverity: (0, ComponentDefs_1.d)(`This property sets the severity level of the value range validation.`),
-        pattern: (0, ComponentDefs_1.d)(`Checks whether the input fits a predefined regular expression.`),
-        patternInvalidMessage: (0, ComponentDefs_1.d)(`This optional string property is used to customize the message that is displayed on a ` +
-            `failed pattern test.`),
-        patternInvalidSeverity: (0, ComponentDefs_1.d)(`This property sets the severity level of the pattern validation.`),
-        regex: (0, ComponentDefs_1.d)(`Checks whether the input fits the provided regular expression.`),
-        regexInvalidMessage: (0, ComponentDefs_1.d)(`This optional string property is used to customize the message that is displayed on a ` +
-            `failed regular expression test.`),
-        regexInvalidSeverity: (0, ComponentDefs_1.d)(`This property sets the severity level of regular expression validation.`),
-        inputTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom input template."),
+        requiredInvalidMessage: {
+            description: `This optional string property is used to customize the message that is displayed if the ` +
+                `field is not filled in.`,
+            valueType: "string",
+        },
+        minLength: {
+            description: `Checks whether the input has a minimum length of a specified value.`,
+            valueType: "number",
+        },
+        maxLength: {
+            description: `Checks whether the input has a maximum length of a specified value.`,
+            valueType: "number",
+        },
+        maxTextLength: {
+            description: `The maximum length of the text in the input field`,
+            valueType: "number",
+        },
+        lengthInvalidMessage: {
+            description: `This optional string property is used to customize the message that is displayed on a failed ` +
+                `length check: [minLength](#minlength) or [maxLength](#maxlength).`,
+            valueType: "string",
+        },
+        lengthInvalidSeverity: {
+            description: `This property sets the severity level of the length validation.`,
+            valueType: "string",
+            availableValues: filteredValidationSeverityValues,
+            defaultValue: "error",
+        },
+        minValue: {
+            description: `Checks whether the input has the minimum specified value.`,
+            valueType: "number",
+        },
+        maxValue: {
+            description: `Checks whether the input has the maximum specified value.`,
+            valueType: "number",
+        },
+        rangeInvalidMessage: {
+            description: `This optional string property is used to customize the message that is displayed when ` +
+                `a value is out of range.`,
+            valueType: "string",
+        },
+        rangeInvalidSeverity: {
+            description: `This property sets the severity level of the value range validation.`,
+            valueType: "string",
+            availableValues: filteredValidationSeverityValues,
+            defaultValue: "error",
+        },
+        pattern: {
+            description: `Checks whether the input fits a predefined regular expression.`,
+            valueType: "string",
+        },
+        patternInvalidMessage: {
+            description: `This optional string property is used to customize the message that is displayed on a ` +
+                `failed pattern test.`,
+            valueType: "string",
+        },
+        patternInvalidSeverity: {
+            description: `This property sets the severity level of the pattern validation.`,
+            valueType: "string",
+            availableValues: filteredValidationSeverityValues,
+            defaultValue: "error",
+        },
+        regex: {
+            description: `Checks whether the input fits the provided regular expression.`,
+            valueType: "string",
+        },
+        regexInvalidMessage: {
+            description: `This optional string property is used to customize the message that is displayed on a ` +
+                `failed regular expression test.`,
+            valueType: "string",
+        },
+        regexInvalidSeverity: {
+            description: `This property sets the severity level of regular expression validation.`,
+            valueType: "string",
+            availableValues: filteredValidationSeverityValues,
+            defaultValue: "error",
+        },
+        inputTemplate: {
+            description: "This property is used to define a custom input template.",
+        },
     },
     events: {
         validate: (0, ComponentDefs_1.d)(`This event is used to define a custom validation function.`),

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

@@ -42,9 +42,10 @@ exports.defaultProps = {
     type: "text",
     labelBreak: true,
     enabled: true,
+    customValidationsDebounce: 0,
 };
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
-    var { style, bindTo, type = "text", label, enabled = true, labelPosition, labelWidth, labelBreak = true, children, validations, onValidate, customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
+    var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
     const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
     const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);

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

@@ -273,7 +273,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
         };
     }, [bindTo, deferredValue, dispatch, onValidate, throttledAsyncValidate, validations]);
 }
-function useValidationDisplay(bindTo, value, validationResult, validationMode = "errorLate") {
+function useValidationDisplay(bindTo, value, validationResult, validationMode = FormContext_1.defaultValidationMode) {
     const interactionFlags = (0, FormContext_1.useFormContextPart)(value => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
     const forceShowValidationResult = interactionFlags.forceShowValidationResult;
     const focused = interactionFlags.focused;