fix: rendering in design mode (#1314)

mendix · Nov 4, 2024 · 5917f68 · 5917f68
2 parents c2e9c91 + e51a02f
commit 5917f68
Show file tree

Hide file tree

Showing 27 changed files with 73 additions and 32 deletions.
diff --git a/packages/modules/data-widgets/package.json b/packages/modules/data-widgets/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/data-widgets",
     "moduleName": "Data Widgets",
-    "version": "2.25.0",
+    "version": "2.25.1",
     "license": "Apache-2.0",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

diff --git a/packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with the widget failing to render in Design mode.
+
 ## [2.10.3] - 2024-10-31
 
 ### Fixed

diff --git a/packages/pluggableWidgets/datagrid-date-filter-web/package.json b/packages/pluggableWidgets/datagrid-date-filter-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-date-filter-web",
     "widgetName": "DatagridDateFilter",
-    "version": "2.10.3",
+    "version": "2.10.4",
     "description": "",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

diff --git a/packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.editorPreview.tsx b/packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.editorPreview.tsx
@@ -1,3 +1,6 @@
+import { enableStaticRendering } from "mobx-react-lite";
+enableStaticRendering(true);
+
 import { FilterComponent } from "./components/FilterComponent";
 import { withPreviewAdapter } from "./hocs/withPreviewAdapter";
 

diff --git a/packages/pluggableWidgets/datagrid-date-filter-web/src/package.xml b/packages/pluggableWidgets/datagrid-date-filter-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridDateFilter" version="2.10.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDateFilter" version="2.10.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDateFilter.xml" />
         </widgetFiles>

diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with the widget failing to render in Design mode.
+
 ## [2.9.2] - 2024-10-31
 
 ### Fixed

diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json b/packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-dropdown-filter-web",
     "widgetName": "DatagridDropdownFilter",
-    "version": "2.9.2",
+    "version": "2.9.3",
     "description": "",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

diff --git a/...luggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx b/...luggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx
@@ -1,3 +1,6 @@
+import { enableStaticRendering } from "mobx-react-lite";
+enableStaticRendering(true);
+
 import { createElement, ReactElement, useRef } from "react";
 import { DatagridDropdownFilterPreviewProps } from "../typings/DatagridDropdownFilterProps";
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";

diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/package.xml b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridDropdownFilter" version="2.9.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDropdownFilter" version="2.9.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDropdownFilter.xml" />
         </widgetFiles>

diff --git a/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with the widget failing to render in Design mode.
+
 ## [2.8.3] - 2024-10-31
 
 ### Fixed

diff --git a/packages/pluggableWidgets/datagrid-number-filter-web/package.json b/packages/pluggableWidgets/datagrid-number-filter-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-number-filter-web",
     "widgetName": "DatagridNumberFilter",
-    "version": "2.8.3",
+    "version": "2.8.4",
     "description": "",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

diff --git a/...es/pluggableWidgets/datagrid-number-filter-web/src/DatagridNumberFilter.editorPreview.tsx b/...es/pluggableWidgets/datagrid-number-filter-web/src/DatagridNumberFilter.editorPreview.tsx
@@ -1,8 +1,11 @@
-import { createElement, ReactElement, useMemo, useRef } from "react";
+import { enableStaticRendering } from "mobx-react-lite";
+enableStaticRendering(true);
+
+import { InputWithFiltersComponent } from "@mendix/widget-plugin-filtering/controls";
+import { InputStore } from "@mendix/widget-plugin-filtering/stores/InputStore";
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
-import { InputWithFilters } from "@mendix/widget-plugin-filtering/controls";
+import { createElement, ReactElement, useMemo, useRef } from "react";
 import { DatagridNumberFilterPreviewProps } from "../typings/DatagridNumberFilterProps";
-import { InputStore } from "@mendix/widget-plugin-filtering/stores/InputStore";
 
 function Preview(props: DatagridNumberFilterPreviewProps): ReactElement {
     const inputStores = useMemo<[InputStore, InputStore]>(
@@ -11,7 +14,7 @@ function Preview(props: DatagridNumberFilterPreviewProps): ReactElement {
     );
 
     return (
-        <InputWithFilters
+        <InputWithFiltersComponent
             adjustable={props.adjustable}
             className={props.class}
             filterFn={props.defaultFilter}

diff --git a/packages/pluggableWidgets/datagrid-number-filter-web/src/package.xml b/packages/pluggableWidgets/datagrid-number-filter-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridNumberFilter" version="2.8.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridNumberFilter" version="2.8.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridNumberFilter.xml" />
         </widgetFiles>

diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with the widget failing to render in Design mode.
+
 ## [2.8.3] - 2024-10-31
 
 ### Fixed

diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/package.json b/packages/pluggableWidgets/datagrid-text-filter-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-text-filter-web",
     "widgetName": "DatagridTextFilter",
-    "version": "2.8.3",
+    "version": "2.8.4",
     "description": "",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/src/DatagridTextFilter.editorPreview.tsx b/packages/pluggableWidgets/datagrid-text-filter-web/src/DatagridTextFilter.editorPreview.tsx
@@ -1,8 +1,11 @@
+import { enableStaticRendering } from "mobx-react-lite";
+enableStaticRendering(true);
+
+import { InputWithFiltersComponent } from "@mendix/widget-plugin-filtering/controls";
+import { InputStore } from "@mendix/widget-plugin-filtering/stores/InputStore";
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { createElement, ReactElement, useMemo, useRef } from "react";
 import { DatagridTextFilterPreviewProps } from "../typings/DatagridTextFilterProps";
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
-import { InputWithFilters } from "@mendix/widget-plugin-filtering/controls";
-import { InputStore } from "@mendix/widget-plugin-filtering/stores/InputStore";
 
 function Preview(props: DatagridTextFilterPreviewProps): ReactElement {
     const inputStores = useMemo<[InputStore, InputStore]>(
@@ -11,7 +14,7 @@ function Preview(props: DatagridTextFilterPreviewProps): ReactElement {
     );
 
     return (
-        <InputWithFilters
+        <InputWithFiltersComponent
             adjustable={props.adjustable}
             className={props.class}
             filterFn={props.defaultFilter}

diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/src/package.xml b/packages/pluggableWidgets/datagrid-text-filter-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridTextFilter" version="2.8.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridTextFilter" version="2.8.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridTextFilter.xml" />
         </widgetFiles>

diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with the widget failing to render in Design mode.
+
 ## [2.25.0] - 2024-10-31
 
 ### Changed

diff --git a/packages/pluggableWidgets/datagrid-web/package.json b/packages/pluggableWidgets/datagrid-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-web",
     "widgetName": "Datagrid",
-    "version": "2.25.0",
+    "version": "2.25.1",
     "description": "",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx
@@ -1,6 +1,9 @@
 /* Disable warning that hooks can be used only in components */
 /* eslint-disable react-hooks/rules-of-hooks */
 
+import { enableStaticRendering } from "mobx-react-lite";
+enableStaticRendering(true);
+
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { GUID, ObjectItem } from "mendix";
 import { Selectable } from "mendix/preview/Selectable";

diff --git a/packages/pluggableWidgets/datagrid-web/src/package.xml b/packages/pluggableWidgets/datagrid-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Datagrid" version="2.25.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Datagrid" version="2.25.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Datagrid.xml" />
         </widgetFiles>

diff --git a/packages/pluggableWidgets/gallery-web/CHANGELOG.md b/packages/pluggableWidgets/gallery-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with the widget failing to render in Design mode.
+
 ## [1.12.2] - 2024-10-31
 
 ### Fixed

diff --git a/packages/pluggableWidgets/gallery-web/package.json b/packages/pluggableWidgets/gallery-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/gallery-web",
     "widgetName": "Gallery",
-    "version": "1.12.2",
+    "version": "1.12.3",
     "description": "A flexible gallery widget that renders columns, rows and layouts.",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "license": "Apache-2.0",

diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx
@@ -1,3 +1,6 @@
+import { enableStaticRendering } from "mobx-react-lite";
+enableStaticRendering(true);
+
 import { GUID, ObjectItem } from "mendix";
 import { createElement, ReactElement, ReactNode, useCallback } from "react";
 import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";

diff --git a/packages/pluggableWidgets/gallery-web/src/package.xml b/packages/pluggableWidgets/gallery-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Gallery" version="1.12.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Gallery" version="1.12.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Gallery.xml" />
         </widgetFiles>

diff --git a/packages/shared/widget-plugin-filtering/src/controls.ts b/packages/shared/widget-plugin-filtering/src/controls.ts
@@ -1,3 +1,3 @@
 export * from "./controls/input/typings";
-export { InputWithFilters } from "./controls/input/InputWithFilters";
+export { InputWithFilters, InputWithFiltersComponent } from "./controls/input/InputWithFilters";
 export { Select } from "./controls/select/SelectComponent";
diff --git a/packages/shared/widget-plugin-filtering/src/controls/input/InputWithFilters.tsx b/packages/shared/widget-plugin-filtering/src/controls/input/InputWithFilters.tsx
@@ -1,15 +1,12 @@
-import { createElement } from "react";
-import { observer } from "mobx-react-lite";
-import classNames from "classnames";
 import { FilterSelector } from "@mendix/widget-plugin-filter-selector/FilterSelector";
-import { InputComponentProps } from "./typings";
-import { Badge } from "../shared";
+import classNames from "classnames";
+import { observer } from "mobx-react-lite";
+import { createElement } from "react";
 import { AllFunctions } from "../../typings/FilterFunctions";
+import { Badge } from "../shared";
+import { InputComponentProps } from "./typings";
 
-// eslint-disable-next-line prefer-arrow-callback
-export const InputWithFilters = observer(function InputWithFilters<Fn extends AllFunctions>(
-    props: InputComponentProps<Fn>
-): React.ReactElement {
+export function InputWithFiltersComponent<Fn extends AllFunctions>(props: InputComponentProps<Fn>): React.ReactElement {
     const {
         inputStores: [input1]
     } = props;
@@ -41,4 +38,6 @@ export const InputWithFilters = observer(function InputWithFilters<Fn extends Al
             />
         </div>
     );
-});
+}
+// eslint-disable-next-line prefer-arrow-callback
+export const InputWithFilters = observer(InputWithFiltersComponent);