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

package/esm/tooltip/portal/TooltipPortal.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { Show } from 'solid-js';
 import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
 import { useTooltipRootContext } from "../root/TooltipRootContext.js";
@@ -9,21 +10,30 @@ import { TooltipPortalContext } from "./TooltipPortalContext.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function TooltipPortal(props) {
   const keepMounted = () => props.keepMounted ?? false;
   const {
     mounted
   } = useTooltipRootContext();
   const shouldRender = () => mounted() || keepMounted();
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/_jsx(TooltipPortalContext.Provider, {
-      value: keepMounted,
-      children: /*#__PURE__*/_jsx(FloatingPortalLite, {
-        root: props.container,
-        children: props.children
-      })
-    })
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return _$createComponent(TooltipPortalContext.Provider, {
+        value: keepMounted,
+        get children() {
+          return _$createComponent(FloatingPortalLite, {
+            get root() {
+              return props.container;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }

package/esm/tooltip/positioner/TooltipPositioner.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { mergeProps as solidMergeProps } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
@@ -14,7 +15,6 @@ import { TooltipPositionerContext } from "./TooltipPositionerContext.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function TooltipPositioner(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['anchor', 'positionMethod', 'side', 'align', 'sideOffset', 'alignOffset', 'collisionBoundary', 'collisionPadding', 'arrowPadding', 'sticky', 'trackAnchor', 'collisionAvoidance']);
   const positionMethod = () => local.positionMethod ?? 'absolute';
@@ -105,8 +105,10 @@ export function TooltipPositioner(componentProps) {
     props: [positioner.props, elementProps],
     customStyleHookMapping: popupStateMapping
   });
-  return /*#__PURE__*/_jsx(TooltipPositionerContext.Provider, {
+  return _$createComponent(TooltipPositionerContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/tooltip/provider/TooltipProvider.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { FloatingDelayGroup } from "../../floating-ui-solid/index.js";
 import { TooltipProviderContext } from "./TooltipProviderContext.js";
@@ -8,7 +9,6 @@ import { TooltipProviderContext } from "./TooltipProviderContext.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function TooltipProvider(props) {
   const timeout = () => props.timeout ?? 400;
   const contextValue = {
@@ -19,12 +19,20 @@ export function TooltipProvider(props) {
     open: props.delay,
     close: props.closeDelay
   }));
-  return /*#__PURE__*/_jsx(TooltipProviderContext.Provider, {
+  return _$createComponent(TooltipProviderContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(FloatingDelayGroup, {
-      delay: delayValue(),
-      timeoutMs: timeout(),
-      children: props.children
-    })
+    get children() {
+      return _$createComponent(FloatingDelayGroup, {
+        get delay() {
+          return delayValue();
+        },
+        get timeoutMs() {
+          return timeout();
+        },
+        get children() {
+          return props.children;
+        }
+      });
+    }
   });
 }

package/esm/tooltip/root/TooltipRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, createEffect, createSignal, onMount } from 'solid-js';
 import { safePolygon, useClientPoint, useDelayGroup, useDismiss, useFloatingRootContext, useFocus, useHover, useInteractions } from "../../floating-ui-solid/index.js";
 import { mergeProps } from "../../merge-props/mergeProps.js";
@@ -15,7 +16,6 @@ import { TooltipRootContext } from "./TooltipRootContext.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function TooltipRoot(props) {
   const disabled = () => props.disabled ?? false;
   const defaultOpen = () => props.defaultOpen ?? false;
@@ -181,8 +181,10 @@ export function TooltipRoot(props) {
     trackCursorAxis,
     hoverable
   };
-  return /*#__PURE__*/_jsx(TooltipRootContext.Provider, {
+  return _$createComponent(TooltipRootContext.Provider, {
     value: contextValue,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/esm/tooltip/trigger/TooltipTrigger.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -9,7 +10,6 @@ import { useTooltipRootContext } from "../root/TooltipRootContext.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function TooltipTrigger(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -28,7 +28,5 @@ export function TooltipTrigger(componentProps) {
     props: [triggerProps, elementProps],
     customStyleHookMapping: triggerOpenStateMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/unstable-no-ssr/NoSsr.js

@@ -1,5 +1,6 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createSignal, onMount, Show } from 'solid-js';
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
  *
@@ -17,9 +18,15 @@ export function NoSsr(props) {
   onMount(() => {
     setMountedState(true);
   });
-  return /*#__PURE__*/_jsx(Show, {
-    when: mountedState(),
-    fallback: props.fallback ?? null,
-    children: props.children
+  return _$createComponent(Show, {
+    get when() {
+      return mountedState();
+    },
+    get fallback() {
+      return props.fallback ?? null;
+    },
+    get children() {
+      return props.children;
+    }
   });
 }

package/esm/utils/FloatingPortalLite.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { Portal } from 'solid-js/web';
 import { useFloatingPortalNode } from "../floating-ui-solid/index.js";
 
@@ -6,7 +7,6 @@ import { useFloatingPortalNode } from "../floating-ui-solid/index.js";
  * For components that don't need tabbable logic, use `FloatingPortalLite`.
  * @internal
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function FloatingPortalLite(props) {
   const {
     portalMount,
@@ -14,9 +14,13 @@ export function FloatingPortalLite(props) {
   } = useFloatingPortalNode({
     root: () => props.root
   });
-  return /*#__PURE__*/_jsx(Portal, {
-    mount: portalMount(),
+  return _$createComponent(Portal, {
+    get mount() {
+      return portalMount();
+    },
     ref: portalRef,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/esm/utils/FocusGuard.js

@@ -1,3 +1,9 @@
+import { template as _$template } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span>`);
 import { createSignal, onMount } from 'solid-js';
 import { isSafari } from "./detectBrowser.js";
 import { visuallyHidden } from "./visuallyHidden.js";
@@ -5,7 +11,6 @@ import { visuallyHidden } from "./visuallyHidden.js";
 /**
  * @internal
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function FocusGuard(props) {
   const [role, setRole] = createSignal();
   onMount(() => {
@@ -16,13 +21,21 @@ export function FocusGuard(props) {
       setRole('button');
     }
   });
-  return /*#__PURE__*/_jsx("span", {
-    ...props,
-    ref: props.ref,
-    tabIndex: 0,
-    role: role(),
-    "aria-hidden": role() ? undefined : true,
-    style: visuallyHidden,
-    "data-base-ui-focus-guard": ""
-  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$) : props.ref = _el$;
+    _$spread(_el$, _$mergeProps(props, {
+      "tabIndex": 0,
+      get role() {
+        return role();
+      },
+      get ["aria-hidden"]() {
+        return role() ? undefined : true;
+      },
+      "style": visuallyHidden,
+      "data-base-ui-focus-guard": ""
+    }), false, false);
+    return _el$;
+  })();
 }

package/esm/utils/InternalBackdrop.js

@@ -1,10 +1,14 @@
+import { template as _$template } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div role=presentation data-base-ui-inert>`);
 import { createMemo, splitProps } from 'solid-js';
 import { createAttribute } from "../floating-ui-solid/utils/createAttribute.js";
 
 /**
  * @internal
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function InternalBackdrop(props) {
   const [local, otherProps] = splitProps(props, ['cutout', 'managed']);
   const clipPath = createMemo(() => {
@@ -28,21 +32,21 @@ export function InternalBackdrop(props) {
   const ownerProps = () => local.managed ? {
     [createAttribute('managed')]: local.managed
   } : {};
-  return /*#__PURE__*/_jsx("div", {
-    ref: props.ref,
-    role: "presentation"
-    // Ensures Floating UI's outside press detection runs, as it considers
-    // it an element that existed when the popup rendered.
-    ,
-    "data-base-ui-inert": "",
-    ...otherProps,
-    ...ownerProps(),
-    style: {
-      position: 'fixed',
-      inset: 0,
-      'user-select': 'none',
-      '-webkit-user-select': 'none',
-      'clip-path': clipPath()
-    }
-  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$) : props.ref = _el$;
+    _$spread(_el$, _$mergeProps(otherProps, ownerProps, {
+      get style() {
+        return {
+          position: 'fixed',
+          inset: 0,
+          'user-select': 'none',
+          '-webkit-user-select': 'none',
+          'clip-path': clipPath()
+        };
+      }
+    }), false, false);
+    return _el$;
+  })();
 }

package/esm/utils/styles.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { template as _$template } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<style id=disable-scrollbar>.base-ui-disable-scrollbar\{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar\{display:none}`);
 export const STYLE_TAG_ID = 'disable-scrollbar';
 export const styleDisableScrollbar = {
   class: 'base-ui-disable-scrollbar',
-  element: /*#__PURE__*/_jsx("style", {
-    id: STYLE_TAG_ID,
-    children: `.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}`
-  })
+  element: _tmpl$()
 };

package/esm/utils/useRenderElement.js

@@ -1,3 +1,6 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { Show } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import { mergeProps } from "../merge-props/mergeProps.js";
@@ -5,34 +8,36 @@ import { access } from "../solid-helpers.js";
 import { EMPTY_OBJECT } from "./constants.js";
 import { getStyleHookProps } from "./getStyleHookProps.js";
 import { resolveClassName } from "./resolveClassName.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 export function useRenderElement(element, componentProps, params) {
   const Component = props => {
-    return /*#__PURE__*/_jsx(Show, {
-      when: access(params.enabled) ?? true,
-      children: /*#__PURE__*/_jsx(Dynamic, {
-        component: p => {
-          if (typeof componentProps.render === 'function') {
-            return componentProps.render(p, params.state ?? EMPTY_OBJECT);
-          }
-          if (componentProps.render && typeof componentProps.render === 'object' && 'component' in componentProps.render) {
-            return /*#__PURE__*/_jsx(Dynamic, {
-              ...p,
-              component: componentProps.render.component
-            });
-          }
-          return /*#__PURE__*/_jsx(Dynamic, {
-            component: typeof componentProps.render === 'string' ? componentProps.render : access(element),
-            ...(access(element) === 'button' ? {
+    return _$createComponent(Show, {
+      get when() {
+        return access(params.enabled) ?? true;
+      },
+      get children() {
+        return _$createComponent(Dynamic, _$mergeProps({
+          component: p => {
+            if (typeof componentProps.render === 'function') {
+              return componentProps.render(p, params.state ?? EMPTY_OBJECT);
+            }
+            if (componentProps.render && typeof componentProps.render === 'object' && 'component' in componentProps.render) {
+              return _$createComponent(Dynamic, _$mergeProps(p, {
+                get component() {
+                  return componentProps.render.component;
+                }
+              }));
+            }
+            return _$createComponent(Dynamic, _$mergeProps({
+              get component() {
+                return _$memo(() => typeof componentProps.render === 'string')() ? componentProps.render : access(element);
+              }
+            }, () => access(element) === 'button' ? {
               type: 'button'
-            } : {}),
-            ...(access(element) === 'img' ? {
+            } : {}, () => access(element) === 'img' ? {
               alt: ''
-            } : {}),
-            ...p
-          });
-        },
-        ...mergeProps([props, {
+            } : {}, p));
+          }
+        }, () => mergeProps([props, {
           ref: el => {
             if (typeof componentProps.ref === 'function') {
               componentProps.ref(el);
@@ -50,16 +55,17 @@ export function useRenderElement(element, componentProps, params) {
           get class() {
             return resolveClassName(componentProps.class, params.state);
           }
-        }]),
-        children: params.children ?? componentProps.children
-      })
+        }]), {
+          get children() {
+            return params.children ?? componentProps.children;
+          }
+        }));
+      }
     });
   };
   if (process.env.NODE_ENV !== "production") Component.displayName = "Component";
   return (renderFnProps = {}) => {
-    return /*#__PURE__*/_jsx(Component, {
-      ...renderFnProps
-    });
+    return _$createComponent(Component, renderFnProps);
   };
 }
 export let RenderElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@msviderok/base-ui-solid",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "private": false,
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') Solid components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
@@ -13,12 +13,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mui/base-ui.git",
+    "url": "git+https://github.com/sviderock/base-ui.git",
     "directory": "packages/solid"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mui/base-ui/issues"
+    "url": "https://github.com/sviderock/base-ui/issues"
   },
   "homepage": "https://base-ui.com",
   "funding": {
@@ -30,7 +30,9 @@
     "@babel/runtime": "^7.27.6",
     "@floating-ui/dom": "^1.7.2",
     "@floating-ui/utils": "^0.2.10",
+    "@solid-primitives/props": "^3.2.2",
     "@solidjs/router": "^0.15.3",
+    "babel-preset-solid": "^1.9.10",
     "tabbable": "^6.2.0"
   },
   "peerDependencies": {