@msviderok/base-ui-solid 1.0.0-beta.1 → 1.0.0-beta.2

package/cjs/field/label/FieldLabel.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldLabel = FieldLabel;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _utils = require("../../floating-ui-solid/utils");
 var _solidHelpers = require("../../solid-helpers");
@@ -11,7 +12,6 @@ var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _FieldRootContext = require("../root/FieldRootContext");
 var _constants = require("../utils/constants");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An accessible label that is automatically associated with the field control.
  * Renders a `<label>` element.
@@ -62,7 +62,5 @@ function FieldLabel(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/field/root/FieldRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldRoot = FieldRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _FieldsetRootContext = require("../../fieldset/root/FieldsetRootContext");
@@ -12,7 +13,6 @@ var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _constants = require("../utils/constants");
 var _FieldRootContext = require("./FieldRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the field.
  * Renders a `<div>` element.
@@ -140,8 +140,10 @@ function FieldRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: _constants.fieldValidityMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldRootContext.FieldRootContext.Provider, {
+  return (0, _web.createComponent)(_FieldRootContext.FieldRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/field/validity/FieldValidity.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldValidity = FieldValidity;
-var _solidJs = require("solid-js");
 var _web = require("solid-js/web");
+var _solidJs = require("solid-js");
 var _FieldRootContext = require("../root/FieldRootContext");
 var _getCombinedFieldValidityData = require("../utils/getCombinedFieldValidityData");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Used to display a custom message based on the field’s validity.
  * Requires `children` to be a function that accepts field validity state as an argument.
@@ -27,8 +26,9 @@ function FieldValidity(props) {
       validity: combinedFieldValidityData.state
     };
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Dynamic, {
-    component: props.children,
-    ...fieldValidityState()
-  });
+  return (0, _web.createComponent)(_web.Dynamic, (0, _web.mergeProps)({
+    get component() {
+      return props.children;
+    }
+  }, fieldValidityState));
 }

package/cjs/fieldset/legend/FieldsetLegend.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldsetLegend = FieldsetLegend;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _FieldsetRootContext = require("../root/FieldsetRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An accessible label that is automatically associated with the fieldset.
  * Renders a `<div>` element.
@@ -47,7 +47,5 @@ function FieldsetLegend(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/fieldset/root/FieldsetRoot.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldsetRoot = FieldsetRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _FieldsetRootContext = require("./FieldsetRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups the fieldset legend and the associated fields.
  * Renders a `<fieldset>` element.
@@ -48,8 +48,10 @@ function FieldsetRoot(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldsetRootContext.FieldsetRootContext.Provider, {
+  return (0, _web.createComponent)(_FieldsetRootContext.FieldsetRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/floating-ui-solid/components/FloatingDelayGroup.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FloatingDelayGroup = FloatingDelayGroup;
 exports.useDelayGroup = useDelayGroup;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useTimeout = require("../../utils/useTimeout");
 var _solidHelpers = require("../../solid-helpers");
 var _useHover = require("../hooks/useHover");
-var _jsxRuntime = require("react/jsx-runtime");
 const FloatingDelayGroupContext = (0, _solidJs.createContext)({
   hasProvider: () => false,
   setHasProvider: () => {},
@@ -43,7 +43,7 @@ function FloatingDelayGroup(props) {
   const [currentIdRef, setCurrentIdRef] = (0, _solidJs.createSignal)(null);
   const currentContextRef = null;
   const timeout = (0, _useTimeout.useTimeout)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingDelayGroupContext.Provider, {
+  return (0, _web.createComponent)(FloatingDelayGroupContext.Provider, {
     value: {
       hasProvider,
       setHasProvider,
@@ -57,7 +57,9 @@ function FloatingDelayGroup(props) {
       timeout,
       currentContextRef
     },
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }
 /**

package/cjs/floating-ui-solid/components/FloatingFocusManager.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FloatingFocusManager = FloatingFocusManager;
+var _web = require("solid-js/web");
 var _dom = require("@floating-ui/utils/dom");
 var _solidJs = require("solid-js");
 var _tabbable = require("tabbable");
@@ -15,7 +16,7 @@ var _enqueueFocus = require("../utils/enqueueFocus");
 var _markOthers = require("../utils/markOthers");
 var _FloatingPortal = require("./FloatingPortal");
 var _FloatingTree = require("./FloatingTree");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<button>`);
 const LIST_LIMIT = 20;
 let previouslyFocusedElements = [];
 function addPreviouslyFocusedElement(element) {
@@ -58,12 +59,15 @@ function handleTabIndex(floatingFocusElement, orderRef) {
   }
 }
 function VisuallyHiddenDismiss(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    ...props,
-    type: "button",
-    tabIndex: -1,
-    style: _visuallyHidden.visuallyHidden
-  });
+  return (() => {
+    var _el$ = _tmpl$();
+    (0, _web.spread)(_el$, (0, _web.mergeProps)(props, {
+      "type": "button",
+      "tabIndex": -1,
+      "style": _visuallyHidden.visuallyHidden
+    }), false, false);
+    return _el$;
+  })();
 }
 /**
  * Provides focus management for the floating element.
@@ -415,17 +419,20 @@ function FloatingFocusManager(props) {
     if (disabled() || !visuallyHiddenDismiss() || !modal()) {
       return null;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VisuallyHiddenDismiss, {
-      ref: location === 'start' ? setStartDismissButtonRef : setEndDismissButtonRef,
+    return (0, _web.createComponent)(VisuallyHiddenDismiss, {
       onClick: event => props.context.onOpenChange(false, event),
-      children: typeof visuallyHiddenDismiss() === 'string' ? visuallyHiddenDismiss() : 'Dismiss'
+      get children() {
+        return (0, _web.memo)(() => typeof visuallyHiddenDismiss() === 'string')() ? visuallyHiddenDismiss() : 'Dismiss';
+      }
     });
   }
   const shouldRenderGuards = () => !disabled() && guards() && (modal() ? !isUntrappedTypeableCombobox() : true) && (isInsidePortal() || modal());
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: shouldRenderGuards(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+  return [(0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return shouldRenderGuards();
+    },
+    get children() {
+      return (0, _web.createComponent)(_FocusGuard.FocusGuard, {
         "data-type": "inside",
         ref: el => {
           setBeforeGuardRef(el);
@@ -446,13 +453,21 @@ function FloatingFocusManager(props) {
             }
           }
         }
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: !isUntrappedTypeableCombobox(),
-      children: renderDismissButton('start')
-    }), props.children, renderDismissButton('end'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: shouldRenderGuards(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+      });
+    }
+  }), (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return !isUntrappedTypeableCombobox();
+    },
+    get children() {
+      return renderDismissButton('start');
+    }
+  }), (0, _web.memo)(() => props.children), (0, _web.memo)(() => renderDismissButton('end')), (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return shouldRenderGuards();
+    },
+    get children() {
+      return (0, _web.createComponent)(_FocusGuard.FocusGuard, {
         "data-type": "inside",
         ref: el => {
           setAfterGuardRef(el);
@@ -474,7 +489,7 @@ function FloatingFocusManager(props) {
             }
           }
         }
-      })
-    })]
-  });
+      });
+    }
+  })];
 }

package/cjs/floating-ui-solid/components/FloatingPortal.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingPortal = FloatingPortal;
 exports.useFloatingPortalNode = useFloatingPortalNode;
 exports.usePortalContext = void 0;
-var _solidJs = require("solid-js");
 var _web = require("solid-js/web");
+var _solidJs = require("solid-js");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _useId = require("../../utils/useId");
 var _visuallyHidden = require("../../utils/visuallyHidden");
 var _utils = require("../utils");
 var _solidHelpers = require("../../solid-helpers");
 var _createAttribute = require("../utils/createAttribute");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<span>`);
 const PortalContext = (0, _solidJs.createContext)();
 const usePortalContext = () => (0, _solidJs.useContext)(PortalContext);
 exports.usePortalContext = usePortalContext;
@@ -124,7 +124,7 @@ function FloatingPortal(props) {
     }
     (0, _utils.enableFocusInside)(node);
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PortalContext.Provider, {
+  return (0, _web.createComponent)(PortalContext.Provider, {
     value: {
       preserveTabOrder,
       beforeOutsideRef,
@@ -138,52 +138,78 @@ function FloatingPortal(props) {
       portalNode,
       setFocusManagerState
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: shouldRenderGuards() && portalNode(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
-        "data-type": "outside",
-        ref: setBeforeOutsideRef,
-        onFocus: event => {
-          const node = portalNode();
-          if ((0, _utils.isOutsideEvent)(event, node)) {
-            (0, _utils.enableFocusInside)(node);
-            beforeInsideRef()?.focus();
-          } else {
-            const domReference = focusManagerState()?.domReference;
-            const prevTabbable = (0, _utils.getPreviousTabbable)(domReference);
-            prevTabbable?.focus();
-          }
+    get children() {
+      return [(0, _web.createComponent)(_solidJs.Show, {
+        get when() {
+          return (0, _web.memo)(() => !!shouldRenderGuards())() && portalNode();
+        },
+        get children() {
+          return (0, _web.createComponent)(_FocusGuard.FocusGuard, {
+            "data-type": "outside",
+            ref: setBeforeOutsideRef,
+            onFocus: event => {
+              const node = portalNode();
+              if ((0, _utils.isOutsideEvent)(event, node)) {
+                (0, _utils.enableFocusInside)(node);
+                beforeInsideRef()?.focus();
+              } else {
+                const domReference = focusManagerState()?.domReference;
+                const prevTabbable = (0, _utils.getPreviousTabbable)(domReference);
+                prevTabbable?.focus();
+              }
+            }
+          });
         }
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: shouldRenderGuards() && portalNode(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        "aria-owns": portalNode().id,
-        style: _visuallyHidden.visuallyHidden
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Portal, {
-      mount: portalMount(),
-      ref: portalRef,
-      children: props.children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: shouldRenderGuards() && portalNode(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
-        "data-type": "outside",
-        ref: setAfterOutsideRef,
-        onFocus: event => {
-          const node = portalNode();
-          if ((0, _utils.isOutsideEvent)(event, node)) {
-            afterInsideRef()?.focus();
-          } else {
-            const domReference = focusManagerState()?.domReference;
-            const nextTabbable = (0, _utils.getNextTabbable)(domReference);
-            nextTabbable?.focus();
-            if (focusManagerState()?.closeOnFocusOut) {
-              focusManagerState()?.onOpenChange(false, event, 'focus-out');
+      }), (0, _web.createComponent)(_solidJs.Show, {
+        get when() {
+          return (0, _web.memo)(() => !!shouldRenderGuards())() && portalNode();
+        },
+        get children() {
+          var _el$ = _tmpl$();
+          (0, _web.effect)(_p$ => {
+            var _v$ = portalNode().id,
+              _v$2 = _visuallyHidden.visuallyHidden;
+            _v$ !== _p$.e && (0, _web.setAttribute)(_el$, "aria-owns", _p$.e = _v$);
+            _p$.t = (0, _web.style)(_el$, _v$2, _p$.t);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
+        }
+      }), (0, _web.createComponent)(_web.Portal, {
+        get mount() {
+          return portalMount();
+        },
+        ref: portalRef,
+        get children() {
+          return props.children;
+        }
+      }), (0, _web.createComponent)(_solidJs.Show, {
+        get when() {
+          return (0, _web.memo)(() => !!shouldRenderGuards())() && portalNode();
+        },
+        get children() {
+          return (0, _web.createComponent)(_FocusGuard.FocusGuard, {
+            "data-type": "outside",
+            ref: setAfterOutsideRef,
+            onFocus: event => {
+              const node = portalNode();
+              if ((0, _utils.isOutsideEvent)(event, node)) {
+                afterInsideRef()?.focus();
+              } else {
+                const domReference = focusManagerState()?.domReference;
+                const nextTabbable = (0, _utils.getNextTabbable)(domReference);
+                nextTabbable?.focus();
+                if (focusManagerState()?.closeOnFocusOut) {
+                  focusManagerState()?.onOpenChange(false, event, 'focus-out');
+                }
+              }
             }
-          }
+          });
         }
-      })
-    })]
+      })];
+    }
   });
 }

package/cjs/floating-ui-solid/components/FloatingTree.js

@@ -7,11 +7,11 @@ exports.FloatingNode = FloatingNode;
 exports.FloatingTree = FloatingTree;
 exports.useFloatingNodeId = useFloatingNodeId;
 exports.useFloatingTree = exports.useFloatingParentNodeId = void 0;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useId = require("../../utils/useId");
 var _createEventEmitter = require("../utils/createEventEmitter");
-var _jsxRuntime = require("react/jsx-runtime");
 const FloatingNodeContext = (0, _solidJs.createContext)(null);
 const FloatingTreeContext = (0, _solidJs.createContext)(null);
 
@@ -66,9 +66,11 @@ function FloatingNode(props) {
     id: () => props.id,
     parentId: () => parentId
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingNodeContext.Provider, {
+  return (0, _web.createComponent)(FloatingNodeContext.Provider, {
     value: contextValue,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }
 /**
@@ -91,13 +93,15 @@ function FloatingTree(props) {
     nodesRef = nodesRef.filter(n => n !== node);
   }
   const events = (0, _createEventEmitter.createEventEmitter)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingTreeContext.Provider, {
+  return (0, _web.createComponent)(FloatingTreeContext.Provider, {
     value: {
       nodesRef,
       addNode,
       removeNode,
       events
     },
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/form/Form.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Form = Form;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _solidHelpers = require("../solid-helpers");
 var _useRenderElement = require("../utils/useRenderElement");
 var _FormContext = require("./FormContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY = {};
 
 /**
@@ -75,8 +75,10 @@ function Form(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.FormContext.Provider, {
+  return (0, _web.createComponent)(_FormContext.FormContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/input/Input.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = Input;
+var _web = require("solid-js/web");
 var _field = require("../field");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A native input element that automatically works with [Field](https://base-ui.com/react/components/field).
  * Renders an `<input>` element.
@@ -13,7 +13,5 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
  */
 function Input(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.Field.Control, {
-    ...props
-  });
+  return (0, _web.createComponent)(_field.Field.Control, props);
 }

package/cjs/menu/arrow/MenuArrow.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuArrow = MenuArrow;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Displays an element positioned against the menu anchor.
  * Renders a `<div>` element.
@@ -53,7 +53,5 @@ function MenuArrow(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/menu/backdrop/MenuBackdrop.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuBackdrop = MenuBackdrop;
+var _web = require("solid-js/web");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _solidHelpers = require("../../solid-helpers");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _styleHookMapping = require("../../utils/styleHookMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -61,7 +61,5 @@ function MenuBackdrop(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/menu/checkbox-item/MenuCheckboxItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuCheckboxItem = MenuCheckboxItem;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
 var _floatingUiSolid = require("../../floating-ui-solid");
@@ -15,7 +16,6 @@ var _useMenuItem = require("../item/useMenuItem");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _styleHookMapping = require("../utils/styleHookMapping");
 var _MenuCheckboxItemContext = require("./MenuCheckboxItemContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A menu item that toggles a setting on or off.
  * Renders a `<div>` element.
@@ -98,8 +98,10 @@ function MenuCheckboxItem(componentProps) {
       }
     }, elementProps, getItemProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuCheckboxItemContext.MenuCheckboxItemContext.Provider, {
+  return (0, _web.createComponent)(_MenuCheckboxItemContext.MenuCheckboxItemContext.Provider, {
     value: context,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuCheckboxItemIndicator = MenuCheckboxItemIndicator;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _MenuCheckboxItemContext = require("../checkbox-item/MenuCheckboxItemContext");
 var _styleHookMapping = require("../utils/styleHookMapping");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the checkbox item is ticked.
  * Renders a `<div>` element.
@@ -60,7 +60,5 @@ function MenuCheckboxItemIndicator(componentProps) {
     }, elementProps],
     enabled: () => keepMounted() || item.checked()
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/menu/group/MenuGroup.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuGroup = MenuGroup;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuGroupContext = require("./MenuGroupContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups related menu items with the corresponding label.
  * Renders a `<div>` element.
@@ -29,8 +29,10 @@ function MenuGroup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuGroupContext.MenuGroupContext.Provider, {
+  return (0, _web.createComponent)(_MenuGroupContext.MenuGroupContext.Provider, {
     value: context,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }