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

package/cjs/utils/popupStateMapping.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.triggerOpenStateMapping = exports.pressableTriggerOpenStateMapping = exports.popupStateMapping = exports.CommonTriggerDataAttributes = exports.CommonPopupDataAttributes = void 0;
+var _solidHelpers = require("../solid-helpers");
+var _styleHookMapping = require("./styleHookMapping");
+let CommonPopupDataAttributes = exports.CommonPopupDataAttributes = function (CommonPopupDataAttributes) {
+  /**
+   * Present when the popup is open.
+   */
+  CommonPopupDataAttributes["open"] = "data-open";
+  /**
+   * Present when the popup is closed.
+   */
+  CommonPopupDataAttributes["closed"] = "data-closed";
+  /**
+   * Present when the popup is animating in.
+   */
+  CommonPopupDataAttributes[CommonPopupDataAttributes["startingStyle"] = _styleHookMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the popup is animating out.
+   */
+  CommonPopupDataAttributes[CommonPopupDataAttributes["endingStyle"] = _styleHookMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the anchor is hidden.
+   */
+  CommonPopupDataAttributes["anchorHidden"] = "data-anchor-hidden";
+  return CommonPopupDataAttributes;
+}({});
+let CommonTriggerDataAttributes = exports.CommonTriggerDataAttributes = /*#__PURE__*/function (CommonTriggerDataAttributes) {
+  /**
+   * Present when the popup is open.
+   */
+  CommonTriggerDataAttributes["popupOpen"] = "data-popup-open";
+  /**
+   * Present when a pressable trigger is pressed.
+   */
+  CommonTriggerDataAttributes["pressed"] = "data-pressed";
+  return CommonTriggerDataAttributes;
+}({});
+const TRIGGER_HOOK = {
+  [CommonTriggerDataAttributes.popupOpen]: ''
+};
+const PRESSABLE_TRIGGER_HOOK = {
+  [CommonTriggerDataAttributes.popupOpen]: '',
+  [CommonTriggerDataAttributes.pressed]: ''
+};
+const POPUP_OPEN_HOOK = {
+  [CommonPopupDataAttributes.open]: ''
+};
+const POPUP_CLOSED_HOOK = {
+  [CommonPopupDataAttributes.closed]: ''
+};
+const ANCHOR_HIDDEN_HOOK = {
+  [CommonPopupDataAttributes.anchorHidden]: ''
+};
+const triggerOpenStateMapping = exports.triggerOpenStateMapping = {
+  open(value) {
+    if ((0, _solidHelpers.access)(value)) {
+      return TRIGGER_HOOK;
+    }
+    return null;
+  }
+};
+const pressableTriggerOpenStateMapping = exports.pressableTriggerOpenStateMapping = {
+  open(value) {
+    if ((0, _solidHelpers.access)(value)) {
+      return PRESSABLE_TRIGGER_HOOK;
+    }
+    return null;
+  }
+};
+const popupStateMapping = exports.popupStateMapping = {
+  open(value) {
+    if ((0, _solidHelpers.access)(value)) {
+      return POPUP_OPEN_HOOK;
+    }
+    return POPUP_CLOSED_HOOK;
+  },
+  anchorHidden(value) {
+    if ((0, _solidHelpers.access)(value)) {
+      return ANCHOR_HIDDEN_HOOK;
+    }
+    return null;
+  }
+};

package/cjs/utils/resolveClassName.d.ts

@@ -0,0 +1,8 @@
+/**
+ * If the provided className is a string, it will be returned as is.
+ * Otherwise, the function will call the className function with the state as the first argument.
+ *
+ * @param className
+ * @param state
+ */
+export declare function resolveClassName<State>(className: string | ((state: State) => string) | undefined, state: State | undefined): string | undefined;

package/cjs/utils/resolveClassName.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveClassName = resolveClassName;
+/**
+ * If the provided className is a string, it will be returned as is.
+ * Otherwise, the function will call the className function with the state as the first argument.
+ *
+ * @param className
+ * @param state
+ */
+function resolveClassName(className, state) {
+  return typeof className === 'function' ? className(state ?? {}) : className;
+}

package/cjs/utils/styleHookMapping.d.ts

@@ -0,0 +1,15 @@
+import { type MaybeAccessor } from "../solid-helpers.js";
+import type { TransitionStatus } from "./useTransitionStatus.js";
+export declare enum TransitionStatusDataAttributes {
+  /**
+   * Present when the component is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the component is animating out.
+   */
+  endingStyle = "data-ending-style",
+}
+export declare const transitionStatusMapping: {
+  transitionStatus(value: MaybeAccessor<TransitionStatus>): Record<string, string> | null;
+};

package/cjs/utils/styleHookMapping.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transitionStatusMapping = exports.TransitionStatusDataAttributes = void 0;
+var _solidHelpers = require("../solid-helpers");
+let TransitionStatusDataAttributes = exports.TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionStatusDataAttributes) {
+  /**
+   * Present when the component is animating in.
+   */
+  TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
+  /**
+   * Present when the component is animating out.
+   */
+  TransitionStatusDataAttributes["endingStyle"] = "data-ending-style";
+  return TransitionStatusDataAttributes;
+}({});
+const STARTING_HOOK = {
+  [TransitionStatusDataAttributes.startingStyle]: ''
+};
+const ENDING_HOOK = {
+  [TransitionStatusDataAttributes.endingStyle]: ''
+};
+const transitionStatusMapping = exports.transitionStatusMapping = {
+  transitionStatus(value) {
+    if ((0, _solidHelpers.access)(value) === 'starting') {
+      return STARTING_HOOK;
+    }
+    if ((0, _solidHelpers.access)(value) === 'ending') {
+      return ENDING_HOOK;
+    }
+    return null;
+  }
+};

package/cjs/utils/styles.d.ts

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

package/cjs/utils/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleDisableScrollbar = exports.STYLE_TAG_ID = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+const STYLE_TAG_ID = exports.STYLE_TAG_ID = 'disable-scrollbar';
+const styleDisableScrollbar = exports.styleDisableScrollbar = {
+  class: 'base-ui-disable-scrollbar',
+  element: /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+    id: STYLE_TAG_ID,
+    children: `.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}`
+  })
+};

package/cjs/utils/translateOpenChangeReason.d.ts

@@ -0,0 +1,3 @@
+import type { OpenChangeReason as FloatingUIOpenChangeReason } from "../floating-ui-solid/index.js";
+export type BaseOpenChangeReason = 'trigger-press' | 'trigger-hover' | 'trigger-focus' | 'focus-out' | 'escape-key' | 'outside-press' | 'list-navigation' | 'item-press' | 'cancel-open';
+export declare function translateOpenChangeReason(nativeReason?: FloatingUIOpenChangeReason): BaseOpenChangeReason | undefined;

package/cjs/utils/translateOpenChangeReason.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translateOpenChangeReason = translateOpenChangeReason;
+function translateOpenChangeReason(nativeReason) {
+  if (!nativeReason) {
+    return undefined;
+  }
+  return {
+    // Identical mappings
+    'focus-out': 'focus-out',
+    'escape-key': 'escape-key',
+    'outside-press': 'outside-press',
+    'list-navigation': 'list-navigation',
+    // New mappings
+    click: 'trigger-press',
+    hover: 'trigger-hover',
+    focus: 'trigger-focus',
+    'reference-press': 'trigger-press',
+    'safe-polygon': 'trigger-hover',
+    'ancestor-scroll': undefined // Not supported
+  }[nativeReason];
+}

package/cjs/utils/types.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentProps, JSX, ValidComponent } from 'solid-js';
+import type { DynamicProps } from 'solid-js/web';
+export type HTMLProps<T = any> = JSX.HTMLAttributes<T>;
+export type BaseUIHTMLProps<T = any> = WithBaseUIEvent<JSX.HTMLAttributes<T>>;
+export type BaseUIEvent<E extends Event> = E & {
+  preventBaseUIHandler: () => void;
+  readonly baseUIHandlerPrevented?: boolean;
+};
+type WithPreventBaseUIHandler<T, K extends keyof T> = T[K] extends JSX.EventHandlerUnion<infer TT, infer E> | undefined ? JSX.EventHandlerUnion<TT, BaseUIEvent<E>> : T[K] extends JSX.EventHandlerWithOptionsUnion<infer TT, infer E> | undefined ? JSX.EventHandlerWithOptionsUnion<TT, BaseUIEvent<E>> : T[K] extends JSX.EventHandler<infer TT, infer E> | undefined ? JSX.EventHandler<TT, BaseUIEvent<E>> : T[K];
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+export type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T, K> };
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+export type ComponentRenderFn<Props, State> = (props: Props, state: State) => JSX.Element;
+/**
+ * Props shared by all Base UI components.
+ * Contains `class` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ *
+ * TODO: Removing usage of Omit sped up tsserver, presumably because it doesn't need to iterate each property of the DOM element
+ */
+export type BaseUIComponentProps<ElementType extends keyof JSX.IntrinsicElements | undefined, State, RenderFnElement extends ValidComponent = ValidComponent> = WithBaseUIEvent<ElementType extends keyof JSX.IntrinsicElements ? ComponentProps<ElementType> : JSX.HTMLAttributes<any>> & {
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  class?: string | ((state: State) => string);
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render?: keyof JSX.IntrinsicElements | DynamicProps<RenderFnElement> | ComponentRenderFn<JSX.HTMLAttributes<any>, State> | null;
+};
+/**
+ * Simplifies the display of a type (without modifying it).
+ * Taken from https://effectivetypescript.com/2022/02/25/gentips-4-display/
+ */
+export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
+export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+export type Orientation = 'horizontal' | 'vertical';
+export {};

package/cjs/utils/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/utils/useAnchorPositioning.d.ts

@@ -0,0 +1,163 @@
+import { type Rect } from '@floating-ui/utils';
+import { type Accessor, type JSX, type Setter } from 'solid-js';
+import { useFloating, type FloatingContext, type FloatingRootContext, type Middleware, type Padding, type VirtualElement } from "../floating-ui-solid/index.js";
+import { type MaybeAccessor } from "../solid-helpers.js";
+export type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
+export type Align = 'start' | 'center' | 'end';
+export type Boundary = 'clipping-ancestors' | Element | Element[] | Rect;
+export type OffsetFunction = (data: {
+  side: Side;
+  align: Align;
+  anchor: {
+    width: number;
+    height: number;
+  };
+  positioner: {
+    width: number;
+    height: number;
+  };
+}) => number;
+interface SideFlipMode {
+  /**
+   * How to avoid collisions on the side axis.
+   */
+  side?: 'flip' | 'none';
+  /**
+   * How to avoid collisions on the align axis.
+   */
+  align?: 'flip' | 'shift' | 'none';
+  /**
+   * If both sides on the preferred axis do not fit, determines whether to fallback
+   * to a side on the perpendicular axis and which logical side to prefer.
+   */
+  fallbackAxisSide?: 'start' | 'end' | 'none';
+}
+interface SideShiftMode {
+  /**
+   * How to avoid collisions on the side axis.
+   */
+  side?: 'shift' | 'none';
+  /**
+   * How to avoid collisions on the align axis.
+   */
+  align?: 'shift' | 'none';
+  /**
+   * If both sides on the preferred axis do not fit, determines whether to fallback
+   * to a side on the perpendicular axis and which logical side to prefer.
+   */
+  fallbackAxisSide?: 'start' | 'end' | 'none';
+}
+export type CollisionAvoidance = SideFlipMode | SideShiftMode;
+/**
+ * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
+ * `useFloating` hook.
+ */
+export declare function useAnchorPositioning(params: useAnchorPositioning.Parameters): useAnchorPositioning.ReturnValue;
+export declare namespace useAnchorPositioning {
+  interface SharedParameters {
+    /**
+     * An element to position the popup against.
+     * By default, the popup will be positioned against the trigger.
+     */
+    anchor?: MaybeAccessor<Element | null | VirtualElement | (() => Element | VirtualElement | null) | undefined>;
+    /**
+     * Determines which CSS `position` property to use.
+     * @default 'absolute'
+     */
+    positionMethod?: MaybeAccessor<'absolute' | 'fixed' | undefined>;
+    /**
+     * Which side of the anchor element to align the popup against.
+     * May automatically change to avoid collisions.
+     * @default 'bottom'
+     */
+    side?: MaybeAccessor<Side | undefined>;
+    /**
+     * Distance between the anchor and the popup in pixels.
+     * Also accepts a function that returns the distance to read the dimensions of the anchor
+     * and positioner elements, along with its side and alignment.
+     *
+     * - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
+     * - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
+     * - `data.side`: which side of the anchor element the positioner is aligned against.
+     * - `data.align`: how the positioner is aligned relative to the specified side.
+     * @default 0
+     */
+    sideOffset?: MaybeAccessor<number | OffsetFunction | undefined>;
+    /**
+     * How to align the popup relative to the specified side.
+     * @default 'center'
+     */
+    align?: MaybeAccessor<'start' | 'end' | 'center' | undefined>;
+    /**
+     * Additional offset along the alignment axis in pixels.
+     * Also accepts a function that returns the offset to read the dimensions of the anchor
+     * and positioner elements, along with its side and alignment.
+     *
+     * - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
+     * - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
+     * - `data.side`: which side of the anchor element the positioner is aligned against.
+     * - `data.align`: how the positioner is aligned relative to the specified side.
+     * @default 0
+     */
+    alignOffset?: MaybeAccessor<number | OffsetFunction | undefined>;
+    /**
+     * An element or a rectangle that delimits the area that the popup is confined to.
+     * @default 'clipping-ancestors'
+     */
+    collisionBoundary?: MaybeAccessor<Boundary | undefined>;
+    /**
+     * Additional space to maintain from the edge of the collision boundary.
+     * @default 5
+     */
+    collisionPadding?: MaybeAccessor<Padding | undefined>;
+    /**
+     * Whether to maintain the popup in the viewport after
+     * the anchor element was scrolled out of view.
+     * @default false
+     */
+    sticky?: MaybeAccessor<boolean | undefined>;
+    /**
+     * Minimum distance to maintain between the arrow and the edges of the popup.
+     *
+     * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
+     * @default 5
+     */
+    arrowPadding?: MaybeAccessor<number | undefined>;
+    /**
+     * Whether the popup tracks any layout shift of its positioning anchor.
+     * @default true
+     */
+    trackAnchor?: MaybeAccessor<boolean | undefined>;
+    /**
+     * Determines how to handle collisions when positioning the popup.
+     */
+    collisionAvoidance?: MaybeAccessor<CollisionAvoidance | undefined>;
+  }
+  interface Parameters extends SharedParameters {
+    keepMounted?: MaybeAccessor<boolean | undefined>;
+    trackCursorAxis?: MaybeAccessor<'none' | 'x' | 'y' | 'both' | undefined>;
+    floatingRootContext?: FloatingRootContext;
+    mounted: MaybeAccessor<boolean>;
+    trackAnchor: MaybeAccessor<boolean>;
+    nodeId?: MaybeAccessor<string | undefined>;
+    adaptiveOrigin?: MaybeAccessor<Middleware | undefined>;
+    collisionAvoidance: MaybeAccessor<CollisionAvoidance>;
+    shiftCrossAxis?: MaybeAccessor<boolean | undefined>;
+  }
+  interface ReturnValue {
+    positionerStyles: Accessor<JSX.CSSProperties>;
+    arrowStyles: Accessor<JSX.CSSProperties>;
+    arrowUncentered: Accessor<boolean>;
+    side: Accessor<Side>;
+    align: Accessor<Align>;
+    anchorHidden: Accessor<boolean>;
+    refs: ReturnType<typeof useFloating>['refs'] & {
+      arrowRef: Accessor<Element | null | undefined>;
+      setArrowRef: Setter<Element | null | undefined>;
+    };
+    context: FloatingContext;
+    isPositioned: Accessor<boolean>;
+    update: () => void;
+  }
+}
+export {};