braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/useToast/Toast.mjs

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, cloneElement } from "react";
+import assert from "assert";
+import { Stack } from "../Stack/Stack.mjs";
+import { Inline } from "../Inline/Inline.mjs";
+import { Columns } from "../Columns/Columns.mjs";
+import { Column } from "../Column/Column.mjs";
+import { ContentBlock } from "../ContentBlock/ContentBlock.mjs";
+import { Box } from "../Box/Box.mjs";
+import { Text } from "../Text/Text.mjs";
+import { TextLinkButton } from "../TextLinkButton/TextLinkButton.mjs";
+import { ButtonIcon } from "../ButtonIcon/ButtonIcon.mjs";
+import { useTimeout } from "./useTimeout.mjs";
+import { lineHeightContainer } from "../../css/lineHeightContainer.css.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { toast } from "./Toast.css.mjs";
+import { IconClear } from "../icons/IconClear/IconClear.mjs";
+import { IconCritical } from "../icons/IconCritical/IconCritical.mjs";
+import { IconPositive } from "../icons/IconPositive/IconPositive.mjs";
+const toneToIcon = {
+  critical: IconCritical,
+  positive: IconPositive
+};
+const toastDuration = 1e4;
+const borderRadius = "large";
+const Action = ({ label, onClick, removeToast }) => {
+  const handleClick = useCallback(() => {
+    removeToast();
+    onClick();
+  }, [removeToast, onClick]);
+  return /* @__PURE__ */ jsx(Text, { baseline: false, children: /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
+};
+const ToastIcon = ({ tone, icon }) => {
+  if (tone !== "neutral") {
+    const Icon = toneToIcon[tone];
+    return /* @__PURE__ */ jsx(Icon, { tone });
+  }
+  if (icon) {
+    return cloneElement(icon, { tone });
+  }
+  return null;
+};
+const Toast = React.forwardRef(
+  ({
+    id,
+    vanillaTheme,
+    dedupeKey,
+    message,
+    description,
+    tone,
+    icon,
+    onClose,
+    closeLabel = "Close",
+    action,
+    shouldRemove,
+    data,
+    ...restProps
+  }, ref) => {
+    const remove = useCallback(
+      () => onClose(dedupeKey, id),
+      [onClose, dedupeKey, id]
+    );
+    const { stopTimeout, startTimeout } = useTimeout({
+      duration: toastDuration,
+      onTimeout: remove
+    });
+    useEffect(() => {
+      if (shouldRemove) {
+        stopTimeout();
+        remove();
+      }
+    }, [shouldRemove, remove, stopTimeout]);
+    assert(
+      !icon || icon.props.size === void 0 && icon.props.tone === void 0,
+      "Icons cannot set the 'size' or 'tone' prop when passed to a Toast component"
+    );
+    assert(
+      !icon || icon && tone === "neutral",
+      `Icons cannot be customised on a Toast component using '${tone}' tone`
+    );
+    const content = description ? /* @__PURE__ */ jsxs(Stack, { space: "xxsmall", children: [
+      /* @__PURE__ */ jsx(Text, { weight: "medium", tone, baseline: false, children: message }),
+      description ? /* @__PURE__ */ jsx(Text, { baseline: false, tone: "secondary", children: description }) : null,
+      action ? /* @__PURE__ */ jsx(Action, { removeToast: remove, ...action }, action.label) : null
+    ] }) : /* @__PURE__ */ jsxs(Inline, { space: "xxsmall", children: [
+      /* @__PURE__ */ jsx(Box, { paddingRight: "medium", children: /* @__PURE__ */ jsx(Text, { weight: "medium", tone, baseline: false, children: message }) }),
+      action ? /* @__PURE__ */ jsx(Action, { removeToast: remove, ...action }, action.label) : null
+    ] });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        justifyContent: "center",
+        role: "alert",
+        ref,
+        onMouseEnter: stopTimeout,
+        onMouseLeave: startTimeout,
+        className: vanillaTheme,
+        ...buildDataAttributes({ data, validateRestProps: restProps }),
+        children: /* @__PURE__ */ jsx(Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsx(ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            background: { lightMode: "surfaceDark", darkMode: "surface" },
+            position: "relative",
+            borderRadius,
+            paddingY: "medium",
+            paddingX: "gutter",
+            overflow: "hidden",
+            className: toast,
+            children: /* @__PURE__ */ jsxs(Columns, { space: "none", children: [
+              tone !== "neutral" || tone === "neutral" && icon ? /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Box, { paddingRight: "small", children: /* @__PURE__ */ jsx(ToastIcon, { tone, icon }) }) }) : null,
+              /* @__PURE__ */ jsx(Column, { children: content }),
+              /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  width: "touchable",
+                  display: "flex",
+                  justifyContent: "flexEnd",
+                  alignItems: "center",
+                  className: lineHeightContainer.standard,
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx(
+                    ButtonIcon,
+                    {
+                      id: `${dedupeKey}-clear`,
+                      icon: /* @__PURE__ */ jsx(IconClear, {}),
+                      tone: "secondary",
+                      variant: "transparent",
+                      onClick: remove,
+                      label: closeLabel,
+                      data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
+                    }
+                  )
+                }
+              ) })
+            ] })
+          }
+        ) }) })
+      }
+    );
+  }
+);
+const ToastComponent = Toast;
+export {
+  ToastComponent
+};

package/dist/lib/components/useToast/ToastContext.cjs

@@ -0,0 +1,126 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
+const lib_components_BraidPortal_BraidPortal_cjs = require("../BraidPortal/BraidPortal.cjs");
+const lib_components_useToast_Toaster_cjs = require("./Toaster.cjs");
+let toastCounter = 0;
+const ToastControllerContext = React.createContext(null);
+const QUEUE_TOAST = 0;
+const REMOVE_TOAST = 1;
+function reducer(state, action) {
+  switch (action.type) {
+    case QUEUE_TOAST: {
+      const { toast } = action;
+      const hasExistingToast = state.toasts.some(
+        (t) => t.dedupeKey === toast.dedupeKey
+      );
+      if (hasExistingToast) {
+        return {
+          toasts: state.toasts.map((t) => {
+            if (t.dedupeKey === toast.dedupeKey) {
+              return {
+                ...t,
+                shouldRemove: true
+              };
+            }
+            return t;
+          }),
+          queuedToasts: {
+            ...state.queuedToasts,
+            [toast.dedupeKey]: toast
+          }
+        };
+      }
+      return {
+        ...state,
+        toasts: [...state.toasts, action.toast]
+      };
+    }
+    case REMOVE_TOAST: {
+      const toasts = state.toasts.filter(
+        ({ dedupeKey }) => dedupeKey !== action.dedupeKey
+      );
+      const queuedToast = state.queuedToasts[action.dedupeKey];
+      if (queuedToast) {
+        return {
+          queuedToasts: {
+            ...state.queuedToasts,
+            [action.dedupeKey]: void 0
+          },
+          toasts: [...toasts, queuedToast]
+        };
+      }
+      return {
+        ...state,
+        toasts
+      };
+    }
+  }
+}
+const InternalToastProvider = ({ children }) => {
+  const [{ toasts }, dispatch] = React.useReducer(reducer, {
+    toasts: [],
+    queuedToasts: {}
+  });
+  const addToast = React.useCallback(
+    (toast) => dispatch({ type: QUEUE_TOAST, toast }),
+    []
+  );
+  const removeToast = React.useCallback(
+    (dedupeKey) => dispatch({ type: REMOVE_TOAST, dedupeKey }),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastControllerContext.Provider, { value: addToast, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(ToastPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_useToast_Toaster_cjs.Toaster, { toasts, removeToast }) })
+  ] });
+};
+const ToastProvider = ({ children }) => {
+  const currentContext = React.useContext(ToastControllerContext);
+  if (currentContext !== null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(InternalToastProvider, { children });
+};
+const ToastPortal = ({ children }) => {
+  const [toastElement, setElement] = React.useState(null);
+  React.useEffect(() => {
+    const toastContainerId = "braid-toast-container";
+    let element = document.getElementById(toastContainerId);
+    if (!element) {
+      element = document.createElement("div");
+      element.setAttribute("id", toastContainerId);
+      element.setAttribute("class", "");
+      document.body.appendChild(element);
+    }
+    setElement(element);
+  }, []);
+  if (!toastElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidPortal_BraidPortal_cjs.BraidPortal, { container: toastElement, children });
+};
+const useToast = () => {
+  const { vanillaTheme } = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme();
+  const addToast = React.useContext(ToastControllerContext);
+  if (addToast === null) {
+    throw new Error('No "ToastProvider" configured');
+  }
+  return React.useCallback(
+    (toast) => {
+      const id = `${toastCounter++}`;
+      const dedupeKey = toast.key ?? id;
+      addToast({
+        ...toast,
+        vanillaTheme,
+        id,
+        dedupeKey,
+        shouldRemove: false
+      });
+    },
+    [vanillaTheme, addToast]
+  );
+};
+exports.ToastProvider = ToastProvider;
+exports.useToast = useToast;

package/dist/lib/components/useToast/ToastContext.mjs

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, Fragment, useCallback, useReducer, useState, useEffect } from "react";
+import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
+import { BraidPortal } from "../BraidPortal/BraidPortal.mjs";
+import { Toaster } from "./Toaster.mjs";
+let toastCounter = 0;
+const ToastControllerContext = createContext(null);
+const QUEUE_TOAST = 0;
+const REMOVE_TOAST = 1;
+function reducer(state, action) {
+  switch (action.type) {
+    case QUEUE_TOAST: {
+      const { toast } = action;
+      const hasExistingToast = state.toasts.some(
+        (t) => t.dedupeKey === toast.dedupeKey
+      );
+      if (hasExistingToast) {
+        return {
+          toasts: state.toasts.map((t) => {
+            if (t.dedupeKey === toast.dedupeKey) {
+              return {
+                ...t,
+                shouldRemove: true
+              };
+            }
+            return t;
+          }),
+          queuedToasts: {
+            ...state.queuedToasts,
+            [toast.dedupeKey]: toast
+          }
+        };
+      }
+      return {
+        ...state,
+        toasts: [...state.toasts, action.toast]
+      };
+    }
+    case REMOVE_TOAST: {
+      const toasts = state.toasts.filter(
+        ({ dedupeKey }) => dedupeKey !== action.dedupeKey
+      );
+      const queuedToast = state.queuedToasts[action.dedupeKey];
+      if (queuedToast) {
+        return {
+          queuedToasts: {
+            ...state.queuedToasts,
+            [action.dedupeKey]: void 0
+          },
+          toasts: [...toasts, queuedToast]
+        };
+      }
+      return {
+        ...state,
+        toasts
+      };
+    }
+  }
+}
+const InternalToastProvider = ({ children }) => {
+  const [{ toasts }, dispatch] = useReducer(reducer, {
+    toasts: [],
+    queuedToasts: {}
+  });
+  const addToast = useCallback(
+    (toast) => dispatch({ type: QUEUE_TOAST, toast }),
+    []
+  );
+  const removeToast = useCallback(
+    (dedupeKey) => dispatch({ type: REMOVE_TOAST, dedupeKey }),
+    []
+  );
+  return /* @__PURE__ */ jsxs(ToastControllerContext.Provider, { value: addToast, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(Toaster, { toasts, removeToast }) })
+  ] });
+};
+const ToastProvider = ({ children }) => {
+  const currentContext = useContext(ToastControllerContext);
+  if (currentContext !== null) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(InternalToastProvider, { children });
+};
+const ToastPortal = ({ children }) => {
+  const [toastElement, setElement] = useState(null);
+  useEffect(() => {
+    const toastContainerId = "braid-toast-container";
+    let element = document.getElementById(toastContainerId);
+    if (!element) {
+      element = document.createElement("div");
+      element.setAttribute("id", toastContainerId);
+      element.setAttribute("class", "");
+      document.body.appendChild(element);
+    }
+    setElement(element);
+  }, []);
+  if (!toastElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BraidPortal, { container: toastElement, children });
+};
+const useToast = () => {
+  const { vanillaTheme } = useBraidTheme();
+  const addToast = useContext(ToastControllerContext);
+  if (addToast === null) {
+    throw new Error('No "ToastProvider" configured');
+  }
+  return useCallback(
+    (toast) => {
+      const id = `${toastCounter++}`;
+      const dedupeKey = toast.key ?? id;
+      addToast({
+        ...toast,
+        vanillaTheme,
+        id,
+        dedupeKey,
+        shouldRemove: false
+      });
+    },
+    [vanillaTheme, addToast]
+  );
+};
+export {
+  ToastProvider,
+  useToast
+};

package/dist/lib/components/useToast/Toaster.cjs

@@ -0,0 +1,38 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_useToast_Toast_cjs = require("./Toast.cjs");
+const lib_components_useToast_useFlipList_cjs = require("./useFlipList.cjs");
+const Toaster = ({ toasts, removeToast }) => {
+  const { itemRef, remove } = lib_components_useToast_useFlipList_cjs.useFlipList();
+  const onClose = React.useCallback(
+    (dedupeKey, id) => {
+      remove(id, () => {
+        removeToast(dedupeKey);
+      });
+    },
+    [remove, removeToast]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      position: "fixed",
+      zIndex: "notification",
+      width: "full",
+      pointerEvents: "none",
+      paddingX: "gutter",
+      bottom: 0,
+      children: toasts.map(({ id, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingBottom: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_useToast_Toast_cjs.ToastComponent,
+        {
+          ref: itemRef(id),
+          id,
+          onClose,
+          ...rest
+        }
+      ) }, id))
+    }
+  );
+};
+exports.Toaster = Toaster;

package/dist/lib/components/useToast/Toaster.mjs

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Box } from "../Box/Box.mjs";
+import { ToastComponent } from "./Toast.mjs";
+import { useFlipList } from "./useFlipList.mjs";
+const Toaster = ({ toasts, removeToast }) => {
+  const { itemRef, remove } = useFlipList();
+  const onClose = useCallback(
+    (dedupeKey, id) => {
+      remove(id, () => {
+        removeToast(dedupeKey);
+      });
+    },
+    [remove, removeToast]
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      position: "fixed",
+      zIndex: "notification",
+      width: "full",
+      pointerEvents: "none",
+      paddingX: "gutter",
+      bottom: 0,
+      children: toasts.map(({ id, ...rest }) => /* @__PURE__ */ jsx(Box, { paddingBottom: "small", children: /* @__PURE__ */ jsx(
+        ToastComponent,
+        {
+          ref: itemRef(id),
+          id,
+          onClose,
+          ...rest
+        }
+      ) }, id))
+    }
+  );
+};
+export {
+  Toaster
+};

package/dist/lib/components/useToast/useFlipList.cjs

@@ -0,0 +1,113 @@
+"use strict";
+const React = require("react");
+const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../hooks/useIsomorphicLayoutEffect.cjs");
+const animationTimeout = 300;
+const entranceTransition = "transform 0.2s ease, opacity 0.2s ease";
+const exitTransition = "opacity 0.1s ease";
+const animate = (element, transforms, transition, done) => {
+  const fallbackTimeout = setTimeout(() => {
+    if (done) {
+      done();
+    }
+  }, animationTimeout);
+  transforms.forEach(({ property, from = "" }) => {
+    element.style.setProperty(property, from);
+  });
+  element.style.setProperty("transition", "");
+  const transitionEndHandler = (ev) => {
+    if (ev.target !== element) {
+      return;
+    }
+    element.style.setProperty("transition", "");
+    if (done) {
+      done();
+    }
+    element.removeEventListener("transitionend", transitionEndHandler);
+    clearTimeout(fallbackTimeout);
+  };
+  element.addEventListener("transitionend", transitionEndHandler);
+  window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(() => {
+      element.style.setProperty("transition", transition);
+      transforms.forEach(({ property, to = "" }) => {
+        element.style.setProperty(property, to);
+      });
+    });
+  });
+};
+const useFlipList = () => {
+  const refs = React.useMemo(() => /* @__PURE__ */ new Map(), []);
+  const positions = React.useMemo(() => /* @__PURE__ */ new Map(), []);
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    const animations = [];
+    Array.from(refs.entries()).forEach(([id, element]) => {
+      if (element) {
+        const prevTop = positions.get(id);
+        const { top, height } = element.getBoundingClientRect();
+        if (typeof prevTop === "number" && prevTop !== top) {
+          animations.push({
+            element,
+            transition: entranceTransition,
+            transforms: [
+              {
+                property: "transform",
+                from: `translateY(${prevTop - top}px)`
+              }
+            ]
+          });
+        } else if (typeof prevTop !== "number") {
+          animations.push({
+            element,
+            transition: entranceTransition,
+            transforms: [
+              {
+                property: "transform",
+                from: `translateY(${height}px)`
+              },
+              {
+                property: "opacity",
+                from: "0"
+              }
+            ]
+          });
+        }
+        positions.set(id, element.getBoundingClientRect().top);
+      } else {
+        refs.delete(id);
+      }
+    });
+    animations.forEach(({ element, transforms, transition }) => {
+      animate(element, transforms, transition);
+    });
+  });
+  const remove = React.useCallback(
+    (id, cb) => {
+      const element = refs.get(id);
+      if (element) {
+        animate(
+          element,
+          [
+            {
+              property: "opacity",
+              to: "0"
+            }
+          ],
+          exitTransition,
+          cb
+        );
+      }
+    },
+    [refs]
+  );
+  const itemRef = React.useCallback(
+    (id) => (ref) => {
+      refs.set(id, ref);
+    },
+    [refs]
+  );
+  return {
+    itemRef,
+    remove
+  };
+};
+exports.useFlipList = useFlipList;

package/dist/lib/components/useToast/useFlipList.mjs

@@ -0,0 +1,114 @@
+import { useMemo, useCallback } from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.mjs";
+const animationTimeout = 300;
+const entranceTransition = "transform 0.2s ease, opacity 0.2s ease";
+const exitTransition = "opacity 0.1s ease";
+const animate = (element, transforms, transition, done) => {
+  const fallbackTimeout = setTimeout(() => {
+    if (done) {
+      done();
+    }
+  }, animationTimeout);
+  transforms.forEach(({ property, from = "" }) => {
+    element.style.setProperty(property, from);
+  });
+  element.style.setProperty("transition", "");
+  const transitionEndHandler = (ev) => {
+    if (ev.target !== element) {
+      return;
+    }
+    element.style.setProperty("transition", "");
+    if (done) {
+      done();
+    }
+    element.removeEventListener("transitionend", transitionEndHandler);
+    clearTimeout(fallbackTimeout);
+  };
+  element.addEventListener("transitionend", transitionEndHandler);
+  window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(() => {
+      element.style.setProperty("transition", transition);
+      transforms.forEach(({ property, to = "" }) => {
+        element.style.setProperty(property, to);
+      });
+    });
+  });
+};
+const useFlipList = () => {
+  const refs = useMemo(() => /* @__PURE__ */ new Map(), []);
+  const positions = useMemo(() => /* @__PURE__ */ new Map(), []);
+  useIsomorphicLayoutEffect(() => {
+    const animations = [];
+    Array.from(refs.entries()).forEach(([id, element]) => {
+      if (element) {
+        const prevTop = positions.get(id);
+        const { top, height } = element.getBoundingClientRect();
+        if (typeof prevTop === "number" && prevTop !== top) {
+          animations.push({
+            element,
+            transition: entranceTransition,
+            transforms: [
+              {
+                property: "transform",
+                from: `translateY(${prevTop - top}px)`
+              }
+            ]
+          });
+        } else if (typeof prevTop !== "number") {
+          animations.push({
+            element,
+            transition: entranceTransition,
+            transforms: [
+              {
+                property: "transform",
+                from: `translateY(${height}px)`
+              },
+              {
+                property: "opacity",
+                from: "0"
+              }
+            ]
+          });
+        }
+        positions.set(id, element.getBoundingClientRect().top);
+      } else {
+        refs.delete(id);
+      }
+    });
+    animations.forEach(({ element, transforms, transition }) => {
+      animate(element, transforms, transition);
+    });
+  });
+  const remove = useCallback(
+    (id, cb) => {
+      const element = refs.get(id);
+      if (element) {
+        animate(
+          element,
+          [
+            {
+              property: "opacity",
+              to: "0"
+            }
+          ],
+          exitTransition,
+          cb
+        );
+      }
+    },
+    [refs]
+  );
+  const itemRef = useCallback(
+    (id) => (ref) => {
+      refs.set(id, ref);
+    },
+    [refs]
+  );
+  return {
+    itemRef,
+    remove
+  };
+};
+export {
+  useFlipList
+};