mendix · samuelreichert · Sep 9, 2025 · Sep 9, 2025 · Sep 9, 2025 · Sep 10, 2025
@@ -1,35 +1,36 @@
 {
     "name": "web-widgets",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
+    "license": "Apache-2.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/mendix/web-widgets.git"
     },
-    "license": "Apache-2.0",
     "scripts": {
-        "prepare": "husky install",
-        "lint": "turbo run lint --continue --concurrency 1",
-        "test": "turbo run test --continue --concurrency 1",
-        "verify": "turbo run verify --continue --concurrency 1",
         "build": "turbo run build",
-        "release": "turbo run release",
+        "changelog": "pnpm --filter @mendix/automation-utils run changelog",
         "create-gh-release": "turbo run create-gh-release --concurrency 1",
         "create-translation": "turbo run create-translation",
-        "publish-marketplace": "turbo run publish-marketplace",
-        "version": "pnpm --filter @mendix/automation-utils run version",
-        "changelog": "pnpm --filter @mendix/automation-utils run changelog",
+        "postinstall": "turbo run agent-rules",
+        "lint": "turbo run lint --continue --concurrency 1",
+        "prepare": "husky install",
         "prepare-release": "pnpm --filter @mendix/automation-utils run prepare-release",
-        "postinstall": "turbo run agent-rules"
+        "publish-marketplace": "turbo run publish-marketplace",
+        "release": "turbo run release",
+        "test": "turbo run test --continue --concurrency 1",
+        "verify": "turbo run verify --continue --concurrency 1",
+        "version": "pnpm --filter @mendix/automation-utils run version"
     },
     "devDependencies": {
         "husky": "^8.0.3",
         "turbo": "^2.5.4"
     },
+    "prettier": "@mendix/prettier-config-web-widgets",
+    "packageManager": "[email protected]+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184",
     "engines": {
         "node": ">=22",
         "pnpm": "10.12.4"
     },
-    "packageManager": "[email protected]+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184",
     "pnpm": {
         "peerDependencyRules": {
             "allowedVersions": {
@@ -40,45 +41,44 @@
                 "react-native"
             ]
         },
+        "onlyBuiltDependencies": [
+            "@swc/core",
+            "canvas"
+        ],
         "overrides": {
+            "@codemirror/view": "^6.38.1",
             "@mendix/pluggable-widgets-tools": "10.21.2",
-            "react": "^18.0.0",
-            "react-dom": "^18.0.0",
-            "prettier": "3.5.3",
+            "@types/big.js": "^6.2.2",
             "@types/node": "~22.14.0",
             "@types/react": ">=18.2.36",
-            "@types/big.js": "^6.2.2",
             "d3-color@<3.1.0": ">=3.1.0",
-            "loader-utils@1": "^1.4.2",
-            "loader-utils@3": "^3.2.1",
             "decode-uri-component@<0.2.1": ">=0.2.1",
+            "enzyme>cheerio": "1.0.0-rc.10",
             "jest": "^29.7.0",
             "jest-environment-jsdom": "^29.7.0",
-            "[email protected]": ">=1.0.2",
             "[email protected]": ">=1.0.2",
-            "@codemirror/view": "^6.38.1",
-            "enzyme>cheerio": "1.0.0-rc.10",
-            "ts-node": "10.9.2",
+            "[email protected]": ">=1.0.2",
+            "loader-utils@1": "^1.4.2",
+            "loader-utils@3": "^3.2.1",
+            "prettier": "3.5.3",
+            "react": "^18.0.0",
             "react-big-calendar@1>clsx": "2.1.1",
+            "react-dom": "^18.0.0",
+            "ts-node": "10.9.2",
             "typescript": ">5.8.0"
         },
         "patchedDependencies": {
-            "[email protected]": "patches/[email protected]",
-            "[email protected]": "patches/[email protected]",
-            "[email protected]": "patches/[email protected]",
             "mime-types": "patches/mime-types.patch",
+            "[email protected]": "patches/[email protected]",
+            "[email protected]": "patches/[email protected]",
             "rc-trigger": "patches/rc-trigger.patch",
+            "[email protected]": "patches/[email protected]",
             "react-dropzone": "patches/react-dropzone.patch"
         },
-        "onlyBuiltDependencies": [
-            "@swc/core",
-            "canvas"
-        ],
         "ignoredBuiltDependencies": [
             "@parcel/watcher",
             "core-js",
             "es5-ext"
         ]
-    },
-    "prettier": "@mendix/prettier-config-web-widgets"
+    }
 }
@@ -1,11 +1,11 @@
-import { createElement, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useMemo } from "react";
+import { RefObject, ReactElement, useCallback, useEffect, useRef, useMemo } from "react";
 
 import { ValueStatus, DynamicValue } from "mendix";
 
 import { AccessibilityHelperContainerProps } from "../typings/AccessibilityHelperProps";
 
 const AccessibilityHelper = (props: AccessibilityHelperContainerProps): ReactElement => {
-    const contentRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+    const contentRef: RefObject<HTMLDivElement | null> = useRef(null);
     const conditions = useMemo(
         () => props.attributesList.map(attr => ({ attribute: attr.attribute, condition: attr.attributeCondition })),
         [props.attributesList]

@@ -18,8 +18,7 @@
         "skipLibCheck": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
-        "jsx": "react",
-        "jsxFactory": "createElement",
+        "jsx": "react-jsx",
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
         "useUnknownInCatchVariables": false,

@@ -1,6 +1,6 @@
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { mapPreviewIconToWebIcon } from "@mendix/widget-plugin-platform/preview/map-icon";
-import { createElement, ReactElement } from "react";
+import { ReactElement } from "react";
 
 import { Accordion } from "./components/Accordion";
 import { useIconGenerator } from "./utils/iconGenerator";

@@ -1,4 +1,4 @@
-import { createElement, ReactElement, useMemo, useRef } from "react";
+import { ReactElement, useMemo, useRef } from "react";
 import { ValueStatus } from "mendix";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 

@@ -1,13 +1,4 @@
-import {
-    createElement,
-    Dispatch,
-    MutableRefObject,
-    ReactElement,
-    useCallback,
-    useMemo,
-    useReducer,
-    useRef
-} from "react";
+import { Dispatch, RefObject, ReactElement, useCallback, useMemo, useReducer, useRef } from "react";
 
 import { AccordionGroup, AccordionGroupProps, Target } from "./AccordionGroup";
 import { CollapsedAccordionGroupsReducerAction, getCollapsedAccordionGroupsReducer } from "../utils/reducers";
@@ -124,7 +115,7 @@ export function Accordion(props: AccordionProps): ReactElement | null {
 
 interface AccordionGroupWrapperProps extends Omit<AccordionGroupProps, "toggleCollapsed" | "changeFocus"> {
     index: number;
-    parent: MutableRefObject<HTMLDivElement | null>;
+    parent: RefObject<HTMLDivElement | null>;
     accordionGroupCollapsedStateDispatch: Dispatch<CollapsedAccordionGroupsReducerAction>;
 }
 

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { createElement, KeyboardEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { KeyboardEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { LoadContentEnum } from "typings/AccordionProps";
 import { useDebouncedResizeObserver, CallResizeObserver } from "../utils/resizeObserver";
 import "../ui/accordion-main.scss";

@@ -1,4 +1,4 @@
-import { createElement, JSX, PropsWithChildren, ReactElement } from "react";
+import { JSX, PropsWithChildren, ReactElement } from "react";
 
 export interface HeaderProps {
     heading: "headingOne" | "headingTwo" | "headingThree" | "headingFour" | "headingFive" | "headingSix";

@@ -1,4 +1,4 @@
-import { createElement, ReactElement } from "react";
+import { ReactElement } from "react";
 import classNames from "classnames";
 import { WebIcon } from "mendix";
 import { IconInternal } from "@mendix/widget-plugin-component-kit/IconInternal";

@@ -1,5 +1,4 @@
 import "@testing-library/jest-dom";
-import { createElement } from "react";
 import { act, render, RenderResult } from "@testing-library/react";
 import userEvent, { UserEvent } from "@testing-library/user-event";
 import { Accordion, AccordionProps } from "../Accordion";

@@ -1,7 +1,6 @@
 import "@testing-library/jest-dom";
 import { act, render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { createElement } from "react";
 import { AccordionGroup, AccordionGroupProps, Target } from "../AccordionGroup";
 
 global.ResizeObserver = jest.fn().mockImplementation(() => ({

@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom";
 import { render, RenderResult } from "@testing-library/react";
-import { createElement, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { Header, HeaderProps } from "../Header";
 
 describe("Header", () => {

@@ -1,6 +1,5 @@
 import "@testing-library/jest-dom";
 import { render, RenderResult } from "@testing-library/react";
-import { createElement } from "react";
 import { Icon, IconProps } from "../Icon";
 
 describe("Icon", () => {

@@ -1,40 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`useIconGenerator returned function returns the icon when icon is animated 1`] = `
-<Icon
-  animate={true}
-  data={
-    {
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "animate": true,
+    "data": {
       "iconClass": "icon-class",
       "type": "glyph",
-    }
-  }
-  loading={false}
-/>
+    },
+    "loading": false,
+  },
+  "type": [Function],
+}
 `;
 
 exports[`useIconGenerator returned function without icon animated returns the collapse icon when expanded 1`] = `
-<Icon
-  animate={false}
-  data={
-    {
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "animate": false,
+    "data": {
       "iconClass": "collapse-icon-class",
       "type": "glyph",
-    }
-  }
-  loading={false}
-/>
+    },
+    "loading": false,
+  },
+  "type": [Function],
+}
 `;
 
 exports[`useIconGenerator returned function without icon animated returns the expand icon when collapsed 1`] = `
-<Icon
-  animate={false}
-  data={
-    {
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "animate": false,
+    "data": {
       "iconClass": "expand-icon-class",
       "type": "glyph",
-    }
-  }
-  loading={false}
-/>
+    },
+    "loading": false,
+  },
+  "type": [Function],
+}
 `;
@@ -1,4 +1,4 @@
-import { createElement, ReactElement, useCallback } from "react";
+import { ReactElement, useCallback } from "react";
 
 import { Icon, IconProps } from "../components/Icon";
 

@@ -4,8 +4,8 @@ import "../ui/accordion-main.scss";
 
 type ResizeObserverProps = {
     renderCollapsed: boolean;
-    contentWrapperRef: RefObject<HTMLDivElement>;
-    contentRef: RefObject<HTMLDivElement>;
+    contentWrapperRef: RefObject<HTMLDivElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
 };
 
 export function CallResizeObserver(entries: ResizeObserverEntry[], props: ResizeObserverProps): void {

@@ -18,8 +18,7 @@
         "skipLibCheck": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
-        "jsx": "react",
-        "jsxFactory": "createElement",
+        "jsx": "react-jsx",
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
         "useUnknownInCatchVariables": false,

@@ -1,5 +1,5 @@
 import { ChartPreview } from "@mendix/shared-charts/preview";
-import { createElement, ReactNode } from "react";
+import { ReactNode } from "react";
 import { AreaChartPreviewProps } from "../typings/AreaChartProps";
 import AreaChartLegend from "./assets/AreaChart-legend.light.svg";
 import AreaChartImage from "./assets/AreaChart.light.svg";

@@ -7,7 +7,7 @@ import {
 } from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
-import { createElement, memo, ReactElement, useCallback } from "react";
+import { memo, ReactElement, useCallback } from "react";
 import { AreaChartContainerProps, SeriesType } from "../typings/AreaChartProps";
 
 const areaChartLayoutOptions: ChartWidgetProps["layoutOptions"] = {
@@ -70,8 +70,8 @@ export const AreaChart = memo(function AreaChart(props: AreaChartContainerProps)
             height={props.height}
             heightUnit={props.heightUnit}
             showLegend={props.showLegend}
-            xAxisLabel={props.xAxisLabel?.value}
-            yAxisLabel={props.yAxisLabel?.value}
+            xAxisLabel={props.xAxisLabel?.value ? { text: props.xAxisLabel.value } : undefined}
+            yAxisLabel={props.yAxisLabel?.value ? { text: props.yAxisLabel.value } : undefined}
             gridLinesMode={props.gridLines}
             customLayout={props.customLayout}
             customConfig={props.customConfigurations}