@hanzogui/popper 8.3.0 → 8.3.2

package/dist/cjs/Popper.cjs

@@ -1,627 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var Popper_exports = {};
-__export(Popper_exports, {
-  Popper: () => Popper,
-  PopperAnchor: () => PopperAnchor,
-  PopperArrow: () => PopperArrow,
-  PopperArrowFrame: () => PopperArrowFrame,
-  PopperContent: () => PopperContent,
-  PopperContentFrame: () => PopperContentFrame,
-  PopperContextFast: () => PopperContextFast,
-  PopperContextSlow: () => PopperContextSlow,
-  PopperPositionContext: () => PopperPositionContext,
-  PopperProvider: () => PopperProvider,
-  PopperProviderFast: () => PopperProviderFast,
-  PopperProviderSlow: () => PopperProviderSlow,
-  setupPopper: () => setupPopper,
-  usePopperContext: () => usePopperContext,
-  usePopperContextSlow: () => usePopperContextSlow
-});
-module.exports = __toCommonJS(Popper_exports);
-var import_react_dom = require("react-dom");
-var import_compose_refs = require("@hanzogui/compose-refs");
-var import_constants = require("@hanzogui/constants");
-var import_core = require("@hanzogui/core");
-var import_floating = require("@hanzogui/floating");
-var import_floating2 = require("@hanzogui/floating");
-var import_get_token = require("@hanzogui/get-token");
-var import_stacks = require("@hanzogui/stacks");
-var import_start_transition = require("@hanzogui/start-transition");
-var React = __toESM(require("react"), 1);
-require("react-native-web");
-var import_jsx_runtime = require("react/jsx-runtime");
-const PopperContextFast = (0, import_core.createStyledContext)(
-// since we always provide this we can avoid setting here
-{}, "Popper__");
-const PopperPositionContext = import_core.createStyledContext;
-const {
-  useStyledContext: usePopperContext,
-  Provider: PopperProviderFast
-} = PopperContextFast;
-const PopperContextSlow = (0, import_core.createStyledContext)(
-// since we always provide this we can avoid setting here
-{}, "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__ */(0, import_jsx_runtime.jsx)(PopperProviderFast, {
-    scope,
-    ...context,
-    children: /* @__PURE__ */(0, import_jsx_runtime.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((0, import_core.registerLayoutNode)(reference, update));
-  const ancestors = [...(reference instanceof Element ? (0, import_floating2.getOverflowAncestors)(reference) : []), ...(0, import_floating2.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,
-    strategy = "absolute",
-    placement = "bottom",
-    stayInFrame,
-    allowFlip,
-    offset,
-    disableRTL,
-    resize,
-    passThrough,
-    open,
-    scope
-  } = props;
-  const [arrowEl, setArrow] = React.useState(null);
-  const [arrowSize, setArrowSize] = React.useState(0);
-  const offsetOptions = offset ?? arrowSize;
-  const floatingStyle = React.useRef({});
-  const isOpen = passThrough ? false : open ?? true;
-  const middlewareRef = React.useRef([]);
-  if (isOpen) middlewareRef.current = [typeof offsetOptions !== "undefined" ? (0, import_floating2.offset)(offsetOptions) : null, allowFlip ? (0, import_floating2.flip)(typeof allowFlip === "boolean" ? {} : allowFlip) : null, stayInFrame ? (0, import_floating2.shift)({
-    padding: 10,
-    mainAxis: true,
-    crossAxis: false,
-    ...(typeof stayInFrame === "object" ? stayInFrame : null)
-  }) : null, arrowEl ? (0, import_floating2.arrow)({
-    element: arrowEl
-  }) : null, checkFloating, resize ? (0, import_floating2.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, (0, import_floating2.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 = (0, import_floating2.useFloating)({
-    open: isOpen,
-    strategy,
-    placement,
-    sameScrollView: false,
-    whileElementsMounted: !isOpen ? void 0 : hanzoguiAutoUpdate,
-    platform: disableRTL ?? setupOptions.disableRTL ? {
-      ...import_floating2.platform,
-      isRTL(element) {
-        return false;
-      }
-    } : import_floating2.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;
-  const popperContext = React.useMemo(() => {
-    return {
-      size,
-      arrowRef: setArrow,
-      arrowStyle: middlewareData.arrow,
-      onArrowSize: setArrowSize,
-      hasFloating: middlewareData.checkFloating?.hasFloating,
-      transformOrigin: middlewareData.transformOrigin,
-      open: !!open,
-      ...floating
-    };
-  }, [open, size, floating, JSON.stringify(middlewareData.arrow || null), JSON.stringify(middlewareData.transformOrigin || null)]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperProvider, {
-    scope,
-    ...popperContext,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floating.FloatingOverrideContext.Provider, {
-      value: null,
-      children
-    })
-  });
-}
-const PopperAnchor = import_stacks.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 => {
-    (0, import_start_transition.startTransition)(() => {
-      refs.setReference(node);
-    });
-  },
-  // it was refs.setRefernce but its stable and refs is undefined on server
-  [refs]);
-  const shouldHandleInHover = import_constants.isWeb && scope;
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref,
-  // web handles this onMouseEnter below so it can support multiple targets + hovering
-  shouldHandleInHover ? void 0 : safeSetReference);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-    ...rest,
-    ...refProps,
-    ref: composedRefs,
-    ...(shouldHandleInHover && {
-      onMouseEnter: e => {
-        const el = e.currentTarget ?? ref.current;
-        if (el instanceof HTMLElement) {
-          (0, import_react_dom.flushSync)(() => refs.setReference(el));
-          update();
-          if (!refProps) return;
-          refProps.onPointerEnter?.(e);
-          context.onHoverReference?.(e.nativeEvent);
-        }
-      },
-      onMouseLeave: e => {
-        context.onLeaveReference?.();
-        refProps?.onMouseLeave?.(e);
-      }
-    })
-  });
-});
-const PopperContentFrame = (0, import_core.styled)(import_stacks.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 = (0, import_compose_refs.useComposedRefs)(safeSetFloating, forwardedRef);
-  const [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
-  (0, import_constants.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 = import_constants.isWeb && transformOrigin ? {
-    transformOrigin: `${transformOrigin.x} ${transformOrigin.y}`
-  } : void 0;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.LayoutMeasurementController, {
-    disable: !context.open,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-      passThrough,
-      ref: contentRefs,
-      direction: rest.direction,
-      ...(passThrough ? null : floatingProps),
-      ...(!passThrough && animatePos && {
-        "data-popper-animate-position": "true"
-      }),
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperContentFrame, {
-        passThrough,
-        unstyled,
-        ...(!passThrough && {
-          "data-placement": placement,
-          "data-strategy": strategy,
-          size,
-          ...style,
-          ...transformOriginStyle,
-          ...rest
-        }),
-        children
-      }, "popper-content-frame")
-    })
-  });
-});
-const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
-  name: "PopperArrow",
-  variants: {
-    unstyled: {
-      false: {
-        borderColor: "$borderColor",
-        backgroundColor: "$background",
-        position: "relative"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.GUI_HEADLESS === "1"
-  }
-});
-const PopperArrowOuterFrame = (0, import_core.styled)(import_stacks.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 : (0, import_core.getVariableValue)((0, import_get_token.getSpace)(sizeProp ?? context.size, {
-    shift: -2,
-    bounds: [2]
-  }));
-  const size = Math.max(0, +sizeVal);
-  const {
-    placement
-  } = context;
-  const refs = (0, import_compose_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;
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      context.onArrowSize?.(size);
-    }, [size, context.onArrowSize]);
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopperArrowOuterFrame, {
-    ref: refs,
-    ...arrowStyle,
-    ...(!arrowPositioned && {
-      opacity: 0
-    }),
-    ...(isAnimatePosControlled && {
-      transition: animatePosition ? transition : void 0,
-      animateOnly: animatePosition ? ["transform"] : [],
-      animatePresence: false
-    }),
-    children: /* @__PURE__ */(0, import_jsx_runtime.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
-      })
-    })
-  });
-});