@adaptabletools/adaptable 18.0.4 → 18.0.6

package/src/components/List/ListGroupItem/index.d.ts

@@ -8,5 +8,5 @@ type TypeProps = HTMLProps<HTMLElement> & {
     index?: number;
     selectionId?: string | number;
 };
-declare const ListGroupItem: React.ForwardRefExoticComponent<Pick<TypeProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "wrap" | "open" | "multiple" | "active" | "disabled" | "checked" | "download" | "list" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "value" | "key" | "sizes" | "as" | "width" | "height" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "index" | "factory" | "noZebra" | "selectionId"> & React.RefAttributes<unknown>>;
+declare const ListGroupItem: React.ForwardRefExoticComponent<Pick<TypeProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "wrap" | "open" | "multiple" | "active" | "disabled" | "checked" | "download" | "list" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "value" | "step" | "sizes" | "as" | "key" | "width" | "height" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "type" | "useMap" | "wmode" | "index" | "factory" | "noZebra" | "selectionId"> & React.RefAttributes<unknown>>;
 export default ListGroupItem;

package/src/components/OverlayTrigger/index.js

@@ -46,7 +46,16 @@ const ensurePortalElement = () => {
     portalElement.style.left = '0px';
     document.body.appendChild(portalElement);
 };
-const OverlayTrigger = React.forwardRef((props, ref) => {
+const defaultProps = {
+    showEvent: 'mouseenter',
+    hideEvent: 'mouseleave',
+    anchor: 'vertical',
+    targetOffset: 10,
+    defaultZIndex: 1000000,
+    opacityTransitionDuration: '250ms',
+};
+const OverlayTrigger = React.forwardRef((givenProps, ref) => {
+    const props = Object.assign(Object.assign({}, defaultProps), givenProps);
     const adaptable = useAdaptable();
     let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
         // overlay - target
@@ -204,12 +213,4 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             } }),
         portal));
 });
-OverlayTrigger.defaultProps = {
-    showEvent: 'mouseenter',
-    hideEvent: 'mouseleave',
-    anchor: 'vertical',
-    targetOffset: 10,
-    defaultZIndex: 1000000,
-    opacityTransitionDuration: '250ms',
-};
 export default OverlayTrigger;

package/src/components/ResizeObserver/index.d.ts

@@ -27,11 +27,5 @@ export declare const setupResizeObserver: (node: HTMLElement, callback: OnResize
 export declare const useResizeObserver: (ref: React.MutableRefObject<HTMLElement | null>, callback: OnResizeFn, config?: {
     earlyAttach: boolean;
 }) => void;
-export declare const ReactResizeObserver: {
-    (props: ResizeObserverProps): JSX.Element;
-    defaultProps: {
-        notifyOnMount: boolean;
-        earlyAttach: boolean;
-    };
-};
+export declare const ReactResizeObserver: ({ notifyOnMount, earlyAttach, ...props }: ResizeObserverProps) => JSX.Element;
 export {};

package/src/components/ResizeObserver/index.js

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import * as React from 'react';
 import { useMemo, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import { getResizeObserverObject } from './getResizeObserverObject';
@@ -72,7 +73,8 @@ export const useResizeObserver = (ref, callback, config = { earlyAttach: false }
         return () => { };
     }, [ref.current, callback, config.earlyAttach]);
 };
-export const ReactResizeObserver = (props) => {
+export const ReactResizeObserver = (_a) => {
+    var { notifyOnMount = true, earlyAttach = false } = _a, props = __rest(_a, ["notifyOnMount", "earlyAttach"]);
     const style = useMemo(() => ({
         position: 'absolute',
         top: 0,
@@ -81,7 +83,6 @@ export const ReactResizeObserver = (props) => {
         height: '100%',
         boxSizing: 'border-box',
     }), []);
-    const { notifyOnMount, earlyAttach } = props;
     const firstTime = useRef(true);
     const ref = useRef(null);
     const onResize = useCallback((size) => {
@@ -94,7 +95,3 @@ export const ReactResizeObserver = (props) => {
     useResizeObserver(ref, onResize, { earlyAttach: earlyAttach || false });
     return React.createElement("div", { ref: ref, style: style });
 };
-ReactResizeObserver.defaultProps = {
-    notifyOnMount: true,
-    earlyAttach: false,
-};

package/src/components/SimpleButton/index.js

@@ -7,8 +7,17 @@ import Tooltip from '../Tooltip';
 import theme from '../../theme';
 import { IconComponent, isAdaptableElementIcon, isAdaptableCustomIcon, isAdaptableSystemIcon, } from '../Icon';
 export const baseClassName = 'ab-SimpleButton';
-const SimpleButton = React.forwardRef((props, theRef) => {
+const defaultProps = {
+    px: null,
+    py: null,
+    fontWeight: 'normal',
+    m: null,
+    //@ts-ignore
+    borderRadius: null,
+};
+const SimpleButton = React.forwardRef((givenProps, theRef) => {
     var _a, _b;
+    const props = Object.assign(Object.assign({}, defaultProps), givenProps);
     let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type } = props, buttonProps = __rest(props, ["children", "disabled", "variant", "tone", "iconPosition", "iconSize", "className", "icon", "tooltip", "accessLevel", "type"]);
     let adaptableSystemIcon;
     if (isAdaptableSystemIcon(icon)) {
@@ -76,12 +85,4 @@ const SimpleButton = React.forwardRef((props, theRef) => {
     const btn = (React.createElement(Button, Object.assign({}, buttonProps, { disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '', fontWeight ? `${baseClassName}--font-weight=${fontWeight}` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`), ref: theRef }), children));
     return tooltip ? React.createElement(Tooltip, { label: tooltip }, btn) : btn;
 });
-SimpleButton.defaultProps = {
-    px: null,
-    py: null,
-    fontWeight: 'normal',
-    m: null,
-    //@ts-ignore
-    borderRadius: null,
-};
 export default SimpleButton;

package/src/components/Tabs/index.d.ts

@@ -12,36 +12,18 @@ export type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
 } & BoxProps;
 export declare const Tabs: {
     <VALUE_TYPE extends string | number>(props: TabsProps<VALUE_TYPE>): JSX.Element;
-    Tab: {
-        (props: TabProps): JSX.Element;
-        defaultProps: {
-            isTabsTab: boolean;
-        };
-    };
-    Content: {
-        (props: ContentProps): JSX.Element;
-        defaultProps: {
-            isTabsContent: boolean;
-        };
-    };
+    Tab: (props: TabProps) => JSX.Element;
+    Content: (props: ContentProps) => JSX.Element;
 };
 type TabProps = {
     index?: number;
     keyboardNavigation?: boolean;
 } & BoxProps & HTMLProps<HTMLDivElement>;
-export declare const Tab: {
-    (props: TabProps): JSX.Element;
-    defaultProps: {
-        isTabsTab: boolean;
-    };
-};
+export declare const Tab: (props: TabProps) => JSX.Element;
+export declare const SupportedTabMenuComps: Set<unknown>;
 type ContentProps = {
     value?: string | number;
 } & BoxProps;
-export declare const Content: {
-    (props: ContentProps): JSX.Element;
-    defaultProps: {
-        isTabsContent: boolean;
-    };
-};
+export declare const Content: (props: ContentProps) => JSX.Element;
+export declare const SupportedTabContentComps: Set<unknown>;
 export {};

package/src/components/Tabs/index.js

@@ -10,12 +10,10 @@ const TabContext = React.createContext({
     setSelectedIndex: (index) => { },
 });
 const isTab = (c) => {
-    var _a;
-    return c.type === Tab || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsTab);
+    return c.type === Tab || SupportedTabMenuComps.has(c.type);
 };
 const isTabContent = (c) => {
-    var _a;
-    return c.type === Content || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsContent);
+    return c.type === Content || SupportedTabContentComps.has(c.type);
 };
 export const Tabs = (props) => {
     const { autoFocus = true, children, onValueChange: _onValueChange, defaultValue: _defaultValue, value: _value, keyboardNavigation = true, selectedIndex: _selectedIndex, defaultSelectedIndex: _defaultSelectedIndex, onSelectedIndexChange: _onSelectedIndexChange } = props, boxProps = __rest(props, ["autoFocus", "children", "onValueChange", "defaultValue", "value", "keyboardNavigation", "selectedIndex", "defaultSelectedIndex", "onSelectedIndexChange"]);
@@ -116,14 +114,12 @@ export const Tab = (props) => {
             (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
         } })));
 };
-Tab.defaultProps = {
-    isTabsTab: true,
-};
+export const SupportedTabMenuComps = new Set();
+SupportedTabMenuComps.add(Tab);
 export const Content = (props) => {
     return React.createElement(React.Fragment, null, props.children);
 };
-Content.defaultProps = {
-    isTabsContent: true,
-};
+export const SupportedTabContentComps = new Set();
+SupportedTabContentComps.add(Content);
 Tabs.Tab = Tab;
 Tabs.Content = Content;

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1713957370862 || Date.now(),
-    VERSION: "18.0.4" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1714400906539 || Date.now(),
+    VERSION: "18.0.6" || '--current-version--',
 };

package/src/renderReactRoot.js

@@ -1,14 +1,15 @@
 import * as ReactDOMClient from 'react-dom/client';
+// we need to keep track of the roots to ensure we create a single root per container
+// otherwise we get: "You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it."
 const renderWeakMap = new WeakMap();
 export const renderReactRoot = (el, container) => {
     // Keeping a reference to previous roots causes an error.
-    // Already (correctly) unmouted elements are not unmounted again, and triggers an error.
-    //
-    // let root = renderWeakMap.get(container);
-    // if (!root) {
-    //   renderWeakMap.set(container, (root = ReactDOMClient.createRoot(container)));
-    // }
-    const root = ReactDOMClient.createRoot(container);
+    // Already (correctly) unmounted elements are not unmounted again, and triggers an error.
+    let root = renderWeakMap.get(container);
+    if (!root) {
+        renderWeakMap.set(container, (root = ReactDOMClient.createRoot(container)));
+    }
+    // const root = ReactDOMClient.createRoot(container);
     root.render(el);
     return () => {
         // requestAnimationFrame(() => {
@@ -16,8 +17,9 @@ export const renderReactRoot = (el, container) => {
         //   // Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
         //   // https:stackoverflow.com/questions/73459382/react-18-async-way-to-unmount-root
         // });
-        // This needs to be syncronous, if not, in a raf it may be to late, the element may be gone.
+        // This needs to be synchronous, if not, in a raf it may be to late, the element may be gone.
         // To reproduce, move this in RAF and play with filters.
         root.unmount();
+        renderWeakMap.delete(container);
     };
 };