@hanzogui/popper 8.3.0 → 8.3.2

package/dist/cjs/index.cjs

@@ -1,20 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var index_exports = {};
-module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./Popper.cjs"), module.exports);

package/dist/cjs/index.native.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var index_exports = {};
-module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./Popper.native.js"), module.exports);
-//# sourceMappingURL=index.native.js.map

package/dist/cjs/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}

package/dist/esm/Popper.mjs

@@ -1,566 +0,0 @@
-import { flushSync } from "react-dom";
-import { useComposedRefs } from "@hanzogui/compose-refs";
-import { isWeb, useIsomorphicLayoutEffect } from "@hanzogui/constants";
-import { LayoutMeasurementController, View, createStyledContext, getVariableValue, registerLayoutNode, styled } from "@hanzogui/core";
-import { FloatingOverrideContext, arrow, flip, getOverflowAncestors, offset, platform, shift, size, useFloating } from "@hanzogui/floating";
-import { getSpace } from "@hanzogui/get-token";
-import { YStack } from "@hanzogui/stacks";
-import { startTransition } from "@hanzogui/start-transition";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-const PopperContextFast = createStyledContext({}, "Popper__");
-const PopperPositionContext = createStyledContext;
-const {
-  useStyledContext: usePopperContext,
-  Provider: PopperProviderFast
-} = PopperContextFast;
-const PopperContextSlow = createStyledContext({}, "PopperSlow__");
-const {
-  useStyledContext: usePopperContextSlow,
-  Provider: PopperProviderSlow
-} = PopperContextSlow;
-const PopperProvider = ({
-  scope,
-  children,
-  ...context
-}) => {
-  const fns = React.useRef(context);
-  fns.current = context;
-  const [slowContext] = React.useState(() => ({
-    refs: context.refs,
-    triggerElements: context.triggerElements,
-    update(...a) {
-      fns.current.update(...a);
-    },
-    getReferenceProps(p) {
-      return fns.current.getReferenceProps?.(p);
-    },
-    onHoverReference(e) {
-      fns.current.onHoverReference?.(e);
-    },
-    onLeaveReference() {
-      fns.current.onLeaveReference?.();
-    }
-  }));
-  return /* @__PURE__ */jsx(PopperProviderFast, {
-    scope,
-    ...context,
-    children: /* @__PURE__ */jsx(PopperProviderSlow, {
-      scope,
-      ...slowContext,
-      children
-    })
-  });
-};
-const checkFloating = void 0;
-const setupOptions = {};
-function setupPopper(options) {
-  Object.assign(setupOptions, options);
-}
-function getSideAndAlignFromPlacement(placement) {
-  const [side, align = "center"] = placement.split("-");
-  return [side, align];
-}
-const transformOriginMiddleware = options => ({
-  name: "transformOrigin",
-  options,
-  fn(data) {
-    const {
-      placement,
-      rects,
-      middlewareData
-    } = data;
-    const isArrowHidden = middlewareData.arrow?.centerOffset !== 0;
-    const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
-    const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
-    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
-    const noArrowAlign = {
-      start: "0%",
-      center: "50%",
-      end: "100%"
-    }[placedAlign];
-    const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
-    const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
-    let x = "";
-    let y = "";
-    if (placedSide === "bottom") {
-      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
-      y = `${-arrowHeight}px`;
-    } else if (placedSide === "top") {
-      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
-      y = `${rects.floating.height + arrowHeight}px`;
-    } else if (placedSide === "right") {
-      x = `${-arrowHeight}px`;
-      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
-    } else if (placedSide === "left") {
-      x = `${rects.floating.width + arrowHeight}px`;
-      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
-    }
-    return {
-      data: {
-        x,
-        y
-      }
-    };
-  }
-});
-function hanzoguiAutoUpdate(reference, floating, update) {
-  update();
-  let rafId = requestAnimationFrame(() => {
-    update();
-    rafId = 0;
-  });
-  const cleanups = [() => {
-    if (rafId) cancelAnimationFrame(rafId);
-  }];
-  if (reference instanceof HTMLElement) cleanups.push(registerLayoutNode(reference, update));
-  const ancestors = [...(reference instanceof Element ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)];
-  const uniqueAncestors = [...new Set(ancestors)];
-  for (const ancestor of uniqueAncestors) ancestor.addEventListener("scroll", update, {
-    passive: true
-  });
-  window.addEventListener("resize", update);
-  cleanups.push(() => {
-    for (const ancestor of uniqueAncestors) ancestor.removeEventListener("scroll", update);
-    window.removeEventListener("resize", update);
-  });
-  return () => cleanups.forEach(fn => fn());
-}
-function Popper(props) {
-  const {
-    children,
-    size: size$1,
-    strategy = "absolute",
-    placement = "bottom",
-    stayInFrame,
-    allowFlip,
-    offset: offset$1,
-    disableRTL,
-    resize,
-    passThrough,
-    open,
-    scope
-  } = props;
-  const [arrowEl, setArrow] = React.useState(null);
-  const [arrowSize, setArrowSize] = React.useState(0);
-  const offsetOptions = offset$1 ?? arrowSize;
-  const floatingStyle = React.useRef({});
-  const isOpen = passThrough ? false : open ?? true;
-  const middlewareRef = React.useRef([]);
-  if (isOpen) middlewareRef.current = [typeof offsetOptions !== "undefined" ? offset(offsetOptions) : null, allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null, stayInFrame ? shift({
-    padding: 10,
-    mainAxis: true,
-    crossAxis: false,
-    ...(typeof stayInFrame === "object" ? stayInFrame : null)
-  }) : null, arrowEl ? arrow({
-    element: arrowEl
-  }) : null, checkFloating, resize ? size({
-    padding: typeof stayInFrame === "object" ? stayInFrame.padding : 10,
-    apply({
-      availableHeight,
-      availableWidth
-    }) {
-      if (passThrough) return;
-      Object.assign(floatingStyle.current, {
-        maxHeight: `${availableHeight}px`,
-        maxWidth: `${availableWidth}px`
-      });
-      const floatingChild = floating.refs.floating.current?.firstChild;
-      if (floatingChild && floatingChild instanceof HTMLElement) Object.assign(floatingChild.style, floatingStyle.current);
-    },
-    ...(typeof resize === "object" && resize)
-  }) : null, size({
-    apply({
-      elements,
-      rects,
-      availableWidth,
-      availableHeight
-    }) {
-      const {
-        width: anchorWidth,
-        height: anchorHeight
-      } = rects.reference;
-      const contentStyle = elements.floating.style;
-      contentStyle.setProperty("--hanzogui-popper-available-width", `${availableWidth}px`);
-      contentStyle.setProperty("--hanzogui-popper-available-height", `${availableHeight}px`);
-      contentStyle.setProperty("--hanzogui-popper-anchor-width", `${anchorWidth}px`);
-      contentStyle.setProperty("--hanzogui-popper-anchor-height", `${anchorHeight}px`);
-    }
-  }), transformOriginMiddleware({
-    arrowHeight: arrowSize,
-    arrowWidth: arrowSize
-  })].filter(Boolean);
-  let floating = useFloating({
-    open: isOpen,
-    strategy,
-    placement,
-    sameScrollView: false,
-    whileElementsMounted: !isOpen ? void 0 : hanzoguiAutoUpdate,
-    platform: disableRTL ?? setupOptions.disableRTL ? {
-      ...platform,
-      isRTL(element) {
-        return false;
-      }
-    } : platform,
-    middleware: middlewareRef.current
-  });
-  floating = React.useMemo(() => {
-    const og = floating.getFloatingProps;
-    if (resize && og) floating.getFloatingProps = props2 => {
-      return og({
-        ...props2,
-        style: {
-          ...props2.style,
-          ...floatingStyle.current
-        }
-      });
-    };
-    return floating;
-  }, [floating, resize ? JSON.stringify(resize) : null]);
-  const {
-    middlewareData
-  } = floating;
-  return /* @__PURE__ */jsx(PopperProvider, {
-    scope,
-    ...React.useMemo(() => {
-      return {
-        size: size$1,
-        arrowRef: setArrow,
-        arrowStyle: middlewareData.arrow,
-        onArrowSize: setArrowSize,
-        hasFloating: middlewareData.checkFloating?.hasFloating,
-        transformOrigin: middlewareData.transformOrigin,
-        open: !!open,
-        ...floating
-      };
-    }, [open, size$1, floating, JSON.stringify(middlewareData.arrow || null), JSON.stringify(middlewareData.transformOrigin || null)]),
-    children: /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
-      value: null,
-      children
-    })
-  });
-}
-const PopperAnchor = YStack.styleable(function PopperAnchor2(props, forwardedRef) {
-  const {
-    virtualRef,
-    scope,
-    ...rest
-  } = props;
-  const context = usePopperContextSlow(scope);
-  const {
-    getReferenceProps,
-    refs,
-    update
-  } = context;
-  const ref = React.useRef(null);
-  const triggerId = React.useId();
-  React.useEffect(() => {
-    if (!scope || !context.triggerElements || !ref.current) return;
-    if (!(ref.current instanceof Element)) return;
-    const el = ref.current;
-    context.triggerElements.add(triggerId, el);
-    return () => {
-      context.triggerElements?.delete(triggerId);
-    };
-  }, [scope, triggerId, context.triggerElements]);
-  React.useEffect(() => {
-    if (virtualRef) {
-      refs.setReference(virtualRef.current);
-      update();
-    }
-  }, [virtualRef]);
-  const refProps = getReferenceProps?.({
-    ...rest,
-    ref
-  }) || null;
-  const safeSetReference = React.useCallback(node => {
-    startTransition(() => {
-      refs.setReference(node);
-    });
-  }, [refs]);
-  const shouldHandleInHover = isWeb && scope;
-  const composedRefs = useComposedRefs(forwardedRef, ref, shouldHandleInHover ? void 0 : safeSetReference);
-  return /* @__PURE__ */jsx(View, {
-    ...rest,
-    ...refProps,
-    ref: composedRefs,
-    ...(shouldHandleInHover && {
-      onMouseEnter: e => {
-        const el = e.currentTarget ?? ref.current;
-        if (el instanceof HTMLElement) {
-          flushSync(() => refs.setReference(el));
-          update();
-          if (!refProps) return;
-          refProps.onPointerEnter?.(e);
-          context.onHoverReference?.(e.nativeEvent);
-        }
-      },
-      onMouseLeave: e => {
-        context.onLeaveReference?.();
-        refProps?.onMouseLeave?.(e);
-      }
-    })
-  });
-});
-const PopperContentFrame = styled(YStack, {
-  name: "PopperContent",
-  variants: {
-    unstyled: {
-      true: {}
-    },
-    size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          padding: tokens.space[val],
-          borderRadius: tokens.radius[val]
-        };
-      }
-    }
-  }
-});
-const PopperContent = React.forwardRef(function PopperContent2(props, forwardedRef) {
-  const isAnimatePosControlled = "animatePosition" in props || "enableAnimationForPositionChange" in props;
-  const {
-    scope,
-    animatePosition,
-    enableAnimationForPositionChange,
-    children,
-    passThrough,
-    unstyled,
-    ...rest
-  } = props;
-  const animatePos = animatePosition ?? enableAnimationForPositionChange;
-  const context = usePopperContext(scope);
-  const {
-    strategy,
-    placement,
-    refs,
-    x,
-    y,
-    getFloatingProps,
-    size,
-    isPositioned,
-    transformOrigin,
-    update
-  } = context;
-  const updateRef = React.useRef(update);
-  updateRef.current = update;
-  const lastNodeRef = React.useRef(null);
-  const safeSetFloating = React.useCallback(node => {
-    const isNewNode = node !== lastNodeRef.current;
-    if (node) {
-      lastNodeRef.current = node;
-      refs.setFloating(node);
-      if (!isNewNode) updateRef.current?.();
-    }
-  }, [refs.setFloating]);
-  React.useEffect(() => {
-    return () => {
-      const ourNode = lastNodeRef.current;
-      if (ourNode && refs.floating.current === ourNode) refs.setFloating(null);
-      lastNodeRef.current = null;
-    };
-  }, []);
-  const contentRefs = useComposedRefs(safeSetFloating, forwardedRef);
-  const [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
-  useIsomorphicLayoutEffect(() => {
-    if (needsMeasure && x && y) setNeedsMeasure(false);
-  }, [needsMeasure, animatePos, x, y]);
-  const hasBeenPositioned = React.useRef(false);
-  const lastGoodPosition = React.useRef({
-    x: 0,
-    y: 0
-  });
-  if (x !== 0 || y !== 0) {
-    lastGoodPosition.current = {
-      x,
-      y
-    };
-    if (isPositioned) hasBeenPositioned.current = true;
-  }
-  const brieflyZero = hasBeenPositioned.current && x === 0 && y === 0;
-  const effectiveX = brieflyZero ? lastGoodPosition.current.x : x;
-  const effectiveY = brieflyZero ? lastGoodPosition.current.y : y;
-  const hide = !hasBeenPositioned.current && effectiveX === 0 && effectiveY === 0;
-  const disableAnimationProp = animatePos === "even-when-repositioning" ? needsMeasure : !hasBeenPositioned.current && !isPositioned || needsMeasure;
-  const [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
-  React.useEffect(() => {
-    setDisableAnimation(disableAnimationProp);
-  }, [disableAnimationProp]);
-  const frameProps = {
-    ref: contentRefs,
-    ...(hide ? {} : {
-      x: effectiveX || 0,
-      y: effectiveY || 0
-    }),
-    top: 0,
-    left: 0,
-    position: strategy,
-    opacity: hide ? 0 : 1,
-    ...(isAnimatePosControlled && {
-      transition: animatePos ? rest.transition : void 0,
-      animateOnly: animatePos && !disableAnimation ? rest.animateOnly : [],
-      animatePresence: false
-    })
-  };
-  const {
-    style,
-    ...floatingProps
-  } = getFloatingProps ? getFloatingProps(frameProps) : frameProps;
-  const transformOriginStyle = isWeb && transformOrigin ? {
-    transformOrigin: `${transformOrigin.x} ${transformOrigin.y}`
-  } : void 0;
-  return /* @__PURE__ */jsx(LayoutMeasurementController, {
-    disable: !context.open,
-    children: /* @__PURE__ */jsx(View, {
-      passThrough,
-      ref: contentRefs,
-      direction: rest.direction,
-      ...(passThrough ? null : floatingProps),
-      ...(!passThrough && animatePos && {
-        "data-popper-animate-position": "true"
-      }),
-      children: /* @__PURE__ */jsx(PopperContentFrame, {
-        passThrough,
-        unstyled,
-        ...(!passThrough && {
-          "data-placement": placement,
-          "data-strategy": strategy,
-          size,
-          ...style,
-          ...transformOriginStyle,
-          ...rest
-        }),
-        children
-      }, "popper-content-frame")
-    })
-  });
-});
-const PopperArrowFrame = styled(YStack, {
-  name: "PopperArrow",
-  variants: {
-    unstyled: {
-      false: {
-        borderColor: "$borderColor",
-        backgroundColor: "$background",
-        position: "relative"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.GUI_HEADLESS === "1"
-  }
-});
-const PopperArrowOuterFrame = styled(YStack, {
-  name: "PopperArrowOuter",
-  variants: {
-    unstyled: {
-      false: {
-        position: "absolute",
-        zIndex: 1e6,
-        pointerEvents: "none",
-        overflow: "hidden",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.GUI_HEADLESS === "1"
-  }
-});
-const opposites = {
-  top: "bottom",
-  right: "left",
-  bottom: "top",
-  left: "right"
-};
-const PopperArrow = React.forwardRef(function PopperArrow2(propsIn, forwardedRef) {
-  const isAnimatePosControlled = "animatePosition" in propsIn;
-  const {
-    scope,
-    animatePosition,
-    transition,
-    ...rest
-  } = propsIn;
-  const {
-    offset,
-    size: sizeProp,
-    borderWidth = 0,
-    ...arrowProps
-  } = rest;
-  const context = usePopperContext(scope);
-  const sizeVal = typeof sizeProp === "number" ? sizeProp : getVariableValue(getSpace(sizeProp ?? context.size, {
-    shift: -2,
-    bounds: [2]
-  }));
-  const size = Math.max(0, +sizeVal);
-  const {
-    placement
-  } = context;
-  const refs = useComposedRefs(context.arrowRef, forwardedRef);
-  const x = context.arrowStyle?.x || 0;
-  const y = context.arrowStyle?.y || 0;
-  const arrowPositioned = context.arrowStyle != null;
-  const primaryPlacement = placement ? placement.split("-")[0] : "top";
-  const arrowStyle = {
-    x,
-    y,
-    width: size,
-    height: size
-  };
-  const innerArrowStyle = {};
-  const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
-  if (primaryPlacement) {
-    arrowStyle[isVertical ? "width" : "height"] = size * 2;
-    const oppSide = opposites[primaryPlacement];
-    if (oppSide) {
-      arrowStyle[oppSide] = -size;
-      innerArrowStyle[oppSide] = size / 2;
-    }
-    if (oppSide === "top" || oppSide === "bottom") arrowStyle.left = 0;
-    if (oppSide === "left" || oppSide === "right") arrowStyle.top = 0;
-    useIsomorphicLayoutEffect(() => {
-      context.onArrowSize?.(size);
-    }, [size, context.onArrowSize]);
-  }
-  return /* @__PURE__ */jsx(PopperArrowOuterFrame, {
-    ref: refs,
-    ...arrowStyle,
-    ...(!arrowPositioned && {
-      opacity: 0
-    }),
-    ...(isAnimatePosControlled && {
-      transition: animatePosition ? transition : void 0,
-      animateOnly: animatePosition ? ["transform"] : [],
-      animatePresence: false
-    }),
-    children: /* @__PURE__ */jsx(PopperArrowFrame, {
-      width: size,
-      height: size,
-      ...arrowProps,
-      ...innerArrowStyle,
-      rotate: "45deg",
-      ...(primaryPlacement === "bottom" && {
-        borderLeftWidth: borderWidth,
-        borderTopWidth: borderWidth
-      }),
-      ...(primaryPlacement === "top" && {
-        borderBottomWidth: borderWidth,
-        borderRightWidth: borderWidth
-      }),
-      ...(primaryPlacement === "right" && {
-        borderLeftWidth: borderWidth,
-        borderBottomWidth: borderWidth
-      }),
-      ...(primaryPlacement === "left" && {
-        borderTopWidth: borderWidth,
-        borderRightWidth: borderWidth
-      })
-    })
-  });
-});
-export { Popper, PopperAnchor, PopperArrow, PopperArrowFrame, PopperContent, PopperContentFrame, PopperContextFast, PopperContextSlow, PopperPositionContext, PopperProvider, PopperProviderFast, PopperProviderSlow, setupPopper, usePopperContext, usePopperContextSlow };
-//# sourceMappingURL=Popper.mjs.map