@deframe-sdk/components 0.1.72 → 0.1.73

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
 import * as React6 from 'react';
-import React6__default, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import React6__default, { useMemo, useState, useEffect, useRef, useCallback, useId } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdOutlineArrowBack, MdOutlineArrowDropDown, MdOutlineClose, MdContentCopy, MdOutlineExpandMore, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdAccessTime, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
@@ -2106,8 +2106,8 @@ var ActionSheet = ({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isThisSheetActive, onClose]);
-  const handleBackdropClick = (e) => {
-    if (closeOnBackdropClick && e.target === e.currentTarget) {
+  const handleBackdropClick = () => {
+    if (closeOnBackdropClick) {
       onClose == null ? void 0 : onClose();
     }
   };
@@ -2189,6 +2189,7 @@ var ActionSheet = ({
         /* @__PURE__ */ jsx(
           motion.div,
           {
+            onClick: (e) => e.stopPropagation(),
             className: twMerge(
               "relative w-full bg-[var(--deframe-widget-color-bg-secondary)] shadow-[0_20px_50px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_28%,transparent)] overflow-hidden",
               position === "bottom" ? "max-w-full rounded-t-[var(--deframe-widget-size-radius-xl)]" : "max-w-lg rounded-[var(--deframe-widget-size-radius-xl)] mx-[var(--deframe-widget-size-gap-md)]",
@@ -4409,11 +4410,20 @@ var SearchInput = ({
   inputTestId
 }) => {
   const [internalValue, setInternalValue] = useState(controlledValue || "");
+  const inputRef = React6__default.useRef(null);
   useEffect(() => {
     if (controlledValue !== void 0) {
       setInternalValue(controlledValue);
     }
   }, [controlledValue]);
+  useEffect(() => {
+    if (!autoFocus || disabled) return;
+    const frameId = requestAnimationFrame(() => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [autoFocus, disabled]);
   const handleInputChange = (newValue) => {
     setInternalValue(newValue);
     onChange == null ? void 0 : onChange(newValue);
@@ -4423,6 +4433,7 @@ var SearchInput = ({
     /* @__PURE__ */ jsx(
       "input",
       {
+        ref: inputRef,
         "data-testid": inputTestId,
         type: "text",
         value: internalValue,
@@ -6320,6 +6331,7 @@ var ChooseAnAssetSwapView = ({
   onClose,
   onSearch,
   autoFocus,
+  closeOnBackdropClick = true,
   displayedTokens,
   hasMore,
   onLoadMore,
@@ -6344,6 +6356,7 @@ var ChooseAnAssetSwapView = ({
       onClose,
       position: "bottom",
       height: "full",
+      closeOnBackdropClick,
       contentClassName: "w-full max-w-[620px] mx-auto",
       children: /* @__PURE__ */ jsxs(BackgroundContainer, { className: "flex flex-col h-full", children: [
         /* @__PURE__ */ jsx(Navbar, { children: /* @__PURE__ */ jsx(CloseButton_default, { testId: `swap-token-actionsheet-close-${actionSheetId}`, onClick: onClose }) }),
@@ -6965,6 +6978,7 @@ var SwapFormView = ({
   onHistoryClick,
   onSwitchTokens,
   switchTokensAriaLabel,
+  showHistoryTooltip = false,
   fromCard,
   toCard,
   advancedSettings,
@@ -6972,6 +6986,8 @@ var SwapFormView = ({
   priceImpactWarning,
   confirmButton
 }) => {
+  const historyTooltipId = React6__default.useId();
+  const historyTooltipProps = showHistoryTooltip ? { "aria-describedby": historyTooltipId, title: labels.historyAriaLabel } : {};
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -6984,17 +7000,29 @@ var SwapFormView = ({
               /* @__PURE__ */ jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
               labels.subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
             ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "data-testid": "swap-history-button",
-                type: "button",
-                onClick: onHistoryClick,
-                className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] hover:text-brand-primary",
-                "aria-label": labels.historyAriaLabel,
-                children: /* @__PURE__ */ jsx(MdHistory, { className: "w-6 h-6" })
-              }
-            )
+            /* @__PURE__ */ jsxs("div", { className: "relative inline-flex group", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                __spreadProps(__spreadValues({
+                  "data-testid": "swap-history-button",
+                  type: "button",
+                  onClick: onHistoryClick,
+                  className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-[color:var(--deframe-widget-color-text-secondary)] dark:text-[color:var(--deframe-widget-color-text-secondary-dark)] hover:text-brand-primary",
+                  "aria-label": labels.historyAriaLabel
+                }, historyTooltipProps), {
+                  children: /* @__PURE__ */ jsx(MdHistory, { className: "w-6 h-6" })
+                })
+              ),
+              showHistoryTooltip && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  id: historyTooltipId,
+                  role: "tooltip",
+                  className: "pointer-events-none absolute right-0 top-full z-10 mt-1 whitespace-nowrap rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)] px-2 py-1 text-xs text-[color:var(--deframe-widget-color-text-primary)] opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+                  children: labels.historyAriaLabel
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
             /* @__PURE__ */ jsx(SwapFromCardView, __spreadValues({}, fromCard)),
@@ -7914,6 +7942,10 @@ var ConfirmSwapButtonViewSimple = ({
     }
   ) });
 };
+var simpleDirectionRowClassNames = {
+  default: "flex justify-center relative -my-[16px] z-[1]",
+  compact: "flex justify-center relative -my-[12px] z-[1]"
+};
 var SwapFormViewSimple = ({
   onSubmit,
   formRef,
@@ -7921,6 +7953,8 @@ var SwapFormViewSimple = ({
   onHistoryClick,
   onSwitchTokens,
   switchTokensAriaLabel,
+  showHistoryTooltip = false,
+  directionButtonSpacing = "default",
   fromCard,
   toCard,
   advancedSettings,
@@ -7931,6 +7965,7 @@ var SwapFormViewSimple = ({
   const containerRef = useRef(null);
   const [panelPos, setPanelPos] = useState(null);
   const [showPanel, setShowPanel] = useState(false);
+  const directionRowClassName = simpleDirectionRowClassNames[directionButtonSpacing];
   useEffect(() => {
     if (!advancedSettings.isOpen) setShowPanel(false);
   }, [advancedSettings.isOpen]);
@@ -7980,7 +8015,7 @@ var SwapFormViewSimple = ({
               {
                 "data-test-id": "swap-form-simple-top-row",
                 className: "flex items-center justify-end mb-[var(--deframe-widget-size-gap-sm)]",
-                children: /* @__PURE__ */ jsx(HistoryButton, { onClick: onHistoryClick, ariaLabel: labels.historyAriaLabel })
+                children: /* @__PURE__ */ jsx(HistoryButton, { onClick: onHistoryClick, ariaLabel: labels.historyAriaLabel, showTooltip: showHistoryTooltip })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -7999,7 +8034,7 @@ var SwapFormViewSimple = ({
               "div",
               {
                 "data-test-id": "swap-form-simple-direction-row",
-                className: "flex justify-center relative -my-[16px] z-[1]",
+                className: directionRowClassName,
                 children: /* @__PURE__ */ jsx(
                   SwapDirectionButton,
                   {
@@ -8088,48 +8123,72 @@ var SwapFormViewSimple = ({
     }
   );
 };
-function HistoryButton({ onClick, ariaLabel }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      "data-test-id": "swap-form-simple-history-button",
-      type: "button",
-      onClick,
-      "aria-label": ariaLabel,
-      className: twMerge(
-        "inline-flex items-center justify-center",
-        "w-9 h-9",
-        "rounded-[var(--deframe-widget-size-radius-sm)]",
-        "border-none",
-        "cursor-pointer",
-        "bg-transparent",
-        "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
-        "transition-[background] duration-150",
-        "flex-shrink-0",
-        "outline-none",
-        "text-[color:var(--deframe-widget-color-text-secondary)]"
-      ),
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          "data-test-id": "swap-form-simple-history-icon",
-          viewBox: "0 0 24 24",
-          width: "20",
-          height: "20",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-            /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
-          ]
-        }
-      )
-    }
-  );
+function HistoryButton({ onClick, ariaLabel, showTooltip }) {
+  const tooltipId = useId();
+  const tooltipProps = showTooltip ? { "aria-describedby": tooltipId, title: ariaLabel } : {};
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex group", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({
+        "data-test-id": "swap-form-simple-history-button",
+        type: "button",
+        onClick,
+        "aria-label": ariaLabel
+      }, tooltipProps), {
+        className: twMerge(
+          "inline-flex items-center justify-center",
+          "w-9 h-9",
+          "rounded-[var(--deframe-widget-size-radius-sm)]",
+          "border-none",
+          "cursor-pointer",
+          "bg-transparent",
+          "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+          "transition-[background] duration-150",
+          "flex-shrink-0",
+          "outline-none",
+          "text-[color:var(--deframe-widget-color-text-secondary)]"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "data-test-id": "swap-form-simple-history-icon",
+            viewBox: "0 0 24 24",
+            width: "20",
+            height: "20",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+            ]
+          }
+        )
+      })
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: tooltipId,
+        role: "tooltip",
+        className: twMerge(
+          "pointer-events-none absolute right-0 top-full z-10 mt-[6px]",
+          "rounded-[var(--deframe-widget-size-radius-xs)]",
+          "bg-[var(--deframe-widget-color-bg-tertiary)]",
+          "px-[8px] py-[5px]",
+          "text-[12px] [font-weight:var(--deframe-widget-font-weight-medium)]",
+          "text-[color:var(--deframe-widget-color-text-primary)]",
+          "whitespace-nowrap shadow-[0px_4px_16px_0px_#00000066]",
+          "opacity-0 transition-opacity duration-150",
+          "group-hover:opacity-100 group-focus-within:opacity-100"
+        ),
+        children: ariaLabel
+      }
+    )
+  ] });
 }
 function SwapDirectionButton({ onClick, ariaLabel }) {
   const [isHovered, setIsHovered] = useState(false);
@@ -9076,6 +9135,7 @@ function ChooseNetworkAndAssetViewSimple({
   onAssetClick,
   onSearch,
   autoFocus,
+  closeOnBackdropClick = true,
   hasMore,
   onLoadMore,
   isFetching,
@@ -9092,6 +9152,9 @@ function ChooseNetworkAndAssetViewSimple({
     setQuery(q);
     onSearch(q);
   }, [onSearch]);
+  const handleBackdropClick = React6.useCallback(() => {
+    if (closeOnBackdropClick) onClose();
+  }, [closeOnBackdropClick, onClose]);
   const handleNetworkSelect = React6.useCallback((network) => {
     var _a2;
     setQuery("");
@@ -9182,7 +9245,7 @@ function ChooseNetworkAndAssetViewSimple({
           animate: { opacity: 1 },
           exit: { opacity: 0 },
           transition: { duration: 0.2 },
-          onClick: onClose,
+          onClick: handleBackdropClick,
           "data-test-id": "backdrop",
           className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex flex-col justify-end",
           children: /* @__PURE__ */ jsxs(
@@ -9306,7 +9369,7 @@ function ChooseNetworkAndAssetViewSimple({
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.2 },
-        onClick: onClose,
+        onClick: handleBackdropClick,
         "data-test-id": "backdrop",
         className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex items-center justify-center px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
         children: /* @__PURE__ */ jsxs(
@@ -9668,20 +9731,29 @@ var SwapHistoryView = ({
   isLoading,
   items,
   onItemClick,
+  onClose,
   pageSize = 10
 }) => {
+  var _a;
   const [visibleCount, setVisibleCount] = React6__default.useState(pageSize);
+  const backHeader = onClose ? /* @__PURE__ */ jsx(DetailsHeader, { title: (_a = labels.title) != null ? _a : "", onBack: onClose, backAriaLabel: labels.closeAriaLabel, className: "px-0 pt-0" }) : null;
   if (isLoading) {
-    return /* @__PURE__ */ jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsx(LoadingSkeleton, {}) });
+    return /* @__PURE__ */ jsxs(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: [
+      backHeader,
+      /* @__PURE__ */ jsx(LoadingSkeleton, {})
+    ] });
   }
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: labels.emptyTitle,
-        description: labels.emptyDescription
-      }
-    ) });
+    return /* @__PURE__ */ jsxs(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: [
+      backHeader,
+      /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: labels.emptyTitle,
+          description: labels.emptyDescription
+        }
+      )
+    ] });
   }
   const visibleItems = items.slice(0, visibleCount);
   const grouped = /* @__PURE__ */ new Map();
@@ -9696,26 +9768,29 @@ var SwapHistoryView = ({
   }
   const sortedDates = Array.from(grouped.keys()).sort((a, b) => b.localeCompare(a));
   const hasMore = items.length > visibleCount;
-  return /* @__PURE__ */ jsx(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
-    sortedDates.map((dateKey) => {
-      const groupItems = grouped.get(dateKey);
-      const dateLabel = historyFormatDate(groupItems[0].createdAt, labels.locale);
-      return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
-        /* @__PURE__ */ jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: dateLabel }),
-        groupItems.map((item) => /* @__PURE__ */ jsx(
-          HistoryListItem,
-          {
-            item,
-            labels: labels.historyItem,
-            onClick: onItemClick ? () => onItemClick(item.id) : void 0,
-            className: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]"
-          },
-          item.id
-        ))
-      ] }, dateKey);
-    }),
-    hasMore && labels.loadMoreLabel && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setVisibleCount((c) => c + pageSize), children: labels.loadMoreLabel }) })
-  ] }) });
+  return /* @__PURE__ */ jsxs(BackgroundContainer, { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col min-h-0 flex-1", children: [
+    backHeader,
+    /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[16px]", children: [
+      sortedDates.map((dateKey) => {
+        const groupItems = grouped.get(dateKey);
+        const dateLabel = historyFormatDate(groupItems[0].createdAt, labels.locale);
+        return /* @__PURE__ */ jsxs("div", { className: "self-stretch flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsx("div", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: dateLabel }),
+          groupItems.map((item) => /* @__PURE__ */ jsx(
+            HistoryListItem,
+            {
+              item,
+              labels: labels.historyItem,
+              onClick: onItemClick ? () => onItemClick(item.id) : void 0,
+              className: "!rounded-[var(--deframe-widget-size-radius-xs)] !border-0 !min-h-[72px]"
+            },
+            item.id
+          ))
+        ] }, dateKey);
+      }),
+      hasMore && labels.loadMoreLabel && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setVisibleCount((c) => c + pageSize), children: labels.loadMoreLabel }) })
+    ] })
+  ] });
 };
 var variantStyles2 = {
   SUCCESS: {