@basic-ui/core 0.0.52 → 0.0.53

package/src/Popper/Popper.tsx

@@ -1,154 +1,154 @@
-import type { HTMLAttributes, ElementType, RefObject, ReactNode } from 'react';
-import {
-  forwardRef,
-  useRef,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  memo,
-} from 'react';
-import type {
-  Placement,
-  Modifier,
-  PositioningStrategy,
-  Instance,
-  Rect,
-} from '@popperjs/core';
-import { createPopper } from '@popperjs/core';
-import type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';
-import type { ArrowModifier } from '@popperjs/core/lib/modifiers/arrow';
-
-import { assignMultipleRefs } from '../utils/assign-ref';
-import type { PopperContextProps } from './context';
-import { PopperProvider } from './context';
-import { Portal } from '../Portal';
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-export type OffsetsFunction = (arg0: {
-  popper: Rect;
-  reference: Rect;
-  placement: Placement;
-}) => [number | null | undefined, number | null | undefined];
-
-export interface PopperProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  anchorEl: RefObject<HTMLElement>;
-  children?: ReactNode;
-  placement?: Placement;
-  strategy?: PositioningStrategy;
-  modifiers?: Array<Partial<Modifier<any, any>>>;
-  usePortal?: boolean;
-  portalSelector?: string;
-  /**
-   * Displaces the popper along the reference element.
-   */
-  skidding?: number;
-  /**
-   * Displaces the popper away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference.
-   */
-  distance?: number;
-  /**
-   * An optional function that must return a pair of [skidding, padding]. Useful for doing things like, displace the popper by 100%.
-   */
-  offsetFn?: OffsetsFunction;
-  /**
-   * If you don't want the arrow to reach the very edge of the popper (this is common if your popper has rounded corners using border-radius), you can apply some padding to it.
-   */
-  arrowPadding?: number;
-}
-
-const emptyModifiers: Array<Partial<Modifier<any, any>>> = [];
-export const Popper = memo(
-  forwardRef<HTMLDivElement, PopperProps>(function Popper(
-    {
-      placement = 'bottom',
-      strategy = 'absolute',
-      as: Comp = 'div',
-      innerAs,
-      anchorEl,
-      children,
-      modifiers = emptyModifiers,
-      usePortal = false,
-      style = {},
-      portalSelector = 'body',
-      distance = 0,
-      skidding = 0,
-      arrowPadding = 5,
-      offsetFn,
-      ...props
-    },
-    forwardedRef
-  ) {
-    const arrowRef = useRef<HTMLSpanElement>(null);
-
-    const popperRef = useRef<HTMLDivElement | null>(null);
-    const popperEngineInstance = useRef<null | Instance>(null);
-
-    const defaultModifiers: Array<Partial<Modifier<any, any>>> = useMemo(() => {
-      const arrowModifier: Omit<ArrowModifier, 'enabled' | 'fn' | 'phase'> = {
-        name: 'arrow',
-        options: {
-          element: '[data-popper-arrow]',
-          padding: arrowPadding,
-        },
-      };
-      const offsetModifier: Omit<OffsetModifier, 'enabled' | 'fn' | 'phase'> = {
-        name: 'offset',
-        options: {
-          offset: offsetFn ?? [skidding, distance],
-        },
-      };
-
-      return [arrowModifier, offsetModifier];
-    }, [arrowPadding, distance, skidding, offsetFn]);
-
-    useEnhancedEffect(() => {
-      if (anchorEl && anchorEl.current && popperRef.current) {
-        popperEngineInstance.current = createPopper(
-          anchorEl.current,
-          popperRef.current,
-          {
-            placement,
-            strategy,
-            modifiers: [...defaultModifiers, ...modifiers],
-          }
-        );
-      }
-
-      return () => {
-        popperEngineInstance.current && popperEngineInstance.current.destroy();
-        popperEngineInstance.current = null;
-      };
-    }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);
-
-    useEnhancedEffect(() => {
-      popperEngineInstance.current?.forceUpdate();
-    }, [props.hidden || props['aria-hidden']]);
-
-    const contextValue: PopperContextProps = {
-      arrowRef,
-    };
-
-    const ret = (
-      <PopperProvider value={contextValue}>
-        <Comp
-          {...props}
-          as={innerAs}
-          ref={assignMultipleRefs(popperRef, forwardedRef)}
-          style={{ position: 'fixed', left: -5000, top: -5000, ...style }}
-        >
-          {children}
-        </Comp>
-      </PopperProvider>
-    );
-
-    if (usePortal) {
-      return <Portal selector={portalSelector}>{ret}</Portal>;
-    }
-
-    return ret;
-  })
-);
+import type { HTMLAttributes, ElementType, RefObject, ReactNode } from 'react';
+import {
+  forwardRef,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  memo,
+} from 'react';
+import type {
+  Placement,
+  Modifier,
+  PositioningStrategy,
+  Instance,
+  Rect,
+} from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
+import type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';
+import type { ArrowModifier } from '@popperjs/core/lib/modifiers/arrow';
+
+import { assignMultipleRefs } from '../utils/assign-ref';
+import type { PopperContextProps } from './context';
+import { PopperProvider } from './context';
+import { Portal } from '../Portal';
+
+const useEnhancedEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export type OffsetsFunction = (arg0: {
+  popper: Rect;
+  reference: Rect;
+  placement: Placement;
+}) => [number | null | undefined, number | null | undefined];
+
+export interface PopperProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  anchorEl: RefObject<HTMLElement>;
+  children?: ReactNode;
+  placement?: Placement;
+  strategy?: PositioningStrategy;
+  modifiers?: Array<Partial<Modifier<any, any>>>;
+  usePortal?: boolean;
+  portalSelector?: string;
+  /**
+   * Displaces the popper along the reference element.
+   */
+  skidding?: number;
+  /**
+   * Displaces the popper away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference.
+   */
+  distance?: number;
+  /**
+   * An optional function that must return a pair of [skidding, padding]. Useful for doing things like, displace the popper by 100%.
+   */
+  offsetFn?: OffsetsFunction;
+  /**
+   * If you don't want the arrow to reach the very edge of the popper (this is common if your popper has rounded corners using border-radius), you can apply some padding to it.
+   */
+  arrowPadding?: number;
+}
+
+const emptyModifiers: Array<Partial<Modifier<any, any>>> = [];
+export const Popper = memo(
+  forwardRef<HTMLDivElement, PopperProps>(function Popper(
+    {
+      placement = 'bottom',
+      strategy = 'absolute',
+      as: Comp = 'div',
+      innerAs,
+      anchorEl,
+      children,
+      modifiers = emptyModifiers,
+      usePortal = false,
+      style = {},
+      portalSelector = 'body',
+      distance = 0,
+      skidding = 0,
+      arrowPadding = 5,
+      offsetFn,
+      ...props
+    },
+    forwardedRef
+  ) {
+    const arrowRef = useRef<HTMLSpanElement>(null);
+
+    const popperRef = useRef<HTMLDivElement | null>(null);
+    const popperEngineInstance = useRef<null | Instance>(null);
+
+    const defaultModifiers: Array<Partial<Modifier<any, any>>> = useMemo(() => {
+      const arrowModifier: Omit<ArrowModifier, 'enabled' | 'fn' | 'phase'> = {
+        name: 'arrow',
+        options: {
+          element: '[data-popper-arrow]',
+          padding: arrowPadding,
+        },
+      };
+      const offsetModifier: Omit<OffsetModifier, 'enabled' | 'fn' | 'phase'> = {
+        name: 'offset',
+        options: {
+          offset: offsetFn ?? [skidding, distance],
+        },
+      };
+
+      return [arrowModifier, offsetModifier];
+    }, [arrowPadding, distance, skidding, offsetFn]);
+
+    useEnhancedEffect(() => {
+      if (anchorEl && anchorEl.current && popperRef.current) {
+        popperEngineInstance.current = createPopper(
+          anchorEl.current,
+          popperRef.current,
+          {
+            placement,
+            strategy,
+            modifiers: [...defaultModifiers, ...modifiers],
+          }
+        );
+      }
+
+      return () => {
+        popperEngineInstance.current && popperEngineInstance.current.destroy();
+        popperEngineInstance.current = null;
+      };
+    }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);
+
+    useEnhancedEffect(() => {
+      popperEngineInstance.current?.forceUpdate();
+    }, [props.hidden || props['aria-hidden']]);
+
+    const contextValue: PopperContextProps = {
+      arrowRef,
+    };
+
+    const ret = (
+      <PopperProvider value={contextValue}>
+        <Comp
+          {...props}
+          as={innerAs}
+          ref={assignMultipleRefs(popperRef, forwardedRef)}
+          style={{ position: 'fixed', left: -5000, top: -5000, ...style }}
+        >
+          {children}
+        </Comp>
+      </PopperProvider>
+    );
+
+    if (usePortal) {
+      return <Portal selector={portalSelector}>{ret}</Portal>;
+    }
+
+    return ret;
+  })
+);

package/src/Popper/PopperArrow.tsx

@@ -1,35 +1,35 @@
-import type { ElementType, HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import { usePopperContext } from './context';
-import { assignMultipleRefs } from '../utils/assign-ref';
-
-export interface PopperArrowProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-}
-
-export const PopperArrow = forwardRef<HTMLDivElement, PopperArrowProps>(
-  function PopperArrow({ as: Comp = 'div', ...props }, ref) {
-    const ctx = usePopperContext();
-
-    if (ctx === null) {
-      return null;
-    }
-
-    return (
-      <Comp
-        {...props}
-        ref={(node: HTMLDivElement | null) => {
-          if (node && ctx.arrowRef.current && ctx.arrowRef.current !== node) {
-            throw new Error(
-              'You can only render one <PopperArrow /> per <Popper> component'
-            );
-          }
-          assignMultipleRefs(ref, ctx.arrowRef)(node);
-        }}
-        data-popper-arrow=""
-      />
-    );
-  }
-);
+import type { ElementType, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import { usePopperContext } from './context';
+import { assignMultipleRefs } from '../utils/assign-ref';
+
+export interface PopperArrowProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+}
+
+export const PopperArrow = forwardRef<HTMLDivElement, PopperArrowProps>(
+  function PopperArrow({ as: Comp = 'div', ...props }, ref) {
+    const ctx = usePopperContext();
+
+    if (ctx === null) {
+      return null;
+    }
+
+    return (
+      <Comp
+        {...props}
+        ref={(node: HTMLDivElement | null) => {
+          if (node && ctx.arrowRef.current && ctx.arrowRef.current !== node) {
+            throw new Error(
+              'You can only render one <PopperArrow /> per <Popper> component'
+            );
+          }
+          assignMultipleRefs(ref, ctx.arrowRef)(node);
+        }}
+        data-popper-arrow=""
+      />
+    );
+  }
+);

package/src/Popper/context.ts

@@ -1,10 +1,10 @@
-import type { MutableRefObject } from 'react';
-import { createContext, useContext } from 'react';
-
-export interface PopperContextProps {
-  arrowRef: MutableRefObject<HTMLSpanElement | null>;
-}
-
-const context = createContext<PopperContextProps | null>(null);
-export const PopperProvider = context.Provider;
-export const usePopperContext = () => useContext(context);
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
+
+export interface PopperContextProps {
+  arrowRef: MutableRefObject<HTMLSpanElement | null>;
+}
+
+const context = createContext<PopperContextProps | null>(null);
+export const PopperProvider = context.Provider;
+export const usePopperContext = () => useContext(context);

package/src/Popper/index.ts

@@ -1,3 +1,3 @@
-export * from './Popper';
-export * from './PopperArrow';
-export * from './context';
+export * from './Popper';
+export * from './PopperArrow';
+export * from './context';

package/src/Popper/styles.css

@@ -1,60 +1,60 @@
-[data-popper-arrow] {
-  box-sizing: border-box;
-  position: absolute;
-  width: 10px;
-  height: 10px;
-}
-[data-popper-arrow]::before {
-  /* Apply shadows as a pseudo element */
-  content: '';
-  background-color: #fff;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: -1;
-  box-shadow: 2px 2px 2px 0 rgba(187, 187, 187, 0.6);
-}
-
-/* Popper on top */
-[data-popper-placement^='top'] {
-  transform-origin: bottom center;
-}
-[data-popper-placement^='top'] [data-popper-arrow] {
-  bottom: -5px;
-}
-[data-popper-placement^='top'] [data-popper-arrow]::before {
-  transform: rotate(45deg);
-}
-
-/* Popper on bottom */
-[data-popper-placement^='bottom'] {
-  transform-origin: top center;
-}
-[data-popper-placement^='bottom'] [data-popper-arrow] {
-  top: -5px;
-}
-[data-popper-placement^='bottom'] [data-popper-arrow]::before {
-  transform: rotate(-135deg);
-}
-
-/* Popper on right */
-[data-popper-placement^='right'] {
-  transform-origin: left center;
-}
-[data-popper-placement^='right'] [data-popper-arrow] {
-  left: -5px;
-}
-[data-popper-placement^='right'] [data-popper-arrow]::before {
-  transform: rotate(135deg);
-}
-
-/* Popper on left */
-[data-popper-placement^='left'] {
-  transform-origin: right center;
-}
-[data-popper-placement^='left'] [data-popper-arrow] {
-  right: -5px;
-}
-[data-popper-placement^='left'] [data-popper-arrow]::before {
-  transform: rotate(-45deg);
-}
+[data-popper-arrow] {
+  box-sizing: border-box;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+[data-popper-arrow]::before {
+  /* Apply shadows as a pseudo element */
+  content: '';
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  box-shadow: 2px 2px 2px 0 rgba(187, 187, 187, 0.6);
+}
+
+/* Popper on top */
+[data-popper-placement^='top'] {
+  transform-origin: bottom center;
+}
+[data-popper-placement^='top'] [data-popper-arrow] {
+  bottom: -5px;
+}
+[data-popper-placement^='top'] [data-popper-arrow]::before {
+  transform: rotate(45deg);
+}
+
+/* Popper on bottom */
+[data-popper-placement^='bottom'] {
+  transform-origin: top center;
+}
+[data-popper-placement^='bottom'] [data-popper-arrow] {
+  top: -5px;
+}
+[data-popper-placement^='bottom'] [data-popper-arrow]::before {
+  transform: rotate(-135deg);
+}
+
+/* Popper on right */
+[data-popper-placement^='right'] {
+  transform-origin: left center;
+}
+[data-popper-placement^='right'] [data-popper-arrow] {
+  left: -5px;
+}
+[data-popper-placement^='right'] [data-popper-arrow]::before {
+  transform: rotate(135deg);
+}
+
+/* Popper on left */
+[data-popper-placement^='left'] {
+  transform-origin: right center;
+}
+[data-popper-placement^='left'] [data-popper-arrow] {
+  right: -5px;
+}
+[data-popper-placement^='left'] [data-popper-arrow]::before {
+  transform: rotate(-45deg);
+}

package/src/Portal/Portal.tsx

@@ -1,20 +1,31 @@
-import type { FC, ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-export interface PortalProps {
-  children?: ReactNode;
-  selector?: string;
-}
-
-export const Portal: FC<PortalProps> = ({ children, selector = 'body' }) => {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-
-  const dom = document.querySelector(selector);
-  if (dom) {
-    return createPortal(<div data-portal="">{children}</div>, dom);
-  }
-
-  return null;
-};
+import { useContext, type FC, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import type { PortalSelectorFn } from './PortalSelectorProvider';
+import { PortalSelectorContext } from './PortalSelectorProvider';
+
+export interface PortalProps {
+  children?: ReactNode;
+  selector?: PortalSelectorFn;
+}
+
+export const Portal: FC<PortalProps> = ({
+  children,
+  selector: selectorProp,
+}) => {
+  const selectorCtx = useContext(PortalSelectorContext);
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const selector = selectorProp || selectorCtx || 'body';
+  const dom =
+    typeof selector === 'string'
+      ? document.querySelector(selector)
+      : selector();
+  if (dom) {
+    return createPortal(<div data-portal="">{children}</div>, dom);
+  }
+
+  return null;
+};

package/src/Portal/PortalSelectorProvider.tsx

@@ -0,0 +1,24 @@
+import { createContext } from 'react';
+import type { ReactNode } from 'react';
+
+export type PortalSelectorFn = string | (() => Element | null);
+export const PortalSelectorContext = createContext<PortalSelectorFn | null>(
+  null
+);
+PortalSelectorContext.displayName = 'PortalSelectorContext';
+
+export type PortalSelectorProviderProps = {
+  selector: PortalSelectorFn;
+  children?: ReactNode | ReactNode[];
+};
+
+export const PortalSelectorProvider = ({
+  selector,
+  children,
+}: PortalSelectorProviderProps) => {
+  return (
+    <PortalSelectorContext.Provider value={selector}>
+      {children}
+    </PortalSelectorContext.Provider>
+  );
+};

package/src/Portal/index.ts

@@ -1 +1,6 @@
-export * from './Portal';
+export * from './Portal';
+export {
+  PortalSelectorProvider,
+  type PortalSelectorProviderProps,
+  type PortalSelectorFn,
+} from './PortalSelectorProvider';