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

package/cjs/utils/useAnchorPositioning.js

@@ -0,0 +1,333 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchorPositioning = useAnchorPositioning;
+var _utils = require("@floating-ui/utils");
+var _solidJs = require("solid-js");
+var _DirectionContext = require("../direction-provider/DirectionContext");
+var _index = require("../floating-ui-solid/index");
+var _solidHelpers = require("../solid-helpers");
+var _owner = require("./owner");
+function getLogicalSide(sideParam, renderedSide, isRtl) {
+  const isLogicalSideParam = sideParam === 'inline-start' || sideParam === 'inline-end';
+  const logicalRight = isRtl ? 'inline-start' : 'inline-end';
+  const logicalLeft = isRtl ? 'inline-end' : 'inline-start';
+  return {
+    top: 'top',
+    right: isLogicalSideParam ? logicalRight : 'right',
+    bottom: 'bottom',
+    left: isLogicalSideParam ? logicalLeft : 'left'
+  }[renderedSide];
+}
+function getOffsetData(state, sideParam, isRtl) {
+  const {
+    rects,
+    placement
+  } = state;
+  const data = {
+    side: getLogicalSide(sideParam, (0, _utils.getSide)(placement), isRtl),
+    align: (0, _utils.getAlignment)(placement) || 'center',
+    anchor: {
+      width: rects.reference.width,
+      height: rects.reference.height
+    },
+    positioner: {
+      width: rects.floating.width,
+      height: rects.floating.height
+    }
+  };
+  return data;
+}
+/**
+ * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
+ * `useFloating` hook.
+ */
+
+function useAnchorPositioning(params) {
+  // Public parameters
+  const anchor = (0, _solidJs.createMemo)(() => (0, _solidHelpers.access)(params.anchor));
+  const positionMethod = () => (0, _solidHelpers.access)(params.positionMethod) ?? 'absolute';
+  const sideParam = () => (0, _solidHelpers.access)(params.side) ?? 'bottom';
+  const sideOffset = () => (0, _solidHelpers.access)(params.sideOffset) ?? 0;
+  const align = () => (0, _solidHelpers.access)(params.align) ?? 'center';
+  const alignOffset = () => (0, _solidHelpers.access)(params.alignOffset) ?? 0;
+  const collisionBoundary = () => (0, _solidHelpers.access)(params.collisionBoundary);
+  const collisionPadding = () => (0, _solidHelpers.access)(params.collisionPadding) ?? 5;
+  const sticky = () => (0, _solidHelpers.access)(params.sticky) ?? false;
+  const arrowPadding = () => (0, _solidHelpers.access)(params.arrowPadding) ?? 5;
+  const trackAnchor = () => (0, _solidHelpers.access)(params.trackAnchor) ?? true;
+  // Private parameters
+  const keepMounted = () => (0, _solidHelpers.access)(params.keepMounted) ?? false;
+  const mounted = () => (0, _solidHelpers.access)(params.mounted);
+  const collisionAvoidance = () => (0, _solidHelpers.access)(params.collisionAvoidance);
+  const shiftCrossAxis = () => (0, _solidHelpers.access)(params.shiftCrossAxis) ?? false;
+  const nodeId = () => (0, _solidHelpers.access)(params.nodeId);
+  const adaptiveOrigin = () => (0, _solidHelpers.access)(params.adaptiveOrigin);
+  const collisionAvoidanceSide = () => collisionAvoidance().side || 'flip';
+  const collisionAvoidanceAlign = () => collisionAvoidance().align || 'flip';
+  const collisionAvoidanceFallbackAxisSide = () => collisionAvoidance().fallbackAxisSide || 'end';
+  const direction = (0, _DirectionContext.useDirection)();
+  const isRtl = () => direction() === 'rtl';
+  const side = (0, _solidJs.createMemo)(() => ({
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+    'inline-end': isRtl() ? 'left' : 'right',
+    'inline-start': isRtl() ? 'right' : 'left'
+  })[sideParam()]);
+  const placement = () => align() === 'center' ? side() : `${side()}-${align()}`;
+  const commonCollisionProps = (0, _solidJs.createMemo)(() => {
+    const boundary = collisionBoundary();
+    return {
+      boundary: boundary === 'clipping-ancestors' ? 'clippingAncestors' : boundary,
+      padding: collisionPadding()
+    };
+  });
+
+  // Using a ref assumes that the arrow element is always present in the DOM for the lifetime of the
+  // popup. If this assumption ends up being false, we can switch to state to manage the arrow's
+  // presence.
+  const [arrowRef, setArrowRef] = (0, _solidJs.createSignal)(null);
+  const shiftDisabled = () => collisionAvoidanceAlign() === 'none' && collisionAvoidanceSide() !== 'shift';
+  const crossAxisShiftEnabled = () => !shiftDisabled() && (sticky() || shiftCrossAxis() || collisionAvoidanceSide() === 'shift');
+  const offsetMiddleware = (0, _solidJs.createMemo)(() => {
+    const sideOffsetRef = sideOffset();
+    const alignOffsetRef = alignOffset();
+    return (0, _index.offset)(state => {
+      const data = getOffsetData(state, sideParam(), isRtl());
+      const sideAxis = typeof sideOffsetRef === 'function' ? sideOffsetRef(data) : sideOffsetRef;
+      const alignAxis = typeof alignOffsetRef === 'function' ? alignOffsetRef(data) : alignOffsetRef;
+      return {
+        mainAxis: sideAxis,
+        crossAxis: alignAxis,
+        alignmentAxis: alignAxis
+      };
+    });
+  });
+  const flipMiddleware = (0, _solidJs.createMemo)(() => {
+    return collisionAvoidanceSide() === 'none' ? null : (0, _index.flip)({
+      ...commonCollisionProps(),
+      mainAxis: !shiftCrossAxis() && collisionAvoidanceSide() === 'flip',
+      crossAxis: collisionAvoidanceAlign() === 'flip' ? 'alignment' : false,
+      fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide()
+    });
+  });
+  const shiftMiddleware = (0, _solidJs.createMemo)(() => {
+    const arrowRefValue = arrowRef();
+    return shiftDisabled() ? null : (0, _index.shift)(
+    // eslint-disable-next-line solid/reactivity
+    data => {
+      const html = (0, _owner.ownerDocument)(data.elements.floating).documentElement;
+      return {
+        ...commonCollisionProps(),
+        // Use the Layout Viewport to avoid shifting around when pinch-zooming
+        // for context menus.
+        rootBoundary: shiftCrossAxis() ? {
+          x: 0,
+          y: 0,
+          width: html.clientWidth,
+          height: html.clientHeight
+        } : undefined,
+        mainAxis: collisionAvoidanceAlign() !== 'none',
+        crossAxis: crossAxisShiftEnabled(),
+        limiter: sticky() || shiftCrossAxis() ? undefined : (0, _index.limitShift)(() => {
+          if (!arrowRefValue) {
+            return {};
+          }
+          const {
+            height
+          } = arrowRefValue.getBoundingClientRect();
+          const padding = collisionPadding();
+          return {
+            offset: height / 2 + (typeof padding === 'number' ? padding : 0)
+          };
+        })
+      };
+    });
+  });
+  const sizeMiddleware = (0, _solidJs.createMemo)(() => {
+    return (0, _index.size)({
+      ...commonCollisionProps(),
+      apply({
+        elements: {
+          floating
+        },
+        rects: {
+          reference
+        },
+        availableWidth,
+        availableHeight
+      }) {
+        Object.entries({
+          '--available-width': `${availableWidth}px`,
+          '--available-height': `${availableHeight}px`,
+          '--anchor-width': `${reference.width}px`,
+          '--anchor-height': `${reference.height}px`
+        }).forEach(([key, value]) => {
+          floating.style.setProperty(key, value);
+        });
+      }
+    });
+  });
+  const arrowMiddleware = (0, _solidJs.createMemo)(() => {
+    const arrowRefValue = arrowRef();
+    return (0, _index.arrow)(() => ({
+      // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
+      // we'll create a fake element.
+      element: arrowRefValue || document.createElement('div'),
+      padding: arrowPadding()
+    }));
+  });
+  const transformOriginMiddleware = (0, _solidJs.createMemo)(() => {
+    return {
+      name: 'transformOrigin',
+      fn(state) {
+        const {
+          elements,
+          middlewareData,
+          placement: renderedPlacement,
+          rects,
+          y
+        } = state;
+        const currentRenderedSide = (0, _utils.getSide)(renderedPlacement);
+        const currentRenderedAxis = (0, _utils.getSideAxis)(currentRenderedSide);
+        const arrowX = middlewareData.arrow?.x || 0;
+        const arrowY = middlewareData.arrow?.y || 0;
+        const arrowWidth = arrowRef()?.clientWidth || 0;
+        const arrowHeight = arrowRef()?.clientHeight || 0;
+        const transformX = arrowX + arrowWidth / 2;
+        const transformY = arrowY + arrowHeight / 2;
+        const shiftY = Math.abs(middlewareData.shift?.y || 0);
+        const halfAnchorHeight = rects.reference.height / 2;
+        const sideOffsetValue = sideOffset();
+        const isOverlappingAnchor = shiftY > (typeof sideOffsetValue === 'function' ? sideOffsetValue(getOffsetData(state, sideParam(), isRtl())) : sideOffsetValue);
+        const adjacentTransformOrigin = {
+          top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+          bottom: `${transformX}px ${-sideOffsetValue}px`,
+          left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+          right: `${-sideOffsetValue}px ${transformY}px`
+        }[currentRenderedSide];
+        const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+        elements.floating.style.setProperty('--transform-origin', crossAxisShiftEnabled() && currentRenderedAxis === 'y' && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin);
+        return {};
+      }
+    };
+  });
+  const middleware = (0, _solidJs.createMemo)(() => {
+    const middlewareArray = [offsetMiddleware()];
+
+    // https://floating-ui.com/docs/flip#combining-with-shift
+    if (collisionAvoidanceSide() === 'shift' || collisionAvoidanceAlign() === 'shift' || align() === 'center') {
+      middlewareArray.push(shiftMiddleware(), flipMiddleware());
+    } else {
+      middlewareArray.push(flipMiddleware(), shiftMiddleware());
+    }
+    middlewareArray.push(sizeMiddleware(), arrowMiddleware(), (0, _index.hide)(), transformOriginMiddleware(), adaptiveOrigin());
+    return middlewareArray;
+  });
+  const autoUpdateOptions = (0, _solidJs.createMemo)(() => ({
+    elementResize: trackAnchor() && typeof ResizeObserver !== 'undefined',
+    layoutShift: trackAnchor() && typeof IntersectionObserver !== 'undefined'
+  }));
+  const {
+    refs,
+    elements,
+    x,
+    y,
+    middlewareData,
+    update,
+    placement: renderedPlacement,
+    context,
+    isPositioned,
+    floatingStyles: originalFloatingStyles
+  } = (0, _index.useFloating)({
+    get rootContext() {
+      return params.floatingRootContext;
+    },
+    placement,
+    middleware,
+    strategy: positionMethod,
+    whileElementsMounted: {
+      enabled: () => !keepMounted(),
+      fn: (...args) => (0, _index.autoUpdate)(...args, autoUpdateOptions())
+    },
+    nodeId
+  });
+  const floatingStyles = (0, _solidJs.createMemo)(() => {
+    const {
+      sideX,
+      sideY
+    } = middlewareData().adaptiveOrigin || {};
+    return adaptiveOrigin() ? {
+      position: positionMethod(),
+      [sideX]: `${x()}px`,
+      [sideY]: `${y()}px`
+    } : originalFloatingStyles();
+  });
+  let registeredPositionReferenceRef = null;
+  (0, _solidJs.createEffect)(() => {
+    if (!mounted()) {
+      return;
+    }
+    const anchorValue = anchor();
+    const resolvedAnchor = typeof anchorValue === 'function' ? anchorValue() : anchorValue;
+    const finalAnchor = resolvedAnchor || null;
+    if (finalAnchor !== registeredPositionReferenceRef) {
+      refs.setPositionReference(finalAnchor);
+      registeredPositionReferenceRef = finalAnchor;
+    }
+  });
+  (0, _solidJs.createEffect)(() => {
+    if (!mounted()) {
+      return;
+    }
+
+    // Refs from parent components are set after useLayoutEffect runs and are available in useEffect.
+    // Therefore, if the anchor is a ref, we need to update the position reference in useEffect.
+    const resolvedAnchor = (0, _solidHelpers.access)(anchor);
+    if (typeof resolvedAnchor === 'function') {
+      return;
+    }
+    if (resolvedAnchor !== registeredPositionReferenceRef) {
+      refs.setPositionReference(resolvedAnchor || null);
+      registeredPositionReferenceRef = resolvedAnchor || null;
+    }
+  });
+  (0, _solidJs.createEffect)(() => {
+    const domReference = elements.domReference();
+    const floating = elements.floating();
+    if (keepMounted() && mounted() && domReference && floating) {
+      const cleanup = (0, _index.autoUpdate)(domReference, floating, update, autoUpdateOptions());
+      (0, _solidJs.onCleanup)(cleanup);
+    }
+  });
+  const renderedSide = () => (0, _utils.getSide)(renderedPlacement());
+  const logicalRenderedSide = () => getLogicalSide(sideParam(), renderedSide(), isRtl());
+  const renderedAlign = () => (0, _utils.getAlignment)(renderedPlacement()) || 'center';
+  const anchorHidden = () => Boolean(middlewareData().hide?.referenceHidden);
+  const arrowStyles = (0, _solidJs.createMemo)(() => ({
+    position: 'absolute',
+    top: middlewareData().arrow?.y === undefined ? undefined : `${middlewareData().arrow?.y || 0}px`,
+    left: middlewareData().arrow?.x === undefined ? undefined : `${middlewareData().arrow?.x || 0}px`
+  }));
+  const arrowUncentered = () => middlewareData().arrow?.centerOffset !== 0;
+  return {
+    positionerStyles: floatingStyles,
+    arrowStyles,
+    arrowUncentered,
+    side: logicalRenderedSide,
+    align: renderedAlign,
+    anchorHidden,
+    refs: {
+      ...refs,
+      arrowRef,
+      setArrowRef
+    },
+    context,
+    isPositioned,
+    update
+  };
+}

package/cjs/utils/useAnimationFrame.d.ts

@@ -0,0 +1,18 @@
+type AnimationFrameId = number;
+export declare class AnimationFrame {
+  static create(): AnimationFrame;
+  static request(fn: FrameRequestCallback): number;
+  static cancel(id: AnimationFrameId): void;
+  currentId: AnimationFrameId | null;
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  request(fn: Function): void;
+  cancel: () => void;
+  disposeEffect: () => void;
+}
+/**
+ * A `requestAnimationFrame` with automatic cleanup and guard.
+ */
+export declare function useAnimationFrame(): AnimationFrame;
+export {};

package/cjs/utils/useAnimationFrame.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimationFrame = void 0;
+exports.useAnimationFrame = useAnimationFrame;
+var _solidJs = require("solid-js");
+/** Unlike `setTimeout`, rAF doesn't guarantee a positive integer return value, so we can't have
+ * a monomorphic `uint` type with `0` meaning empty.
+ * See warning note at:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#return_value */
+const EMPTY = null;
+let LAST_RAF = globalThis.requestAnimationFrame;
+class Scheduler {
+  /* This implementation uses an array as a backing data-structure for frame callbacks.
+   * It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
+   * never calls the native `cancelAnimationFrame` if there are no frames left. This can
+   * be much more efficient if there is a call pattern that alterns as
+   * "request-cancel-request-cancel-…".
+   * But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
+   * frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
+
+  callbacks = [];
+  callbacksCount = 0;
+  nextId = 1;
+  startId = 1;
+  isScheduled = false;
+  tick = timestamp => {
+    this.isScheduled = false;
+    const currentCallbacks = this.callbacks;
+    const currentCallbacksCount = this.callbacksCount;
+
+    // Update these before iterating, callbacks could call `requestAnimationFrame` again.
+    this.callbacks = [];
+    this.callbacksCount = 0;
+    this.startId = this.nextId;
+    if (currentCallbacksCount > 0) {
+      for (let i = 0; i < currentCallbacks.length; i += 1) {
+        currentCallbacks[i]?.(timestamp);
+      }
+    }
+  };
+  request(fn) {
+    const id = this.nextId;
+    this.nextId += 1;
+    this.callbacks.push(fn);
+    this.callbacksCount += 1;
+
+    /* In a test environment with fake timers, a fake `requestAnimationFrame` can be called
+     * but there's no guarantee that the animation frame will actually run before the fake
+     * timers are teared, which leaves `isScheduled` set, but won't run our `tick()`. */
+    const didRAFChange = process.env.NODE_ENV === 'test' && LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
+    if (!this.isScheduled || didRAFChange) {
+      requestAnimationFrame(t => this.tick(t));
+      this.isScheduled = true;
+    }
+    return id;
+  }
+  cancel(id) {
+    const index = id - this.startId;
+    if (index < 0 || index >= this.callbacks.length) {
+      return;
+    }
+    this.callbacks[index] = null;
+    this.callbacksCount -= 1;
+  }
+}
+const scheduler = new Scheduler();
+class AnimationFrame {
+  static create() {
+    return new AnimationFrame();
+  }
+  static request(fn) {
+    return scheduler.request(fn);
+  }
+  static cancel(id) {
+    return scheduler.cancel(id);
+  }
+  currentId = EMPTY;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  request(fn) {
+    this.cancel();
+    this.currentId = scheduler.request(() => {
+      this.currentId = EMPTY;
+      fn();
+    });
+  }
+  cancel = () => {
+    if (this.currentId !== EMPTY) {
+      scheduler.cancel(this.currentId);
+      this.currentId = EMPTY;
+    }
+  };
+  disposeEffect = () => {
+    this.cancel();
+  };
+}
+
+/**
+ * A `requestAnimationFrame` with automatic cleanup and guard.
+ */
+exports.AnimationFrame = AnimationFrame;
+function useAnimationFrame() {
+  const timeout = AnimationFrame.create();
+  (0, _solidJs.onCleanup)(() => {
+    timeout.disposeEffect();
+  });
+  return timeout;
+}

package/cjs/utils/useAnimationsFinished.d.ts

@@ -0,0 +1,17 @@
+import { type MaybeAccessor } from "../solid-helpers.js";
+/**
+ * Executes a function once all animations have finished on the provided element.
+ * @param ref - The element to watch for animations.
+ * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ */
+export declare function useAnimationsFinished<T extends HTMLElement>(ref: MaybeAccessor<T | null | undefined>, waitForNextTick?: MaybeAccessor<boolean | undefined>): (
+/**
+ * A function to execute once all animations have finished.
+ */
+fnToExecute: () => void,
+/**
+ * An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that
+ * can be used to abort `fnToExecute` before all the animations have finished.
+ * @default null
+ */
+signal?: AbortSignal | null) => void;

package/cjs/utils/useAnimationsFinished.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimationsFinished = useAnimationsFinished;
+var _solidHelpers = require("../solid-helpers");
+var _useAnimationFrame = require("./useAnimationFrame");
+var _useTimeout = require("./useTimeout");
+/**
+ * Executes a function once all animations have finished on the provided element.
+ * @param ref - The element to watch for animations.
+ * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ */
+function useAnimationsFinished(ref,
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+waitForNextTick) {
+  const frame = (0, _useAnimationFrame.useAnimationFrame)();
+  const timeout = (0, _useTimeout.useTimeout)();
+  return (fnToExecute,
+  /**
+   * An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that
+   * can be used to abort `fnToExecute` before all the animations have finished.
+   * @default null
+   */
+  signal = null) => {
+    frame.cancel();
+    timeout.clear();
+    const element = (0, _solidHelpers.access)(ref);
+    if (!element) {
+      return;
+    }
+    if (typeof element.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
+      fnToExecute();
+    } else {
+      frame.request(() => {
+        function exec() {
+          if (!element) {
+            return;
+          }
+          Promise.allSettled(element.getAnimations().map(anim => anim.finished)).then(() => {
+            if (signal != null && signal.aborted) {
+              return;
+            }
+            // Synchronously flush the unmounting of the component so that the browser doesn't
+            // paint: https://github.com/mui/base-ui/issues/979
+            fnToExecute();
+          });
+        }
+
+        // Wait for the next tick to ensure the DOM has been painted and animations have started
+        timeout.start(0, exec);
+      });
+    }
+  };
+}

package/cjs/utils/useBaseUiId.d.ts

@@ -0,0 +1,8 @@
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from "../solid-helpers.js";
+/**
+ * Wraps `useId` and prefixes generated `id`s with `base-ui-`
+ * @param {string | undefined} idOverride overrides the generated id when provided
+ * @returns {string | undefined}
+ */
+export declare function useBaseUiId(idOverride?: MaybeAccessor<string | undefined>): Accessor<string | undefined>;

package/cjs/utils/useBaseUiId.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBaseUiId = useBaseUiId;
+var _useId = require("./useId");
+/**
+ * Wraps `useId` and prefixes generated `id`s with `base-ui-`
+ * @param {string | undefined} idOverride overrides the generated id when provided
+ * @returns {string | undefined}
+ */
+function useBaseUiId(idOverride) {
+  const id = (0, _useId.useId)(idOverride, 'base-ui');
+  return id;
+}

package/cjs/utils/useControlled.d.ts

@@ -0,0 +1,20 @@
+import { type Accessor, type Signal } from 'solid-js';
+export interface UseControlledProps<T = unknown> {
+  /**
+   * Holds the component value when it's controlled.
+   */
+  controlled: Accessor<T | undefined>;
+  /**
+   * The default value when uncontrolled.
+   */
+  default: Accessor<T | undefined>;
+  /**
+   * The component name displayed in warnings.
+   */
+  name: string;
+  /**
+   * The name of the state variable displayed in warnings.
+   */
+  state?: string;
+}
+export declare function useControlled<T = unknown>(props: UseControlledProps<T>): Signal<T>;

package/cjs/utils/useControlled.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useControlled = useControlled;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../solid-helpers");
+// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- process.env never changes, dependency arrays are intentionally ignored
+
+function useControlled(props) {
+  const controlledProp = (0, _solidJs.createMemo)(() => (0, _solidHelpers.access)(props.controlled));
+  const defaultProp = (0, _solidJs.createMemo)(() => (0, _solidHelpers.access)(props.default));
+
+  // eslint-disable-next-line solid/reactivity
+  const isControlled = controlledProp() !== undefined;
+  // eslint-disable-next-line solid/reactivity
+  const [valueState, setValue] = (0, _solidJs.createSignal)(defaultProp());
+  const value = (0, _solidJs.createMemo)(() => isControlled ? controlledProp() : valueState());
+  const state = (0, _solidJs.createMemo)(() => props.state ?? 'value');
+  if (process.env.NODE_ENV !== 'production') {
+    (0, _solidJs.createEffect)(() => {
+      if (isControlled !== (controlledProp() !== undefined)) {
+        console.error([`Base UI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state()} state of ${props.name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${props.name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+      }
+    });
+
+    // eslint-disable-next-line solid/reactivity
+    const defaultValue = defaultProp();
+    (0, _solidJs.createEffect)(() => {
+      // Object.is() is not equivalent to the === operator.
+      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
+      if (!isControlled && !Object.is(defaultValue, defaultProp())) {
+        console.error([`Base UI: A component is changing the default ${state()} state of an uncontrolled ${props.name} after being initialized. ` + `To suppress this warning opt to use a controlled ${props.name}.`].join('\n'));
+      }
+    });
+  }
+  function setValueIfUncontrolled(...args) {
+    if (!isControlled) {
+      setValue(...args);
+    }
+  }
+  return [value, setValueIfUncontrolled];
+}

package/cjs/utils/useEnhancedClickHandler.d.ts

@@ -0,0 +1,12 @@
+export type InteractionType = 'mouse' | 'touch' | 'pen' | 'keyboard' | '';
+/**
+ * Provides a cross-browser way to determine the type of the pointer used to click.
+ * Safari and Firefox do not provide the PointerEvent to the click handler (they use MouseEvent) yet.
+ * Additionally, this implementation detects if the click was triggered by the keyboard.
+ *
+ * @param handler The function to be called when the button is clicked. The first parameter is the original event and the second parameter is the pointer type.
+ */
+export declare function useEnhancedClickHandler(handler: (event: MouseEvent | PointerEvent, interactionType: InteractionType) => void): {
+  onClick: (event: MouseEvent | PointerEvent) => void;
+  onPointerDown: (event: PointerEvent) => void;
+};

package/cjs/utils/useEnhancedClickHandler.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEnhancedClickHandler = useEnhancedClickHandler;
+/**
+ * Provides a cross-browser way to determine the type of the pointer used to click.
+ * Safari and Firefox do not provide the PointerEvent to the click handler (they use MouseEvent) yet.
+ * Additionally, this implementation detects if the click was triggered by the keyboard.
+ *
+ * @param handler The function to be called when the button is clicked. The first parameter is the original event and the second parameter is the pointer type.
+ */
+function useEnhancedClickHandler(handler) {
+  let lastClickInteractionTypeRef = '';
+  const handlePointerDown = event => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    lastClickInteractionTypeRef = event.pointerType;
+  };
+  const handleClick = event => {
+    // event.detail has the number of clicks performed on the element. 0 means it was triggered by the keyboard.
+    if (event.detail === 0) {
+      handler(event, 'keyboard');
+      return;
+    }
+    if ('pointerType' in event) {
+      // Chrome and Edge correctly use PointerEvent
+      handler(event, event.pointerType);
+    }
+    handler(event, lastClickInteractionTypeRef);
+    lastClickInteractionTypeRef = '';
+  };
+  return {
+    onClick: handleClick,
+    onPointerDown: handlePointerDown
+  };
+}