xmlui 0.7.26 → 0.7.27

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/StickyBox/StickyBoxNative.js

@@ -7,7 +7,7 @@ exports.StickyBox = StickyBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
-const react_sticky_el_1 = __importDefault(require("react-sticky-el"));
+const react_sticky_el_1 = require("react-sticky-el");
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
 const hooks_1 = require("../../components-core/utils/hooks");
 function StickyBox({ children, uid, layout, to = "top" }) {
@@ -18,10 +18,17 @@ function StickyBox({ children, uid, layout, to = "top" }) {
     const realBackground = (0, hooks_1.useRealBackground)(scrollParent);
     (0, react_1.useEffect)(() => {
         if (wrapper) {
-            console.log(wrapper.innerHeight);
             document.documentElement.style.setProperty("--xmlui-scroll-margin-top", wrapper.clientHeight + "px");
             // scrollParent.setAttribute("data-xmlui-scroll-padding", true);
         }
     }, [scrollParent, wrapper]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scrollParent && ((0, jsx_runtime_1.jsx)(react_sticky_el_1.default, { scrollElement: scrollParent, wrapperClassName: (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper), mode: to, onFixedToggle: setStuck, stickyStyle: Object.assign({ backgroundColor: realBackground }, layout), children: (0, jsx_runtime_1.jsx)("div", { ref: setWrapper, children: children }) })), (0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, ref: sentinelRef, className: to === "top" ? StickyBox_module_scss_1.default.sentinel : "" })] }));
+    const wrapperClassName = (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper);
+    const stickyStyles = Object.assign({ backgroundColor: realBackground }, layout);
+    const stickyClassName = "";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!scrollParent && ((0, jsx_runtime_1.jsx)(react_sticky_el_1.RenderPropSticky, { mode: to, onFixedToggle: setStuck, 
+                // hideOnBoundaryHit={hideOnBoundaryHit}
+                // offsetTransforms={offsetTransforms}
+                // disabled={disabled}
+                // boundaryElement={boundaryElement}
+                scrollElement: scrollParent, children: ({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) => ((0, jsx_runtime_1.jsx)("div", { ref: holderRef, style: holderStyles, children: (0, jsx_runtime_1.jsx)("div", { className: `${wrapperClassName} ${isFixed ? stickyClassName : ''}`, style: isFixed ? Object.assign(Object.assign({}, wrapperStyles), stickyStyles) : wrapperStyles, ref: wrapperRef, children: (0, jsx_runtime_1.jsx)("div", { ref: setWrapper, children: children }) }) })) })), (0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, ref: sentinelRef, className: to === "top" ? StickyBox_module_scss_1.default.sentinel : "" })] }));
 }

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

@@ -17,18 +17,18 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         `on and off. It consists of a small rectangular or circular button that can be moved left or right to ` +
         `change its state.`,
     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.`),
     },
     events: {
@@ -67,6 +67,6 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)("Switch", exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { 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), variant: "switch", registerComponentApi: registerComponentApi }));
+exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { 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), variant: "switch", registerComponentApi: registerComponentApi }));
 });

package/dist/scripts/src/components/Toggle/Toggle.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.Toggle = void 0;
+exports.Toggle = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
@@ -46,7 +46,14 @@ const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = false, value = false, enabled = true, style, readOnly, validationStatus = "none", updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = false, className, label, labelPosition = "start", labelWidth, labelBreak, required, registerComponentApi, inputRenderer, }, forwardedRef) {
+exports.defaultProps = {
+    initialValue: false,
+    value: false,
+    enabled: true,
+    validationStatus: "none",
+    indeterminate: false,
+};
+exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = exports.defaultProps.initialValue, value = exports.defaultProps.value, enabled = exports.defaultProps.enabled, style, readOnly, validationStatus = exports.defaultProps.validationStatus, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = exports.defaultProps.indeterminate, className, label, labelPosition = "end", labelWidth, labelBreak, required, registerComponentApi, inputRenderer, }, forwardedRef) {
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     const innerRef = react_3.default.useRef(null);
@@ -98,6 +105,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = fa
             [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
             [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
         }) })), [
+        inputId,
         className,
         enabled,
         handleOnBlur,

package/dist/scripts/src/components/metadata-helpers.js

@@ -62,22 +62,24 @@ function dDidChange(comp) {
         description: `This event is triggered when value of ${comp} has changed.`,
     };
 }
-function dIndeterminate() {
+function dIndeterminate(defaultValue) {
     return {
         description: `The \`true\` value of this property signals that the component is in an ` +
             `_intedeterminate state_.`,
+        defaultValue,
     };
 }
 function dLabel() {
     return {
         description: `This property sets the label of the component.`,
+        valueType: "string",
     };
 }
 function dLabelPosition(def) {
     return {
         description: `Places the label at the given position of the component.`,
         availableValues: abstractions_1.labelPositionMd,
-        defaultValue: def,
+        defaultValue: def !== null && def !== void 0 ? def : "top",
     };
 }
 function dLabelWidth(comp) {
@@ -100,22 +102,24 @@ function dAutoFocus() {
         defaultValue: false,
     };
 }
-function dInitialValue(def) {
+function dInitialValue(value) {
     return {
         description: `This property sets the component's initial value.`,
-        defaultValue: def,
+        defaultValue: value,
     };
 }
-function dReadonly() {
+function dReadonly(readOnly) {
     return {
         description: `Set this property to \`true\` to disallow changing the component value.`,
+        valueType: "boolean",
+        defaultValue: readOnly !== null && readOnly !== void 0 ? readOnly : false,
     };
 }
-function dEnabled() {
+function dEnabled(isEnabled) {
     return {
         description: `This boolean property value indicates whether the component responds to user events (\`true\`) or not (\`false\`).`,
         valueType: "boolean",
-        defaultValue: true,
+        defaultValue: isEnabled !== null && isEnabled !== void 0 ? isEnabled : true,
     };
 }
 function dMulti() {
@@ -125,10 +129,11 @@ function dMulti() {
         defaultValue: false,
     };
 }
-function dValidationStatus() {
+function dValidationStatus(value) {
     return {
         description: `This property allows you to set the validation status of the input component.`,
         availableValues: abstractions_1.validationStatusMd,
+        defaultValue: value !== null && value !== void 0 ? value : "none",
     };
 }
 function dValueApi() {
@@ -152,41 +157,48 @@ function dComponent(description) {
 function dPlaceholder() {
     return {
         description: `A placeholder text that is visible in the input field when its empty.`,
+        valueType: "string",
     };
 }
 function dMaxLength() {
     return {
         description: `This property sets the maximum length of the input it accepts.`,
+        valueType: "number",
     };
 }
 function dRequired() {
     return {
         description: `Set this property to \`true\` to indicate it must have a value ` +
             `before submitting the containing form.`,
+        valueType: "boolean",
     };
 }
 function dStartText() {
     return {
         description: `This property sets a text to appear at the start (left side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dStartIcon() {
     return {
         description: `This property sets an icon to appear at the start (left side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dEndText() {
     return {
         description: `This property sets a text to appear on the end (right side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dEndIcon() {
     return {
         description: `This property sets an icon to appear on the end (right side when the ` +
             `left-to-right direction is set) of the input.`,
+        valueType: "string",
     };
 }
 function dExpanded(comp) {

package/dist/scripts/src/components-core/loader/DataLoader.js

@@ -66,7 +66,7 @@ function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, lo
     }), [api, loader.props, state]);
     const queryId = (0, react_1.useMemo)(() => {
         return new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator(url, queryParams, appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl, body, rawBody).asKey();
-    }, [appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl, queryParams, url]);
+    }, [appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl, queryParams, url, body, rawBody]);
     const stateRef = (0, react_1.useRef)({ state, appContext });
     stateRef.current = { state, appContext };
     const loadingToastIdRef = (0, react_1.useRef)(undefined);

package/dist/scripts/src/components-core/utils/hooks.js

@@ -256,6 +256,9 @@ function getScrollParent(element) {
         return document.body;
     }
     for (let parent = element;; parent = parent.parentElement) {
+        if (!parent) {
+            return null;
+        }
         style = getComputedStyle(parent);
         if (excludeStaticParent && style.position === "static") {
             continue;

package/dist/scripts/src/components-core/utils/misc.js

@@ -370,6 +370,9 @@ exports.shallowCompare = shallowCompare;
 function shallowEqual(a, b) {
     const aIsArr = Array.isArray(a);
     const bIsArr = Array.isArray(b);
+    if (typeof a === "string" || typeof b === "string") {
+        return a === b;
+    }
     if (aIsArr !== bIsArr) {
         return false;
     }