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

package/esm/floating-ui-solid/hooks/useFloatingOriginal.js

@@ -0,0 +1,163 @@
+import { computePosition } from '@floating-ui/dom';
+import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
+import { access } from "../../solid-helpers.js";
+/**
+ * This is a Solid port of the React useFloating hook
+ * https://github.com/floating-ui/floating-ui/blob/3286d01bc1425150ad5aaa22aee062fe70fa8f5c/packages/react-dom/src/useFloating.ts
+ */
+export function useFloatingOriginal(options = {}) {
+  const open = createMemo(() => access(options.open));
+  const placement = createMemo(() => access(options.placement) ?? 'bottom');
+  const strategy = createMemo(() => access(options.strategy) ?? 'absolute');
+  const middleware = createMemo(() => access(options.middleware) ?? []);
+  const referenceProp = createMemo(() => access(options.elements?.reference));
+  const floatingProp = createMemo(() => access(options.elements?.floating));
+  const transform = createMemo(() => access(options.transform) ?? true);
+  const whileElementsMountedFn = createMemo(() => {
+    if (options.whileElementsMounted == null) {
+      return null;
+    }
+    if (typeof options.whileElementsMounted === 'function') {
+      return options.whileElementsMounted;
+    }
+    return access(options.whileElementsMounted.enabled) ? options.whileElementsMounted.fn : null;
+  });
+  const [data, setData] = createStore({
+    x: 0,
+    y: 0,
+    // eslint-disable-next-line solid/reactivity
+    strategy: access(strategy()),
+    // eslint-disable-next-line solid/reactivity
+    placement: access(placement()),
+    middlewareData: {},
+    isPositioned: false
+  });
+  const [reference, setReference] = createSignal(null);
+  const [floating, setFloating] = createSignal(null);
+  const referenceEl = createMemo(() => referenceProp() ?? reference());
+  const floatingEl = createMemo(() => floatingProp() ?? floating());
+  let isMountedRef = false;
+  function update() {
+    const r = referenceEl();
+    const f = floatingEl();
+    if (!r || !f) {
+      return;
+    }
+    const config = {
+      placement: placement(),
+      strategy: strategy(),
+      middleware: middleware()
+    };
+    const platform = access(options.platform);
+    if (platform) {
+      config.platform = platform;
+    }
+    computePosition(r, f, config).then(computedData => {
+      if (isMountedRef) {
+        setData(reconcile({
+          ...computedData,
+          // The floating element's position may be recomputed while it's closed
+          // but still mounted (such as when transitioning out). To ensure
+          // `isPositioned` will be `false` initially on the next open, avoid
+          // setting it to `true` when `open === false` (must be specified).
+          isPositioned: access(options.open) !== false
+        }));
+      }
+    });
+  }
+  createEffect(() => {
+    if (access(options.open) === false && data.isPositioned) {
+      setData('isPositioned', false);
+    }
+  });
+  onMount(() => {
+    isMountedRef = true;
+    onCleanup(() => {
+      isMountedRef = false;
+    });
+  });
+  createEffect(on([referenceEl, floatingEl, whileElementsMountedFn, open], () => {
+    const r = referenceEl();
+    const f = floatingEl();
+    if (r && f) {
+      const whileElementsMounted = whileElementsMountedFn();
+      if (whileElementsMounted) {
+        const cleanup = whileElementsMounted(r, f, update);
+        onCleanup(cleanup);
+        return;
+      }
+      update();
+    }
+  }));
+  const refs = {
+    reference,
+    floating,
+    setReference,
+    setFloating
+  };
+  const elements = {
+    reference: referenceEl,
+    floating: floatingEl
+  };
+  const floatingStyles = createMemo(() => {
+    const initialStyles = {
+      position: strategy(),
+      left: 0,
+      top: 0
+    };
+    const el = elements.floating();
+    if (!el) {
+      return initialStyles;
+    }
+    const x = roundByDPR(el, data.x);
+    const y = roundByDPR(el, data.y);
+    if (transform()) {
+      return {
+        ...initialStyles,
+        transform: `translate(${x}px, ${y}px)`,
+        ...(getDPR(el) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy(),
+      left: `${x}px`,
+      top: `${y}px`
+    };
+  });
+  return {
+    update,
+    refs,
+    elements,
+    floatingStyles,
+    isPositioned: () => data.isPositioned,
+    placement: () => data.placement,
+    strategy: () => data.strategy,
+    middlewareData: () => data.middlewareData,
+    x: () => data.x,
+    y: () => data.y
+  };
+}
+
+/**
+ * This is a Solid port of the React roundByDPR function
+ * https://github.com/floating-ui/floating-ui/blob/3286d01bc1425150ad5aaa22aee062fe70fa8f5c/packages/react-dom/src/utils/roundByDPR.ts
+ */
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+
+/**
+ * This is a Solid port of the React getDPR function
+ * https://github.com/floating-ui/floating-ui/blob/3286d01bc1425150ad5aaa22aee062fe70fa8f5c/packages/react-dom/src/utils/getDPR.ts
+ */
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}

package/esm/floating-ui-solid/hooks/useFloatingRootContext.d.ts

@@ -0,0 +1,11 @@
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import type { FloatingRootContext, OpenChangeReason } from "../types.js";
+export interface UseFloatingRootContextOptions {
+  open?: MaybeAccessor<boolean | undefined>;
+  onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+  elements: {
+    reference: MaybeAccessor<Element | null | undefined>;
+    floating: MaybeAccessor<HTMLElement | null | undefined>;
+  };
+}
+export declare function useFloatingRootContext(options: UseFloatingRootContextOptions): FloatingRootContext;

package/esm/floating-ui-solid/hooks/useFloatingRootContext.js

@@ -0,0 +1,48 @@
+import { isElement } from '@floating-ui/utils/dom';
+import { createSignal } from 'solid-js';
+import { access } from "../../solid-helpers.js";
+import { useId } from "../../utils/useId.js";
+import { useFloatingParentNodeId } from "../components/FloatingTree.js";
+import { createEventEmitter } from "../utils/createEventEmitter.js";
+export function useFloatingRootContext(options) {
+  const open = () => access(options.open) ?? false;
+  const floatingId = useId();
+  const events = createEventEmitter();
+  const parentId = useFloatingParentNodeId();
+  const nested = parentId != null;
+  const dataRef = {};
+  if (process.env.NODE_ENV !== 'production') {
+    const optionDomReference = access(options.elements.reference);
+    if (optionDomReference && !isElement(optionDomReference)) {
+      console.error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
+    }
+  }
+  const [positionReference, setPositionReference] = createSignal(access(options.elements.reference));
+  const onOpenChange = (newOpen, event, reason) => {
+    dataRef.openEvent = newOpen ? event : undefined;
+    events.emit('openchange', {
+      open: newOpen,
+      event,
+      reason,
+      nested
+    });
+    options.onOpenChange?.(newOpen, event, reason);
+  };
+  const refs = {
+    setPositionReference
+  };
+  const elements = {
+    reference: () => positionReference() || access(options.elements.reference),
+    floating: () => access(options.elements.floating),
+    domReference: () => access(options.elements.reference)
+  };
+  return {
+    dataRef,
+    open,
+    onOpenChange,
+    elements,
+    events,
+    floatingId,
+    refs
+  };
+}

package/esm/floating-ui-solid/hooks/useFocus.d.ts

@@ -0,0 +1,23 @@
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import type { ElementProps, FloatingRootContext } from "../types.js";
+export interface UseFocusProps {
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: MaybeAccessor<boolean>;
+  /**
+   * Whether the open state only changes if the focus event is considered
+   * visible (`:focus-visible` CSS selector).
+   * @default true
+   */
+  visibleOnly?: MaybeAccessor<boolean>;
+}
+/**
+ * Opens the floating element while the reference element has focus, like CSS
+ * `:focus`.
+ * @see https://floating-ui.com/docs/useFocus
+ */
+export declare function useFocus(contextProp: MaybeAccessor<FloatingRootContext>, props?: UseFocusProps): Accessor<ElementProps>;

package/esm/floating-ui-solid/hooks/useFocus.js

@@ -0,0 +1,134 @@
+import { getWindow, isElement, isHTMLElement } from '@floating-ui/utils/dom';
+import { createEffect, createMemo, onCleanup } from 'solid-js';
+import { isMac, isSafari } from "../../utils/detectBrowser.js";
+import { useTimeout } from "../../utils/useTimeout.js";
+import { activeElement, contains, getDocument, getTarget, isTypeableElement, matchesFocusVisible } from "../utils.js";
+import { access } from "../../solid-helpers.js";
+import { createAttribute } from "../utils/createAttribute.js";
+const isMacSafari = isMac && isSafari;
+/**
+ * Opens the floating element while the reference element has focus, like CSS
+ * `:focus`.
+ * @see https://floating-ui.com/docs/useFocus
+ */
+export function useFocus(contextProp, props = {}) {
+  const enabled = () => access(props.enabled) ?? true;
+  const visibleOnly = () => access(props.visibleOnly) ?? true;
+  const context = () => access(contextProp);
+  let blockFocusRef = false;
+  let keyboardModalityRef = true;
+  const timeout = useTimeout();
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    const win = getWindow(context().elements.domReference());
+
+    // If the reference was focused and the user left the tab/window, and the
+    // floating element was not open, the focus should be blocked when they
+    // return to the tab/window.
+    function onBlur() {
+      const domReference = context().elements.domReference();
+      if (!context().open() && isHTMLElement(domReference) && domReference === activeElement(getDocument(domReference))) {
+        blockFocusRef = true;
+      }
+    }
+    function onKeyDown() {
+      keyboardModalityRef = true;
+    }
+    function onPointerDown() {
+      keyboardModalityRef = false;
+    }
+    win.addEventListener('blur', onBlur);
+    if (isMacSafari) {
+      win.addEventListener('keydown', onKeyDown, true);
+      win.addEventListener('pointerdown', onPointerDown, true);
+    }
+    onCleanup(() => {
+      win.removeEventListener('blur', onBlur);
+      if (isMacSafari) {
+        win.removeEventListener('keydown', onKeyDown, true);
+        win.removeEventListener('pointerdown', onPointerDown, true);
+      }
+    });
+  });
+  function onOpenChangeLocal({
+    reason
+  }) {
+    if (reason === 'reference-press' || reason === 'escape-key') {
+      blockFocusRef = true;
+    }
+  }
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    context().events.on('openchange', onOpenChangeLocal);
+    onCleanup(() => {
+      context().events.off('openchange', onOpenChangeLocal);
+    });
+  });
+  const reference = createMemo(() => ({
+    onMouseLeave: () => {
+      blockFocusRef = false;
+    },
+    onFocus: event => {
+      if (blockFocusRef) {
+        return;
+      }
+      const target = getTarget(event);
+      if (visibleOnly() && isElement(target)) {
+        // Safari fails to match `:focus-visible` if focus was initially
+        // outside the document.
+        if (isMacSafari && !event.relatedTarget) {
+          if (!keyboardModalityRef && !isTypeableElement(target)) {
+            return;
+          }
+        } else if (!matchesFocusVisible(target)) {
+          return;
+        }
+      }
+      context().onOpenChange(true, event, 'focus');
+    },
+    onBlur: event => {
+      blockFocusRef = false;
+      const relatedTarget = event.relatedTarget;
+
+      // Hit the non-modal focus management portal guard. Focus will be
+      // moved into the floating element immediately after.
+      const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+
+      // Wait for the window blur listener to fire.
+      timeout.start(0, () => {
+        const domReference = context().elements.domReference();
+        const activeEl = activeElement(domReference ? domReference.ownerDocument : document);
+
+        // Focus left the page, keep it open.
+        if (!relatedTarget && activeEl === domReference) {
+          return;
+        }
+
+        // When focusing the reference element (e.g. regular click), then
+        // clicking into the floating element, prevent it from hiding.
+        // Note: it must be focusable, e.g. `tabindex="-1"`.
+        // We can not rely on relatedTarget to point to the correct element
+        // as it will only point to the shadow host of the newly focused element
+        // and not the element that actually has received focus if it is located
+        // inside a shadow root.
+        if (contains(context().dataRef.floatingContext?.refs.floating(), activeEl) || contains(domReference, activeEl) || movedToFocusGuard) {
+          return;
+        }
+        context().onOpenChange(false, event, 'focus');
+      });
+    }
+  }));
+  const returnValue = createMemo(() => {
+    if (!enabled()) {
+      return {};
+    }
+    return {
+      reference: reference()
+    };
+  });
+  return returnValue;
+}

package/esm/floating-ui-solid/hooks/useHover.d.ts

@@ -0,0 +1,57 @@
+import { type Accessor } from 'solid-js';
+import type { MaybeAccessor } from "../../solid-helpers.js";
+import type { Delay, ElementProps, FloatingContext, FloatingRootContext, FloatingTreeType, SafePolygonOptions } from "../types.js";
+export interface HandleCloseContext extends FloatingContext {
+  onClose: () => void;
+  tree?: FloatingTreeType | null;
+  leave?: boolean;
+}
+export interface HandleClose {
+  (context: HandleCloseContext): (event: MouseEvent) => void;
+  __options?: SafePolygonOptions;
+}
+export declare function getDelay(value: UseHoverProps['delay'], prop: 'open' | 'close', pointerType?: PointerEvent['pointerType']): number | undefined;
+export interface UseHoverProps {
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: MaybeAccessor<boolean | undefined>;
+  /**
+   * Accepts an event handler that runs on `mousemove` to control when the
+   * floating element closes once the cursor leaves the reference element.
+   * @default null
+   */
+  handleClose?: HandleClose | null;
+  /**
+   * Waits until the user’s cursor is at “rest” over the reference element
+   * before changing the `open` state.
+   * @default 0
+   */
+  restMs?: MaybeAccessor<number | undefined>;
+  /**
+   * Waits for the specified time when the event listener runs before changing
+   * the `open` state.
+   * @default 0
+   */
+  delay?: MaybeAccessor<Delay | undefined>;
+  /**
+   * Whether the logic only runs for mouse input, ignoring touch input.
+   * Note: due to a bug with Linux Chrome, "pen" inputs are considered "mouse".
+   * @default false
+   */
+  mouseOnly?: MaybeAccessor<boolean | undefined>;
+  /**
+   * Whether moving the cursor over the floating element will open it, without a
+   * regular hover event required.
+   * @default true
+   */
+  move?: MaybeAccessor<boolean | undefined>;
+}
+/**
+ * Opens the floating element while hovering over the reference element, like
+ * CSS `:hover`.
+ * @see https://floating-ui.com/docs/useHover
+ */
+export declare function useHover(contextProp: MaybeAccessor<FloatingRootContext>, props?: UseHoverProps): Accessor<ElementProps>;