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

package/esm/floating-ui-solid/utils/nodes.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-loop-func */
+
+export function getNodeChildren(nodes, id, onlyOpenChildren = true) {
+  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open()));
+  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
+}
+export function getDeepestNode(nodes, id) {
+  let deepestNodeId;
+  let maxDepth = -1;
+  function findDeepest(nodeId, depth) {
+    if (depth > maxDepth) {
+      deepestNodeId = nodeId;
+      maxDepth = depth;
+    }
+    const children = getNodeChildren(nodes, nodeId);
+    children.forEach(child => {
+      findDeepest(child.id, depth + 1);
+    });
+  }
+  findDeepest(id, 0);
+  return nodes.find(node => node.id === deepestNodeId);
+}
+export function getNodeAncestors(nodes, id) {
+  let allAncestors = [];
+  let currentParentId = nodes.find(node => node.id === id)?.parentId;
+  while (currentParentId) {
+    const currentNode = nodes.find(node => node.id === currentParentId);
+    currentParentId = currentNode?.parentId;
+    if (currentNode) {
+      allAncestors = allAncestors.concat(currentNode);
+    }
+  }
+  return allAncestors;
+}

package/esm/floating-ui-solid/utils/tabbable.d.ts

@@ -0,0 +1,10 @@
+import { type FocusableElement } from 'tabbable';
+export declare const getTabbableOptions: () => {
+  readonly getShadowRoot: true;
+  readonly displayCheck: "none" | "full";
+};
+export declare function getNextTabbable(referenceElement: Element | null | undefined): FocusableElement | null;
+export declare function getPreviousTabbable(referenceElement: Element | null | undefined): FocusableElement | null;
+export declare function isOutsideEvent(event: FocusEvent, container?: Element): boolean;
+export declare function disableFocusInside(container: HTMLElement): void;
+export declare function enableFocusInside(container: HTMLElement): void;

package/esm/floating-ui-solid/utils/tabbable.js

@@ -0,0 +1,52 @@
+import { tabbable } from 'tabbable';
+import { activeElement, contains, getDocument } from "./element.js";
+export const getTabbableOptions = () => ({
+  getShadowRoot: true,
+  displayCheck:
+  // JSDOM does not support the `tabbable` library. To solve this we can
+  // check if `ResizeObserver` is a real function (not polyfilled), which
+  // determines if the current environment is JSDOM-like.
+  typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
+});
+function getTabbableIn(container, dir) {
+  const list = tabbable(container, getTabbableOptions());
+  const len = list.length;
+  if (len === 0) {
+    return null;
+  }
+  const active = activeElement(getDocument(container));
+  const index = list.indexOf(active);
+  // eslint-disable-next-line no-nested-ternary
+  const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
+  return list[nextIndex];
+}
+export function getNextTabbable(referenceElement) {
+  return getTabbableIn(getDocument(referenceElement).body, 1) || referenceElement;
+}
+export function getPreviousTabbable(referenceElement) {
+  return getTabbableIn(getDocument(referenceElement).body, -1) || referenceElement;
+}
+export function isOutsideEvent(event, container) {
+  const containerElement = container || event.currentTarget;
+  const relatedTarget = event.relatedTarget;
+  return !relatedTarget || !contains(containerElement, relatedTarget);
+}
+export function disableFocusInside(container) {
+  const tabbableElements = tabbable(container, getTabbableOptions());
+  tabbableElements.forEach(element => {
+    element.dataset.tabindex = element.getAttribute('tabindex') || '';
+    element.setAttribute('tabindex', '-1');
+  });
+}
+export function enableFocusInside(container) {
+  const elements = container.querySelectorAll('[data-tabindex]');
+  elements.forEach(element => {
+    const tabindex = element.dataset.tabindex;
+    delete element.dataset.tabindex;
+    if (tabindex) {
+      element.setAttribute('tabindex', tabindex);
+    } else {
+      element.removeAttribute('tabindex');
+    }
+  });
+}

package/esm/floating-ui-solid/utils.d.ts

@@ -0,0 +1,5 @@
+export * from "./utils/element.js";
+export * from "./utils/nodes.js";
+export * from "./utils/event.js";
+export * from "./utils/composite.js";
+export * from "./utils/tabbable.js";

package/esm/floating-ui-solid/utils.js

@@ -0,0 +1,5 @@
+export * from "./utils/element.js";
+export * from "./utils/nodes.js";
+export * from "./utils/event.js";
+export * from "./utils/composite.js";
+export * from "./utils/tabbable.js";

package/esm/form/Form.d.ts

@@ -0,0 +1,23 @@
+import type { BaseUIComponentProps } from "../utils/types.js";
+import { FormContext } from "./FormContext.js";
+/**
+ * A native form element with consolidated error handling.
+ * Renders a `<form>` element.
+ *
+ * Documentation: [Base UI Form](https://base-ui.com/react/components/form)
+ */
+export declare function Form(componentProps: Form.Props): import("solid-js").JSX.Element;
+export declare namespace Form {
+  interface Props extends BaseUIComponentProps<'form', State> {
+    /**
+     * An object where the keys correspond to the `name` attribute of the form fields,
+     * and the values correspond to the error(s) related to that field.
+     */
+    errors?: ReturnType<FormContext['errors']>;
+    /**
+     * Event handler called when the `errors` object is cleared.
+     */
+    onClearErrors?: (errors: ReturnType<FormContext['errors']>) => void;
+  }
+  interface State {}
+}

package/esm/form/Form.js

@@ -0,0 +1,76 @@
+import { createEffect, createMemo, on } from 'solid-js';
+import { createStore } from 'solid-js/store';
+import { access, callEventHandler, splitComponentProps } from "../solid-helpers.js";
+import { useRenderElement } from "../utils/useRenderElement.js";
+import { FormContext } from "./FormContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const EMPTY = {};
+
+/**
+ * A native form element with consolidated error handling.
+ * Renders a `<form>` element.
+ *
+ * Documentation: [Base UI Form](https://base-ui.com/react/components/form)
+ */
+export function Form(componentProps) {
+  const [, local, elementProps] = splitComponentProps(componentProps, ['errors', 'onClearErrors', 'onSubmit']);
+  const [formRef, setFormRef] = createStore({
+    fields: {}
+  });
+  let submitted = false;
+  const focusControl = control => {
+    control.focus();
+    if (control.tagName === 'INPUT') {
+      control.select();
+    }
+  };
+  const invalidFields = createMemo(() => Object.values(formRef.fields).filter(field => field.validityData.state.valid === false));
+  createEffect(on(invalidFields, () => {
+    if (!submitted) {
+      return;
+    }
+    submitted = false;
+    if (invalidFields().length) {
+      const controlRef = access(invalidFields()[0].controlRef);
+      focusControl(controlRef);
+    }
+  }));
+  const clearErrors = name => {
+    const err = local.errors;
+    if (name && err && EMPTY.hasOwnProperty.call(err, name)) {
+      const nextErrors = {
+        ...err
+      };
+      delete nextErrors[name];
+      local.onClearErrors?.(nextErrors);
+    }
+  };
+  const contextValue = {
+    formRef,
+    setFormRef,
+    errors: () => local.errors ?? {},
+    clearErrors
+  };
+  const element = useRenderElement('form', componentProps, {
+    state: EMPTY,
+    props: [{
+      noValidate: true,
+      onSubmit(event) {
+        // Async validation isn't supported to stop the submit event.
+        Object.values(formRef.fields).forEach(field => field.validate());
+        if (invalidFields().length) {
+          event.preventDefault();
+          const controlRef = access(invalidFields()[0].controlRef);
+          focusControl(controlRef);
+        } else {
+          submitted = true;
+          callEventHandler(local.onSubmit, event);
+        }
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(FormContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

package/esm/form/FormContext.d.ts

@@ -0,0 +1,23 @@
+import { type Accessor } from 'solid-js';
+import type { SetStoreFunction, Store } from 'solid-js/store';
+import type { FieldValidityData } from "../field/root/FieldRoot.js";
+import type { MaybeAccessor } from "../solid-helpers.js";
+export type Errors = Record<string, string | string[]>;
+type FormRef = {
+  fields: Record<string, {
+    name: string | undefined;
+    validate: () => void;
+    validityData: FieldValidityData;
+    controlRef: MaybeAccessor<HTMLElement>;
+    getValueRef: (() => unknown) | undefined;
+  }>;
+};
+export interface FormContext {
+  errors: Accessor<Errors>;
+  clearErrors: (name: string | undefined) => void;
+  formRef: Store<FormRef>;
+  setFormRef: SetStoreFunction<FormRef>;
+}
+export declare const FormContext: import("solid-js").Context<FormContext>;
+export declare function useFormContext(): FormContext;
+export {};

package/esm/form/FormContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'solid-js';
+import { NOOP } from "../utils/noop.js";
+export const FormContext = createContext({
+  formRef: {
+    fields: {}
+  },
+  setFormRef: NOOP,
+  errors: () => ({}),
+  clearErrors: NOOP
+});
+export function useFormContext() {
+  return useContext(FormContext);
+}

package/esm/form/index.d.ts

@@ -0,0 +1 @@
+export { Form } from "./Form.js";

package/esm/form/index.js

@@ -0,0 +1 @@
+export { Form } from "./Form.js";

package/esm/global.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="@solidjs/testing-library" />
+import type { render } from '@solidjs/testing-library';
+declare global {
+  /**
+   * When `true`, disables animation-related code, even if supported by the runtime enviroment.
+   */
+  var BASE_UI_ANIMATIONS_DISABLED: boolean;
+  type RenderResult = ReturnType<typeof render>;
+}
+export type {};
+declare module 'solid-js' {
+  namespace JSX {
+    interface Directives {
+      autofocus: boolean;
+    }
+  }
+}

package/esm/index.d.ts

@@ -0,0 +1,38 @@
+export * from "./accordion/index.js";
+export * from "./alert-dialog/index.js";
+export * from "./avatar/index.js";
+export * from "./checkbox/index.js";
+export * from "./checkbox-group/index.js";
+export * from "./collapsible/index.js";
+export * from "./context-menu/index.js";
+export * from "./dialog/index.js";
+export * from "./direction-provider/index.js";
+export * from "./field/index.js";
+export * from "./fieldset/index.js";
+export { type Accessorify } from "./floating-ui-solid/types.js";
+export * from "./form/index.js";
+export * from "./input/index.js";
+export * from "./menu/index.js";
+export * from "./menubar/index.js";
+export * from "./merge-props/index.js";
+export * from "./meter/index.js";
+export * from "./navigation-menu/index.js";
+export * from "./number-field/index.js";
+export * from "./popover/index.js";
+export * from "./preview-card/index.js";
+export * from "./progress/index.js";
+export * from "./radio/index.js";
+export * from "./radio-group/index.js";
+export * from "./scroll-area/index.js";
+export * from "./select/index.js";
+export * from "./separator/index.js";
+export * from "./slider/index.js";
+export * from "./switch/index.js";
+export * from "./tabs/index.js";
+export * from "./toast/index.js";
+export * from "./toggle/index.js";
+export * from "./toggle-group/index.js";
+export * from "./toolbar/index.js";
+export * from "./tooltip/index.js";
+export * from "./use-render/index.js";
+export * as utils from "./utils/index.js";

package/esm/index.js

@@ -0,0 +1,44 @@
+/**
+ * @msviderok/base-ui-solid v1.0.0-beta.1
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from "./accordion/index.js";
+export * from "./alert-dialog/index.js";
+export * from "./avatar/index.js";
+export * from "./checkbox/index.js";
+export * from "./checkbox-group/index.js";
+export * from "./collapsible/index.js";
+export * from "./context-menu/index.js";
+export * from "./dialog/index.js";
+export * from "./direction-provider/index.js";
+export * from "./field/index.js";
+export * from "./fieldset/index.js";
+export * from "./form/index.js";
+export * from "./input/index.js";
+export * from "./menu/index.js";
+export * from "./menubar/index.js";
+export * from "./merge-props/index.js";
+export * from "./meter/index.js";
+export * from "./navigation-menu/index.js";
+export * from "./number-field/index.js";
+export * from "./popover/index.js";
+export * from "./preview-card/index.js";
+export * from "./progress/index.js";
+export * from "./radio/index.js";
+export * from "./radio-group/index.js";
+export * from "./scroll-area/index.js";
+export * from "./select/index.js";
+export * from "./separator/index.js";
+export * from "./slider/index.js";
+export * from "./switch/index.js";
+export * from "./tabs/index.js";
+export * from "./toast/index.js";
+export * from "./toggle/index.js";
+export * from "./toggle-group/index.js";
+export * from "./toolbar/index.js";
+export * from "./tooltip/index.js";
+export * from "./use-render/index.js";
+export * as utils from "./utils/index.js";

package/esm/input/Input.d.ts

@@ -0,0 +1,19 @@
+import { Field } from "../field/index.js";
+import type { BaseUIComponentProps } from "../utils/types.js";
+/**
+ * A native input element that automatically works with [Field](https://base-ui.com/react/components/field).
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
+ */
+export declare function Input(props: Input.Props): import("solid-js").JSX.Element;
+export declare namespace Input {
+  interface Props extends BaseUIComponentProps<'input', State> {
+    /**
+     * Callback fired when the `value` changes. Use when controlled.
+     */
+    onValueChange?: Field.Control.Props['onValueChange'];
+    defaultValue?: Field.Control.Props['defaultValue'];
+  }
+  interface State extends Field.Control.State {}
+}

package/esm/input/Input.js

@@ -0,0 +1,13 @@
+import { Field } from "../field/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A native input element that automatically works with [Field](https://base-ui.com/react/components/field).
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
+ */
+export function Input(props) {
+  return /*#__PURE__*/_jsx(Field.Control, {
+    ...props
+  });
+}

package/esm/input/InputDataAttributes.d.ts

@@ -0,0 +1,30 @@
+export declare enum InputDataAttributes {
+  /**
+   * Present when the input is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the input is in valid state.
+   */
+  valid = "data-valid",
+  /**
+   * Present when the input is in invalid state.
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the input has been touched.
+   */
+  touched = "data-touched",
+  /**
+   * Present when the input's value has changed.
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the input is filled.
+   */
+  filled = "data-filled",
+  /**
+   * Present when the input is focused.
+   */
+  focused = "data-focused",
+}

package/esm/input/InputDataAttributes.js

@@ -0,0 +1,31 @@
+export let InputDataAttributes = /*#__PURE__*/function (InputDataAttributes) {
+  /**
+   * Present when the input is disabled.
+   */
+  InputDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the input is in valid state.
+   */
+  InputDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the input is in invalid state.
+   */
+  InputDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the input has been touched.
+   */
+  InputDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the input's value has changed.
+   */
+  InputDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the input is filled.
+   */
+  InputDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the input is focused.
+   */
+  InputDataAttributes["focused"] = "data-focused";
+  return InputDataAttributes;
+}({});

package/esm/input/index.d.ts

@@ -0,0 +1 @@
+export { Input } from "./Input.js";

package/esm/input/index.js

@@ -0,0 +1 @@
+export { Input } from "./Input.js";

package/esm/menu/arrow/MenuArrow.d.ts

@@ -0,0 +1,21 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+/**
+ * Displays an element positioned against the menu anchor.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare function MenuArrow(componentProps: MenuArrow.Props): import("solid-js").JSX.Element;
+export declare namespace MenuArrow {
+  interface State {
+    /**
+     * Whether the menu is currently open.
+     */
+    open: boolean;
+    side: Side;
+    align: Align;
+    uncentered: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {}
+}

package/esm/menu/arrow/MenuArrow.js

@@ -0,0 +1,54 @@
+import { splitComponentProps } from "../../solid-helpers.js";
+import { popupStateMapping } from "../../utils/popupStateMapping.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
+import { useMenuRootContext } from "../root/MenuRootContext.js";
+
+/**
+ * Displays an element positioned against the menu anchor.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function MenuArrow(componentProps) {
+  const [,, elementProps] = splitComponentProps(componentProps, []);
+  const {
+    open
+  } = useMenuRootContext();
+  const {
+    refs,
+    side,
+    align,
+    arrowUncentered,
+    arrowStyles
+  } = useMenuPositionerContext();
+  const state = {
+    get open() {
+      return open();
+    },
+    get side() {
+      return side();
+    },
+    get align() {
+      return align();
+    },
+    get uncentered() {
+      return arrowUncentered();
+    }
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: refs.setArrowRef,
+    customStyleHookMapping: popupStateMapping,
+    props: [{
+      'aria-hidden': true,
+      get style() {
+        return arrowStyles();
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: element()
+  });
+}

package/esm/menu/arrow/MenuArrowDataAttributes.d.ts

@@ -0,0 +1,28 @@
+export declare enum MenuArrowDataAttributes {
+  /**
+   * Present when the menu popup is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the menu popup is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the anchor is hidden.
+   */
+  anchorHidden = "data-anchor-hidden",
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  side = "data-side",
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  align = "data-align",
+  /**
+   * Present when the menu arrow is uncentered.
+   */
+  uncentered = "data-uncentered",
+}

package/esm/menu/arrow/MenuArrowDataAttributes.js

@@ -0,0 +1,30 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let MenuArrowDataAttributes = function (MenuArrowDataAttributes) {
+  /**
+   * Present when the menu popup is open.
+   */
+  MenuArrowDataAttributes[MenuArrowDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the menu popup is closed.
+   */
+  MenuArrowDataAttributes[MenuArrowDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the anchor is hidden.
+   */
+  MenuArrowDataAttributes[MenuArrowDataAttributes["anchorHidden"] = CommonPopupDataAttributes.anchorHidden] = "anchorHidden";
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  MenuArrowDataAttributes["side"] = "data-side";
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  MenuArrowDataAttributes["align"] = "data-align";
+  /**
+   * Present when the menu arrow is uncentered.
+   */
+  MenuArrowDataAttributes["uncentered"] = "data-uncentered";
+  return MenuArrowDataAttributes;
+}({});

package/esm/menu/backdrop/MenuBackdrop.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+/**
+ * An overlay displayed beneath the menu popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare function MenuBackdrop(componentProps: MenuBackdrop.Props): JSX.Element;
+export declare namespace MenuBackdrop {
+  interface State {
+    /**
+     * Whether the menu is currently open.
+     */
+    open: boolean;
+    transitionStatus: TransitionStatus;
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {}
+}