@0xsquid/ui 0.27.3-beta.0 → 0.27.3

package/dist/cjs/index.js

@@ -6622,11 +6622,9 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
     const price = new BigNumber(tokenPrice);
     return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
 }
-const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 4,
-    minimumSignificantDigits: 2,
-    maximumSignificantDigits: 4,
+const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 5,
 });
 /**
  * Formats a number to the en-US number format
@@ -6634,24 +6632,8 @@ const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
  * @param amount - The number to format
  * @returns The formatted string
  */
-function formatTokenAmount(amount = "0") {
-    return INTL_TOKEN_AMOUNT_FORMATTER.format(amount);
-}
-const INTL_USD_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-    notation: "compact",
-    compactDisplay: "short",
-});
-function formatUsdAmount(amount = "0", { includeSign = true, formatIfVerySmall = 0.01 } = {}) {
-    const parsedAmount = Number(amount);
-    if (parsedAmount < formatIfVerySmall && parsedAmount > 0) {
-        return includeSign ? "<$0.01" : "<0.01";
-    }
-    const formattedAmount = INTL_USD_AMOUNT_FORMATTER.format(parsedAmount);
-    return includeSign ? formattedAmount : formattedAmount.replace("$", "");
+function formatAmount(amount) {
+    return INTL_NUMBER_FORMATTER.format(amount);
 }
 function trimExtraDecimals(value, maxDecimals) {
     var _a;
@@ -18764,6 +18746,21 @@ function DropdownMenuItemWithSubmenu(_a) {
                 }, children: submenu })) })) }));
 }
 
+function useOnClickOutside(callback, externalRef) {
+    const internalRef = React$1.useRef(null);
+    const ref = externalRef || internalRef;
+    React$1.useEffect(() => {
+        const handleMouseDown = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [callback, ref]);
+    return { ref };
+}
+
 const dropdownPositionClassMap$1 = {
     top: "tw-right-full tw-bottom-[50px]",
     bottom: "tw-right-full tw-top-[50px]",
@@ -18779,6 +18776,14 @@ const collapsedListItemClassMap = {
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent"]);
+    const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
+        itemsContainerRef,
+    });
+    useOnClickOutside(() => {
+        if (isDropdownOpen) {
+            closeDropdown();
+        }
+    }, itemRef);
     const subtitleClassName = cn("tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block");
     // 'small' variant does not have detail
     const showDetail = size === "large" && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -18809,17 +18814,31 @@ function ListItem(_a) {
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? "button" : "div";
     const itemProps = isInteractive ? props : {};
-    const { isDropdownOpen, dropdownRef, openDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
-        itemsContainerRef,
-    });
-    return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
+    const handleInteraction = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        if ("onClick" in props && e.type === "click") {
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+    };
+    // Handle List item click, close dropdown if it's open
+    const handleItemClick = (e) => {
+        handleInteraction(e);
+        if (isDropdownOpen)
+            closeDropdown();
+    };
+    return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-highlight-adjacent tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
                         size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
                             ? "tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100"
-                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: (e) => {
+                            e.stopPropagation();
+                            isDropdownOpen ? closeDropdown() : openDropdown();
+                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" }))] })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
 const ListItemActionsButton = React$1.forwardRef((props, ref) => {
@@ -25001,20 +25020,6 @@ function DayPicker(props) {
     return (jsxRuntime.jsx(RootProvider, __assign({}, props, { children: jsxRuntime.jsx(Root, { initialProps: props }) })));
 }
 
-function useOnClickOutside(callback) {
-    const ref = React$1.useRef(null);
-    React$1.useEffect(() => {
-        const handleClick = (e) => {
-            if (ref.current && !ref.current.contains(e.target)) {
-                callback();
-            }
-        };
-        document.addEventListener("click", handleClick);
-        return () => document.removeEventListener("click", handleClick);
-    }, [callback]);
-    return { ref };
-}
-
 function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(FilterSection, { title: "Chain", children: jsxRuntime.jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsxRuntime.jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsxRuntime.jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsxRuntime.jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ["success", "ongoing", "error"].map((s) => (jsxRuntime.jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === "ongoing" ? jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
 }
@@ -26600,18 +26605,14 @@ function NumericInput(_a) {
             return "0";
         if (userInputType === UserInputType.TOKEN) {
             if (direction === "from") {
-                return formatUsdAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
-                    includeSign: false,
-                });
+                return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
             }
             else {
-                return formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
-                    includeSign: false,
-                });
+                return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0");
             }
         }
         else {
-            return formatTokenAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
+            return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
     }, [
         inputValue,
@@ -26628,7 +26629,7 @@ function NumericInput(_a) {
         : "tw-text-grey-300";
     const BalanceChipTag = balanceChipClickable ? "button" : "div";
     const balanceFormatted = React$1.useMemo(() => {
-        return formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
+        return formatAmount(balance !== null && balance !== void 0 ? balance : "0");
     }, [balance]);
     const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = React$1.useRef(null);

package/dist/cjs/types/components/layout/useOnClickOutside.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare function useOnClickOutside(callback: () => void): {
-    ref: import("react").RefObject<HTMLDivElement>;
+import { RefObject } from "react";
+export declare function useOnClickOutside(callback: () => void, externalRef?: RefObject<HTMLElement>): {
+    ref: RefObject<HTMLElement>;
 };

package/dist/cjs/types/core/numbers.d.ts

@@ -19,11 +19,5 @@ export declare function convertUSDToTokenAmount(usdAmount: string | number, toke
  * @param amount - The number to format
  * @returns The formatted string
  */
-export declare function formatTokenAmount(amount?: number | bigint | string): string;
-interface FormatUsdAmountOptions {
-    includeSign?: boolean;
-    formatIfVerySmall?: number;
-}
-export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign, formatIfVerySmall }?: FormatUsdAmountOptions): string;
+export declare function formatAmount(amount: number | bigint | string): string;
 export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
-export {};

package/dist/esm/index.js

@@ -6602,11 +6602,9 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
     const price = new BigNumber(tokenPrice);
     return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
 }
-const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 4,
-    minimumSignificantDigits: 2,
-    maximumSignificantDigits: 4,
+const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 5,
 });
 /**
  * Formats a number to the en-US number format
@@ -6614,24 +6612,8 @@ const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
  * @param amount - The number to format
  * @returns The formatted string
  */
-function formatTokenAmount(amount = "0") {
-    return INTL_TOKEN_AMOUNT_FORMATTER.format(amount);
-}
-const INTL_USD_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-    notation: "compact",
-    compactDisplay: "short",
-});
-function formatUsdAmount(amount = "0", { includeSign = true, formatIfVerySmall = 0.01 } = {}) {
-    const parsedAmount = Number(amount);
-    if (parsedAmount < formatIfVerySmall && parsedAmount > 0) {
-        return includeSign ? "<$0.01" : "<0.01";
-    }
-    const formattedAmount = INTL_USD_AMOUNT_FORMATTER.format(parsedAmount);
-    return includeSign ? formattedAmount : formattedAmount.replace("$", "");
+function formatAmount(amount) {
+    return INTL_NUMBER_FORMATTER.format(amount);
 }
 function trimExtraDecimals(value, maxDecimals) {
     var _a;
@@ -18744,6 +18726,21 @@ function DropdownMenuItemWithSubmenu(_a) {
                 }, children: submenu })) })) }));
 }
 
+function useOnClickOutside(callback, externalRef) {
+    const internalRef = useRef(null);
+    const ref = externalRef || internalRef;
+    useEffect(() => {
+        const handleMouseDown = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [callback, ref]);
+    return { ref };
+}
+
 const dropdownPositionClassMap$1 = {
     top: "tw-right-full tw-bottom-[50px]",
     bottom: "tw-right-full tw-top-[50px]",
@@ -18759,6 +18756,14 @@ const collapsedListItemClassMap = {
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent"]);
+    const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
+        itemsContainerRef,
+    });
+    useOnClickOutside(() => {
+        if (isDropdownOpen) {
+            closeDropdown();
+        }
+    }, itemRef);
     const subtitleClassName = cn("tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block");
     // 'small' variant does not have detail
     const showDetail = size === "large" && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -18789,17 +18794,31 @@ function ListItem(_a) {
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? "button" : "div";
     const itemProps = isInteractive ? props : {};
-    const { isDropdownOpen, dropdownRef, openDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
-        itemsContainerRef,
-    });
-    return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
+    const handleInteraction = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        if ("onClick" in props && e.type === "click") {
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+    };
+    // Handle List item click, close dropdown if it's open
+    const handleItemClick = (e) => {
+        handleInteraction(e);
+        if (isDropdownOpen)
+            closeDropdown();
+    };
+    return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-highlight-adjacent tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
                         size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
                             ? "tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100"
-                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: (e) => {
+                            e.stopPropagation();
+                            isDropdownOpen ? closeDropdown() : openDropdown();
+                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" }))] })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
 const ListItemActionsButton = forwardRef((props, ref) => {
@@ -24981,20 +25000,6 @@ function DayPicker(props) {
     return (jsx(RootProvider, __assign({}, props, { children: jsx(Root, { initialProps: props }) })));
 }
 
-function useOnClickOutside(callback) {
-    const ref = useRef(null);
-    useEffect(() => {
-        const handleClick = (e) => {
-            if (ref.current && !ref.current.contains(e.target)) {
-                callback();
-            }
-        };
-        document.addEventListener("click", handleClick);
-        return () => document.removeEventListener("click", handleClick);
-    }, [callback]);
-    return { ref };
-}
-
 function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
     return (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(FilterSection, { title: "Chain", children: jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ["success", "ongoing", "error"].map((s) => (jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === "ongoing" ? jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
 }
@@ -26580,18 +26585,14 @@ function NumericInput(_a) {
             return "0";
         if (userInputType === UserInputType.TOKEN) {
             if (direction === "from") {
-                return formatUsdAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
-                    includeSign: false,
-                });
+                return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
             }
             else {
-                return formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
-                    includeSign: false,
-                });
+                return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0");
             }
         }
         else {
-            return formatTokenAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
+            return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
     }, [
         inputValue,
@@ -26608,7 +26609,7 @@ function NumericInput(_a) {
         : "tw-text-grey-300";
     const BalanceChipTag = balanceChipClickable ? "button" : "div";
     const balanceFormatted = useMemo(() => {
-        return formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
+        return formatAmount(balance !== null && balance !== void 0 ? balance : "0");
     }, [balance]);
     const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = useRef(null);

package/dist/esm/types/components/layout/useOnClickOutside.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare function useOnClickOutside(callback: () => void): {
-    ref: import("react").RefObject<HTMLDivElement>;
+import { RefObject } from "react";
+export declare function useOnClickOutside(callback: () => void, externalRef?: RefObject<HTMLElement>): {
+    ref: RefObject<HTMLElement>;
 };

package/dist/esm/types/core/numbers.d.ts

@@ -19,11 +19,5 @@ export declare function convertUSDToTokenAmount(usdAmount: string | number, toke
  * @param amount - The number to format
  * @returns The formatted string
  */
-export declare function formatTokenAmount(amount?: number | bigint | string): string;
-interface FormatUsdAmountOptions {
-    includeSign?: boolean;
-    formatIfVerySmall?: number;
-}
-export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign, formatIfVerySmall }?: FormatUsdAmountOptions): string;
+export declare function formatAmount(amount: number | bigint | string): string;
 export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
-export {};

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.27.3-beta.0",
+  "version": "0.27.3",
   "author": "",
   "license": "MIT",
   "resolutions": {