@0xsquid/ui 0.9.3 → 0.9.4

package/dist/cjs/index.js

@@ -3191,13 +3191,14 @@ const dropdownPositionClassMap = {
     bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
     center: 'tw-right-[40px] -tw-top-[55px]',
 };
-function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, }) {
+function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, itemsContainerRef, }) {
     const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
     const [dropdownPosition, setDropdownPosition] = react.useState(null);
     const itemRef = react.useRef(null);
     const menuRef = react.useRef(null);
     // Effect to find the best position for the dropdown menu, so it's always visible for the user
     react.useEffect(() => {
+        var _a;
         if (!isDropdownOpen) {
             // when the dropdown is closed, we want to reset its position
             // because user may scroll, and the old position may be out of view, so we'll need to recalculate it
@@ -3205,7 +3206,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
             return;
         }
         const item = itemRef.current;
-        const itemsContainer = item === null || item === void 0 ? void 0 : item.parentElement;
+        const itemsContainer = (_a = itemsContainerRef === null || itemsContainerRef === void 0 ? void 0 : itemsContainerRef.current) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.parentElement;
         const dropdownMenu = menuRef.current;
         if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
             return;
@@ -3240,7 +3241,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
     return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0 peer-focus:tw-opacity-0'), children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
+                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
                     isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
 }
@@ -3290,7 +3291,7 @@ function SettingsItem({ icon, label, controls = [], link, transparent = false, h
     return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
                         'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (controls.map((control, index) => {
                         if (control.type === 'switch') {
-                            const switchControl = (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange }, index));
+                            const switchControl = (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }, index));
                             if (control.tooltip) {
                                 return jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
                             }

package/dist/cjs/types/components/lists/HistoryItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -10,6 +11,7 @@ interface HistoryItemProps {
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/SettingsItem.d.ts

@@ -26,6 +26,7 @@ export type SettingsControl = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
+    disabled?: boolean;
 };
 export interface SettingsItemProps {
     icon: React.ReactNode;

package/dist/esm/index.js

@@ -3189,13 +3189,14 @@ const dropdownPositionClassMap = {
     bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
     center: 'tw-right-[40px] -tw-top-[55px]',
 };
-function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, }) {
+function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, itemsContainerRef, }) {
     const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
     const [dropdownPosition, setDropdownPosition] = useState(null);
     const itemRef = useRef(null);
     const menuRef = useRef(null);
     // Effect to find the best position for the dropdown menu, so it's always visible for the user
     useEffect(() => {
+        var _a;
         if (!isDropdownOpen) {
             // when the dropdown is closed, we want to reset its position
             // because user may scroll, and the old position may be out of view, so we'll need to recalculate it
@@ -3203,7 +3204,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
             return;
         }
         const item = itemRef.current;
-        const itemsContainer = item === null || item === void 0 ? void 0 : item.parentElement;
+        const itemsContainer = (_a = itemsContainerRef === null || itemsContainerRef === void 0 ? void 0 : itemsContainerRef.current) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.parentElement;
         const dropdownMenu = menuRef.current;
         if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
             return;
@@ -3238,7 +3239,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
     return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0 peer-focus:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
+                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
                     isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
 }
@@ -3288,7 +3289,7 @@ function SettingsItem({ icon, label, controls = [], link, transparent = false, h
     return (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
                         'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (controls.map((control, index) => {
                         if (control.type === 'switch') {
-                            const switchControl = (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange }, index));
+                            const switchControl = (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }, index));
                             if (control.tooltip) {
                                 return jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
                             }

package/dist/esm/types/components/lists/HistoryItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -10,6 +11,7 @@ interface HistoryItemProps {
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/lists/SettingsItem.d.ts

@@ -26,6 +26,7 @@ export type SettingsControl = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
+    disabled?: boolean;
 };
 export interface SettingsItemProps {
     icon: React.ReactNode;

package/dist/index.css

@@ -2697,6 +2697,10 @@ input[type='number'] {
   display: flex;
 }
 
+.tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
+  display: none;
+}
+
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0 {
   opacity: 0;
 }
@@ -2714,6 +2718,10 @@ input[type='number'] {
   display: block;
 }
 
+.tw-peer:focus ~ .peer-focus\:tw-hidden {
+  display: none;
+}
+
 .tw-peer:focus ~ .peer-focus\:tw-opacity-0 {
   opacity: 0;
 }

package/dist/index.d.ts

@@ -202,8 +202,9 @@ interface HistoryItemProps {
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
 interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     itemTitle: string | React.ReactNode;
@@ -269,6 +270,7 @@ type SettingsControl = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
+    disabled?: boolean;
 };
 interface SettingsItemProps {
     icon: React.ReactNode;

package/package.json

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