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

package/README.md

@@ -1,48 +1,27 @@
 <!-- markdownlint-disable MD041 -->
 
-<a href="https://base-ui.com" rel="noopener" target="_blank"><img width="150" height="133" src="https://base-ui.com/static/logo.svg" alt="Base UI logo"></a>
+# _(WIP)_ This project is a work in progress.
 
-Base UI is a library of unstyled Solid components. You gain complete control over your app's CSS and accessibility features.
+- Library is compatible with **@base-ui-components/react@1.0.0-beta.1**
+- Docs have everything copied over from the original React-based docs so **_a lot_** of discrepancies in text are present
 
-## Installation
+### Please, consider supporting an awesome Base UI team directly on [OpenCollective](https://opencollective.com/mui-org). This port is a gesture of appreciation of an increadible work they've been doing.
+
+### Link to the original library: [Base UI GitHub](https://github.com/mui/base-ui)
 
-Install the package in your project directory with:
+<hr />
+
+## Installation
 
 ```bash
-npm install @base-ui-components/solid
+npm install @msviderok/base-ui-solid
 ```
 
 ## Documentation
 
-<!-- #default-branch-switch -->
-
-Visit [base-ui.com](https://base-ui.com) to view the full documentation.
-
-## Questions
-
-For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/base-ui) instead of GitHub issues.
-Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question.
-
-## Contributing
-
-Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
-
-Contributing to Base UI is about more than just issues and pull requests!
-There are many other ways to [support Base UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
-
-## Changelog
-
-The [changelog](https://github.com/mui/base-ui/releases) is regularly updated to reflect what's changed in each new release.
-
-## Roadmap
-
-Future plans and high-priority features and enhancements can be found in the [roadmap](https://github.com/orgs/mui/projects/1).
+### [base-ui-docs-solid.vercel.app](https://base-ui-docs-solid.vercel.app/)
 
 ## License
 
 This project is licensed under the terms of the
 [MIT license](/LICENSE).
-
-## Security
-
-For details of supported versions and contact details for reporting security issues, please refer to the [security policy](https://github.com/mui/base-ui/security/policy).

package/cjs/merge-props/mergeProps.js

@@ -133,23 +133,32 @@ function mergeProps(...args) {
   for (let props of sources) {
     let propsOverride = false;
     if (typeof props === 'function') {
-      const mergedListeners = {
-        ...cachedListeners
+      const mergedListeners = Object.assign({}, cachedListeners);
+      const mergedStyles = Object.assign([], cacheStyles);
+      const mergedRefs = Object.assign([], cacheRefs);
+      const mergedClasses = Object.assign([], cacheClasses);
+      const mergedClassList = Object.assign([], cacheClassList);
+      const localMerged = {
+        get style() {
+          return reduce(mergedStyles, 'style', combineStyle);
+        },
+        get ref() {
+          return reverseChain(mergedRefs);
+        },
+        get class() {
+          return reduce(mergedClasses, 'class', (a, b) => `${a} ${b}`);
+        },
+        get classList() {
+          return reduce(mergedClassList, 'classList', (a, b) => ({
+            ...a,
+            ...b
+          }));
+        }
       };
-      const mergedStyles = reduce(cacheStyles, 'style', combineStyle);
-      const mergedRefs = reverseChain(cacheRefs);
-      const mergedClasses = reduce(cacheClasses, 'class', (a, b) => `${a} ${b}`);
-      const mergedClassList = reduce(cacheClassList, 'classList', (a, b) => ({
-        ...a,
-        ...b
-      }));
       const mergedForGetter = new Proxy(merge, {
         get(target, key, receiver) {
           if (typeof key !== 'string') return Reflect.get(target, key, receiver);
-          if (key === 'style') return mergedStyles;
-          if (key === 'ref') return mergedRefs;
-          if (key === 'class') return mergedClasses;
-          if (key === 'classList') return mergedClassList;
+          if (key in localMerged) return localMerged[key];
           if (key[0] === 'o' && key[1] === 'n' && key[2]) {
             const name = key.toLowerCase();
             if (name in mergedListeners) return mergedListeners[name];
@@ -209,20 +218,27 @@ function mergeProps(...args) {
   const mergedListeners = {
     ...cachedListeners
   };
-  const mergedStyles = reduce(cacheStyles, 'style', combineStyle);
-  const mergedRefs = reverseChain(cacheRefs);
-  const mergedClasses = reduce(cacheClasses, 'class', (a, b) => `${a} ${b}`);
-  const mergedClassList = reduce(cacheClassList, 'classList', (a, b) => ({
-    ...a,
-    ...b
-  }));
+  const localMerged = {
+    get style() {
+      return reduce(cacheStyles, 'style', combineStyle);
+    },
+    get ref() {
+      return reverseChain(cacheRefs);
+    },
+    get class() {
+      return reduce(cacheClasses, 'class', (a, b) => `${a} ${b}`);
+    },
+    get classList() {
+      return reduce(cacheClassList, 'classList', (a, b) => ({
+        ...a,
+        ...b
+      }));
+    }
+  };
   return new Proxy({
     get(key) {
       if (typeof key !== 'string') return Reflect.get(merge, key);
-      if (key === 'style') return mergedStyles;
-      if (key === 'ref') return mergedRefs;
-      if (key === 'class') return mergedClasses;
-      if (key === 'classList') return mergedClassList;
+      if (key in localMerged) return localMerged[key];
       if (key[0] === 'o' && key[1] === 'n' && key[2]) {
         const name = key.toLowerCase();
         if (name in mergedListeners) return mergedListeners[name];

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.3
+ * @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/merge-props/mergeProps.js

@@ -124,23 +124,32 @@ export function mergeProps(...args) {
   for (let props of sources) {
     let propsOverride = false;
     if (typeof props === 'function') {
-      const mergedListeners = {
-        ...cachedListeners
+      const mergedListeners = Object.assign({}, cachedListeners);
+      const mergedStyles = Object.assign([], cacheStyles);
+      const mergedRefs = Object.assign([], cacheRefs);
+      const mergedClasses = Object.assign([], cacheClasses);
+      const mergedClassList = Object.assign([], cacheClassList);
+      const localMerged = {
+        get style() {
+          return reduce(mergedStyles, 'style', combineStyle);
+        },
+        get ref() {
+          return reverseChain(mergedRefs);
+        },
+        get class() {
+          return reduce(mergedClasses, 'class', (a, b) => `${a} ${b}`);
+        },
+        get classList() {
+          return reduce(mergedClassList, 'classList', (a, b) => ({
+            ...a,
+            ...b
+          }));
+        }
       };
-      const mergedStyles = reduce(cacheStyles, 'style', combineStyle);
-      const mergedRefs = reverseChain(cacheRefs);
-      const mergedClasses = reduce(cacheClasses, 'class', (a, b) => `${a} ${b}`);
-      const mergedClassList = reduce(cacheClassList, 'classList', (a, b) => ({
-        ...a,
-        ...b
-      }));
       const mergedForGetter = new Proxy(merge, {
         get(target, key, receiver) {
           if (typeof key !== 'string') return Reflect.get(target, key, receiver);
-          if (key === 'style') return mergedStyles;
-          if (key === 'ref') return mergedRefs;
-          if (key === 'class') return mergedClasses;
-          if (key === 'classList') return mergedClassList;
+          if (key in localMerged) return localMerged[key];
           if (key[0] === 'o' && key[1] === 'n' && key[2]) {
             const name = key.toLowerCase();
             if (name in mergedListeners) return mergedListeners[name];
@@ -200,20 +209,27 @@ export function mergeProps(...args) {
   const mergedListeners = {
     ...cachedListeners
   };
-  const mergedStyles = reduce(cacheStyles, 'style', combineStyle);
-  const mergedRefs = reverseChain(cacheRefs);
-  const mergedClasses = reduce(cacheClasses, 'class', (a, b) => `${a} ${b}`);
-  const mergedClassList = reduce(cacheClassList, 'classList', (a, b) => ({
-    ...a,
-    ...b
-  }));
+  const localMerged = {
+    get style() {
+      return reduce(cacheStyles, 'style', combineStyle);
+    },
+    get ref() {
+      return reverseChain(cacheRefs);
+    },
+    get class() {
+      return reduce(cacheClasses, 'class', (a, b) => `${a} ${b}`);
+    },
+    get classList() {
+      return reduce(cacheClassList, 'classList', (a, b) => ({
+        ...a,
+        ...b
+      }));
+    }
+  };
   return new Proxy({
     get(key) {
       if (typeof key !== 'string') return Reflect.get(merge, key);
-      if (key === 'style') return mergedStyles;
-      if (key === 'ref') return mergedRefs;
-      if (key === 'class') return mergedClasses;
-      if (key === 'classList') return mergedClassList;
+      if (key in localMerged) return localMerged[key];
       if (key[0] === 'o' && key[1] === 'n' && key[2]) {
         const name = key.toLowerCase();
         if (name in mergedListeners) return mergedListeners[name];

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.3",
+  "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.",
@@ -13,12 +13,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sviderock/base-ui.git",
+    "url": "git+https://github.com/msviderok/base-ui.git",
     "directory": "packages/solid"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/sviderock/base-ui/issues"
+    "url": "https://github.com/msviderok/base-ui/issues"
   },
   "homepage": "https://base-ui.com",
   "funding": {
@@ -43,9 +43,6 @@
     "node": ">=14.0.0"
   },
   "main": "./cjs/index.js",
-  "directories": {
-    "test": "test"
-  },
   "module": "./esm/index.js",
   "types": "index",
   "typesVersions": {
@@ -440,6 +437,16 @@
         "default": "./esm/unstable-use-media-query/index.js"
       }
     },
+    "./use-render": {
+      "require": {
+        "types": "./cjs/use-render/index.d.ts",
+        "default": "./cjs/use-render/index.js"
+      },
+      "import": {
+        "types": "./esm/use-render/index.d.ts",
+        "default": "./esm/use-render/index.js"
+      }
+    },
     "./utils": {
       "require": {
         "types": "./cjs/utils/index.d.ts",