@msviderok/base-ui-solid 1.0.0-beta.8 → 1.0.0-beta.9

package/cjs/scroll-area/root/ScrollAreaRoot.js

@@ -176,13 +176,14 @@ function ScrollAreaRoot(componentProps) {
   };
   (0, _solidJs.onMount)(() => {
     if (!document.head.getElementsByTagName('style').namedItem(_styles.STYLE_TAG_ID)) {
-      document.head.appendChild(_styles.styleDisableScrollbar.element);
+      const el = _styles.styleDisableScrollbar.element();
+      document.head.appendChild(el);
+      (0, _solidJs.onCleanup)(() => {
+        if (document.head.getElementsByTagName('style').namedItem(_styles.STYLE_TAG_ID)) {
+          document.head.removeChild(el);
+        }
+      });
     }
-    (0, _solidJs.onCleanup)(() => {
-      if (document.head.getElementsByTagName('style').namedItem(_styles.STYLE_TAG_ID)) {
-        document.head.removeChild(_styles.styleDisableScrollbar.element);
-      }
-    });
   });
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     props: [{

package/cjs/select/popup/SelectPopup.js

@@ -315,7 +315,18 @@ function SelectPopup(componentProps) {
       }
     }, elementProps]
   });
-  return [(0, _web.memo)(() => _styles.styleDisableScrollbar.element), (0, _web.createComponent)(_floatingUiSolid.FloatingFocusManager, {
+  (0, _solidJs.onMount)(() => {
+    if (!document.head.getElementsByTagName('style').namedItem(_styles.STYLE_TAG_ID)) {
+      const el = _styles.styleDisableScrollbar.element();
+      document.head.appendChild(el);
+      (0, _solidJs.onCleanup)(() => {
+        if (document.head.getElementsByTagName('style').namedItem(_styles.STYLE_TAG_ID)) {
+          document.head.removeChild(el);
+        }
+      });
+    }
+  });
+  return (0, _web.createComponent)(_floatingUiSolid.FloatingFocusManager, {
     context: context,
     modal: false,
     get disabled() {
@@ -325,5 +336,5 @@ function SelectPopup(componentProps) {
     get children() {
       return element();
     }
-  })];
+  });
 }

package/cjs/utils/styles.d.ts

@@ -1,5 +1,5 @@
 export declare const STYLE_TAG_ID = "disable-scrollbar";
 export declare const styleDisableScrollbar: {
   class: string;
-  element: Node;
+  element: () => HTMLStyleElement;
 };

package/cjs/utils/styles.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.styleDisableScrollbar = exports.STYLE_TAG_ID = void 0;
-var _web = require("solid-js/web");
-var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<style id=disable-scrollbar>.base-ui-disable-scrollbar\{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar\{display:none}`);
 const STYLE_TAG_ID = exports.STYLE_TAG_ID = 'disable-scrollbar';
 const styleDisableScrollbar = exports.styleDisableScrollbar = {
   class: 'base-ui-disable-scrollbar',
-  element: _tmpl$()
+  element: () => {
+    const style = document.createElement('style');
+    style.id = STYLE_TAG_ID;
+    style.textContent = `.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}`;
+    return style;
+  }
 };

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @msviderok/base-ui-solid v1.0.0-beta.8
+ * @msviderok/base-ui-solid v1.0.0-beta.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -170,13 +170,14 @@ export function ScrollAreaRoot(componentProps) {
   };
   onMount(() => {
     if (!document.head.getElementsByTagName('style').namedItem(STYLE_TAG_ID)) {
-      document.head.appendChild(styleDisableScrollbar.element);
+      const el = styleDisableScrollbar.element();
+      document.head.appendChild(el);
+      onCleanup(() => {
+        if (document.head.getElementsByTagName('style').namedItem(STYLE_TAG_ID)) {
+          document.head.removeChild(el);
+        }
+      });
     }
-    onCleanup(() => {
-      if (document.head.getElementsByTagName('style').namedItem(STYLE_TAG_ID)) {
-        document.head.removeChild(styleDisableScrollbar.element);
-      }
-    });
   });
   const element = useRenderElement('div', componentProps, {
     props: [{

package/esm/select/popup/SelectPopup.js

@@ -1,6 +1,5 @@
 import { createComponent as _$createComponent } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-import { createEffect, onCleanup } from 'solid-js';
+import { createEffect, onCleanup, onMount } from 'solid-js';
 import { FloatingFocusManager } from "../../floating-ui-solid/index.js";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { DISABLED_TRANSITIONS_STYLE } from "../../utils/constants.js";
@@ -9,7 +8,7 @@ import { isMouseWithinBounds } from "../../utils/isMouseWithinBounds.js";
 import { ownerDocument, ownerWindow } from "../../utils/owner.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { transitionStatusMapping } from "../../utils/styleHookMapping.js";
-import { styleDisableScrollbar } from "../../utils/styles.js";
+import { STYLE_TAG_ID, styleDisableScrollbar } from "../../utils/styles.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
@@ -310,7 +309,18 @@ export function SelectPopup(componentProps) {
       }
     }, elementProps]
   });
-  return [_$memo(() => styleDisableScrollbar.element), _$createComponent(FloatingFocusManager, {
+  onMount(() => {
+    if (!document.head.getElementsByTagName('style').namedItem(STYLE_TAG_ID)) {
+      const el = styleDisableScrollbar.element();
+      document.head.appendChild(el);
+      onCleanup(() => {
+        if (document.head.getElementsByTagName('style').namedItem(STYLE_TAG_ID)) {
+          document.head.removeChild(el);
+        }
+      });
+    }
+  });
+  return _$createComponent(FloatingFocusManager, {
     context: context,
     modal: false,
     get disabled() {
@@ -320,5 +330,5 @@ export function SelectPopup(componentProps) {
     get children() {
       return element();
     }
-  })];
+  });
 }

package/esm/utils/styles.d.ts

@@ -1,5 +1,5 @@
 export declare const STYLE_TAG_ID = "disable-scrollbar";
 export declare const styleDisableScrollbar: {
   class: string;
-  element: Node;
+  element: () => HTMLStyleElement;
 };

package/esm/utils/styles.js

@@ -1,7 +1,10 @@
-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: _tmpl$()
+  element: () => {
+    const style = document.createElement('style');
+    style.id = STYLE_TAG_ID;
+    style.textContent = `.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}`;
+    return style;
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@msviderok/base-ui-solid",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "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.",