@0xsquid/ui 3.3.1 → 3.3.3-beta-ssr.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/index.js
CHANGED
|
@@ -5192,7 +5192,7 @@ function useConstant(init) {
|
|
|
5192
5192
|
|
|
5193
5193
|
const isBrowser$1 = typeof window !== "undefined";
|
|
5194
5194
|
|
|
5195
|
-
const useIsomorphicLayoutEffect$
|
|
5195
|
+
const useIsomorphicLayoutEffect$2 = isBrowser$1 ? require$$0.useLayoutEffect : require$$0.useEffect;
|
|
5196
5196
|
|
|
5197
5197
|
/**
|
|
5198
5198
|
* @public
|
|
@@ -5497,7 +5497,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
|
|
|
5497
5497
|
*/
|
|
5498
5498
|
const [diffedChildren, setDiffedChildren] = require$$0.useState(presentChildren);
|
|
5499
5499
|
const [renderedChildren, setRenderedChildren] = require$$0.useState(presentChildren);
|
|
5500
|
-
useIsomorphicLayoutEffect$
|
|
5500
|
+
useIsomorphicLayoutEffect$2(() => {
|
|
5501
5501
|
isInitialRender.current = false;
|
|
5502
5502
|
pendingPresentChildren.current = presentChildren;
|
|
5503
5503
|
/**
|
|
@@ -5596,7 +5596,7 @@ const DeprecatedLayoutGroupContext = require$$0.createContext(null);
|
|
|
5596
5596
|
|
|
5597
5597
|
function useIsMounted() {
|
|
5598
5598
|
const isMounted = require$$0.useRef(false);
|
|
5599
|
-
useIsomorphicLayoutEffect$
|
|
5599
|
+
useIsomorphicLayoutEffect$2(() => {
|
|
5600
5600
|
isMounted.current = true;
|
|
5601
5601
|
return () => {
|
|
5602
5602
|
isMounted.current = false;
|
|
@@ -6241,7 +6241,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
|
|
|
6241
6241
|
const wantsHandoff = require$$0.useRef(Boolean(optimisedAppearId) &&
|
|
6242
6242
|
!window.MotionHandoffIsComplete?.(optimisedAppearId) &&
|
|
6243
6243
|
window.MotionHasOptimisedAnimation?.(optimisedAppearId));
|
|
6244
|
-
useIsomorphicLayoutEffect$
|
|
6244
|
+
useIsomorphicLayoutEffect$2(() => {
|
|
6245
6245
|
if (!visualElement)
|
|
6246
6246
|
return;
|
|
6247
6247
|
isMounted.current = true;
|
|
@@ -39395,10 +39395,11 @@ const Card = ({ variant = "transparent", className, children, }) => {
|
|
|
39395
39395
|
return (jsxRuntime.jsx("div", { className: cn("tw-rounded-squid-l tw-border tw-border-material-dark-average tw-bg-material-dark-average tw-backdrop-blur/10", className), children: children }));
|
|
39396
39396
|
};
|
|
39397
39397
|
|
|
39398
|
+
const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? require$$0.useLayoutEffect : require$$0.useEffect;
|
|
39398
39399
|
function useOnResize(ref, callback) {
|
|
39399
39400
|
const callbackRef = require$$0.useRef(callback);
|
|
39400
39401
|
callbackRef.current = callback;
|
|
39401
|
-
|
|
39402
|
+
useIsomorphicLayoutEffect$1(() => {
|
|
39402
39403
|
if (!ref.current)
|
|
39403
39404
|
return;
|
|
39404
39405
|
const observer = new ResizeObserver(([entry]) => {
|
|
@@ -39411,8 +39412,13 @@ function useOnResize(ref, callback) {
|
|
|
39411
39412
|
return () => observer.disconnect();
|
|
39412
39413
|
}, [ref.current]);
|
|
39413
39414
|
}
|
|
39415
|
+
const EMPTY_RECT = {
|
|
39416
|
+
x: 0, y: 0, width: 0, height: 0,
|
|
39417
|
+
top: 0, left: 0, right: 0, bottom: 0,
|
|
39418
|
+
toJSON: () => ({}),
|
|
39419
|
+
};
|
|
39414
39420
|
function useRect(ref) {
|
|
39415
|
-
const [rect, setRect] = require$$0.useState(
|
|
39421
|
+
const [rect, setRect] = require$$0.useState(EMPTY_RECT);
|
|
39416
39422
|
useOnResize(ref, setRect);
|
|
39417
39423
|
return rect;
|
|
39418
39424
|
}
|
|
@@ -40107,7 +40113,7 @@ const useIsomorphicLayoutEffect = IS_SERVER ? require$$0.useEffect : require$$0.
|
|
|
40107
40113
|
* // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
|
|
40108
40114
|
* ```
|
|
40109
40115
|
*/
|
|
40110
|
-
function useMediaQuery(query, { defaultValue = false, initializeWithValue =
|
|
40116
|
+
function useMediaQuery(query, { defaultValue = false, initializeWithValue = false, } = {}) {
|
|
40111
40117
|
const getMatches = (query) => {
|
|
40112
40118
|
if (IS_SERVER) {
|
|
40113
40119
|
return defaultValue;
|
|
@@ -40195,6 +40201,8 @@ function useUserTheme() {
|
|
|
40195
40201
|
const [themePreference, setThemePreference] = require$$0.useState(getInitialTheme);
|
|
40196
40202
|
const [themeType, setThemeType] = require$$0.useState(getEffectiveTheme(themePreference));
|
|
40197
40203
|
require$$0.useEffect(() => {
|
|
40204
|
+
if (typeof window === "undefined")
|
|
40205
|
+
return;
|
|
40198
40206
|
const handleThemeChange = (e) => {
|
|
40199
40207
|
setThemePreference(e.detail);
|
|
40200
40208
|
};
|
|
@@ -40204,6 +40212,8 @@ function useUserTheme() {
|
|
|
40204
40212
|
};
|
|
40205
40213
|
}, []);
|
|
40206
40214
|
require$$0.useEffect(() => {
|
|
40215
|
+
if (typeof window === "undefined")
|
|
40216
|
+
return;
|
|
40207
40217
|
const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
|
|
40208
40218
|
const handleChange = () => {
|
|
40209
40219
|
if (themePreference === exports.ThemePreference.SYSTEM) {
|
|
@@ -40221,6 +40231,8 @@ function useUserTheme() {
|
|
|
40221
40231
|
}, [themePreference]);
|
|
40222
40232
|
const setThemeManually = (theme) => {
|
|
40223
40233
|
setThemePreference(theme);
|
|
40234
|
+
if (typeof window === "undefined")
|
|
40235
|
+
return;
|
|
40224
40236
|
localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
40225
40237
|
window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
|
|
40226
40238
|
};
|
|
@@ -40242,6 +40254,8 @@ function getInitialTheme() {
|
|
|
40242
40254
|
function getEffectiveTheme(themeType) {
|
|
40243
40255
|
if (themeType !== exports.ThemePreference.SYSTEM)
|
|
40244
40256
|
return themeType;
|
|
40257
|
+
if (typeof window === "undefined")
|
|
40258
|
+
return "dark";
|
|
40245
40259
|
return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
|
|
40246
40260
|
}
|
|
40247
40261
|
|
|
@@ -41461,7 +41475,7 @@ function FilterSection({ title, children, collapsed = false, handleCollapse, han
|
|
|
41461
41475
|
maxHeight: 0,
|
|
41462
41476
|
},
|
|
41463
41477
|
expanded: {
|
|
41464
|
-
maxHeight: Math.min(height, window.innerHeight - 40) + "px",
|
|
41478
|
+
maxHeight: Math.min(height, (typeof window !== "undefined" ? window.innerHeight : height) - 40) + "px",
|
|
41465
41479
|
},
|
|
41466
41480
|
}), [height]);
|
|
41467
41481
|
return (jsxRuntime.jsxs("div", { className: "tw-flex tw-min-h-10 tw-flex-col", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-min-h-squid-xl tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-between tw-px-squid-m tw-text-grey-300", onClick: () => {
|
|
@@ -83709,7 +83723,7 @@ function NFTPreviewCard({ name, imageURI, tokenID, collection, nftType }) {
|
|
|
83709
83723
|
function InteractionTransactionView({ title = "Interaction", hash, status, url, chain, address, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83710
83724
|
if (isLoading)
|
|
83711
83725
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83712
|
-
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx("div", { className: "tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-royal-400 tw-text-grey-900", children: jsxRuntime.jsx(ThumbsUp, { size: "24" }) }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true })
|
|
83726
|
+
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx("div", { className: "tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-royal-400 tw-text-grey-900", children: jsxRuntime.jsx(ThumbsUp, { size: "24" }) }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true }) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83713
83727
|
}
|
|
83714
83728
|
|
|
83715
83729
|
function LinkButton({ href, label }) {
|
|
@@ -83726,13 +83740,13 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
|
|
|
83726
83740
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83727
83741
|
if (isLoading)
|
|
83728
83742
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83729
|
-
return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: fromChain ? (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText:
|
|
83743
|
+
return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: fromChain ? (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: toAddress, label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83730
83744
|
}
|
|
83731
83745
|
|
|
83732
83746
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
|
83733
83747
|
if (isLoading)
|
|
83734
83748
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83735
|
-
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, {})) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(
|
|
83749
|
+
return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, {})) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: toAddress, label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83736
83750
|
}
|
|
83737
83751
|
|
|
83738
83752
|
function TransactionView({ type, isLoading, data, }) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
interface UseMediaQueryOptions {
|
|
2
2
|
/**
|
|
3
3
|
* The default value to return if the hook is being run on the server.
|
|
4
4
|
* @default false
|
|
@@ -9,7 +9,7 @@ type UseMediaQueryOptions = {
|
|
|
9
9
|
* @default true
|
|
10
10
|
*/
|
|
11
11
|
initializeWithValue?: boolean;
|
|
12
|
-
}
|
|
12
|
+
}
|
|
13
13
|
/**
|
|
14
14
|
* Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
|
|
15
15
|
* @param {string} query - The media query to track.
|
package/dist/esm/index.js
CHANGED
|
@@ -5172,7 +5172,7 @@ function useConstant(init) {
|
|
|
5172
5172
|
|
|
5173
5173
|
const isBrowser$1 = typeof window !== "undefined";
|
|
5174
5174
|
|
|
5175
|
-
const useIsomorphicLayoutEffect$
|
|
5175
|
+
const useIsomorphicLayoutEffect$2 = isBrowser$1 ? useLayoutEffect : useEffect;
|
|
5176
5176
|
|
|
5177
5177
|
/**
|
|
5178
5178
|
* @public
|
|
@@ -5477,7 +5477,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
|
|
|
5477
5477
|
*/
|
|
5478
5478
|
const [diffedChildren, setDiffedChildren] = useState(presentChildren);
|
|
5479
5479
|
const [renderedChildren, setRenderedChildren] = useState(presentChildren);
|
|
5480
|
-
useIsomorphicLayoutEffect$
|
|
5480
|
+
useIsomorphicLayoutEffect$2(() => {
|
|
5481
5481
|
isInitialRender.current = false;
|
|
5482
5482
|
pendingPresentChildren.current = presentChildren;
|
|
5483
5483
|
/**
|
|
@@ -5576,7 +5576,7 @@ const DeprecatedLayoutGroupContext = createContext(null);
|
|
|
5576
5576
|
|
|
5577
5577
|
function useIsMounted() {
|
|
5578
5578
|
const isMounted = useRef(false);
|
|
5579
|
-
useIsomorphicLayoutEffect$
|
|
5579
|
+
useIsomorphicLayoutEffect$2(() => {
|
|
5580
5580
|
isMounted.current = true;
|
|
5581
5581
|
return () => {
|
|
5582
5582
|
isMounted.current = false;
|
|
@@ -6221,7 +6221,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
|
|
|
6221
6221
|
const wantsHandoff = useRef(Boolean(optimisedAppearId) &&
|
|
6222
6222
|
!window.MotionHandoffIsComplete?.(optimisedAppearId) &&
|
|
6223
6223
|
window.MotionHasOptimisedAnimation?.(optimisedAppearId));
|
|
6224
|
-
useIsomorphicLayoutEffect$
|
|
6224
|
+
useIsomorphicLayoutEffect$2(() => {
|
|
6225
6225
|
if (!visualElement)
|
|
6226
6226
|
return;
|
|
6227
6227
|
isMounted.current = true;
|
|
@@ -39375,10 +39375,11 @@ const Card = ({ variant = "transparent", className, children, }) => {
|
|
|
39375
39375
|
return (jsx("div", { className: cn("tw-rounded-squid-l tw-border tw-border-material-dark-average tw-bg-material-dark-average tw-backdrop-blur/10", className), children: children }));
|
|
39376
39376
|
};
|
|
39377
39377
|
|
|
39378
|
+
const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
39378
39379
|
function useOnResize(ref, callback) {
|
|
39379
39380
|
const callbackRef = useRef(callback);
|
|
39380
39381
|
callbackRef.current = callback;
|
|
39381
|
-
|
|
39382
|
+
useIsomorphicLayoutEffect$1(() => {
|
|
39382
39383
|
if (!ref.current)
|
|
39383
39384
|
return;
|
|
39384
39385
|
const observer = new ResizeObserver(([entry]) => {
|
|
@@ -39391,8 +39392,13 @@ function useOnResize(ref, callback) {
|
|
|
39391
39392
|
return () => observer.disconnect();
|
|
39392
39393
|
}, [ref.current]);
|
|
39393
39394
|
}
|
|
39395
|
+
const EMPTY_RECT = {
|
|
39396
|
+
x: 0, y: 0, width: 0, height: 0,
|
|
39397
|
+
top: 0, left: 0, right: 0, bottom: 0,
|
|
39398
|
+
toJSON: () => ({}),
|
|
39399
|
+
};
|
|
39394
39400
|
function useRect(ref) {
|
|
39395
|
-
const [rect, setRect] = useState(
|
|
39401
|
+
const [rect, setRect] = useState(EMPTY_RECT);
|
|
39396
39402
|
useOnResize(ref, setRect);
|
|
39397
39403
|
return rect;
|
|
39398
39404
|
}
|
|
@@ -40087,7 +40093,7 @@ const useIsomorphicLayoutEffect = IS_SERVER ? useEffect : useLayoutEffect;
|
|
|
40087
40093
|
* // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
|
|
40088
40094
|
* ```
|
|
40089
40095
|
*/
|
|
40090
|
-
function useMediaQuery(query, { defaultValue = false, initializeWithValue =
|
|
40096
|
+
function useMediaQuery(query, { defaultValue = false, initializeWithValue = false, } = {}) {
|
|
40091
40097
|
const getMatches = (query) => {
|
|
40092
40098
|
if (IS_SERVER) {
|
|
40093
40099
|
return defaultValue;
|
|
@@ -40175,6 +40181,8 @@ function useUserTheme() {
|
|
|
40175
40181
|
const [themePreference, setThemePreference] = useState(getInitialTheme);
|
|
40176
40182
|
const [themeType, setThemeType] = useState(getEffectiveTheme(themePreference));
|
|
40177
40183
|
useEffect(() => {
|
|
40184
|
+
if (typeof window === "undefined")
|
|
40185
|
+
return;
|
|
40178
40186
|
const handleThemeChange = (e) => {
|
|
40179
40187
|
setThemePreference(e.detail);
|
|
40180
40188
|
};
|
|
@@ -40184,6 +40192,8 @@ function useUserTheme() {
|
|
|
40184
40192
|
};
|
|
40185
40193
|
}, []);
|
|
40186
40194
|
useEffect(() => {
|
|
40195
|
+
if (typeof window === "undefined")
|
|
40196
|
+
return;
|
|
40187
40197
|
const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
|
|
40188
40198
|
const handleChange = () => {
|
|
40189
40199
|
if (themePreference === ThemePreference.SYSTEM) {
|
|
@@ -40201,6 +40211,8 @@ function useUserTheme() {
|
|
|
40201
40211
|
}, [themePreference]);
|
|
40202
40212
|
const setThemeManually = (theme) => {
|
|
40203
40213
|
setThemePreference(theme);
|
|
40214
|
+
if (typeof window === "undefined")
|
|
40215
|
+
return;
|
|
40204
40216
|
localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
40205
40217
|
window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
|
|
40206
40218
|
};
|
|
@@ -40222,6 +40234,8 @@ function getInitialTheme() {
|
|
|
40222
40234
|
function getEffectiveTheme(themeType) {
|
|
40223
40235
|
if (themeType !== ThemePreference.SYSTEM)
|
|
40224
40236
|
return themeType;
|
|
40237
|
+
if (typeof window === "undefined")
|
|
40238
|
+
return "dark";
|
|
40225
40239
|
return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
|
|
40226
40240
|
}
|
|
40227
40241
|
|
|
@@ -41441,7 +41455,7 @@ function FilterSection({ title, children, collapsed = false, handleCollapse, han
|
|
|
41441
41455
|
maxHeight: 0,
|
|
41442
41456
|
},
|
|
41443
41457
|
expanded: {
|
|
41444
|
-
maxHeight: Math.min(height, window.innerHeight - 40) + "px",
|
|
41458
|
+
maxHeight: Math.min(height, (typeof window !== "undefined" ? window.innerHeight : height) - 40) + "px",
|
|
41445
41459
|
},
|
|
41446
41460
|
}), [height]);
|
|
41447
41461
|
return (jsxs("div", { className: "tw-flex tw-min-h-10 tw-flex-col", children: [jsxs("div", { className: "tw-flex tw-min-h-squid-xl tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-between tw-px-squid-m tw-text-grey-300", onClick: () => {
|
|
@@ -83689,7 +83703,7 @@ function NFTPreviewCard({ name, imageURI, tokenID, collection, nftType }) {
|
|
|
83689
83703
|
function InteractionTransactionView({ title = "Interaction", hash, status, url, chain, address, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83690
83704
|
if (isLoading)
|
|
83691
83705
|
return jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83692
|
-
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx("div", { className: "tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-royal-400 tw-text-grey-900", children: jsx(ThumbsUp, { size: "24" }) }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true })
|
|
83706
|
+
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx("div", { className: "tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-royal-400 tw-text-grey-900", children: jsx(ThumbsUp, { size: "24" }) }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: address, showCopyButton: true }) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83693
83707
|
}
|
|
83694
83708
|
|
|
83695
83709
|
function LinkButton({ href, label }) {
|
|
@@ -83706,13 +83720,13 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
|
|
|
83706
83720
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83707
83721
|
if (isLoading)
|
|
83708
83722
|
return jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83709
|
-
return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: fromChain ? (jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText:
|
|
83723
|
+
return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: fromChain ? (jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: fromToken ? (jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83710
83724
|
}
|
|
83711
83725
|
|
|
83712
83726
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
|
83713
83727
|
if (isLoading)
|
|
83714
83728
|
return jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83715
|
-
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, {})) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(
|
|
83729
|
+
return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, {})) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83716
83730
|
}
|
|
83717
83731
|
|
|
83718
83732
|
function TransactionView({ type, isLoading, data, }) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
interface UseMediaQueryOptions {
|
|
2
2
|
/**
|
|
3
3
|
* The default value to return if the hook is being run on the server.
|
|
4
4
|
* @default false
|
|
@@ -9,7 +9,7 @@ type UseMediaQueryOptions = {
|
|
|
9
9
|
* @default true
|
|
10
10
|
*/
|
|
11
11
|
initializeWithValue?: boolean;
|
|
12
|
-
}
|
|
12
|
+
}
|
|
13
13
|
/**
|
|
14
14
|
* Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
|
|
15
15
|
* @param {string} query - The media query to track.
|
package/dist/index.d.ts
CHANGED
|
@@ -2482,7 +2482,7 @@ declare function useDropdownMenu(props?: UseDropdownMenuParams): {
|
|
|
2482
2482
|
menuRef: react__default.RefObject<HTMLDivElement>;
|
|
2483
2483
|
};
|
|
2484
2484
|
|
|
2485
|
-
|
|
2485
|
+
interface UseMediaQueryOptions {
|
|
2486
2486
|
/**
|
|
2487
2487
|
* The default value to return if the hook is being run on the server.
|
|
2488
2488
|
* @default false
|
|
@@ -2493,7 +2493,7 @@ type UseMediaQueryOptions = {
|
|
|
2493
2493
|
* @default true
|
|
2494
2494
|
*/
|
|
2495
2495
|
initializeWithValue?: boolean;
|
|
2496
|
-
}
|
|
2496
|
+
}
|
|
2497
2497
|
/**
|
|
2498
2498
|
* Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
|
|
2499
2499
|
* @param {string} query - The media query to track.
|