@simplybusiness/mobius 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 7.1.0
+
+### Minor Changes
+
+- 7ac6357: Add Toast component for non-blocking notification messages, built on Sonner library with Alert color token integration
+
+### Patch Changes
+
+- 45ddf19: set is changing to false when blurring away from combobox
+
 ## 7.0.0
 
 ### Major Changes

package/dist/cjs/index.js

@@ -93,10 +93,12 @@ __export(index_exports, {
   TextField: () => TextField,
   TextOrHTML: () => TextOrHTML,
   Title: () => Title,
+  Toaster: () => Toaster,
   Trust: () => Trust,
   VisuallyHidden: () => VisuallyHidden,
   convertToDateFormat: () => convertToDateFormat,
   isValidDate: () => isValidDate,
+  toast: () => toast,
   useBodyScrollLock: () => useBodyScrollLock,
   useBreakpoint: () => useBreakpoint,
   useButton: () => useButton,
@@ -1736,6 +1738,7 @@ var ComboboxInner = ({
     blurTimeoutRef.current = setTimeout(() => {
       onBlur?.(e);
       setIsOpen(false);
+      setIsChanging(false);
     }, 150);
   };
   const handleKeyDown = (e) => {
@@ -4427,9 +4430,149 @@ var Title = ({ ref, ...props }) => {
 };
 Title.displayName = "Title";
 
-// src/components/Trust/Trust.tsx
+// src/components/Toast/Toast.tsx
+var import_icons14 = require("@simplybusiness/icons");
 var import_dedupe58 = __toESM(require("classnames/dedupe"));
+var import_sonner = require("sonner");
+
+// src/components/Toast/state.ts
+var toastState = {
+  showCloseButton: true
+};
+
+// src/components/Toast/Toast.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var variantIcons = {
+  info: import_icons14.circleInfo,
+  success: import_icons14.circleCheck,
+  warning: import_icons14.triangleExclamation,
+  error: import_icons14.circleExclamation
+};
+var variantColors = {
+  info: "var(--color-info)",
+  success: "var(--color-valid)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)"
+};
+var ToastIcon = ({ variant }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: import_icons14.cross }) });
+var ToastContent = ({
+  toastId,
+  variant,
+  title,
+  description,
+  action,
+  cancel,
+  showCloseButton = toastState.showCloseButton
+}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_dedupe58.default)("mobius", "mobius-toast", `--${variant}`), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToastIcon, { variant }),
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__content", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__description", children: description })
+    ] }),
+    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__actions", children: [
+      cancel && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mobius-toast__cancel",
+          onClick: () => {
+            cancel.onClick?.();
+            import_sonner.toast.dismiss(toastId);
+          },
+          children: cancel.label
+        }
+      ),
+      action && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mobius-toast__action",
+          onClick: () => {
+            action.onClick();
+            import_sonner.toast.dismiss(toastId);
+          },
+          children: action.label
+        }
+      )
+    ] })
+  ] }),
+  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "mobius-toast__close",
+      onClick: () => import_sonner.toast.dismiss(toastId),
+      "aria-label": "Close",
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CloseIcon, {})
+    }
+  )
+] });
+var createCustomToast = (message, variant, options) => import_sonner.toast.custom(
+  (id) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    ToastContent,
+    {
+      toastId: id,
+      variant,
+      title: options?.title,
+      description: options?.description ?? message,
+      action: options?.action,
+      cancel: options?.cancel,
+      showCloseButton: options?.showCloseButton
+    }
+  ),
+  {
+    duration: options?.duration,
+    onDismiss: options?.onDismiss,
+    onAutoClose: options?.onAutoClose
+  }
+);
+var toast = {
+  /** Show an info toast */
+  info: (message, options) => createCustomToast(message, "info", options),
+  /** Show a success toast */
+  success: (message, options) => createCustomToast(message, "success", options),
+  /** Show a warning toast */
+  warning: (message, options) => createCustomToast(message, "warning", options),
+  /** Show an error toast */
+  error: (message, options) => createCustomToast(message, "error", options),
+  /** Dismiss a specific toast by ID or all toasts */
+  dismiss: (toastId) => import_sonner.toast.dismiss(toastId)
+};
+
+// src/components/Toast/Toaster.tsx
 var import_react51 = require("react");
+var import_sonner2 = require("sonner");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var Toaster = ({
+  position = "top-right",
+  closeButton = true,
+  expand = false,
+  duration = 4e3,
+  visibleToasts = 3,
+  gap = 8
+}) => {
+  (0, import_react51.useEffect)(() => {
+    toastState.showCloseButton = closeButton;
+  }, [closeButton]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_sonner2.Toaster,
+    {
+      position,
+      closeButton: false,
+      expand,
+      duration,
+      visibleToasts,
+      gap
+    }
+  );
+};
+Toaster.displayName = "Toaster";
+
+// src/components/Trust/Trust.tsx
+var import_dedupe59 = __toESM(require("classnames/dedupe"));
+var import_react52 = require("react");
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4493,7 +4636,7 @@ var TRUSTPILOT_WIDGET = {
 };
 
 // src/components/Trust/Trust.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var Trust = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -4505,8 +4648,8 @@ var Trust = ({ ref, ...props }) => {
     stars,
     className
   } = props;
-  const [isMounted, setIsMounted] = (0, import_react51.useState)(false);
-  const trustRef = (0, import_react51.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react52.useState)(false);
+  const trustRef = (0, import_react52.useRef)(null);
   const {
     templateId,
     className: variantClassName,
@@ -4523,7 +4666,7 @@ var Trust = ({ ref, ...props }) => {
     "data-style-height": height,
     "data-stars": stars
   };
-  const classes = (0, import_dedupe58.default)(
+  const classes = (0, import_dedupe59.default)(
     "mobius",
     "mobius-trust",
     REQUIRED_TRUSTPILOT_CLASS_NAME,
@@ -4533,24 +4676,24 @@ var Trust = ({ ref, ...props }) => {
     },
     className
   );
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
     if (isMounted && hasTrustpilotLoaded) {
       window.Trustpilot.loadFromElement(trustRef.current, true);
     }
   }, [isMounted]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { style: styles });
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: styles });
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Element,
     {
       ref: mergeRefs([trustRef, ref]),
       className: classes,
       style: styles,
       ...dataProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "a",
         {
           href: link,
@@ -4565,9 +4708,9 @@ var Trust = ({ ref, ...props }) => {
 };
 
 // src/components/ExpandableText/ExpandableText.tsx
-var import_dedupe59 = __toESM(require("classnames/dedupe"));
-var import_react52 = require("react");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_dedupe60 = __toESM(require("classnames/dedupe"));
+var import_react53 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var ExpandableText = ({ ref, ...props }) => {
   const {
     text,
@@ -4581,14 +4724,14 @@ var ExpandableText = ({ ref, ...props }) => {
     onToggle,
     ...otherProps
   } = props;
-  const [isExpanded, setIsExpanded] = (0, import_react52.useState)(false);
-  const [isCollapsed, setIsCollapsed] = (0, import_react52.useState)(false);
-  const textRef = (0, import_react52.useRef)(null);
+  const [isExpanded, setIsExpanded] = (0, import_react53.useState)(false);
+  const [isCollapsed, setIsCollapsed] = (0, import_react53.useState)(false);
+  const textRef = (0, import_react53.useRef)(null);
   const { down } = useBreakpoint();
-  const baseId = (0, import_react52.useId)();
+  const baseId = (0, import_react53.useId)();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!shouldCollapse || !textRef.current) {
       setIsCollapsed(false);
       return;
@@ -4598,20 +4741,20 @@ var ExpandableText = ({ ref, ...props }) => {
     setIsCollapsed(isOverflowing);
   }, [text, shouldCollapse, maxLines]);
   if (breakpoint && !shouldCollapse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
   }
   const handleAccordionChange = (expanded) => {
     setIsExpanded(expanded);
     onToggle?.(expanded);
   };
-  const classes = (0, import_dedupe59.default)("mobius-expandable-text", className);
-  const textContainerClasses = (0, import_dedupe59.default)("mobius-expandable-text__content", {
+  const classes = (0, import_dedupe60.default)("mobius-expandable-text", className);
+  const textContainerClasses = (0, import_dedupe60.default)("mobius-expandable-text__content", {
     "mobius-expandable-text__content--collapsed": !isExpanded
   });
   const textContainerStyle = {
     "--line-clamp": maxLines
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     "div",
     {
       ref,
@@ -4619,7 +4762,7 @@ var ExpandableText = ({ ref, ...props }) => {
       "data-testid": "expandable-text",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           "div",
           {
             ref: textRef,
@@ -4627,10 +4770,10 @@ var ExpandableText = ({ ref, ...props }) => {
             style: textContainerStyle,
             "data-testid": "expandable-text-content",
             "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
           }
         ),
-        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           Accordion,
           {
             showText,
@@ -4651,11 +4794,11 @@ var ExpandableText = ({ ref, ...props }) => {
 ExpandableText.displayName = "ExpandableText";
 
 // src/components/MaskedField/MaskedField.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_react_imask = require("react-imask");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var useAcceptHandler = (onChange, useMaskedValue, name) => {
-  return (0, import_react53.useCallback)(
+  return (0, import_react54.useCallback)(
     (maskedValue, maskInstance) => {
       if (!onChange) {
         return;
@@ -4671,7 +4814,7 @@ var useAcceptHandler = (onChange, useMaskedValue, name) => {
   );
 };
 var useCombinedRef = (imaskRef, forwardedRef) => {
-  return (0, import_react53.useCallback)(
+  return (0, import_react54.useCallback)(
     (element) => {
       imaskRef.current = element;
       if (typeof forwardedRef === "function") {
@@ -4684,7 +4827,7 @@ var useCombinedRef = (imaskRef, forwardedRef) => {
   );
 };
 var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
-  return (0, import_react53.useCallback)(
+  return (0, import_react54.useCallback)(
     (event) => {
       if (!onBlur || !maskRef.current) {
         return;
@@ -4714,7 +4857,7 @@ var ControlledMaskedField = ({
   const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
   const combinedRef = useCombinedRef(imaskRef, forwardedRef);
   const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!maskRef.current) {
       return;
     }
@@ -4725,7 +4868,7 @@ var ControlledMaskedField = ({
       setValue(stringValue);
     }
   }, [value, maskRef, setValue, imaskRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     TextField,
     {
       ...textFieldProps,
@@ -4749,7 +4892,7 @@ var UncontrolledMaskedField = ({
   const { ref: imaskRef, maskRef } = (0, import_react_imask.useIMask)(mask, { onAccept });
   const combinedRef = useCombinedRef(imaskRef, forwardedRef);
   const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     TextField,
     {
       ...textFieldProps,
@@ -4763,7 +4906,7 @@ var UncontrolledMaskedField = ({
 var MaskedField = ({ ref: forwardedRef, ...props }) => {
   const { value, defaultValue, ...rest } = props;
   if ("value" in props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       ControlledMaskedField,
       {
         ...rest,
@@ -4772,7 +4915,7 @@ var MaskedField = ({ ref: forwardedRef, ...props }) => {
       }
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       UncontrolledMaskedField,
       {
         ...rest,