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

package/esm/dialog/popup/DialogPopup.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { FloatingFocusManager } from "../../floating-ui-solid/index.js";
 import { access, splitComponentProps } from "../../solid-helpers.js";
 import { inertValue } from "../../utils/inertValue.js";
@@ -10,7 +12,6 @@ import { useDialogRootContext } from "../root/DialogRootContext.js";
 import { DialogPopupCssVars } from "./DialogPopupCssVars.js";
 import { DialogPopupDataAttributes } from "./DialogPopupDataAttributes.js";
 import { useDialogPopup } from "./useDialogPopup.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping,
@@ -100,21 +101,33 @@ export function DialogPopup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [mounted() && modal() === true && /*#__PURE__*/_jsx(InternalBackdrop, {
-      managed: true,
-      inert: inertValue(!open()),
-      ref: el => {
-        refs.internalBackdropRef = el;
-      }
-    }), /*#__PURE__*/_jsx(FloatingFocusManager, {
-      context: floatingRootContext,
-      disabled: !mounted(),
-      closeOnFocusOut: dismissible?.(),
-      initialFocus: resolvedInitialFocus(),
-      returnFocus: local.finalFocus,
-      modal: modal() !== false,
-      children: element()
-    })]
-  });
+  return [_$memo(() => _$memo(() => !!(mounted() && modal() === true))() && _$createComponent(InternalBackdrop, {
+    managed: true,
+    get inert() {
+      return inertValue(!open());
+    },
+    ref: el => {
+      refs.internalBackdropRef = el;
+    }
+  })), _$createComponent(FloatingFocusManager, {
+    context: floatingRootContext,
+    get disabled() {
+      return !mounted();
+    },
+    get closeOnFocusOut() {
+      return dismissible?.();
+    },
+    get initialFocus() {
+      return resolvedInitialFocus();
+    },
+    get returnFocus() {
+      return local.finalFocus;
+    },
+    get modal() {
+      return modal() !== false;
+    },
+    get children() {
+      return element();
+    }
+  })];
 }

package/esm/dialog/portal/DialogPortal.js

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

package/esm/dialog/root/DialogRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { mergeProps as solidMergeProps } from 'solid-js';
 import { DialogContext } from "../utils/DialogContext.js";
 import { DialogRootContext, useOptionalDialogRootContext } from "./DialogRootContext.js";
@@ -9,7 +10,6 @@ import { useDialogRoot } from "./useDialogRoot.js";
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function DialogRoot(props) {
   const defaultOpen = () => props.defaultOpen ?? false;
   const dismissible = () => props.dismissible ?? true;
@@ -37,11 +37,15 @@ export function DialogRoot(props) {
   const dialogRootContextValue = {
     dismissible
   };
-  return /*#__PURE__*/_jsx(DialogContext.Provider, {
+  return _$createComponent(DialogContext.Provider, {
     value: dialogContextValue,
-    children: /*#__PURE__*/_jsx(DialogRootContext.Provider, {
-      value: dialogRootContextValue,
-      children: props.children
-    })
+    get children() {
+      return _$createComponent(DialogRootContext.Provider, {
+        value: dialogRootContextValue,
+        get children() {
+          return props.children;
+        }
+      });
+    }
   });
 }

package/esm/dialog/title/DialogTitle.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { onMount } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -10,7 +11,6 @@ import { useDialogRootContext } from "../root/DialogRootContext.js";
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function DialogTitle(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -35,7 +35,5 @@ export function DialogTitle(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/dialog/trigger/DialogTrigger.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useButton } from "../../use-button/useButton.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
@@ -10,7 +11,6 @@ import { useDialogRootContext } from "../root/DialogRootContext.js";
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function DialogTrigger(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['render', 'class', 'disabled', 'nativeButton']);
   const disabled = () => local.disabled ?? false;
@@ -44,7 +44,5 @@ export function DialogTrigger(componentProps) {
     props: [triggerProps, elementProps, getButtonProps],
     customStyleHookMapping: triggerOpenStateMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/direction-provider/DirectionProvider.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { DirectionContext } from "./DirectionContext.js";
 
 /**
@@ -5,13 +6,14 @@ import { DirectionContext } from "./DirectionContext.js";
  *
  * Documentation: [Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function DirectionProvider(props) {
   const direction = () => props.direction ?? 'ltr';
-  return /*#__PURE__*/_jsx(DirectionContext.Provider, {
+  return _$createComponent(DirectionContext.Provider, {
     value: {
       direction
     },
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/esm/field/control/FieldControl.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createEffect, onMount, mergeProps as solidMergeProps } from 'solid-js';
 import { mergeProps } from "../../merge-props/index.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -19,7 +20,6 @@ import { useFieldControlValidation } from "./useFieldControlValidation.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function FieldControl(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id', 'name', 'value', 'disabled', 'onValueChange', 'defaultValue']);
   const disabledProp = () => local.disabled ?? false;
@@ -132,7 +132,5 @@ export function FieldControl(componentProps) {
       }
     }, props => mergeProps(props, getValidationProps()), props => mergeProps(props, getInputValidationProps()), elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/field/description/FieldDescription.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createEffect, onCleanup } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -11,7 +12,6 @@ import { fieldValidityMapping } from "../utils/constants.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function FieldDescription(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -40,7 +40,5 @@ export function FieldDescription(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/field/error/FieldError.js

@@ -1,3 +1,9 @@
+import { template as _$template } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<ul> <!> `),
+  _tmpl$2 = /*#__PURE__*/_$template(`<li>`);
 import { createEffect, createMemo, For, onCleanup, splitProps } from 'solid-js';
 import { useFormContext } from "../../form/FormContext.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -11,7 +17,6 @@ import { fieldValidityMapping } from "../utils/constants.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function FieldError(componentProps) {
   const [local, elementProps] = splitProps(componentProps, ['id', 'match']);
   const id = useBaseUiId(() => local.id);
@@ -55,22 +60,25 @@ export function FieldError(componentProps) {
         return id();
       },
       get children() {
-        return /*#__PURE__*/_jsx(_Fragment, {
-          children: componentProps.children ?? /*#__PURE__*/_jsx(_Fragment, {
-            children: formError() || (validityData.errors.length > 1 ? /*#__PURE__*/_jsxs("ul", {
-              children: [' ', /*#__PURE__*/_jsx(For, {
-                each: validityData.errors,
-                children: message => /*#__PURE__*/_jsx("li", {
-                  children: message
-                })
-              }), ' ']
-            }) : validityData.error)
-          })
-        });
+        return _$memo(() => componentProps.children ?? _$memo(() => formError() || (validityData.errors.length > 1 ? (() => {
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild,
+            _el$4 = _el$2.nextSibling,
+            _el$3 = _el$4.nextSibling;
+          _$insert(_el$, _$createComponent(For, {
+            get each() {
+              return validityData.errors;
+            },
+            children: message => (() => {
+              var _el$5 = _tmpl$2();
+              _$insert(_el$5, message);
+              return _el$5;
+            })()
+          }), _el$4);
+          return _el$;
+        })() : validityData.error)));
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/field/label/FieldLabel.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { onMount } from 'solid-js';
 import { getTarget } from "../../floating-ui-solid/utils.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -12,7 +13,6 @@ import { fieldValidityMapping } from "../utils/constants.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function FieldLabel(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -57,7 +57,5 @@ export function FieldLabel(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/field/root/FieldRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, createEffect, createSignal, on, onCleanup } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { useFieldsetRootContext } from "../../fieldset/root/FieldsetRootContext.js";
@@ -13,7 +14,6 @@ import { FieldRootContext } from "./FieldRootContext.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function FieldRoot(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'name', 'validate', 'validationDebounceTime', 'validationMode', 'invalid']);
   const validationDebounceTime = () => local.validationDebounceTime ?? 0;
@@ -135,8 +135,10 @@ export function FieldRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: fieldValidityMapping
   });
-  return /*#__PURE__*/_jsx(FieldRootContext.Provider, {
+  return _$createComponent(FieldRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/field/validity/FieldValidity.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import { useFieldRootContext } from "../root/FieldRootContext.js";
@@ -9,7 +11,6 @@ import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityD
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function FieldValidity(props) {
   const {
     validityData,
@@ -22,8 +23,9 @@ export function FieldValidity(props) {
       validity: combinedFieldValidityData.state
     };
   });
-  return /*#__PURE__*/_jsx(Dynamic, {
-    component: props.children,
-    ...fieldValidityState()
-  });
+  return _$createComponent(Dynamic, _$mergeProps({
+    get component() {
+      return props.children;
+    }
+  }, fieldValidityState));
 }

package/esm/fieldset/legend/FieldsetLegend.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { onMount } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -10,7 +11,6 @@ import { useFieldsetRootContext } from "../root/FieldsetRootContext.js";
  *
  * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function FieldsetLegend(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -42,7 +42,5 @@ export function FieldsetLegend(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/fieldset/root/FieldsetRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, createSignal, on, onCleanup } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -10,7 +11,6 @@ import { FieldsetRootContext } from "./FieldsetRootContext.js";
  *
  * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function FieldsetRoot(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled']);
   const disabled = () => local.disabled ?? false;
@@ -43,8 +43,10 @@ export function FieldsetRoot(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(FieldsetRootContext.Provider, {
+  return _$createComponent(FieldsetRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

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

@@ -1,8 +1,8 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createContext, createEffect, createSignal, onCleanup, useContext } from 'solid-js';
 import { useTimeout } from "../../utils/useTimeout.js";
 import { access } from "../../solid-helpers.js";
 import { getDelay } from "../hooks/useHover.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const FloatingDelayGroupContext = createContext({
   hasProvider: () => false,
   setHasProvider: () => {},
@@ -36,7 +36,7 @@ export function FloatingDelayGroup(props) {
   const [currentIdRef, setCurrentIdRef] = createSignal(null);
   const currentContextRef = null;
   const timeout = useTimeout();
-  return /*#__PURE__*/_jsx(FloatingDelayGroupContext.Provider, {
+  return _$createComponent(FloatingDelayGroupContext.Provider, {
     value: {
       hasProvider,
       setHasProvider,
@@ -50,7 +50,9 @@ export function FloatingDelayGroup(props) {
       timeout,
       currentContextRef
     },
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }
 /**

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

@@ -1,3 +1,9 @@
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button>`);
 import { getNodeName, isHTMLElement } from '@floating-ui/utils/dom';
 import { createEffect, createMemo, createSignal, on, onCleanup, Show } from 'solid-js';
 import { focusable, isTabbable, tabbable } from 'tabbable';
@@ -9,7 +15,6 @@ import { enqueueFocus } from "../utils/enqueueFocus.js";
 import { markOthers, supportsInert } from "../utils/markOthers.js";
 import { usePortalContext } from "./FloatingPortal.js";
 import { useFloatingTree } from "./FloatingTree.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LIST_LIMIT = 20;
 let previouslyFocusedElements = [];
 function addPreviouslyFocusedElement(element) {
@@ -52,12 +57,15 @@ function handleTabIndex(floatingFocusElement, orderRef) {
   }
 }
 function VisuallyHiddenDismiss(props) {
-  return /*#__PURE__*/_jsx("button", {
-    ...props,
-    type: "button",
-    tabIndex: -1,
-    style: visuallyHidden
-  });
+  return (() => {
+    var _el$ = _tmpl$();
+    _$spread(_el$, _$mergeProps(props, {
+      "type": "button",
+      "tabIndex": -1,
+      "style": visuallyHidden
+    }), false, false);
+    return _el$;
+  })();
 }
 /**
  * Provides focus management for the floating element.
@@ -409,17 +417,20 @@ export function FloatingFocusManager(props) {
     if (disabled() || !visuallyHiddenDismiss() || !modal()) {
       return null;
     }
-    return /*#__PURE__*/_jsx(VisuallyHiddenDismiss, {
-      ref: location === 'start' ? setStartDismissButtonRef : setEndDismissButtonRef,
+    return _$createComponent(VisuallyHiddenDismiss, {
       onClick: event => props.context.onOpenChange(false, event),
-      children: typeof visuallyHiddenDismiss() === 'string' ? visuallyHiddenDismiss() : 'Dismiss'
+      get children() {
+        return _$memo(() => typeof visuallyHiddenDismiss() === 'string')() ? visuallyHiddenDismiss() : 'Dismiss';
+      }
     });
   }
   const shouldRenderGuards = () => !disabled() && guards() && (modal() ? !isUntrappedTypeableCombobox() : true) && (isInsidePortal() || modal());
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Show, {
-      when: shouldRenderGuards(),
-      children: /*#__PURE__*/_jsx(FocusGuard, {
+  return [_$createComponent(Show, {
+    get when() {
+      return shouldRenderGuards();
+    },
+    get children() {
+      return _$createComponent(FocusGuard, {
         "data-type": "inside",
         ref: el => {
           setBeforeGuardRef(el);
@@ -440,13 +451,21 @@ export function FloatingFocusManager(props) {
             }
           }
         }
-      })
-    }), /*#__PURE__*/_jsx(Show, {
-      when: !isUntrappedTypeableCombobox(),
-      children: renderDismissButton('start')
-    }), props.children, renderDismissButton('end'), /*#__PURE__*/_jsx(Show, {
-      when: shouldRenderGuards(),
-      children: /*#__PURE__*/_jsx(FocusGuard, {
+      });
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return !isUntrappedTypeableCombobox();
+    },
+    get children() {
+      return renderDismissButton('start');
+    }
+  }), _$memo(() => props.children), _$memo(() => renderDismissButton('end')), _$createComponent(Show, {
+    get when() {
+      return shouldRenderGuards();
+    },
+    get children() {
+      return _$createComponent(FocusGuard, {
         "data-type": "inside",
         ref: el => {
           setAfterGuardRef(el);
@@ -468,7 +487,7 @@ export function FloatingFocusManager(props) {
             }
           }
         }
-      })
-    })]
-  });
+      });
+    }
+  })];
 }