xmlui 0.10.8 → 0.10.11

package/dist/scripts/src/components/Charts/LineChart/LineChart.js

@@ -24,11 +24,11 @@ exports.LineChartMd = (0, metadata_helpers_1.createMetadata)({
             description: "The data to be displayed in the line chart." +
                 "It needs to be an array of objects, where each object represents a data point.",
         },
-        dataKeys: {
+        xKeys: {
             description: "This property specifies the keys in the data objects that should be used for rendering the lines.",
             valueType: "string",
         },
-        nameKey: {
+        yKey: {
             description: "The key in the data objects used for labeling different data series.",
             valueType: "string",
         },
@@ -84,7 +84,7 @@ exports.LineChartMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.lineChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LineChartMd, ({ extractValue, node, className, lookupSyncCallback, renderChild }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    return ((0, jsx_runtime_1.jsx)(LineChartNative_1.LineChart, { tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), hideTickX: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.hideTickX), hideTickY: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.hideTickY), data: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.data), className: className, dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.dataKeys), nameKey: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.nameKey), hideX: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTooltip: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), marginTop: extractValue.asOptionalNumber((_m = node.props) === null || _m === void 0 ? void 0 : _m.marginTop), marginRight: extractValue.asOptionalNumber((_o = node.props) === null || _o === void 0 ? void 0 : _o.marginRight), marginBottom: extractValue.asOptionalNumber((_p = node.props) === null || _p === void 0 ? void 0 : _p.marginBottom), marginLeft: extractValue.asOptionalNumber((_q = node.props) === null || _q === void 0 ? void 0 : _q.marginLeft), tooltipRenderer: node.props.tooltipTemplate
+    return ((0, jsx_runtime_1.jsx)(LineChartNative_1.LineChart, { tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), hideTickX: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.hideTickX), hideTickY: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.hideTickY), data: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.data), className: className, dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.xKeys), nameKey: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.yKey), hideX: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTooltip: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), marginTop: extractValue.asOptionalNumber((_m = node.props) === null || _m === void 0 ? void 0 : _m.marginTop), marginRight: extractValue.asOptionalNumber((_o = node.props) === null || _o === void 0 ? void 0 : _o.marginRight), marginBottom: extractValue.asOptionalNumber((_p = node.props) === null || _p === void 0 ? void 0 : _p.marginBottom), marginLeft: extractValue.asOptionalNumber((_q = node.props) === null || _q === void 0 ? void 0 : _q.marginLeft), tooltipRenderer: node.props.tooltipTemplate
             ? (tooltipData) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
                         $tooltip: tooltipData,

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -114,10 +114,14 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
     const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
         if (!tooltipRenderer)
             return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
+        const payloadObject = {};
+        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
+            Object.assign(payloadObject, props.payload[0].payload);
+        }
         // Extract tooltip data from Recharts props
         const tooltipData = {
             label: props.label,
-            payload: props.payload,
+            payload: payloadObject,
             active: props.active,
         };
         return tooltipRenderer(tooltipData);

package/dist/scripts/src/components/Charts/RadarChart/RadarChart.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radarChartComponentRenderer = exports.RadarChartMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RadarChartNative_1 = require("./RadarChartNative");
+const renderers_1 = require("../../../components-core/renderers");
+const metadata_helpers_1 = require("../../metadata-helpers");
+const container_helpers_1 = require("../../container-helpers");
+const COMP = "RadarChart";
+exports.RadarChartMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
+    description: "Interactive radar chart for displaying multivariate data in a two-dimensional chart of three or more quantitative variables",
+    docFolder: "Charts/RadarChart",
+    props: {
+        data: {
+            description: "This property is used to provide the component with data to display. " +
+                "The data needs to be an array of objects.",
+        },
+        dataKeys: {
+            description: "This property specifies the keys in the data objects that should be used for rendering the chart elements. " +
+                "E.g. 'value' or 'amount'.",
+            valueType: "string",
+        },
+        nameKey: {
+            description: "Specifies the key in the data objects that will be used to label the different data series.",
+            valueType: "string",
+        },
+        hideGrid: {
+            description: "Determines whether the polar grid should be hidden. If set to `true`, the grid will not be rendered.",
+            valueType: "boolean",
+            defaultValue: RadarChartNative_1.defaultProps.hideGrid,
+        },
+        hideAngleAxis: {
+            description: "Determines whether the angle axis should be hidden. If set to `true`, the angle axis will not be rendered.",
+            valueType: "boolean",
+            defaultValue: RadarChartNative_1.defaultProps.hideAngleAxis,
+        },
+        hideRadiusAxis: {
+            description: "Determines whether the radius axis should be hidden. If set to `true`, the radius axis will not be rendered.",
+            valueType: "boolean",
+            defaultValue: RadarChartNative_1.defaultProps.hideRadiusAxis,
+        },
+        hideTooltip: {
+            description: "Determines whether the tooltip should be hidden. If set to `true`, the tooltip will not be rendered.",
+            valueType: "boolean",
+            defaultValue: RadarChartNative_1.defaultProps.hideTooltip,
+        },
+        showLegend: {
+            description: "Determines whether the legend should be shown. If set to `true`, the legend will be rendered.",
+            valueType: "boolean",
+            defaultValue: RadarChartNative_1.defaultProps.showLegend,
+        },
+        filled: {
+            description: "Determines whether the radar areas should be filled. If set to `true`, areas will be filled with color.",
+            valueType: "boolean",
+            defaultValue: RadarChartNative_1.defaultProps.filled,
+        },
+        strokeWidth: {
+            description: "Sets the stroke width for the radar lines. Higher values create thicker lines.",
+            valueType: "number",
+            defaultValue: RadarChartNative_1.defaultProps.strokeWidth,
+        },
+        fillOpacity: {
+            description: "Sets the fill opacity for the radar areas when filled is true. Value between 0 and 1.",
+            valueType: "number",
+            defaultValue: RadarChartNative_1.defaultProps.fillOpacity,
+        },
+        tooltipTemplate: {
+            description: "This property allows replacing the default template to display a tooltip.",
+        },
+    },
+    events: {
+    // Standard chart events - customize based on chart type
+    },
+    apis: {
+    // Chart-specific APIs if needed
+    },
+    contextVars: {
+    // Add context variables if needed
+    },
+});
+// Component renderer
+exports.radarChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadarChartMd, ({ extractValue, node, className, renderChild }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return ((0, jsx_runtime_1.jsx)(RadarChartNative_1.RadarChart, { className: className, data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), nameKey: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.nameKey), dataKeys: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.dataKeys), hideGrid: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.hideGrid), hideAngleAxis: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.hideAngleAxis), hideRadiusAxis: extractValue.asOptionalBoolean((_f = node.props) === null || _f === void 0 ? void 0 : _f.hideRadiusAxis), hideTooltip: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.hideTooltip), showLegend: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.showLegend), filled: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.filled), strokeWidth: extractValue.asOptionalNumber((_k = node.props) === null || _k === void 0 ? void 0 : _k.strokeWidth), fillOpacity: extractValue.asOptionalNumber((_l = node.props) === null || _l === void 0 ? void 0 : _l.fillOpacity), tooltipRenderer: node.props.tooltipTemplate
+            ? (tooltipData) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
+                        $tooltip: tooltipData,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/Charts/RadarChart/RadarChartNative.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
+exports.RadarChart = RadarChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const recharts_1 = require("recharts");
+const react_1 = require("react");
+const react_2 = require("react");
+const ChartProvider_1 = __importStar(require("../utils/ChartProvider"));
+const TooltipContent_1 = require("../Tooltip/TooltipContent");
+const ThemeContext_1 = require("../../../components-core/theming/ThemeContext");
+exports.defaultProps = {
+    hideGrid: false,
+    hideAngleAxis: false,
+    hideRadiusAxis: false,
+    hideTooltip: false,
+    showLegend: false,
+    filled: true,
+    strokeWidth: 2,
+    fillOpacity: 0.3,
+};
+function RadarChart({ data = [], nameKey, dataKeys = [], hideGrid = exports.defaultProps.hideGrid, hideAngleAxis = exports.defaultProps.hideAngleAxis, hideRadiusAxis = exports.defaultProps.hideRadiusAxis, hideTooltip = exports.defaultProps.hideTooltip, className, children, showLegend = exports.defaultProps.showLegend, filled = exports.defaultProps.filled, strokeWidth = exports.defaultProps.strokeWidth, fillOpacity = exports.defaultProps.fillOpacity, tooltipRenderer, }) {
+    // Validate and normalize data
+    const validData = Array.isArray(data) ? data : [];
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
+    const colorValues = (0, react_2.useMemo)(() => {
+        return [
+            getThemeVar("color-primary-500"),
+            getThemeVar("color-primary-300"),
+            getThemeVar("color-success-500"),
+            getThemeVar("color-success-300"),
+            getThemeVar("color-warn-500"),
+            getThemeVar("color-warn-300"),
+            getThemeVar("color-danger-500"),
+            getThemeVar("color-danger-300"),
+            getThemeVar("color-info-500"),
+            getThemeVar("color-info-300"),
+            getThemeVar("color-secondary-500"),
+            getThemeVar("color-secondary-300"),
+        ];
+    }, [getThemeVar]);
+    const config = (0, react_2.useMemo)(() => {
+        return Object.assign({}, ...dataKeys.map((key, index) => {
+            return {
+                [key]: {
+                    label: key,
+                    color: colorValues[index % colorValues.length],
+                },
+            };
+        }));
+    }, [colorValues, dataKeys]);
+    const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKeys, nameKey });
+    // Process data and create radar elements based on dataKeys
+    const radarElements = (0, react_2.useMemo)(() => {
+        return dataKeys.map((key, index) => {
+            const color = colorValues[index % colorValues.length];
+            return ((0, jsx_runtime_1.jsx)(recharts_1.Radar, { name: key, dataKey: key, stroke: color, fill: filled ? color : "none", fillOpacity: filled ? fillOpacity : 0, strokeWidth: strokeWidth }, key));
+        });
+    }, [dataKeys, colorValues, filled, fillOpacity, strokeWidth]);
+    // Handle responsive behavior
+    const [containerSize, setContainerSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const updateSize = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setContainerSize({ width, height });
+            }
+        };
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    // Determine if we're in mini mode (very small container)
+    const isMiniMode = containerSize.height < 150;
+    const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
+        if (!tooltipRenderer)
+            return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
+        const payloadObject = {};
+        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
+            Object.assign(payloadObject, props.payload[0].payload);
+        }
+        // Extract tooltip data from Recharts props
+        const tooltipData = {
+            label: props.label,
+            payload: payloadObject,
+            active: props.active,
+        };
+        return tooltipRenderer(tooltipData);
+    }, [tooltipRenderer]);
+    return ((0, jsx_runtime_1.jsx)(ChartProvider_1.default, { value: chartContextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.RadarChart, { data: validData, children: [!hideGrid && (0, jsx_runtime_1.jsx)(recharts_1.PolarGrid, {}), !hideAngleAxis && ((0, jsx_runtime_1.jsx)(recharts_1.PolarAngleAxis, { dataKey: nameKey, hide: isMiniMode })), !hideRadiusAxis && ((0, jsx_runtime_1.jsx)(recharts_1.PolarRadiusAxis, { hide: isMiniMode })), !isMiniMode && !hideTooltip && ((0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer })), showLegend && !isMiniMode && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {}), radarElements, children] }) }) }) }));
+}

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

@@ -44,6 +44,7 @@ exports.CheckboxMd = (0, metadata_helpers_1.createMetadata)({
     },
     childrenAsTemplate: "inputTemplate",
     events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
@@ -80,5 +81,5 @@ exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const inputTemplate = node.props.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), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, exports.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, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
+            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, exports.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, onClick: lookupEventHandler("click"), 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, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
 });

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

@@ -108,12 +108,14 @@ const InspectButton_1 = require("./InspectButton/InspectButton");
 const NestedApp_1 = require("./NestedApp/NestedApp");
 const AppWithCodeView_1 = require("./NestedApp/AppWithCodeView");
 const CodeBlock_1 = require("./CodeBlock/CodeBlock");
+const AreaChart_1 = require("./Charts/AreaChart/AreaChart");
 const BarChart_1 = require("./Charts/BarChart/BarChart");
 const DonutChart_1 = require("./Charts/DonutChart/DonutChart");
 const LabelList_1 = require("./Charts/LabelList/LabelList");
 const Legend_1 = require("./Charts/Legend/Legend");
 const LineChart_1 = require("./Charts/LineChart/LineChart");
 const PieChart_1 = require("./Charts/PieChart/PieChart");
+const RadarChart_1 = require("./Charts/RadarChart/RadarChart");
 const Pagination_1 = require("./Pagination/Pagination");
 const Tooltip_1 = require("./Tooltip/Tooltip");
 /**
@@ -377,12 +379,14 @@ class ComponentRegistry {
             this.registerCoreComponent(Pagination_1.paginationComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Charts !== "false") {
+            this.registerCoreComponent(AreaChart_1.areaChartComponentRenderer);
             this.registerCoreComponent(BarChart_1.barChartComponentRenderer);
             this.registerCoreComponent(DonutChart_1.donutChartComponentRenderer);
             this.registerCoreComponent(LabelList_1.labelListComponentRenderer);
             this.registerCoreComponent(Legend_1.legendComponentRenderer);
             this.registerCoreComponent(LineChart_1.lineChartComponentRenderer);
             this.registerCoreComponent(PieChart_1.pieChartComponentRenderer);
+            this.registerCoreComponent(RadarChart_1.radarChartComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_EmojiSelector !== "false") {
             this.registerCoreComponent(EmojiSelector_1.emojiSelectorRenderer);

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceMd = void 0;
+const abstractions_1 = require("../abstractions");
+const metadata_helpers_1 = require("../metadata-helpers");
+// NOTE: Original component this is based on is the `Loader` component
+const COMP = "DataSource";
+exports.DataSourceMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
+    description: "`DataSource` fetches and caches data from API endpoints, versus " +
+        "[`APICall`](/components/APICall) which creates, updates or deletes data.",
+    props: {
+        method: {
+            description: `Set the HTTP method.`,
+            defaultValue: "get",
+            availableValues: abstractions_1.httpMethodNames,
+        },
+        id: {
+            description: `Set the ID used by other components to access the retrieved data in the \`value\`` +
+                "property of a \`DataSource\`, or status info in the \`loaded\` and \`error\` properties." +
+                "When no `id` is set, the component cannot be used programmatically.",
+            isRequired: true,
+            valueType: "string",
+        },
+        url: {
+            description: `Set the URL.`,
+            isRequired: true,
+            valueType: "string",
+        },
+        body: {
+            description: `Set the optional request body. The object you pass is serialized as a JSON string.`,
+            valueType: "any",
+        },
+        rawBody: {
+            description: `Set the request body with no serialization. Use it to send a payload  ` +
+                `that has already been serialized to a JSON string.`,
+            valueType: "string",
+        },
+        queryParams: {
+            description: `Append optional key-value pairs to the URL.`,
+            valueType: "any",
+        },
+        headers: {
+            description: `Set request headers. Pass an object whose keys are header names and values are header values.`,
+            valueType: "any",
+        },
+        pollIntervalInSeconds: {
+            description: "Set the interval for periodic data fetching. If the data changes on refresh, " +
+                "XMLUI will re-render components that refer directly or indirectly to the \`DataSource\`. " +
+                "If not set or set to zero, the component does not poll for data.",
+            valueType: "number",
+        },
+        inProgressNotificationMessage: {
+            description: "Set the message to display when the data fetch is in progress. " +
+                "If the property value is not set, no progress message is displayed.",
+            valueType: "string",
+        },
+        completedNotificationMessage: {
+            description: "Set the message to display when the data fetch completes." +
+                "If the property value is not set, no completion message is displayed.",
+            valueType: "string",
+        },
+        errorNotificationMessage: {
+            description: "Set the message to display when the there is an error. " +
+                "You can use the `$error` context value in an expression to " +
+                "refer to the original error message.",
+            valueType: "string",
+        },
+        resultSelector: {
+            description: "Set an optional object key to extract a subset of the response data. If this " +
+                "value is not set, the entire response body is considered the result.",
+            valueType: "string",
+        },
+        transformResult: {
+            description: "Set an optional function to perform a final transformation of the " +
+                "response data. If this value is not set, the result is not transformed.",
+        },
+        prevPageSelector: {
+            description: `When using \`${COMP}\` with paging, the response may contain information about the ` +
+                `previous and next page. This property defines the selector that extracts the ` +
+                `previous page information from the response deserialized to an object.`,
+        },
+        nextPageSelector: {
+            description: `When using \`${COMP}\` with paging, the response may contain information about ` +
+                `the previous and next page. This property defines the selector that extracts ` +
+                `the next page information from the response deserialized to an object.`,
+        },
+        structuralSharing: {
+            description: "This property allows structural sharing. When turned on, `DataSource` will keep " +
+                "the original reference if nothing has changed in the data. If a subset has " +
+                "changed, `DataSource` will keep the unchanged parts and only replace the changed " +
+                "parts. If you do not need this behavior, set this property to `false`.",
+            defaultValue: "true",
+        },
+    },
+    events: {
+        loaded: (0, metadata_helpers_1.d)("The component triggers this event when the fetch operation has been completed " +
+            "and the data is loaded. The event has two arguments. The first is the data " +
+            "loaded; the second indicates if the event is a result of a refetch."),
+        error: (0, metadata_helpers_1.d)(`This event fires when a request results in an error.`),
+    },
+    apis: {
+        value: {
+            description: `This property retrieves the data queried from the source after optional transformations.`,
+            signature: "get value(): any",
+        },
+        inProgress: {
+            description: "This property indicates if the data is being fetched.",
+            signature: "get inProgress(): boolean",
+        },
+        isRefetching: {
+            description: "This property indicates if the data is being re-fetched.",
+            signature: "get isRefetching(): boolean",
+        },
+        loaded: {
+            description: "This property indicates if the data has been loaded.",
+            signature: "get loaded(): boolean",
+        },
+        refetch: {
+            description: "This method requests the re-fetch of the data.",
+            signature: "refetch(): void",
+        },
+    },
+});

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

@@ -143,19 +143,11 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
-        mute: {
-            description: "Whether to mute the beep sound while still firing the beep event",
-            valueType: "boolean",
-            defaultValue: DateInputNative_1.defaultProps.mute,
-        },
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-        beep: {
-            description: "Event triggered when a beep should occur due to invalid input auto-tab prevention",
-        },
     },
     apis: {
         focus: {
@@ -173,10 +165,16 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
                 value: "The new value to set for the date input.",
             },
         },
+        isoValue: {
+            description: `Get the current date value formatted in ISO standard (YYYY-MM-DD) format, suitable for JSON serialization.`,
+            signature: "isoValue(): string | null",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(DateInput_module_scss_1.default.themeVars),
     defaultThemeVars: {
         // DateInput specific theme variables (matching TimeInput structure)
+        [`paddingHorizontal-${COMP}`]: "$space-2",
+        [`paddingVertical-${COMP}`]: "$space-2",
         [`color-divider-${COMP}`]: "$textColor-secondary",
         [`spacing-divider-${COMP}`]: "1px 0",
         [`width-input-${COMP}`]: "1.8em",
@@ -199,5 +197,5 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.dateInputComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DateInputMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onBeep: lookupEventHandler("beep"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue.asOptionalString(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), mute: extractValue.asOptionalBoolean(node.props.mute, DateInputNative_1.defaultProps.mute), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
+    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue.asOptionalString(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
 });