@hanzogui/popper 2.0.0-rc.41-hanzoai.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/cjs/Popper.cjs

@@ -0,0 +1,625 @@
+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 {
+    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,
+    ...(animatePos && {
+      transition: rest.transition,
+      animateOnly: 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.HANZOGUI_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.HANZOGUI_HEADLESS === "1"
+  }
+});
+const opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const PopperArrow = React.forwardRef(function PopperArrow2(propsIn, forwardedRef) {
+  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
+    }),
+    ...(animatePosition && {
+      transition,
+      animateOnly: ["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
+      })
+    })
+  });
+});