@easypost/easy-ui 1.0.0-alpha.7 → 1.0.0-alpha.71

package/__chunks__/{index-affe5510.js → Tooltip-5lz6tVdi.js}

@@ -19,41 +19,132 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const React = require("react");
-const Text_index = require("../Text/index.js");
+const Text = require("./Text-DKSomTmh.js");
 const utilities_css = require("../utilities/css.js");
-const _import$2 = require("./import-0f8555a4.js");
-const _import = require("./import-a1e0f814.js");
-const _import$1 = require("./import-26676303.js");
+const Overlay = require("./Overlay-CwJbrICR.js");
+const useFocusVisible = require("./useFocusVisible-CiIrKjuz.js");
+const useHover = require("./useHover-BIKwjrCT.js");
+const mergeProps = require("./mergeProps-DniMwM6P.js");
+const useFocusable = require("./useFocusable-BQyiwtXU.js");
+const filterDOMProps = require("./filterDOMProps-D3iOHP0H.js");
+const useOverlayPosition = require("./useOverlayPosition-DJGEWKwM.js");
+const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
+const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
+let $8796f90736e175cb$var$tooltips = {};
+let $8796f90736e175cb$var$tooltipId = 0;
+let $8796f90736e175cb$var$globalWarmedUp = false;
+let $8796f90736e175cb$var$globalWarmUpTimeout = null;
+let $8796f90736e175cb$var$globalCooldownTimeout = null;
+function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
+  let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
+  let { isOpen, open, close } = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let id = React.useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
+  let closeTimeout = React.useRef(null);
+  let closeCallback = React.useRef(close);
+  let ensureTooltipEntry = () => {
+    $8796f90736e175cb$var$tooltips[id] = hideTooltip;
+  };
+  let closeOpenTooltips = () => {
+    for (let hideTooltipId in $8796f90736e175cb$var$tooltips) if (hideTooltipId !== id) {
+      $8796f90736e175cb$var$tooltips[hideTooltipId](true);
+      delete $8796f90736e175cb$var$tooltips[hideTooltipId];
+    }
+  };
+  let showTooltip = () => {
+    if (closeTimeout.current) clearTimeout(closeTimeout.current);
+    closeTimeout.current = null;
+    closeOpenTooltips();
+    ensureTooltipEntry();
+    $8796f90736e175cb$var$globalWarmedUp = true;
+    open();
+    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+    }
+    if ($8796f90736e175cb$var$globalCooldownTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+      $8796f90736e175cb$var$globalCooldownTimeout = null;
+    }
+  };
+  let hideTooltip = (immediate) => {
+    if (immediate || closeDelay <= 0) {
+      if (closeTimeout.current) clearTimeout(closeTimeout.current);
+      closeTimeout.current = null;
+      closeCallback.current();
+    } else if (!closeTimeout.current) closeTimeout.current = setTimeout(() => {
+      closeTimeout.current = null;
+      closeCallback.current();
+    }, closeDelay);
+    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+    }
+    if ($8796f90736e175cb$var$globalWarmedUp) {
+      if ($8796f90736e175cb$var$globalCooldownTimeout) clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+      $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
+        delete $8796f90736e175cb$var$tooltips[id];
+        $8796f90736e175cb$var$globalCooldownTimeout = null;
+        $8796f90736e175cb$var$globalWarmedUp = false;
+      }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
+    }
+  };
+  let warmupTooltip = () => {
+    closeOpenTooltips();
+    ensureTooltipEntry();
+    if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp) $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+      $8796f90736e175cb$var$globalWarmedUp = true;
+      showTooltip();
+    }, delay);
+    else if (!isOpen) showTooltip();
+  };
+  React.useEffect(() => {
+    closeCallback.current = close;
+  }, [
+    close
+  ]);
+  React.useEffect(() => {
+    return () => {
+      if (closeTimeout.current) clearTimeout(closeTimeout.current);
+      let tooltip = $8796f90736e175cb$var$tooltips[id];
+      if (tooltip) delete $8796f90736e175cb$var$tooltips[id];
+    };
+  }, [
+    id
+  ]);
+  return {
+    isOpen,
+    open: (immediate) => {
+      if (!immediate && delay > 0 && !closeTimeout.current) warmupTooltip();
+      else showTooltip();
+    },
+    close: hideTooltip
+  };
+}
 function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
-  let domProps = _import.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+  let domProps = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     labelable: true
   });
-  let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
-    onHoverStart: () => {
-      return state === null || state === void 0 ? void 0 : state.open(true);
-    },
-    onHoverEnd: () => {
-      return state === null || state === void 0 ? void 0 : state.close();
-    }
+  let { hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({
+    onHoverStart: () => state === null || state === void 0 ? void 0 : state.open(true),
+    onHoverEnd: () => state === null || state === void 0 ? void 0 : state.close()
   });
   return {
-    tooltipProps: _import.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
+    tooltipProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
       role: "tooltip"
     })
   };
 }
 function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
   let { isDisabled, trigger } = props;
-  let tooltipId = _import.$bdb11010cef70236$export$f680877a34711e37();
+  let tooltipId = mergeProps.$bdb11010cef70236$export$f680877a34711e37();
   let isHovered = React.useRef(false);
   let isFocused = React.useRef(false);
   let handleShow = () => {
-    if (isHovered.current || isFocused.current)
-      state.open(isFocused.current);
+    if (isHovered.current || isFocused.current) state.open(isFocused.current);
   };
   let handleHide = (immediate) => {
-    if (!isHovered.current && !isFocused.current)
-      state.close(immediate);
+    if (!isHovered.current && !isFocused.current) state.close(immediate);
   };
   React.useEffect(() => {
     let onKeyDown = (e) => {
@@ -75,17 +166,13 @@ function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
     state
   ]);
   let onHoverStart = () => {
-    if (trigger === "focus")
-      return;
-    if (_import$1.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer")
-      isHovered.current = true;
-    else
-      isHovered.current = false;
+    if (trigger === "focus") return;
+    if (useFocusVisible.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") isHovered.current = true;
+    else isHovered.current = false;
     handleShow();
   };
   let onHoverEnd = () => {
-    if (trigger === "focus")
-      return;
+    if (trigger === "focus") return;
     isFocused.current = false;
     isHovered.current = false;
     handleHide();
@@ -96,7 +183,7 @@ function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
     handleHide(true);
   };
   let onFocus = () => {
-    let isVisible = _import$1.$507fabe10e71c6fb$export$b9b3dfddab17db27();
+    let isVisible = useFocusVisible.$507fabe10e71c6fb$export$b9b3dfddab17db27();
     if (isVisible) {
       isFocused.current = true;
       handleShow();
@@ -107,15 +194,12 @@ function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
     isHovered.current = false;
     handleHide(true);
   };
-  let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
+  let { hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({
     isDisabled,
     onHoverStart,
     onHoverEnd
   });
-  let { pressProps } = _import$1.$f6c31cce2adf654f$export$45712eceda6fad21({
-    onPressStart
-  });
-  let { focusableProps } = _import$1.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c({
+  let { focusableProps } = useFocusable.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c({
     isDisabled,
     onFocus,
     onBlur
@@ -123,114 +207,22 @@ function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
   return {
     triggerProps: __spreadValues({
       "aria-describedby": state.isOpen ? tooltipId : void 0
-    }, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, pressProps)),
+    }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, {
+      onPointerDown: onPressStart,
+      onKeyDown: onPressStart
+    })),
     tooltipProps: {
       id: tooltipId
     }
   };
 }
-const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
-const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
-let $8796f90736e175cb$var$tooltips = {};
-let $8796f90736e175cb$var$tooltipId = 0;
-let $8796f90736e175cb$var$globalWarmedUp = false;
-let $8796f90736e175cb$var$globalWarmUpTimeout = null;
-let $8796f90736e175cb$var$globalCooldownTimeout = null;
-function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
-  let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
-  let { isOpen, open, close } = _import$2.$fc909762b330b746$export$61c6a8c84e605fb6(props);
-  let id = React.useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
-  let closeTimeout = React.useRef();
-  let ensureTooltipEntry = () => {
-    $8796f90736e175cb$var$tooltips[id] = hideTooltip;
-  };
-  let closeOpenTooltips = () => {
-    for (let hideTooltipId in $8796f90736e175cb$var$tooltips)
-      if (hideTooltipId !== id) {
-        $8796f90736e175cb$var$tooltips[hideTooltipId](true);
-        delete $8796f90736e175cb$var$tooltips[hideTooltipId];
-      }
-  };
-  let showTooltip = () => {
-    clearTimeout(closeTimeout.current);
-    closeTimeout.current = null;
-    closeOpenTooltips();
-    ensureTooltipEntry();
-    $8796f90736e175cb$var$globalWarmedUp = true;
-    open();
-    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
-      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
-      $8796f90736e175cb$var$globalWarmUpTimeout = null;
-    }
-    if ($8796f90736e175cb$var$globalCooldownTimeout) {
-      clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
-      $8796f90736e175cb$var$globalCooldownTimeout = null;
-    }
-  };
-  let hideTooltip = (immediate) => {
-    if (immediate || closeDelay <= 0) {
-      clearTimeout(closeTimeout.current);
-      closeTimeout.current = null;
-      close();
-    } else if (!closeTimeout.current)
-      closeTimeout.current = setTimeout(() => {
-        closeTimeout.current = null;
-        close();
-      }, closeDelay);
-    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
-      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
-      $8796f90736e175cb$var$globalWarmUpTimeout = null;
-    }
-    if ($8796f90736e175cb$var$globalWarmedUp) {
-      if ($8796f90736e175cb$var$globalCooldownTimeout)
-        clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
-      $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
-        delete $8796f90736e175cb$var$tooltips[id];
-        $8796f90736e175cb$var$globalCooldownTimeout = null;
-        $8796f90736e175cb$var$globalWarmedUp = false;
-      }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
-    }
-  };
-  let warmupTooltip = () => {
-    closeOpenTooltips();
-    ensureTooltipEntry();
-    if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp)
-      $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
-        $8796f90736e175cb$var$globalWarmUpTimeout = null;
-        $8796f90736e175cb$var$globalWarmedUp = true;
-        showTooltip();
-      }, delay);
-    else if (!isOpen)
-      showTooltip();
-  };
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(closeTimeout.current);
-      let tooltip = $8796f90736e175cb$var$tooltips[id];
-      if (tooltip)
-        delete $8796f90736e175cb$var$tooltips[id];
-    };
-  }, [
-    id
-  ]);
-  return {
-    isOpen,
-    open: (immediate) => {
-      if (!immediate && delay > 0 && !closeTimeout.current)
-        warmupTooltip();
-      else
-        showTooltip();
-    },
-    close: hideTooltip
-  };
-}
-const Tooltip$1 = "_Tooltip_o5oku_5";
-const text = "_text_o5oku_24";
-const arrow = "_arrow_o5oku_30";
-const top = "_top_o5oku_39";
-const bottom = "_bottom_o5oku_40";
-const left = "_left_o5oku_44";
-const right = "_right_o5oku_45";
+const Tooltip$1 = "_Tooltip_zo9qo_5";
+const text = "_text_zo9qo_25";
+const arrow = "_arrow_zo9qo_31";
+const top = "_top_zo9qo_40";
+const bottom = "_bottom_zo9qo_41";
+const left = "_left_zo9qo_45";
+const right = "_right_zo9qo_46";
 const styles = {
   Tooltip: Tooltip$1,
   text,
@@ -255,9 +247,9 @@ function Tooltip(props) {
   });
   const tooltipTriggerState = $8796f90736e175cb$export$4d40659c25ecb50b(triggerInputProps);
   const { triggerProps, tooltipProps: tooltipPropsFromTrigger } = $4e1b34546679e357$export$a6da6c504e4bba8b(triggerInputProps, tooltipTriggerState, triggerRef);
-  return React.createElement(React.Fragment, null, React.cloneElement(children, __spreadProps(__spreadValues({}, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(triggerProps, children.props)), {
+  return React.createElement(React.Fragment, null, React.cloneElement(children, __spreadProps(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(triggerProps, children.props)), {
     ref: triggerRef
-  })), tooltipTriggerState.isOpen && React.createElement(_import$2.$f57aed4a881a3485$export$b47c3594eab58386, null, React.createElement(TooltipInner, __spreadProps(__spreadValues({}, props), {
+  })), tooltipTriggerState.isOpen && React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, null, React.createElement(TooltipInner, __spreadProps(__spreadValues({}, props), {
     triggerRef,
     tooltipPropsFromTrigger,
     tooltipTriggerState
@@ -266,7 +258,7 @@ function Tooltip(props) {
 function TooltipInner(props) {
   const { content, placement: targetPlacement = DEFAULT_PLACEMENT, triggerRef, tooltipTriggerState, tooltipPropsFromTrigger } = props;
   const tooltipRef = React.useRef(null);
-  const { overlayProps, arrowProps, placement, updatePosition } = _import$2.$2a41e45df1593e64$export$d39e1813b3bdd0e1({
+  const { overlayProps, arrowProps, placement, updatePosition } = useOverlayPosition.$2a41e45df1593e64$export$d39e1813b3bdd0e1({
     arrowBoundaryOffset: ARROW_BOUNDARY_OFFSET,
     containerPadding: CONTAINER_PADDING,
     isOpen: tooltipTriggerState.isOpen,
@@ -275,8 +267,8 @@ function TooltipInner(props) {
     placement: targetPlacement,
     targetRef: triggerRef
   });
-  const { tooltipProps: tooltipPropsFromTooltip } = $326e436e94273fe1$export$1c4b08e0eca38426(_import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), tooltipTriggerState);
-  const tooltipProps = _import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, tooltipPropsFromTooltip, tooltipPropsFromTrigger);
+  const { tooltipProps: tooltipPropsFromTooltip } = $326e436e94273fe1$export$1c4b08e0eca38426(mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), tooltipTriggerState);
+  const tooltipProps = mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, tooltipPropsFromTooltip, tooltipPropsFromTrigger);
   const style = __spreadValues(__spreadValues({}, tooltipProps.style), utilities_css.getComponentToken("tooltip", "container_padding", `${utilities_css.pxToRem(CONTAINER_PADDING)}rem`));
   React.useLayoutEffect(() => {
     updatePosition();
@@ -284,12 +276,12 @@ function TooltipInner(props) {
   return React.createElement("span", __spreadProps(__spreadValues({
     ref: tooltipRef
   }, tooltipProps), {
-    className: utilities_css.classNames(styles.Tooltip, styles[placement]),
+    className: utilities_css.classNames(styles.Tooltip, placement && styles[placement]),
     "data-placement": placement,
     style
   }), React.createElement("span", {
     className: styles.text
-  }, React.createElement(Text_index.Text, {
+  }, React.createElement(Text.Text, {
     variant: "subtitle2"
   }, content)), React.createElement("span", __spreadValues({
     className: styles.arrow