xmlui 0.10.26 → 0.11.2

package/dist/scripts/bin/bootstrap.cjs

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+"use strict";
+require("tsx/cjs");
+require("./index");

package/dist/scripts/bin/index.js

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 "use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -16,15 +15,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const build_1 = require("./build");
 const start_1 = require("./start");
 const preview_1 = require("./preview");
-const yargs_1 = require("yargs");
+const yargs_1 = __importDefault(require("yargs/yargs"));
+const helpers_1 = require("yargs/helpers");
 const adm_zip_1 = __importDefault(require("adm-zip"));
 const build_lib_1 = require("./build-lib");
 process.on("unhandledRejection", (err) => {
     throw err;
 });
-const args = process.argv.slice(2);
-const scriptIndex = args.findIndex((x) => x === "build" || x === "eject" || x === "start" || x === "test");
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 function zipDirectory(sourceDir_1) {
     return __awaiter(this, arguments, void 0, function* (sourceDir, outPath = sourceDir) {
         const zip = new adm_zip_1.default();
@@ -34,7 +31,7 @@ function zipDirectory(sourceDir_1) {
     });
 }
 function zipDist(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ target = "ui.zip", source = "dist" }) {
+    return __awaiter(this, arguments, void 0, function* ({ target = "ui.zip", source = "dist", }) {
         yield zipDirectory(`${process.cwd()}/${source}`, `${process.cwd()}/${target}`);
     });
 }
@@ -56,9 +53,83 @@ function getStringArg(arg, defaultValue) {
     }
     return dedupeArg(arg);
 }
-switch (script) {
+const argv = (0, yargs_1.default)((0, helpers_1.hideBin)(process.argv))
+    .command("build", "Build the project", (yargs) => {
+    return yargs
+        .option("flatDist", {
+        type: "boolean",
+        description: "Create flat distribution",
+    })
+        .option("prod", {
+        type: "boolean",
+        description: "Production build",
+    })
+        .option("buildMode", {
+        type: "string",
+        description: "Build mode",
+    })
+        .option("withMock", {
+        type: "boolean",
+        description: "Include mock data",
+    })
+        .option("withHostingMetaFiles", {
+        type: "boolean",
+        description: "Include hosting meta files",
+    })
+        .option("withRelativeRoot", {
+        type: "boolean",
+        description: "Use relative root",
+    });
+})
+    .command("build-lib", "Build library", (yargs) => {
+    return yargs
+        .option("watch", {
+        type: "boolean",
+        description: "Watch mode",
+    })
+        .option("mode", {
+        type: "string",
+        description: "Build mode",
+    });
+})
+    .command("start", "Start development server", (yargs) => {
+    return yargs
+        .option("port", {
+        type: "number",
+        description: "Port number",
+    })
+        .option("withMock", {
+        type: "boolean",
+        description: "Include mock data",
+    })
+        .option("proxy", {
+        type: "string",
+        description: "Proxy target",
+    });
+})
+    .command("preview", "Preview build", (yargs) => {
+    return yargs.option("proxy", {
+        type: "string",
+        description: "Proxy target",
+    });
+})
+    .command("zip-dist", "Zip distribution", (yargs) => {
+    return yargs
+        .option("target", {
+        type: "string",
+        description: "Target zip file",
+    })
+        .option("source", {
+        type: "string",
+        description: "Source directory",
+    });
+})
+    .help()
+    .parseSync();
+const command = argv._[0];
+switch (command) {
     case "build": {
-        const { flatDist, prod, buildMode, withMock, withHostingMetaFiles, withRelativeRoot } = yargs_1.argv;
+        const { flatDist, prod, buildMode, withMock, withHostingMetaFiles, withRelativeRoot } = argv;
         (0, build_1.build)({
             buildMode: getStringArg(buildMode, prod ? "CONFIG_ONLY" : undefined),
             withMock: getBoolArg(withMock, prod ? false : undefined),
@@ -69,27 +140,28 @@ switch (script) {
         break;
     }
     case "build-lib": {
-        const { watch, mode } = yargs_1.argv;
+        const { watch, mode } = argv;
         (0, build_lib_1.buildLib)({ watchMode: getBoolArg(watch, false), mode: getStringArg(mode, "") });
         break;
     }
     case "start": {
-        const { port, withMock, proxy } = yargs_1.argv;
+        const { port, withMock, proxy } = argv;
         (0, start_1.start)({ port, withMock: getBoolArg(withMock), proxy });
         break;
     }
     case "preview": {
-        const { proxy } = yargs_1.argv;
+        const { proxy } = argv;
         (0, preview_1.preview)({ proxy });
         break;
     }
     case "zip-dist": {
-        const { target, source } = yargs_1.argv;
+        const { target, source } = argv;
         zipDist({ target, source });
         break;
     }
     default: {
-        console.log('Unknown script "' + script + '".');
+        console.log('Unknown command "' + command + '".');
         console.log("Perhaps you need to update xmlui?");
+        process.exit(1);
     }
 }

package/dist/scripts/package.json

@@ -1,18 +1,17 @@
 {
     "name": "xmlui",
-    "version": "0.10.26",
+    "version": "0.11.2",
     "sideEffects": false,
+    "type": "module",
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
         "build:xmlui-test-bed": "cd src/testing/infrastructure && xmlui build --build-mode=INLINE_ALL --withHostingMetaFiles --withMock",
         "build:bin": "tsc -p tsconfig.bin.json",
-        "build:xmlui": "vite build --mode lib",
+        "build:xmlui": "vite build --mode lib && ncc build bin/vite-xmlui-plugin.ts -o dist/lib/vite-xmlui-plugin",
         "build:xmlui-standalone": "vite build --mode standalone",
         "build:xmlui-metadata": "vite build --mode metadata",
         "test:unit": "vitest run",
-        "test:e2e-non-smoke": "playwright test --project non-smoke",
-        "test:e2e-smoke": "playwright test --project smoke",
-        "test:e2e-ui": "playwright test --ui",
+        "test:e2e": "playwright test",
         "test:e2e-summary": "node scripts/e2e-test-summary.js",
         "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
         "prepublishOnly": "clean-package",
@@ -22,7 +21,7 @@
         "generate-all-docs": "npm run build:xmlui-metadata && npm run generate-docs && npm run generate-docs-summaries",
         "export-themes": "npm run build:xmlui-metadata && node scripts/generate-docs/create-theme-files.mjs",
         "generate-docs-with-refresh": "npm run build:xmlui-metadata && npm run generate-docs && npm run generate-docs-summaries",
-        "gen:langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"
+        "gen:langserver-metadata": "node scripts/get-langserver-metadata.js > src/language-server/xmlui-metadata-generated.js"
     },
     "dependencies": {
         "@eslint-community/regexpp": "4.10.0",
@@ -100,7 +99,6 @@
         "remark-gfm": "^4.0.1",
         "sass": "1.55.0",
         "scroll-into-view-if-needed": "^3.1.0",
-        "ts-node": "10.9.1",
         "turndown": "^7.2.0",
         "unist-util-visit": "^5.0.0",
         "use-context-selector": "1.4.1",
@@ -109,13 +107,13 @@
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-textdocument": "^1.0.11",
-        "yargs": "17.7.2"
+        "yargs": "17.7.2",
+        "tsx": "4.20.6"
     },
     "devDependencies": {
         "@babel/core": "7.19.6",
         "@babel/preset-env": "7.19.4",
         "@babel/preset-typescript": "7.18.6",
-        "@playwright/test": "1.53.0",
         "@remix-run/dev": "2.12.1",
         "@remix-run/node": "2.12.1",
         "@remix-run/serve": "2.12.1",
@@ -140,6 +138,7 @@
         "eslint-plugin-jsx-a11y": "6.7.1",
         "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^5.2.0",
+        "ncc": "^0.3.6",
         "prettier": "^3.3.3",
         "rimraf": "6.0.1",
         "rollup-plugin-copy": "^3.5.0",
@@ -170,27 +169,27 @@
     "clean-package": {
         "replace": {
             "bin": {
-                "xmlui": "dist/scripts/bin/bootstrap.js"
+                "xmlui": "dist/scripts/bin/bootstrap.cjs"
             },
             "main": "./dist/standalone/xmlui-standalone.umd.js",
-            "module": "./dist/lib/xmlui.mjs",
+            "module": "./dist/lib/xmlui.js",
             "types": "./dist/lib/xmlui.d.ts",
             "exports": {
                 ".": {
-                    "import": "./dist/lib/xmlui.mjs",
+                    "import": "./dist/lib/xmlui.js",
                     "require": "./dist/standalone/xmlui-standalone.umd.js"
                 },
                 "./language-server": {
-                    "import": "./dist/lib/language-server.mjs",
-                    "require": "./dist/lib/language-server.mjs"
+                    "import": "./dist/lib/language-server.js",
+                    "require": "./dist/lib/language-server.js"
                 },
                 "./language-server-web-worker": {
-                    "import": "./dist/lib/language-server-web-worker.mjs",
-                    "require": "./dist/lib/language-server-web-worker.mjs"
+                    "import": "./dist/lib/language-server-web-worker.js",
+                    "require": "./dist/lib/language-server-web-worker.js"
                 },
                 "./parser": {
-                    "import": "./dist/lib/xmlui-parser.mjs",
-                    "require": "./dist/lib/xmlui-parser.mjs"
+                    "import": "./dist/lib/xmlui-parser.js",
+                    "require": "./dist/lib/xmlui-parser.js"
                 },
                 "./*.css": {
                     "import": "./dist/lib/*.css",
@@ -205,16 +204,20 @@
                     "require": "./dist/lib/scss/components-core/theming/_themes.scss"
                 },
                 "./vite-xmlui-plugin": {
-                    "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
-                    "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
+                    "import": "./dist/lib/vite-xmlui-plugin/index.js",
+                    "require": "./dist/lib/vite-xmlui-plugin/index.js"
                 },
                 "./syntax/monaco": {
-                    "import": "./dist/lib/syntax-monaco.mjs",
-                    "require": "./dist/lib/syntax-monaco.mjs"
+                    "import": "./dist/lib/syntax-monaco.js",
+                    "require": "./dist/lib/syntax-monaco.js"
                 },
                 "./syntax/textmate": {
-                    "import": "./dist/lib/syntax-textmate.mjs",
-                    "require": "./dist/lib/syntax-textmate.mjs"
+                    "import": "./dist/lib/syntax-textmate.js",
+                    "require": "./dist/lib/syntax-textmate.js"
+                },
+                "./testing": {
+                    "import": "./dist/lib/testing.js",
+                    "require": "./dist/lib/testing.js"
                 }
             }
         }
@@ -255,6 +258,10 @@
         "./syntax/textmate": {
             "import": "./src/syntax/textMate/index.ts",
             "require": "./src/syntax/textMate/index.ts"
+        },
+        "./testing": {
+            "import": "./src/testing/index.ts",
+            "require": "./src/testing/index.ts"
         }
     },
     "browserslist": {

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

@@ -18,21 +18,33 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield initTestBed(`<App name="Test App" testId="app"/>`);
         yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
     }));
-    (0, fixtures_1.test)("renders with different layout types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="horizontal" testId="app"/>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
-        yield initTestBed(`<App layout="horizontal-sticky" testId="app"/>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
-        yield initTestBed(`<App layout="condensed" testId="app"/>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
-        yield initTestBed(`<App layout="condensed-sticky" testId="app"/>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
-        yield initTestBed(`<App layout="vertical" testId="app"/>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
-        yield initTestBed(`<App layout="vertical-sticky" testId="app"/>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
-        yield initTestBed(`<App layout="vertical-full-header" testId="app"/>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+    (0, fixtures_1.test)("renders with horizontal layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="horizontal">test text</App>`);
+        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with horizontal-sticky layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="horizontal-sticky">test text</App>`);
+        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with condensed layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="condensed">test text</App>`);
+        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with condensed-sticky layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="condensed-sticky">test text</App>`);
+        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with vertical layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="vertical">test text</App>`);
+        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with vertical-sticky layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="vertical-sticky">test text</App>`);
+        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with vertical-full-header layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="vertical-full-header">test text</App>`);
+        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
     }));
     (0, fixtures_1.test)("handles layout prop changes correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createButtonDriver, }) {
         yield initTestBed(`

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

@@ -12,7 +12,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 const abstractions_1 = require("../abstractions");
-const AvatarNative_1 = require("./AvatarNative");
 fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
     (0, fixtures_1.test)("No initials without name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
         yield initTestBed(`<Avatar />`);
@@ -103,34 +102,6 @@ fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
     (0, fixtures_1.expect)(widthSm).toBeLessThan(widthMd);
     (0, fixtures_1.expect)(widthMd).toBeLessThan(widthLg);
 }));
-(0, fixtures_1.test)(`invalid size falls back to default ${AvatarNative_1.defaultProps.size}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    yield initTestBed(`
-    <Fragment>
-      <Avatar testId="reference" name="Lynn Gilbert" size="${AvatarNative_1.defaultProps.size}" />
-      <Avatar testId="invalid" name="Invalid Size" size="invalid"/>
-    </Fragment>
-  `);
-    const driverReference = yield createAvatarDriver("reference");
-    const driverInvalid = yield createAvatarDriver("invalid");
-    const { width: widthRef, height: heightRef } = yield (0, component_test_helpers_1.getBounds)(driverReference.component);
-    const { width: widthInvalid, height: heightInvalid } = yield (0, component_test_helpers_1.getBounds)(driverInvalid.component);
-    yield (0, fixtures_1.expect)(driverInvalid.component).toBeVisible();
-    (0, fixtures_1.expect)(widthInvalid).toBe(widthRef);
-    (0, fixtures_1.expect)(heightInvalid).toBe(heightRef);
-}));
-(0, fixtures_1.test)(`no size prop defaults to ${AvatarNative_1.defaultProps.size}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    yield initTestBed(`<Fragment>
-      <Avatar testId="reference" name="Lynn Gilbert" size="${AvatarNative_1.defaultProps.size}" />
-      <Avatar testId="default" name="Default Size" />
-    </Fragment>`);
-    const driverReference = yield createAvatarDriver("reference");
-    const driverDefault = yield createAvatarDriver("default");
-    const { width: widthRef, height: heightRef } = yield (0, component_test_helpers_1.getBounds)(driverReference.component);
-    const { width: widthDefault, height: heightDefault } = yield (0, component_test_helpers_1.getBounds)(driverDefault.component);
-    yield (0, fixtures_1.expect)(driverDefault.component).toBeVisible();
-    (0, fixtures_1.expect)(widthDefault).toBe(widthRef);
-    (0, fixtures_1.expect)(heightDefault).toBe(heightRef);
-}));
 (0, fixtures_1.test)("size property affects font size for initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
     // Test that different sizes have appropriately scaled font sizes
     // Test xs size font scaling

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

@@ -13,7 +13,6 @@ const component_test_helpers_1 = require("../../testing/component-test-helpers")
 const fixtures_1 = require("../../testing/fixtures");
 const abstractions_1 = require("../../components/abstractions");
 const abstractions_2 = require("../abstractions");
-const ButtonNative_1 = require("./ButtonNative");
 // --- Smoke
 fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
     (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
@@ -380,34 +379,6 @@ abstractions_1.buttonTypeValues.forEach((type) => {
     (0, fixtures_1.expect)(heightSm).toBeLessThanOrEqual(heightMd);
     (0, fixtures_1.expect)(heightMd).toBeLessThanOrEqual(heightLg);
 }));
-(0, fixtures_1.test)(`invalid size falls back to default ${ButtonNative_1.defaultProps.size}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`
-    <Fragment>
-      <Button testId="reference" size="${ButtonNative_1.defaultProps.size}" />
-      <Button testId="invalid" size="invalid"/>
-    </Fragment>
-  `);
-    const reference = page.getByTestId("reference");
-    const invalid = page.getByTestId("invalid");
-    const { width: widthRef, height: heightRef } = yield (0, component_test_helpers_1.getBounds)(reference);
-    const { width: widthInvalid, height: heightInvalid } = yield (0, component_test_helpers_1.getBounds)(invalid);
-    yield (0, fixtures_1.expect)(invalid).toBeVisible();
-    (0, fixtures_1.expect)(widthInvalid).toBe(widthRef);
-    (0, fixtures_1.expect)(heightInvalid).toBe(heightRef);
-}));
-(0, fixtures_1.test)(`no size prop defaults to ${ButtonNative_1.defaultProps.size}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`<Fragment>
-      <Button testId="reference" size="${ButtonNative_1.defaultProps.size}" />
-      <Button testId="default" />
-    </Fragment>`);
-    const reference = page.getByTestId("reference");
-    const defaultButton = page.getByTestId("default");
-    const { width: widthRef, height: heightRef } = yield (0, component_test_helpers_1.getBounds)(reference);
-    const { width: widthDefault, height: heightDefault } = yield (0, component_test_helpers_1.getBounds)(defaultButton);
-    yield (0, fixtures_1.expect)(defaultButton).toBeVisible();
-    (0, fixtures_1.expect)(widthDefault).toBe(widthRef);
-    (0, fixtures_1.expect)(heightDefault).toBe(heightRef);
-}));
 (0, fixtures_1.test)("testState initializes to default value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed }) {
     const getState = (yield initTestBed(`<Fragment />`)).testStateDriver.testState;
     yield fixtures_1.expect.poll(getState).toEqual(null);

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

@@ -260,6 +260,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             height: miniMode || hideX ? 0 : xAxisHeight,
             tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
             tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
+            domain: [0, (dataMax) => dataMax * 1.05],
         }
         : {
             type: "category",
@@ -292,6 +293,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             tickCount: yTickCount,
             tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
             width: miniMode || hideY ? 0 : yAxisWidth,
+            domain: [0, (dataMax) => dataMax * 1.1],
         };
     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: validData
                     .map((d) => d[nameKey])

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

@@ -123,7 +123,7 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
                     payloadArray.push({
                         label: dataKey,
                         value: originalPayload[dataKey],
-                        color: colorValues[index] || colorValues[0]
+                        color: colorValues[index] || colorValues[0],
                     });
                 }
             });
@@ -181,7 +181,7 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
                     ? 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", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, 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, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize } }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, 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, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, domain: [(dataMin) => dataMin * 0.95, (dataMax) => dataMax * 1.05] }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
                                     bottom: 0,
                                     left: 0,
                                     right: 0,

package/dist/scripts/src/components/Charts/Tooltip/TooltipContent.spec.js

@@ -266,10 +266,10 @@ fixtures_1.test.describe("Basic Functionality", () => {
             const indicator = page.locator(tooltipIndicatorSelector);
             yield (0, fixtures_1.expect)(indicator).toBeVisible();
             // Indicator should have background color
-            const backgroundColor = yield indicator.evaluate(el => window.getComputedStyle(el).backgroundColor);
+            const backgroundColor = yield indicator.evaluate((el) => window.getComputedStyle(el).backgroundColor);
             (0, fixtures_1.expect)(backgroundColor).not.toBe("rgba(0, 0, 0, 0)"); // Not transparent
         }));
-        (0, fixtures_1.test)("applies consistent styling across different chart types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        (0, fixtures_1.test)("applies consistent styling across different chart types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
             // Test in LineChart context
             yield initTestBed(`
         <LineChart
@@ -281,9 +281,11 @@ fixtures_1.test.describe("Basic Functionality", () => {
         />
       `);
             yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            // Hover over line to trigger tooltip
-            const line = page.locator(".recharts-line-curve");
-            yield line.hover();
+            // Hover over chart area to trigger tooltip (Recharts tooltip activates on chart area, not just line)
+            const chartSvg = page.locator(".recharts-surface").first();
+            yield chartSvg.hover({ position: { x: 200, y: 200 } });
+            // Wait for tooltip to appear
+            yield page.waitForTimeout(500);
             yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
             // Should have consistent styling
             const indicator = page.locator(tooltipIndicatorSelector);
@@ -337,7 +339,7 @@ fixtures_1.test.describe("Accessibility", () => {
         yield (0, fixtures_1.expect)(valueText).toHaveCSS("font-size", /\d+px/);
         // Should have proper contrast (background vs text)
         const tooltipContainer = page.locator(tooltipContentSelector);
-        const backgroundColor = yield tooltipContainer.evaluate(el => window.getComputedStyle(el).backgroundColor);
+        const backgroundColor = yield tooltipContainer.evaluate((el) => window.getComputedStyle(el).backgroundColor);
         (0, fixtures_1.expect)(backgroundColor).not.toBe("transparent");
     }));
     (0, fixtures_1.test)("tooltip appears on keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {

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

@@ -78,6 +78,17 @@ exports.FormMd = (0, metadata_helpers_1.createMetadata)({
             type: "boolean",
             defaultValue: FormNative_1.defaultProps.hideButtonRowUntilDirty,
         },
+        hideButtonRow: {
+            description: `This property hides the button row entirely when set to true.`,
+            type: "boolean",
+            defaultValue: FormNative_1.defaultProps.hideButtonRow,
+        },
+        enableSubmit: {
+            description: `This property controls whether the submit button is enabled. When set to false, ` +
+                `the submit button is disabled and the form cannot be submitted.`,
+            type: "boolean",
+            defaultValue: FormNative_1.defaultProps.enableSubmit,
+        },
         submitUrl: (0, metadata_helpers_1.d)(`URL to submit the form data.`),
         submitMethod: {
             description: "This property sets the HTTP method to use when submitting the form data. If not " +
@@ -117,6 +128,14 @@ exports.FormMd = (0, metadata_helpers_1.createMetadata)({
                 data: "An object containing the form data to update.",
             },
         },
+        validate: {
+            description: "This method triggers validation on all form fields without submitting the form. " +
+                "It displays validation errors and returns the validation result along with the cleaned form data. " +
+                "This is useful for implementing custom submit buttons or performing operations that require " +
+                "validated data without actually submitting the form.",
+            signature: "validate(): Promise<{ isValid: boolean, data: Record<string, any>, errors: ValidationResult[], warnings: ValidationResult[], validationResults: Record<string, ValidationResult> }>",
+            returns: "A promise that resolves to an object containing validation status, cleaned data, and detailed validation results.",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Form_module_scss_1.default.themeVars),
     defaultThemeVars: {