xmlui 0.9.65 → 0.9.67

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.65",
+    "version": "0.9.67",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -9,7 +9,6 @@
         "build:xmlui": "vite build --mode lib",
         "build:xmlui-standalone": "vite build --mode standalone",
         "build:xmlui-metadata": "vite build --mode metadata",
-        "build:ext-meta": "node scripts/build-extension-packages/build-extension-packages.mjs",
         "test:unit": "vitest run",
         "test:e2e-non-smoke": "playwright test --project non-smoke",
         "test:e2e-smoke": "playwright test --project smoke",
@@ -50,6 +49,10 @@
         "@tanstack/react-virtual": "3.10.8",
         "@tiptap/react": "^2.23.0",
         "@tiptap/starter-kit": "^2.23.0",
+        "@tiptap/extension-table": "^2.23.0",
+        "@tiptap/extension-table-cell": "^2.23.0",
+        "@tiptap/extension-table-header": "^2.23.0",
+        "@tiptap/extension-table-row": "^2.23.0",
         "@types/chroma-js": "^3.1.1",
         "@types/color": "3.0.6",
         "@vitejs/plugin-react": "4.3.0",
@@ -247,7 +250,7 @@
         ]
     },
     "repository": {
-        "url": "https://github.com/xmlui-com/xmlui.git"
+        "url": "https://github.com/xmlui-org/xmlui.git"
     },
     "msw": {
         "workerDirectory": "src/testing/infrastructure/public"

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

@@ -8,6 +8,7 @@ const abstractions_1 = require("../abstractions");
 const APICallNative_1 = require("./APICallNative");
 const COMP = "APICall";
 exports.APICallMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`APICall` creates, updates or deletes data on the backend, versus [`DataSource`]" +
         "(/components/DataSource) which fetches data. Unlike DataSource, APICall doesn't " +
         "automatically execute - you must trigger it manually with the `execute()` method, " +
@@ -86,37 +87,37 @@ exports.APICallMd = (0, metadata_helpers_1.createMetadata)({
     events: {
         beforeRequest: {
             description: "This event fires before the request is sent. Returning an explicit boolean" +
-                "\`false\` value will prevent the request from being sent."
+                "\`false\` value will prevent the request from being sent.",
         },
         success: {
-            description: "This event fires when a request results in a success."
+            description: "This event fires when a request results in a success.",
         },
         // This event fires when a request results in an error.
         error: {
-            description: "This event fires when a request results in an error."
+            description: "This event fires when a request results in an error.",
         },
         progress: (0, metadata_helpers_1.dInternal)(),
     },
     contextVars: {
         $param: {
-            description: "The first parameter passed to `execute()` method"
+            description: "The first parameter passed to `execute()` method",
         },
         $params: {
             description: "Array of all parameters passed to `execute()` method (access with " +
-                "`$params[0]`, `$params[1]`, etc.)"
+                "`$params[0]`, `$params[1]`, etc.)",
         },
         $result: {
-            description: "Response data (available in `completedNotificationMessage` and `success` event)"
+            description: "Response data (available in `completedNotificationMessage` and `success` event)",
         },
         $error: {
-            description: "Error details (available in `errorNotificationMessage` and `error` event)"
+            description: "Error details (available in `errorNotificationMessage` and `error` event)",
         },
     },
     apis: {
         execute: {
             description: "This method triggers the invocation of the API. You can pass an arbitrary " +
                 "number of parameters to the method. In the \`APICall\` instance, you can " +
-                "access those with the \`$param\` and \`$params\` context values."
+                "access those with the \`$param\` and \`$params\` context values.",
         },
     },
 });

package/dist/scripts/src/components/Accordion/AccordionItem.js

@@ -8,6 +8,7 @@ const container_helpers_1 = require("../../components/container-helpers");
 const AccordionItemNative_1 = require("../../components/Accordion/AccordionItemNative");
 const COMP = "AccordionItem";
 exports.AccordionItemMd = (0, metadata_helpers_1.createMetadata)({
+    status: "in progress",
     description: `\`${COMP}\` is a non-visual component describing a tab. Tabs component may use nested ` +
         `${COMP} instances from which the user can select.`,
     props: {

package/dist/scripts/src/components/App/AppNative.js

@@ -33,6 +33,7 @@ const Sheet_1 = require("../../components/App/Sheet");
 const AppHeaderNative_1 = require("../../components/AppHeader/AppHeaderNative");
 const AppLayoutContext_1 = require("./AppLayoutContext");
 const SearchContext_1 = require("./SearchContext");
+const LinkInfoContext_1 = require("./LinkInfoContext");
 exports.defaultProps = {
     scrollWholePage: true,
     noScrollbarGutters: false,
@@ -139,10 +140,10 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
         });
     }, [forceRefreshAnchorScroll]);
     const [subNavPanelSlot, setSubNavPanelSlot] = (0, react_1.useState)(null);
-    const [linkMap, setLinkMap] = (0, react_1.useState)(new Map());
     const registerSubNavPanelSlot = (0, react_1.useCallback)((element) => {
         setSubNavPanelSlot(element);
     }, []);
+    const [linkMap, setLinkMap] = (0, react_1.useState)(new Map());
     const registerLinkMap = (0, react_1.useCallback)((newLinkMap) => {
         setLinkMap(newLinkMap);
     }, []);
@@ -168,8 +169,6 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
             registerSubNavPanelSlot,
             subNavPanelSlot,
             isNested: (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.isNested) || false,
-            linkMap,
-            registerLinkMap,
         };
     }, [
         hasRegisteredNavPanel,
@@ -186,9 +185,13 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
         registerSubNavPanelSlot,
         subNavPanelSlot,
         appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.isNested,
-        linkMap,
-        registerLinkMap,
     ]);
+    const linkInfoContextValue = (0, react_1.useMemo)(() => {
+        return {
+            linkMap,
+            registerLinkMap
+        };
+    }, [linkMap, registerLinkMap]);
     (0, react_1.useEffect)(() => {
         if (navPanelVisible) {
             setDrawerVisible(false);
@@ -239,14 +242,14 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
             throw new Error("layout type not supported: " + safeLayout);
     }
     // Memoize the rendered nav panel in drawer to prevent unnecessary re-renders
-    const memoizedNavPanelInDrawer = (0, react_1.useMemo)(() => renderChild && navPanelDef ? renderChild(navPanelDef, { inDrawer: true }) : null, [renderChild, navPanelDef]);
+    const memoizedNavPanelInDrawer = (0, react_1.useMemo)(() => (renderChild && navPanelDef ? renderChild(navPanelDef, { inDrawer: true }) : null), [renderChild, navPanelDef]);
     // Memoize the helmet component
     const memoizedHelmet = (0, react_1.useMemo)(() => name !== undefined ? (0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: name, titleTemplate: `%s | ${name}` }) : null, [name]);
     // Memoize the onOpenChange callback
     const handleOpenChange = (0, react_1.useCallback)((open) => {
         setDrawerVisible(open);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsx)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: (0, jsx_runtime_1.jsxs)(SearchContext_1.SearchContextProvider, { children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), content] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsx)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: (0, jsx_runtime_1.jsx)(LinkInfoContext_1.LinkInfoContext.Provider, { value: linkInfoContextValue, children: (0, jsx_runtime_1.jsxs)(SearchContext_1.SearchContextProvider, { children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), content] }) }) })] }));
 }
 function getAppLayoutOrientation(appLayout) {
     switch (appLayout) {

package/dist/scripts/src/components/App/LinkInfoContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkInfoContext = void 0;
+exports.useLinkInfoContext = useLinkInfoContext;
+const react_1 = require("react");
+exports.LinkInfoContext = (0, react_1.createContext)(null);
+function useLinkInfoContext() {
+    return (0, react_1.useContext)(exports.LinkInfoContext);
+}

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

@@ -7,6 +7,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const AppStateNative_1 = require("./AppStateNative");
 const COMP = "AppState";
 exports.AppStateMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`AppState` is an invisible component that provides global state management " +
         "across your entire application. Unlike component variables that are scoped " +
         "locally, AppState allows any component to access and update shared state " +

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

@@ -13,11 +13,11 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const AutoCompleteNative_1 = require("./AutoCompleteNative");
 const COMP = "AutoComplete";
 exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "`AutoComplete` is a searchable dropdown input that allows users to type and " +
         "filter through options, with support for single or multiple selections. Unlike " +
         "a basic [`Select`](/components/Select), it provides type-ahead functionality " +
         "and can allow users to create new options.",
-    status: "experimental",
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
@@ -36,7 +36,7 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
         multi: Object.assign(Object.assign({}, (0, metadata_helpers_1.dMulti)()), { defaultValue: AutoCompleteNative_1.defaultProps.multi }),
         optionTemplate: (0, metadata_helpers_1.dComponent)(`This property enables the customization of list items. To access the attributes of ` +
             `a list item use the \`$item\` context variable.`),
-        emptyListTemplate: (0, metadata_helpers_1.d)("This property defines the template to display when the list of options is empty."),
+        emptyListTemplate: (0, metadata_helpers_1.dComponent)("This property defines the template to display when the list of options is empty."),
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),

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

@@ -13,6 +13,7 @@ const AvatarNative_1 = require("./AvatarNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Avatar";
 exports.AvatarMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Avatar` displays a user or entity's profile picture as a circular image, " +
         "with automatic fallback to initials when no image is provided. It's commonly " +
         "used in headers, user lists, comments, and anywhere you need to represent a " +

package/dist/scripts/src/components/Avatar/AvatarNative.js

@@ -22,22 +22,27 @@ const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
 exports.defaultProps = {
     size: "sm",
 };
-exports.Avatar = (0, react_1.forwardRef)(function Avatar(_a, ref) {
+exports.Avatar = (0, react_1.memo)((0, react_1.forwardRef)(function Avatar(_a, ref) {
     var { size = exports.defaultProps.size, url, name, style, onClick } = _a, rest = __rest(_a, ["size", "url", "name", "style", "onClick"]);
-    const commonClassNames = (0, classnames_1.default)(Avatar_module_scss_1.default.container, {
-        [Avatar_module_scss_1.default.xs]: size === "xs",
-        [Avatar_module_scss_1.default.sm]: size === "sm",
-        [Avatar_module_scss_1.default.md]: size === "md",
-        [Avatar_module_scss_1.default.lg]: size === "lg",
-        [Avatar_module_scss_1.default.clickable]: !!onClick,
-    });
+    // Memoize the abbreviated name calculation to avoid recalculation on every render
+    const abbreviatedName = (0, react_1.useMemo)(() => abbrevName(name !== null && name !== void 0 ? name : null), [name]);
+    // Handle keyboard events for accessibility
+    const handleKeyDown = (event) => {
+        if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onClick(event);
+        }
+    };
+    // Simplified className generation by directly mapping size to styles
+    const commonClassNames = (0, classnames_1.default)(Avatar_module_scss_1.default.container, Avatar_module_scss_1.default[size] || Avatar_module_scss_1.default.sm, // Fallback to sm if size not found
+    { [Avatar_module_scss_1.default.clickable]: !!onClick });
     const altTxt = !!name ? `Avatar of ${name}` : "Avatar";
     if (url) {
-        return ((0, jsx_runtime_1.jsx)("img", Object.assign({}, rest, { ref: ref, src: url, alt: altTxt, className: commonClassNames, style: style, onClick: onClick })));
+        return ((0, jsx_runtime_1.jsx)("img", Object.assign({}, rest, { ref: ref, src: url, alt: altTxt, className: commonClassNames, style: style, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? 0 : undefined })));
     }
     else
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: commonClassNames, style: style, onClick: onClick, role: "img", "aria-label": altTxt, children: abbrevName(name) || (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true" }) })));
-});
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: commonClassNames, style: style, onClick: onClick, onKeyDown: handleKeyDown, role: "img", "aria-label": altTxt, tabIndex: onClick ? 0 : undefined, children: abbreviatedName || (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true" }) })));
+}));
 function abbrevName(name) {
     if (!!name) {
         const abbrev = name

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

@@ -7,6 +7,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const BookmarkNative_1 = require("./BookmarkNative");
 const COMP = "Bookmark";
 exports.BookmarkMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "As its name suggests, this component places a bookmark into its parent component's view. The " +
         "component has an \`id\` that you can use in links to navigate (scroll to) the bookmark's location.",
     opaque: true,

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

@@ -7,6 +7,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const BreakoutNative_1 = require("./BreakoutNative");
 const COMP = "Breakout";
 exports.BreakoutMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: `The \`${COMP}\` component creates a breakout section. It allows its child to ` +
         `occupy the entire width of the UI even if the app or the parent container constrains ` +
         `the maximum content width.`,

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

@@ -14,10 +14,10 @@ const IconNative_1 = require("../Icon/IconNative");
 const ButtonNative_1 = require("./ButtonNative");
 const COMP = "Button";
 exports.ButtonMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Button` is the primary interactive component for triggering actions like " +
         "form submissions, navigation, opening modals, and API calls. It supports " +
         "multiple visual styles and sizes to match different UI contexts and importance levels.",
-    status: "stable",
     props: {
         autoFocus: {
             description: "Indicates if the button should receive focus when the page loads.",

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

@@ -13,6 +13,7 @@ const abstractions_1 = require("../abstractions");
 const CardNative_1 = require("./CardNative");
 const COMP = "Card";
 exports.CardMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Card` is a versatile container that groups related content with a visual " +
         "boundary, typically featuring background color, padding, borders, and rounded " +
         "corners. It's ideal for organizing information, creating sections, and " +

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

@@ -6,7 +6,9 @@ const renderers_1 = require("../../components-core/renderers");
 const metadata_helpers_1 = require("../metadata-helpers");
 const CarouselItemNative_1 = require("./CarouselItemNative");
 const COMP = "CarouselItem";
-exports.CarouselItemMd = (0, metadata_helpers_1.createMetadata)({});
+exports.CarouselItemMd = (0, metadata_helpers_1.createMetadata)({
+    status: "in progress",
+});
 exports.carouselItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselItemMd, (rendererContext) => {
     const { node, renderChild } = rendererContext;
     return (0, jsx_runtime_1.jsx)(CarouselItemNative_1.CarouselItemComponent, { children: renderChild(node.children) });

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

@@ -7,6 +7,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const ChangeListenerNative_1 = require("./ChangeListenerNative");
 const COMP = "ChangeListener";
 exports.ChangeListenerMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`ChangeListener` is an invisible component that watches for changes in values " +
         "and triggers actions in response. It's essential for creating reactive behavior " +
         "when you need to respond to data changes, state updates, or component property " +

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

@@ -7,10 +7,10 @@ const renderers_1 = require("../../../components-core/renderers");
 const metadata_helpers_1 = require("../../metadata-helpers");
 const COMP = "BarChart";
 exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "`BarChart` displays data as horizontal or vertical bars, supporting both grouped " +
         "and stacked layouts. It's ideal for comparing values across categories, showing " +
         "revenue trends, or displaying any quantitative data over time or categories.",
-    status: "experimental",
     docFolder: "Charts/BarChart",
     props: {
         data: {

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -38,9 +38,10 @@ exports.BarChart = BarChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const recharts_1 = require("recharts");
 const react_1 = require("react");
-const xmlui_1 = require("xmlui");
+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 = {
     layout: "vertical",
     stacked: false,
@@ -52,8 +53,8 @@ exports.defaultProps = {
     showLegend: false,
 };
 function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, stacked = exports.defaultProps.stacked, dataKeys = [], hideTickX = exports.defaultProps.hideTickX, hideTickY = exports.defaultProps.hideTickY, hideY = exports.defaultProps.hideY, hideX = exports.defaultProps.hideX, tickFormatter = exports.defaultProps.tickFormatter, style, children, showLegend = exports.defaultProps.showLegend, }) {
-    const { getThemeVar } = (0, xmlui_1.useTheme)();
-    const colorValues = (0, react_1.useMemo)(() => {
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
+    const colorValues = (0, react_2.useMemo)(() => {
         return [
             getThemeVar("color-primary-500"),
             getThemeVar("color-primary-300"),
@@ -93,7 +94,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             getThemeVar("color-secondary-700"),
         ];
     }, [getThemeVar]);
-    const config = (0, react_1.useMemo)(() => {
+    const config = (0, react_2.useMemo)(() => {
         return Object.assign({}, ...dataKeys.map((key, index) => {
             return {
                 [key]: {
@@ -104,10 +105,87 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
         }));
     }, [colorValues, dataKeys]);
     const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKeys, nameKey });
-    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
+    const containerRef = (0, react_1.useRef)(null);
+    const labelsRef = (0, react_1.useRef)(null);
+    const [interval, setIntervalState] = (0, react_1.useState)(0);
+    const [xAxisHeight, setXAxisHeight] = (0, react_1.useState)(50);
+    const [yTickCount, setYTickCount] = (0, react_1.useState)(5);
+    const fontSize = 12;
+    const [chartMargin, setChartMargin] = (0, react_1.useState)({ left: 30, right: 30, top: 10, bottom: 60 });
+    const [tickAngle, setTickAngle] = (0, react_1.useState)(0);
+    const [tickAnchor, setTickAnchor] = (0, react_1.useState)("middle");
+    const [miniMode, setMiniMode] = (0, react_1.useState)(false);
+    const [yAxisWidth, setYAxisWidth] = (0, react_1.useState)(40);
+    (0, react_1.useEffect)(() => {
+        const calc = () => {
+            var _a, _b, _c, _d, _e;
+            const width = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 800;
+            const spans = ((_b = labelsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("span")) || [];
+            const yTicks = Array.from(document.querySelectorAll(".recharts-y-axis .recharts-layer tspan"));
+            const maxYTickWidth = yTicks.length > 0 ? Math.max(...yTicks.map((t) => t.getBBox().width)) : 40;
+            setYAxisWidth(maxYTickWidth);
+            const maxWidth = Array.from(spans).reduce((mx, s) => Math.max(mx, s.offsetWidth), 50);
+            let angle = 0;
+            let anchor = "middle";
+            let rad = 0;
+            let minTickSpacing = maxWidth + 8;
+            let leftMargin = Math.ceil(maxWidth / 3);
+            let rightMargin = Math.ceil(maxWidth / 3);
+            let xAxisH = Math.ceil(fontSize * 1.2);
+            let maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
+            let skip = Math.max(0, Math.ceil(data.length / maxTicks) - 1);
+            if (skip > 0) {
+                angle = -60;
+                anchor = "end";
+                rad = (Math.abs(angle) * Math.PI) / 180;
+                minTickSpacing = Math.ceil(maxWidth * Math.cos(rad)) + 2;
+                maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
+                skip = Math.max(0, Math.ceil(data.length / maxTicks) - 1);
+                leftMargin = Math.ceil((maxWidth * Math.cos(rad)) / 1.8);
+                rightMargin = Math.ceil((maxWidth * Math.cos(rad)) / 1.8);
+                xAxisH = Math.ceil(Math.abs(maxWidth * Math.sin(rad)) + Math.abs(fontSize * Math.cos(rad)));
+            }
+            setIntervalState(skip);
+            setTickAngle(angle);
+            setTickAnchor(anchor);
+            const xTicks = Array.from(document.querySelectorAll(".recharts-x-axis .recharts-layer tspan"));
+            const maxXTickHeight = xTicks.length > 0 ? Math.max(...xTicks.map((t) => t.getBBox().height)) : fontSize;
+            let bottomMargin = 10;
+            if (layout === "vertical") {
+                bottomMargin = maxXTickHeight;
+            }
+            else {
+                bottomMargin = Math.max(xAxisH, maxXTickHeight);
+            }
+            setChartMargin({ left: leftMargin, right: rightMargin, top: 10, bottom: bottomMargin });
+            const chartHeight = ((_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 300;
+            const maxYTicks = Math.max(2, Math.floor(chartHeight / (fontSize * 3)));
+            setYTickCount(maxYTicks);
+            setXAxisHeight(Math.ceil(fontSize));
+            const containerHeight = ((_d = containerRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
+            const containerWidth = ((_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.offsetWidth) || 0;
+            const neededHeight = 10 + xAxisHeight + 10 + 32;
+            const neededWidth = chartMargin.left + chartMargin.right + yAxisWidth + 32;
+            setMiniMode(neededHeight > containerHeight || neededWidth > containerWidth);
+        };
+        calc();
+        window.addEventListener("resize", calc);
+        return () => window.removeEventListener("resize", calc);
+    }, [data, xAxisHeight]);
+    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: data
+                    .map((d) => d[nameKey])
+                    .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx))) }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flexGrow: 1,
-                    minHeight: 0,
                     width: style.width || "100%",
                     height: style.height || "100%",
-                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: data, layout: layout, margin: { left: 10, top: 0, bottom: 0, right: 10 }, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: hideX, tick: { fill: "currentColor" } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: tickFormatter, tick: { fill: "currentColor" } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: tickFormatter, height: hideX ? 0 : 30, hide: hideX, tick: !hideTickX && { fill: "currentColor" } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: !hideTickY && { fill: "currentColor" }, hide: hideY, width: hideY ? 0 : 60 })] })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined }, index))), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) }) })] }));
+                    padding: 0,
+                    margin: 0,
+                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { style: style, accessibilityLayer: true, data: data, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: miniMode || hideX, tick: miniMode ? false : { fill: "currentColor", fontSize } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: miniMode ? undefined : tickFormatter, tick: miniMode ? false : { fill: "currentColor", fontSize } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: interval, tickLine: false, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatter, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, hide: miniMode || hideY, tickCount: yTickCount, width: miniMode || hideY || hideTickY ? 0 : 40 })] })), !miniMode && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1 }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                                    bottom: 0,
+                                    left: 0,
+                                    right: 0,
+                                    margin: "0 auto",
+                                    width: "100%",
+                                    textAlign: "center",
+                                } }))] }) }) })] }));
 }

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

@@ -13,9 +13,9 @@ const metadata_helpers_1 = require("../../metadata-helpers");
 const COMP = "DonutChart";
 const defaultPropsDonut = Object.assign(Object.assign({}, PieChartNative_1.defaultProps), { innerRadius: 60 });
 exports.DonutChartMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "A derivative of [PieChart](/components/PieChart) with a hollow center. " +
         "Note that the height of the component or its parent needs to be set explicitly.",
-    status: "experimental",
     props: {
         data: {
             description: "The data to be displayed in the chart. Needs to be an array of objects.",

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

@@ -13,11 +13,11 @@ const renderers_1 = require("../../../components-core/renderers");
 const metadata_helpers_1 = require("../../metadata-helpers");
 const COMP = "LabelList";
 exports.LabelListMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "`LabelList` adds custom data labels to chart components when automatic " +
         "labeling isn't sufficient. It's a specialized component for advanced chart " +
         "customization scenarios where you need precise control over label positioning " +
         "and appearance.",
-    status: "experimental",
     props: {
         key: {
             description: "The key that needs to be matched to the data series.",

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

@@ -7,11 +7,11 @@ const metadata_helpers_1 = require("../../metadata-helpers");
 const LegendNative_1 = require("./LegendNative");
 const COMP = "Legend";
 exports.LegendMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "`Legend` provides a standalone legend for chart components when you need " +
         "custom positioning or styling beyond the chart's built-in `showLegend` " +
         "property. Most charts can display legends automatically, but this component " +
         "offers precise control over legend placement and alignment.",
-    status: "experimental",
     props: {
         align: {
             description: "The alignment of the legend",

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

@@ -7,11 +7,11 @@ const renderers_1 = require("../../../components-core/renderers");
 const metadata_helpers_1 = require("../../metadata-helpers");
 const COMP = "LineChart";
 exports.LineChartMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "`LineChart` displays data as connected points over a continuous axis, ideal " +
         "for showing trends, changes over time, or relationships between variables. " +
         "Use it time series data, progress tracking, and comparing multiple data " +
         "series on the same scale.",
-    status: "experimental",
     props: {
         data: {
             description: "The data to be displayed in the line chart." +

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

@@ -40,14 +40,14 @@ const recharts_1 = require("recharts");
 const react_1 = require("react");
 const ChartProvider_1 = __importStar(require("../utils/ChartProvider"));
 const TooltipContent_1 = require("../Tooltip/TooltipContent");
-const xmlui_1 = require("xmlui");
+const ThemeContext_1 = require("../../../components-core/theming/ThemeContext");
 exports.defaultProps = {
     hideX: false,
     hideTooltip: false,
     showLegend: false,
 };
-function LineChart({ data, dataKeys = [], nameKey, style, hideX = false, hideTooltip = false, tickFormatter, children, showLegend = false, marginTop = 0, marginRight = 0, marginBottom = 0, marginLeft = 0, }) {
-    const { getThemeVar } = (0, xmlui_1.useTheme)();
+function LineChart({ data, dataKeys = [], nameKey, style, hideX = false, hideTooltip = false, tickFormatter, children, showLegend = false, }) {
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const colorValues = (0, react_1.useMemo)(() => {
         return [
             getThemeVar("color-primary-500"),
@@ -88,21 +88,72 @@ function LineChart({ data, dataKeys = [], nameKey, style, hideX = false, hideToo
             getThemeVar("color-secondary-700"),
         ];
     }, [getThemeVar]);
-    const config = (0, react_1.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)({ nameKey, dataKeys });
-    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
+    const containerRef = (0, react_1.useRef)(null);
+    const labelsRef = (0, react_1.useRef)(null);
+    const [interval, setIntervalState] = (0, react_1.useState)(0);
+    const [tickAngle, setTickAngle] = (0, react_1.useState)(0);
+    const [tickAnchor, setTickAnchor] = (0, react_1.useState)("middle");
+    const [chartMargin, setChartMargin] = (0, react_1.useState)({ left: 30, right: 30, top: 10, bottom: 60 });
+    const [xAxisHeight, setXAxisHeight] = (0, react_1.useState)(50);
+    const [miniMode, setMiniMode] = (0, react_1.useState)(false);
+    const fontSize = 12;
+    const safeData = Array.isArray(data) ? data : [];
+    (0, react_1.useEffect)(() => {
+        const calc = () => {
+            var _a, _b, _c;
+            const width = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 800;
+            const spans = ((_b = labelsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("span")) || [];
+            const maxWidth = Array.from(spans).reduce((mx, s) => Math.max(mx, s.offsetWidth), 50);
+            let angle = 0;
+            let anchor = "middle";
+            let rad = 0;
+            let minTickSpacing = maxWidth + 8;
+            let leftMargin = Math.max(8, Math.ceil(maxWidth / 3));
+            let rightMargin = Math.max(8, Math.ceil(maxWidth / 3));
+            let xAxisH = Math.ceil(fontSize * 1.2);
+            let maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
+            let skip = Math.max(0, Math.ceil(safeData.length / maxTicks) - 1);
+            if (skip > 0) {
+                angle = -60;
+                anchor = "end";
+                rad = (Math.abs(angle) * Math.PI) / 180;
+                minTickSpacing = Math.ceil(maxWidth * Math.cos(rad)) + 2;
+                maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
+                skip = Math.max(0, Math.ceil(safeData.length / maxTicks) - 1);
+                leftMargin = Math.max(8, Math.ceil((maxWidth * Math.cos(rad)) / 1.8));
+                rightMargin = Math.max(8, Math.ceil((maxWidth * Math.cos(rad)) / 1.8));
+                xAxisH = Math.ceil(Math.abs(maxWidth * Math.sin(rad)) + Math.abs(fontSize * Math.cos(rad)));
+            }
+            setIntervalState(skip);
+            setTickAngle(angle);
+            setTickAnchor(anchor);
+            setChartMargin({ left: leftMargin, right: rightMargin, top: 10, bottom: xAxisH });
+            setXAxisHeight(Math.ceil(fontSize));
+            const containerHeight = ((_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
+            const neededHeight = 10 + xAxisHeight + 10 + 32;
+            setMiniMode(neededHeight > containerHeight);
+        };
+        calc();
+        window.addEventListener("resize", calc);
+        return () => window.removeEventListener("resize", calc);
+    }, [data, nameKey, xAxisHeight]);
+    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: safeData.length > 0 && nameKey
+                    ? safeData
+                        .map((d) => d === null || d === void 0 ? void 0 : d[nameKey])
+                        .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx)))
+                    : null }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flexGrow: 1,
-                    minHeight: 0,
-                    width: style.width || "100%",
-                    height: style.height || "100%",
-                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft }, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: "preserveEnd", dataKey: nameKey, tickLine: false, hide: hideX, axisLine: false, tick: { fill: "currentColor" }, tickFormatter: tickFormatter, minTickGap: 5 }), !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { dataKey: key, type: "monotone", stroke: config[key].color, dot: false }, index))), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) }) })] }));
+                    width: (style === null || style === void 0 ? void 0 : style.width) || "100%",
+                    height: (style === null || style === void 0 ? void 0 : style.height) || "100%",
+                    padding: 0,
+                    margin: 0,
+                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, style: style, width: "100%", height: "100%", debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, interval: interval, tickLine: false, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatter, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: 1, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                                    bottom: 0,
+                                    left: 0,
+                                    right: 0,
+                                    margin: "0 auto",
+                                    width: "100%",
+                                    textAlign: "center",
+                                } }))] }) }) })] }));
 }