@easypost/easy-ui 1.0.0-alpha.75 → 1.0.0-alpha.76

package/__chunks__/{Notification-lg6ggtug.mjs → Notification-C-_hCM1v.mjs}

@@ -17,21 +17,36 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import * as React from "react";
-import React__default, { useCallback, useState, useEffect, useRef, useMemo, createContext, useContext } from "react";
+import React__default, { useCallback, useState, useEffect, useRef, isValidElement, cloneElement, Children, useMemo, createContext, useContext } from "react";
+import { $ as $5dc95899b306f630$export$c9058316764c140e } from "./mergeRefs-CCV6itCY.mjs";
 import { C as Close } from "./Close-Cq6Q6MN6.mjs";
 import { C as CheckCircle } from "./CheckCircle-C9h2PNWU.mjs";
 import { d as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, c as $bdb11010cef70236$export$f680877a34711e37, b as $bdb11010cef70236$export$b4cc09c592e8fdb8, a as $8ae05eaa5c114e9c$export$7f54fc3180508a52, $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./mergeProps-DRsiQq2k.mjs";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-SC1Py3Uf.mjs";
 import { createPortal } from "react-dom";
+import { q as $507fabe10e71c6fb$export$630ff653c5ada6a9, s as $7215afc6de606d6b$export$de79e2c695e052f3 } from "./useFocusVisible-CQ1e0o7u.mjs";
+import { $ as $9ab94262bd0047c7$export$420e68273165f4ec } from "./useFocusWithin-BgSjulWP.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-BBXJy5NT.mjs";
 import { s as shimExports } from "./index-DOQwYO8h.mjs";
 import { I as Icon } from "./Icon-0SN9dbwU.mjs";
 import { T as Text } from "./Text-BYGcKHR7.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { U as UnstyledButton } from "./UnstyledButton-D0_XmlIu.mjs";
-import { q as $507fabe10e71c6fb$export$630ff653c5ada6a9, s as $7215afc6de606d6b$export$de79e2c695e052f3 } from "./useFocusVisible-CQ1e0o7u.mjs";
-import { $ as $9ab94262bd0047c7$export$420e68273165f4ec } from "./useFocusWithin-BgSjulWP.mjs";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-BBXJy5NT.mjs";
+import { _ as _inheritsLoose, T as TransitionGroupContext, P as PropTypes, C as CSSTransition } from "./CSSTransition-C4FQrt4m.mjs";
+import { a as _extends, _ as _objectWithoutPropertiesLoose } from "./objectWithoutPropertiesLoose-COdxq1Ge.mjs";
 function $77b352cf12efcf73$export$84726ef35ca2129a(queue) {
   let subscribe = useCallback((fn) => queue.subscribe(fn), [
     queue
@@ -1089,7 +1104,7 @@ var __spreadValues2 = (a, b) => {
   }
   return a;
 };
-var __objRest = (source, exclude) => {
+var __objRest2 = (source, exclude) => {
   var target = {};
   for (var prop in source) if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
   if (source != null && __getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(source)) {
@@ -1098,7 +1113,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const CurrencyExchange = (_a) => {
-  var _b = _a, { title, titleId } = _b, props = __objRest(_b, ["title", "titleId"]);
+  var _b = _a, { title, titleId } = _b, props = __objRest2(_b, ["title", "titleId"]);
   return React.createElement("svg", __spreadValues2({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -960 960 960",
@@ -1109,19 +1124,249 @@ const CurrencyExchange = (_a) => {
     d: "M480-60q-117 0-219.65-68.89-102.66-68.88-156.89-166.19v141.23H58.08v-220h220v45.39H136.85q45.61 91.23 142.03 157.15 96.43 65.92 201.12 65.92 75.69 0 142.88-28.26 67.2-28.27 117.73-77.47 50.54-49.19 80.93-115.99 30.38-66.81 32.69-142.89h45.38q-1.92 85.23-35.65 159.85-33.73 74.61-90.46 130.38Q716.77-124 641.19-92 565.61-60 480-60Zm-23.23-142.62v-52.07q-42.31-10.85-72.23-34.85T334-356.46l39.85-14.31q14.3 37.23 44.61 58.46 30.31 21.23 68.16 21.23 39.61 0 68.8-19.88 29.2-19.89 29.2-56.89 0-34.15-23.66-55.88-23.65-21.73-90.27-48.96-62.69-25-91.73-52.46-29.04-27.47-29.04-74.16 0-40.92 28.85-71.15 28.85-30.23 80-37.23v-49.08h43.84v49.08q34.93 3.23 62.16 21.69Q592-667.54 609-635.62L571.38-618Q556-643.69 534-657.31q-22-13.61-52-13.61-40.15 0-64.38 19.92-24.24 19.92-24.24 51.69 0 32.77 22.93 51.39 22.92 18.61 84.77 43 69.77 28.23 98.19 58.3 28.42 30.08 28.42 78.77 0 26.16-9.96 46.77-9.96 20.62-26.85 35.04-16.88 14.42-40.11 22.96-23.23 8.54-50.16 10.39v50.07h-43.84ZM60.39-490q2.69-87.15 36.8-161.96 34.12-74.81 91.23-130.19 57.12-55.39 132.12-86.62Q395.54-900 480-900q115.85 0 219.65 69.08 103.81 69.08 156.89 167.54v-142.77h45.38v220h-220v-45.39h141.23q-44.46-89.3-140.57-156.19-96.12-66.88-202.58-66.88-74.15 0-141.35 27.88-67.19 27.88-117.92 76.69-50.73 48.81-81.69 115.62-30.96 66.8-33.27 144.42H60.39Z"
   }));
 };
-const statusPromotional = "_statusPromotional_dgfcn_4";
-const statusSuccess = "_statusSuccess_dgfcn_9";
-const statusNeutral = "_statusNeutral_dgfcn_14";
-const statusWarning = "_statusWarning_dgfcn_19";
-const statusError = "_statusError_dgfcn_24";
-const typeToast = "_typeToast_dgfcn_29";
-const typeAlert = "_typeAlert_dgfcn_33";
-const Notification$1 = "_Notification_dgfcn_38";
-const iconText = "_iconText_dgfcn_54";
-const closeButton = "_closeButton_dgfcn_60";
-const region = "_region_dgfcn_69";
-const container = "_container_dgfcn_75";
-const styles = {
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function getChildMapping(children, mapFn) {
+  var mapper = function mapper2(child) {
+    return mapFn && isValidElement(child) ? mapFn(child) : child;
+  };
+  var result = /* @__PURE__ */ Object.create(null);
+  if (children) Children.map(children, function(c) {
+    return c;
+  }).forEach(function(child) {
+    result[child.key] = mapper(child);
+  });
+  return result;
+}
+function mergeChildMappings(prev, next) {
+  prev = prev || {};
+  next = next || {};
+  function getValueForKey(key) {
+    return key in next ? next[key] : prev[key];
+  }
+  var nextKeysPending = /* @__PURE__ */ Object.create(null);
+  var pendingKeys = [];
+  for (var prevKey in prev) {
+    if (prevKey in next) {
+      if (pendingKeys.length) {
+        nextKeysPending[prevKey] = pendingKeys;
+        pendingKeys = [];
+      }
+    } else {
+      pendingKeys.push(prevKey);
+    }
+  }
+  var i;
+  var childMapping = {};
+  for (var nextKey in next) {
+    if (nextKeysPending[nextKey]) {
+      for (i = 0; i < nextKeysPending[nextKey].length; i++) {
+        var pendingNextKey = nextKeysPending[nextKey][i];
+        childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
+      }
+    }
+    childMapping[nextKey] = getValueForKey(nextKey);
+  }
+  for (i = 0; i < pendingKeys.length; i++) {
+    childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+  }
+  return childMapping;
+}
+function getProp(child, prop, props) {
+  return props[prop] != null ? props[prop] : child.props[prop];
+}
+function getInitialChildMapping(props, onExited) {
+  return getChildMapping(props.children, function(child) {
+    return cloneElement(child, {
+      onExited: onExited.bind(null, child),
+      in: true,
+      appear: getProp(child, "appear", props),
+      enter: getProp(child, "enter", props),
+      exit: getProp(child, "exit", props)
+    });
+  });
+}
+function getNextChildMapping(nextProps, prevChildMapping, onExited) {
+  var nextChildMapping = getChildMapping(nextProps.children);
+  var children = mergeChildMappings(prevChildMapping, nextChildMapping);
+  Object.keys(children).forEach(function(key) {
+    var child = children[key];
+    if (!isValidElement(child)) return;
+    var hasPrev = key in prevChildMapping;
+    var hasNext = key in nextChildMapping;
+    var prevChild = prevChildMapping[key];
+    var isLeaving = isValidElement(prevChild) && !prevChild.props.in;
+    if (hasNext && (!hasPrev || isLeaving)) {
+      children[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: true,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    } else if (!hasNext && hasPrev && !isLeaving) {
+      children[key] = cloneElement(child, {
+        in: false
+      });
+    } else if (hasNext && hasPrev && isValidElement(prevChild)) {
+      children[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: prevChild.props.in,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    }
+  });
+  return children;
+}
+var values = Object.values || function(obj) {
+  return Object.keys(obj).map(function(k) {
+    return obj[k];
+  });
+};
+var defaultProps = {
+  component: "div",
+  childFactory: function childFactory(child) {
+    return child;
+  }
+};
+var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
+  _inheritsLoose(TransitionGroup2, _React$Component);
+  function TransitionGroup2(props, context) {
+    var _this;
+    _this = _React$Component.call(this, props, context) || this;
+    var handleExited = _this.handleExited.bind(_assertThisInitialized(_this));
+    _this.state = {
+      contextValue: {
+        isMounting: true
+      },
+      handleExited,
+      firstRender: true
+    };
+    return _this;
+  }
+  var _proto = TransitionGroup2.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.mounted = true;
+    this.setState({
+      contextValue: {
+        isMounting: false
+      }
+    });
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.mounted = false;
+  };
+  TransitionGroup2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
+    var prevChildMapping = _ref.children, handleExited = _ref.handleExited, firstRender = _ref.firstRender;
+    return {
+      children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
+      firstRender: false
+    };
+  };
+  _proto.handleExited = function handleExited(child, node) {
+    var currentChildMapping = getChildMapping(this.props.children);
+    if (child.key in currentChildMapping) return;
+    if (child.props.onExited) {
+      child.props.onExited(node);
+    }
+    if (this.mounted) {
+      this.setState(function(state) {
+        var children = _extends({}, state.children);
+        delete children[child.key];
+        return {
+          children
+        };
+      });
+    }
+  };
+  _proto.render = function render() {
+    var _this$props = this.props, Component = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
+    var contextValue = this.state.contextValue;
+    var children = values(this.state.children).map(childFactory2);
+    delete props.appear;
+    delete props.enter;
+    delete props.exit;
+    if (Component === null) {
+      return /* @__PURE__ */ React__default.createElement(TransitionGroupContext.Provider, {
+        value: contextValue
+      }, children);
+    }
+    return /* @__PURE__ */ React__default.createElement(TransitionGroupContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React__default.createElement(Component, props, children));
+  };
+  return TransitionGroup2;
+}(React__default.Component);
+TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   * If you use React v16+ and would like to avoid a wrapping `<div>` element
+   * you can pass in `component={null}`. This is useful if the wrapping div
+   * borks your css styles.
+   */
+  component: PropTypes.any,
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them through if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   *
+   * While this component is meant for multiple `Transition` or `CSSTransition`
+   * children, sometimes you may want to have a single transition child with
+   * content that you want to be transitioned out and in when you change it
+   * (e.g. routes, images etc.) In that case you can change the `key` prop of
+   * the transition child as you change its content, this will cause
+   * `TransitionGroup` to transition the child out and back in.
+   */
+  children: PropTypes.node,
+  /**
+   * A convenience prop that enables or disables appear animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: PropTypes.bool,
+  /**
+   * A convenience prop that enables or disables enter animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: PropTypes.bool,
+  /**
+   * A convenience prop that enables or disables exit animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  exit: PropTypes.bool,
+  /**
+   * You may need to apply reactive updates to a child as it is exiting.
+   * This is generally done by using `cloneElement` however in the case of an exiting
+   * child the element has already been removed and not accessible to the consumer.
+   *
+   * If you do need to update a child as it leaves you can provide a `childFactory`
+   * to wrap every child, even the ones that are leaving.
+   *
+   * @type Function(child: ReactElement) -> ReactElement
+   */
+  childFactory: PropTypes.func
+} : {};
+TransitionGroup.defaultProps = defaultProps;
+const statusPromotional = "_statusPromotional_1xl7t_4";
+const statusSuccess = "_statusSuccess_1xl7t_9";
+const statusNeutral = "_statusNeutral_1xl7t_14";
+const statusWarning = "_statusWarning_1xl7t_19";
+const statusError = "_statusError_1xl7t_24";
+const typeToast = "_typeToast_1xl7t_29";
+const typeAlert = "_typeAlert_1xl7t_33";
+const Notification$1 = "_Notification_1xl7t_38";
+const iconText = "_iconText_1xl7t_55";
+const closeButtonContainer = "_closeButtonContainer_1xl7t_61";
+const closeButton = "_closeButton_1xl7t_61";
+const region = "_region_1xl7t_74";
+const container = "_container_1xl7t_81";
+const styles$1 = {
   statusPromotional,
   statusSuccess,
   statusNeutral,
@@ -1131,26 +1376,91 @@ const styles = {
   typeAlert,
   Notification: Notification$1,
   iconText,
+  closeButtonContainer,
   closeButton,
   region,
   container
 };
+const appear = "_appear_9o3cj_1";
+const enter = "_enter_9o3cj_2";
+const appearActive = "_appearActive_9o3cj_7";
+const enterActive = "_enterActive_9o3cj_8";
+const exit = "_exit_9o3cj_14";
+const exitActive = "_exitActive_9o3cj_22";
+const styles = {
+  appear,
+  enter,
+  appearActive,
+  enterActive,
+  exit,
+  exitActive
+};
+function NotificationTransition(_a) {
+  var _b = _a, { children, transitionKey, onTransitionPendingChange = () => {
+  } } = _b, transitionGroupProps = __objRest(_b, ["children", "transitionKey", "onTransitionPendingChange"]);
+  const nodeRef = React__default.useRef(null);
+  const transitionEndListener = useCallback((done) => {
+    if (nodeRef.current) {
+      nodeRef.current.addEventListener("transitionend", done, false);
+    }
+  }, []);
+  return React__default.createElement(CSSTransition, __spreadProps(__spreadValues({}, transitionGroupProps), {
+    key: transitionKey,
+    appear: true,
+    nodeRef,
+    unmountOnExit: true,
+    addEndListener: transitionEndListener,
+    classNames: {
+      appear: styles.appear,
+      appearActive: styles.appearActive,
+      enter: styles.enter,
+      enterActive: styles.enterActive,
+      exit: styles.exit,
+      exitActive: styles.exitActive
+    },
+    onEnter: () => {
+      onTransitionPendingChange(true);
+    },
+    onExited: () => {
+      onTransitionPendingChange(false);
+    }
+  }), children({
+    nodeRef
+  }));
+}
+function useNotificationTransitionTracking() {
+  const [transitionsPending, setTransitionsPending] = useState(0);
+  const onTransitionPendingChange = (isTransitionPending) => {
+    setTransitionsPending((prev) => isTransitionPending ? prev + 1 : prev - 1);
+  };
+  return {
+    isTransitionPending: transitionsPending > 0,
+    onTransitionPendingChange
+  };
+}
 function NotificationRegion(props) {
-  const { state } = props;
+  const { state, onTransitionPendingChange } = props;
   const ref = React__default.useRef(null);
   const { regionProps } = $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref);
   return React__default.createElement("div", __spreadProps(__spreadValues({}, regionProps), {
     ref,
-    className: styles.region
-  }), state.visibleToasts.map((toast) => React__default.createElement(Notification, {
+    className: styles$1.region
+  }), React__default.createElement(TransitionGroup, {
+    component: null
+  }, state.visibleToasts.map((toast) => React__default.createElement(NotificationTransition, {
     key: toast.key,
+    transitionKey: toast.key,
+    onTransitionPendingChange
+  }, ({ nodeRef }) => React__default.createElement(Notification, {
+    ref: nodeRef,
     toast,
     state
-  })));
+  })))));
 }
 function NotificationContainer(props) {
   const { getContainer = null, position = "fixed", offset, state } = props;
-  const showNotifications = state.visibleToasts.length > 0;
+  const { isTransitionPending, onTransitionPendingChange } = useNotificationTransitionTracking();
+  const showNotifications = state.visibleToasts.length > 0 || isTransitionPending;
   let requestFailed = false;
   let container2 = null;
   if (showNotifications && getContainer) {
@@ -1171,10 +1481,11 @@ function NotificationContainer(props) {
   };
   const containerStyles = __spreadValues(__spreadValues({}, positionStyleProps), positionProps);
   return React__default.createElement(React__default.Fragment, null, showNotifications ? createPortal(React__default.createElement("div", {
-    className: styles.container,
+    className: styles$1.container,
     style: containerStyles
   }, React__default.createElement(NotificationRegion, {
-    state
+    state,
+    onTransitionPendingChange
   })), container2 != null ? container2 : document.body) : null);
 }
 const TOAST_TIMEOUT_DURATION = 4e3;
@@ -1246,7 +1557,7 @@ function useNotificationState() {
     closeActiveNotification: () => queue.closeActiveNotification()
   });
 }
-function Notification(props) {
+const Notification = React__default.forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
   const { state, toast: notification } = props;
   const { type = "toast", message, status = "success", hasIcon = true, onDismiss } = notification.content;
@@ -1264,22 +1575,25 @@ function Notification(props) {
     onPress: handleDismiss
   });
   return React__default.createElement("div", __spreadProps(__spreadValues({}, notificationPropsWithAdjustedAriaRole), {
-    ref,
-    className: classNames(styles.Notification, styles[variationName("status", status)], styles[variationName("type", type)])
+    ref: $5dc95899b306f630$export$c9058316764c140e(ref, forwardedRef),
+    className: classNames(styles$1.Notification, styles$1[variationName("status", status)], styles$1[variationName("type", type)])
   }), React__default.createElement("div", {
-    className: styles.iconText
+    className: styles$1.iconText
   }, hasIcon && React__default.createElement(Icon, {
     size: "lg",
     symbol: getStatusIcon(status)
   }), React__default.createElement("div", __spreadValues({}, titleProps), React__default.createElement(Text, {
     weight: "semibold"
-  }, message))), type === "alert" && React__default.createElement(UnstyledButton, __spreadProps(__spreadValues({}, closeButtonPropsWithDismiss), {
-    className: classNames(styles.closeButton)
+  }, message))), type === "alert" && React__default.createElement("span", {
+    className: styles$1.closeButtonContainer
+  }, React__default.createElement(UnstyledButton, __spreadProps(__spreadValues({}, closeButtonPropsWithDismiss), {
+    className: styles$1.closeButton
   }), React__default.createElement(Icon, {
     size: "md",
     symbol: Close
-  })));
-}
+  }))));
+});
+Notification.displayName = "Notification";
 function getStatusIcon(status) {
   switch (status) {
     case "promotional":

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.75",
+  "version": "1.0.0-alpha.76",
   "sideEffects": [
     "**/*.css"
   ],
   "dependencies": {
-    "@easypost/easy-ui-icons": "1.0.0-alpha.38",
+    "@easypost/easy-ui-icons": "1.0.0-alpha.39",
     "@easypost/easy-ui-tokens": "1.0.0-alpha.15",
     "@react-aria/toast": "^3.0.1",
     "@react-aria/utils": "^3.28.1",