@sanity/ui 4.0.7 → 4.1.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/{arrow-CL8xmdbg.js → arrow-C6TlkggA.js} +5 -4
- package/dist/arrow-C6TlkggA.js.map +1 -0
- package/dist/autocomplete.d.ts.map +1 -1
- package/dist/autocomplete.js +35 -39
- package/dist/autocomplete.js.map +1 -1
- package/dist/breadcrumbs.d.ts.map +1 -1
- package/dist/breadcrumbs.js +28 -30
- package/dist/breadcrumbs.js.map +1 -1
- package/dist/{button-DQH2KIbq.js → button-D3iEd7Je.js} +7 -7
- package/dist/button-D3iEd7Je.js.map +1 -0
- package/dist/button-dnqMFkWg.d.ts.map +1 -1
- package/dist/{hotkeys-BPlacpG8.js → hotkeys-Bi6Q5963.js} +26 -26
- package/dist/hotkeys-Bi6Q5963.js.map +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +310 -344
- package/dist/index.js.map +1 -1
- package/dist/layer-BK7xWHcE.js +61 -0
- package/dist/layer-BK7xWHcE.js.map +1 -0
- package/dist/layer-ChlP9Ik6.d.ts.map +1 -1
- package/dist/menu.d.ts.map +1 -1
- package/dist/menu.js +46 -34
- package/dist/menu.js.map +1 -1
- package/dist/{popover-CEbjxiPx.js → popover-CdBTZDvj.js} +2 -2
- package/dist/{popover-CEbjxiPx.js.map → popover-CdBTZDvj.js.map} +1 -1
- package/dist/popover.js +1 -1
- package/dist/styles.css +408 -0
- package/dist/{textInput-B6ZZJSOj.js → textInput-Bu3QuADZ.js} +36 -48
- package/dist/textInput-Bu3QuADZ.js.map +1 -0
- package/dist/toast.d.ts.map +1 -1
- package/dist/toast.js +77 -73
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.d.ts.map +1 -1
- package/dist/tooltip.js +87 -90
- package/dist/tooltip.js.map +1 -1
- package/package.json +6 -5
- package/dist/arrow-CL8xmdbg.js.map +0 -1
- package/dist/button-DQH2KIbq.js.map +0 -1
- package/dist/hotkeys-BPlacpG8.js.map +0 -1
- package/dist/layer-DGn7KJIB.js +0 -61
- package/dist/layer-DGn7KJIB.js.map +0 -1
- package/dist/textInput-B6ZZJSOj.js.map +0 -1
package/dist/toast.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","names":["radius = 3","visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}","['hidden', 'initial']","['visible', 'slideIn']","['hidden', 'slideOut']","title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )","description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )","<TextBox flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </TextBox>","closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )","<MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <TextBox flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </TextBox>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>","hasDuration && (\n <MotionLoadingBar variants={content} transition={transition}>\n <LoadingBarMask tone={cardTone} radius={radius} />\n <MotionLoadingBarProgress\n key={`progress-${updatedAt}`}\n tone={cardTone}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onClose}\n />\n </MotionLoadingBar>\n )","<MotionToast\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n forwardedAs=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <TextBox flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </TextBox>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <MotionLoadingBar variants={content} transition={transition}>\n <LoadingBarMask tone={cardTone} radius={radius} />\n <MotionLoadingBarProgress\n key={`progress-${updatedAt}`}\n tone={cardTone}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onClose}\n />\n </MotionLoadingBar>\n )}\n </MotionToast>","hasDuration ? '' : undefined","() => true","() => false","padding = 4","gap = 3","{zIndex}","<StyledLayer\n forwardedAs=\"ul\"\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </StyledLayer>","zOffset = 1","[]","{version: 0.0, push}","toast","useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])","mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )","({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n )","<ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>","ToastContext.Provider","{dismiss, id, params, updatedAt}","params","dismiss","id"],"sources":["../src/core/components/toast/styles.ts","../src/core/components/toast/toast.tsx","../src/core/hooks/useMounted.ts","../src/core/components/toast/toastContext.ts","../src/core/components/toast/toastLayer.tsx","../src/core/components/toast/toastState.ts","../src/core/components/toast/toastProvider.tsx","../src/core/components/toast/useToast.ts"],"sourcesContent":["import {styled} from 'styled-components'\n\nimport {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {Card, type CardProps} from '../../primitives/card/card'\nimport {Flex} from '../../primitives/flex/flex'\nimport type {ButtonTone} from '../../types/button'\n\nconst LOADING_BAR_HEIGHT = 2\n\nexport const STATUS_CARD_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ThemeColorStateToneKey}\n\nexport const BUTTON_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ButtonTone}\n\nexport const TextBox = styled(Flex)`\n overflow-x: auto;\n`\n\nexport const StyledToast = styled(Card)`\n pointer-events: all;\n width: 100%;\n position: relative;\n overflow: hidden;\n overflow: clip;\n\n &[data-has-duration] {\n padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);\n }\n`\n\nexport const LoadingBar = styled.div`\n display: flex;\n position: absolute;\n bottom: 0px;\n top: 0px;\n left: 0px;\n right: 0px;\n pointer-events: none;\n z-index: -1;\n overflow: hidden;\n overflow: clip;\n background: transparent;\n align-items: flex-end;\n will-change: opacity;\n`\n\nexport const LoadingBarMask = styled(Card)`\n position: absolute;\n top: 0;\n left: -${LOADING_BAR_HEIGHT}px;\n right: -${LOADING_BAR_HEIGHT}px;\n bottom: ${LOADING_BAR_HEIGHT}px;\n z-index: 1;\n`\n\ntype LoadingBarProgressProps = Omit<CardProps, 'tone'> & {\n tone: ThemeColorStateToneKey\n}\nexport const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`\n display: block;\n height: 100%;\n width: 100%;\n transform-origin: 0% 50%;\n background-color: ${(props) => {\n const {color} = getTheme_v2(props.theme)\n\n return color.button.default[props.tone].enabled.bg\n }};\n`\n","import {CloseIcon} from '@sanity/icons/Close'\nimport {motion, stagger, type Variant, type Variants} from 'motion/react'\n\nimport {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'\nimport {Box} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Flex} from '../../primitives/flex/flex'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {\n BUTTON_TONE,\n LoadingBar,\n LoadingBarMask,\n LoadingBarProgress,\n STATUS_CARD_TONE,\n StyledToast,\n TextBox,\n} from './styles'\n\n/**\n * @public\n */\nexport interface ToastProps {\n closable?: boolean\n description?: React.ReactNode\n onClose: () => void\n radius?: number | number[]\n title?: React.ReactNode\n status?: 'error' | 'warning' | 'success' | 'info'\n duration?: number\n updatedAt?: number\n}\n\nconst ROLES = {\n error: 'alert',\n warning: 'alert',\n success: 'alert',\n info: 'alert',\n} as const\n\n// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions\n// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value\nconst LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24\n\n/**\n * The `Toast` component gives feedback to users when an action has taken place.\n *\n * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.\n *\n * @public\n */\nexport function Toast(\n props: ToastProps &\n Omit<\n React.HTMLProps<HTMLDivElement>,\n | 'as'\n | 'height'\n | 'ref'\n | 'title'\n | 'onAnimationStart'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDrag'\n >,\n): React.JSX.Element {\n const {\n closable,\n description,\n duration,\n onClose,\n radius = 3,\n title,\n status,\n updatedAt,\n ...restProps\n } = props\n const cardTone = status ? STATUS_CARD_TONE[status] : 'default'\n const buttonTone = status ? BUTTON_TONE[status] : 'default'\n const role = status ? ROLES[status] : 'status'\n\n const prefersReducedMotion = usePrefersReducedMotion()\n\n const visualDuration: number = prefersReducedMotion ? 0 : 0.26\n const transition = visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}\n\n const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG\n const initial: ContainerVariants[] = ['hidden', 'initial']\n const animate: ContainerVariants[] = ['visible', 'slideIn']\n const exit: ContainerVariants[] = ['hidden', 'slideOut']\n\n return (\n <MotionToast\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n forwardedAs=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <TextBox flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </TextBox>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <MotionLoadingBar variants={content} transition={transition}>\n <LoadingBarMask tone={cardTone} radius={radius} />\n <MotionLoadingBarProgress\n key={`progress-${updatedAt}`}\n tone={cardTone}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onClose}\n />\n </MotionLoadingBar>\n )}\n </MotionToast>\n )\n}\n\nconst container = {\n initial: {y: 32, scale: 0.5, zIndex: 1},\n hidden: {opacity: 0},\n visible: (visualDuration: number) => {\n if (!visualDuration) return {opacity: 1}\n\n return {\n opacity: 1,\n transition: {\n when: 'beforeChildren',\n delayChildren: stagger(visualDuration / 3),\n duration: visualDuration / 3,\n },\n }\n },\n slideIn: {\n y: 0,\n scale: 1,\n },\n slideOut: {\n zIndex: 0,\n scale: 0.75,\n },\n} satisfies Variants\ntype ContainerVariants = keyof typeof container\n\nconst content = {\n initial: {\n willChange: 'transform',\n },\n hidden: {\n opacity: 0,\n },\n visible: {\n opacity: 1,\n },\n} satisfies Partial<Record<ContainerVariants, Variant>>\n\nconst MotionToast = motion.create(StyledToast)\nconst MotionFlex = motion.create(Flex)\nconst MotionText = motion.create(Text)\nconst MotionLoadingBar = motion.create(LoadingBar)\nconst MotionLoadingBarProgress = motion.create(LoadingBarProgress)\n","import {useSyncExternalStore} from 'react'\n\n/**\n * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.\n * @public\n */\nexport function useMounted(): boolean {\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nconst subscribe = () => () => {}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {ToastContextValue} from './types'\n\nexport const ToastContext = createGlobalScopedContext<ToastContextValue | null>(\n '@sanity/ui/context/toast',\n null,\n)\n","import {styled} from 'styled-components'\n\nimport {Grid} from '../../primitives/grid/grid'\nimport {useLayer} from '../../utils/layer/useLayer'\n\n/**\n * @public\n */\nexport interface ToastLayerProps {\n children: React.ReactNode\n padding?: number | number[]\n paddingX?: number | number[]\n paddingY?: number | number[]\n gap?: number | number[]\n}\n\n/**\n * @internal\n */\nexport function ToastLayer(props: ToastLayerProps): React.JSX.Element {\n const {children, padding = 4, paddingX, paddingY, gap = 3} = props\n const {zIndex} = useLayer()\n\n return (\n <StyledLayer\n forwardedAs=\"ul\"\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </StyledLayer>\n )\n}\n\nconst StyledLayer = styled(Grid)`\n box-sizing: border-box;\n position: fixed;\n right: 0;\n bottom: 0;\n list-style: none;\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n`\n","let toastId = 0\n\n/** @internal */\nexport function generateToastId(): string {\n return String(toastId++)\n}\n","import {AnimatePresence} from 'motion/react'\nimport {startTransition, useMemo, useState} from 'react'\n\nimport {useMounted} from '../../hooks/useMounted'\nimport {LayerProvider} from '../../utils/layer/layerProvider'\nimport {Toast} from './toast'\nimport {ToastContext} from './toastContext'\nimport {ToastLayer, type ToastLayerProps} from './toastLayer'\nimport {generateToastId} from './toastState'\nimport {ToastContextValue, ToastParams} from './types'\n\ntype ToastState = {\n dismiss: () => void\n id: string\n updatedAt: number\n params: ToastParams\n}[]\n\n/**\n * @public\n */\nexport interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {\n children?: React.ReactNode\n zOffset?: number | number[]\n}\n\n/**\n * @public\n */\nexport function ToastProvider(props: ToastProviderProps): React.JSX.Element {\n const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props\n const [state, setState] = useState<ToastState>([])\n const mounted = useMounted()\n\n const value: ToastContextValue = useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])\n\n return (\n <ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>\n )\n}\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {ToastContext} from './toastContext'\nimport {ToastContextValue} from './types'\n\n/**\n * @public\n */\nexport function useToast(): ToastContextValue {\n const value = useContext(ToastContext)\n\n if (!value) {\n throw new Error('useToast(): missing context value')\n }\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (!isRecord(value) || value.version !== 0.0) {\n throw new Error('useToast(): the context value is not compatible')\n }\n\n return value\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toast.js","names":["radius = 3","visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}","['hidden', 'initial']","['visible', 'slideIn']","['hidden', 'slideOut']","clsx(toast, className)","title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )","description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )","<Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>","closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )","<MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>","hasDuration && (\n <motion.div className={loadingBar} variants={content} transition={transition}>\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )","motion.div","<MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div className={loadingBar} variants={content} transition={transition}>\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>","hasDuration ? '' : undefined","{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}","bg","color.button.default[tone]","{scaleX: 0}","{scaleX: 1}","{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}","duration / 1_000","<MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />","() => true","() => false","padding = 4","gap = 3","{zIndex}","<Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>","zOffset = 1","[]","{version: 0.0, push}","toast","useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])","mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )","({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n )","<ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>","ToastContext.Provider","{dismiss, id, params, updatedAt}","params","dismiss","id"],"sources":["../src/core/components/toast/styles.ts","../src/core/components/toast/toast.css.ts","../src/core/components/toast/toast.tsx","../src/core/hooks/useMounted.ts","../src/core/components/toast/toastContext.ts","../src/core/components/toast/toastLayer.css.ts","../src/core/components/toast/toastLayer.tsx","../src/core/components/toast/toastState.ts","../src/core/components/toast/toastProvider.tsx","../src/core/components/toast/useToast.ts"],"sourcesContent":["import {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport type {ButtonTone} from '../../types/button'\n\nexport const STATUS_CARD_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ThemeColorStateToneKey}\n\nexport const BUTTON_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ButtonTone}\n","import {style} from '@vanilla-extract/css'\n\nconst LOADING_BAR_HEIGHT = 2\n\nexport const toast = style({\n pointerEvents: 'all',\n width: '100%',\n position: 'relative',\n overflow: 'clip',\n selectors: {\n '&[data-has-duration]': {\n paddingBottom: `calc(${LOADING_BAR_HEIGHT}px / 2)`,\n },\n },\n})\n\nexport const toastText = style({\n overflowX: 'auto',\n})\n\nexport const loadingBar = style({\n display: 'flex',\n position: 'absolute',\n bottom: '0px',\n top: '0px',\n left: '0px',\n right: '0px',\n pointerEvents: 'none',\n zIndex: -1,\n overflow: 'clip',\n background: 'transparent',\n alignItems: 'flex-end',\n willChange: 'opacity',\n})\n\nexport const loadingBarMask = style({\n position: 'absolute',\n top: 0,\n left: `-${LOADING_BAR_HEIGHT}px`,\n right: `-${LOADING_BAR_HEIGHT}px`,\n bottom: `${LOADING_BAR_HEIGHT}px`,\n zIndex: 1,\n})\n\nexport const loadingBarProgress = style({\n display: 'block',\n height: '100%',\n width: '100%',\n transformOrigin: '0% 50%',\n selectors: {\n '&&': {\n backgroundColor: 'var(--toast-loading-bar-bg)',\n },\n },\n})\n","import {CloseIcon} from '@sanity/icons/Close'\nimport {clsx} from 'clsx/lite'\nimport {motion, stagger, type Variant, type Variants} from 'motion/react'\n\nimport {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'\nimport {Box} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Flex} from '../../primitives/flex/flex'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {BUTTON_TONE, STATUS_CARD_TONE} from './styles'\n\nimport {loadingBar, loadingBarMask, loadingBarProgress, toast, toastText} from './toast.css'\n\n/**\n * @public\n */\nexport interface ToastProps {\n closable?: boolean\n description?: React.ReactNode\n onClose: () => void\n radius?: number | number[]\n title?: React.ReactNode\n status?: 'error' | 'warning' | 'success' | 'info'\n duration?: number\n updatedAt?: number\n}\n\nconst ROLES = {\n error: 'alert',\n warning: 'alert',\n success: 'alert',\n info: 'alert',\n} as const\n\n// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions\n// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value\nconst LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24\n\n/**\n * The `Toast` component gives feedback to users when an action has taken place.\n *\n * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.\n *\n * @public\n */\nexport function Toast(\n props: ToastProps &\n Omit<\n React.HTMLProps<HTMLDivElement>,\n | 'as'\n | 'height'\n | 'ref'\n | 'title'\n | 'onAnimationStart'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDrag'\n >,\n): React.JSX.Element {\n const {\n className,\n closable,\n description,\n duration,\n onClose,\n radius = 3,\n title,\n status,\n updatedAt,\n ...restProps\n } = props\n const cardTone = status ? STATUS_CARD_TONE[status] : 'default'\n const buttonTone = status ? BUTTON_TONE[status] : 'default'\n const role = status ? ROLES[status] : 'status'\n\n const prefersReducedMotion = usePrefersReducedMotion()\n\n const visualDuration: number = prefersReducedMotion ? 0 : 0.26\n const transition = visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}\n\n const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG\n const initial: ContainerVariants[] = ['hidden', 'initial']\n const animate: ContainerVariants[] = ['visible', 'slideIn']\n const exit: ContainerVariants[] = ['hidden', 'slideOut']\n\n return (\n <MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div className={loadingBar} variants={content} transition={transition}>\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>\n )\n}\n\ninterface LoadingBarProgressProps {\n duration: number\n onComplete: () => void\n tone: ThemeColorStateToneKey\n visualDuration: number\n}\n\nfunction LoadingBarProgress(props: LoadingBarProgressProps) {\n const {duration, onComplete, tone, visualDuration} = props\n const {color} = useTheme_v2()\n\n return (\n <MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />\n )\n}\n\nconst container = {\n initial: {y: 32, scale: 0.5, zIndex: 1},\n hidden: {opacity: 0},\n visible: (visualDuration: number) => {\n if (!visualDuration) return {opacity: 1}\n\n return {\n opacity: 1,\n transition: {\n when: 'beforeChildren',\n delayChildren: stagger(visualDuration / 3),\n duration: visualDuration / 3,\n },\n }\n },\n slideIn: {\n y: 0,\n scale: 1,\n },\n slideOut: {\n zIndex: 0,\n scale: 0.75,\n },\n} satisfies Variants\ntype ContainerVariants = keyof typeof container\n\nconst content = {\n initial: {\n willChange: 'transform',\n },\n hidden: {\n opacity: 0,\n },\n visible: {\n opacity: 1,\n },\n} satisfies Partial<Record<ContainerVariants, Variant>>\n\nconst MotionCard = motion.create(Card)\nconst MotionFlex = motion.create(Flex)\nconst MotionText = motion.create(Text)\n","import {useSyncExternalStore} from 'react'\n\n/**\n * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.\n * @public\n */\nexport function useMounted(): boolean {\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nconst subscribe = () => () => {}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {ToastContextValue} from './types'\n\nexport const ToastContext = createGlobalScopedContext<ToastContextValue | null>(\n '@sanity/ui/context/toast',\n null,\n)\n","import {style} from '@vanilla-extract/css'\n\nexport const toastLayer = style({\n boxSizing: 'border-box',\n position: 'fixed',\n right: 0,\n bottom: 0,\n listStyle: 'none',\n pointerEvents: 'none',\n maxWidth: '420px',\n width: '100%',\n})\n","import {Grid} from '../../primitives/grid/grid'\nimport {useLayer} from '../../utils/layer/useLayer'\n\nimport {toastLayer} from './toastLayer.css'\n\n/**\n * @public\n */\nexport interface ToastLayerProps {\n children: React.ReactNode\n padding?: number | number[]\n paddingX?: number | number[]\n paddingY?: number | number[]\n gap?: number | number[]\n}\n\n/**\n * @internal\n */\nexport function ToastLayer(props: ToastLayerProps): React.JSX.Element {\n const {children, padding = 4, paddingX, paddingY, gap = 3} = props\n const {zIndex} = useLayer()\n\n return (\n <Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>\n )\n}\n","let toastId = 0\n\n/** @internal */\nexport function generateToastId(): string {\n return String(toastId++)\n}\n","import {AnimatePresence} from 'motion/react'\nimport {startTransition, useMemo, useState} from 'react'\n\nimport {useMounted} from '../../hooks/useMounted'\nimport {LayerProvider} from '../../utils/layer/layerProvider'\nimport {Toast} from './toast'\nimport {ToastContext} from './toastContext'\nimport {ToastLayer, type ToastLayerProps} from './toastLayer'\nimport {generateToastId} from './toastState'\nimport {ToastContextValue, ToastParams} from './types'\n\ntype ToastState = {\n dismiss: () => void\n id: string\n updatedAt: number\n params: ToastParams\n}[]\n\n/**\n * @public\n */\nexport interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {\n children?: React.ReactNode\n zOffset?: number | number[]\n}\n\n/**\n * @public\n */\nexport function ToastProvider(props: ToastProviderProps): React.JSX.Element {\n const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props\n const [state, setState] = useState<ToastState>([])\n const mounted = useMounted()\n\n const value: ToastContextValue = useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])\n\n return (\n <ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>\n )\n}\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {ToastContext} from './toastContext'\nimport {ToastContextValue} from './types'\n\n/**\n * @public\n */\nexport function useToast(): ToastContextValue {\n const value = useContext(ToastContext)\n\n if (!value) {\n throw new Error('useToast(): missing context value')\n }\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (!isRecord(value) || value.version !== 0.0) {\n throw new Error('useToast(): the context value is not compatible')\n }\n\n return value\n}\n"],"mappings":"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"}
|
package/dist/tooltip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../src/core/primitives/tooltip/tooltip.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/types.ts","../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../src/core/primitives/tooltip/tooltip.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/types.ts","../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts"],"mappings":";;;;;UAyDiB,qBAAqB,KAAK;;EAEzC;EACA;EACA,kBAAkB;EAClB,WAAW,MAAM,IAAI;EACrB,UAAU,MAAM;EAChB;EACA,qBAAqB;EACrB;EACA,YAAY;;EAEZ;EACA;EACA,SAAS;EACT;;;;;;;;;;;EAWA,QAAQ;;;;;;;EAOR;;;;;;;iBAQc,QACd,OAAO,eAAe,KAAK,MAAM,UAAU,kEAA+C,IAAA;;;;UChG3E;EAEf,mBAAmB,WAAW,MAAM,yBAAyB;EAE7D,mBAAmB,uBAAuB;EAC1C;EACA;EACA;;;;;cCJW,0CAAwB,QAAA;;;;UCIpB;EACf,WAAW,MAAM;;;;;;;;;;EAUjB,OAAO;;;;;;;iBAQO,0BACd,OAAO,iCACN,MAAM,IAAI;;;;iBCvBG,wBAAwB"}
|
package/dist/tooltip.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import { c as POPOVER_MOTION_PROPS, n as _getArrayProp } from "./helpers-C8xxXAQC.js";
|
|
3
3
|
import { _ as useTheme_v2, d as createGlobalScopedContext, i as usePrefersReducedMotion, s as Card } from "./useLayer-jUJIz8mh.js";
|
|
4
4
|
import { n as AnimateActivity, r as origin, t as getElementRef } from "./getElementRef-5HZQ-Owu.js";
|
|
5
|
-
import { a as useBoundaryElement, n as Portal, r as usePortal, t as Arrow } from "./arrow-
|
|
6
|
-
import { t as Layer } from "./layer-
|
|
5
|
+
import { a as useBoundaryElement, n as Portal, r as usePortal, t as Arrow } from "./arrow-C6TlkggA.js";
|
|
6
|
+
import { t as Layer } from "./layer-BK7xWHcE.js";
|
|
7
7
|
import { c } from "react/compiler-runtime";
|
|
8
|
+
import { clsx } from "clsx/lite";
|
|
8
9
|
import { Activity, cloneElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
|
|
9
|
-
import { styled } from "styled-components";
|
|
10
10
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react-dom";
|
|
12
12
|
import { motion } from "motion/react";
|
|
@@ -115,40 +115,42 @@ const DEFAULT_FALLBACK_PLACEMENTS = {
|
|
|
115
115
|
"top-end",
|
|
116
116
|
"bottom-end"
|
|
117
117
|
]
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
})`will-change:transform;`;
|
|
118
|
+
};
|
|
119
|
+
var tooltipCard = "_54iwec1", tooltipLayer = "_54iwec0";
|
|
120
|
+
const MotionCard = motion.create(Card);
|
|
122
121
|
/**
|
|
123
122
|
* @internal
|
|
124
123
|
*/
|
|
125
124
|
function TooltipCard(props) {
|
|
126
|
-
let $ = c(
|
|
127
|
-
$[0] === props ? (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6],
|
|
125
|
+
let $ = c(45), animate, arrow, arrowRef, arrowX, arrowY, children, className, originX, originY, padding, placement, radius, ref, restProps, scheme, shadow, style;
|
|
126
|
+
$[0] === props ? (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], className = $[7], originX = $[8], originY = $[9], padding = $[10], placement = $[11], radius = $[12], ref = $[13], restProps = $[14], scheme = $[15], shadow = $[16], style = $[17]) : ({animate, arrow, arrowRef, arrowX, arrowY, children, className, originX, originY, padding, placement, radius, ref, scheme, shadow, style, ...restProps} = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = className, $[8] = originX, $[9] = originY, $[10] = padding, $[11] = placement, $[12] = radius, $[13] = ref, $[14] = restProps, $[15] = scheme, $[16] = shadow, $[17] = style);
|
|
128
127
|
let t0 = animate ? "transform" : void 0, t1;
|
|
129
|
-
$[
|
|
128
|
+
$[18] !== originX || $[19] !== originY || $[20] !== style || $[21] !== t0 ? (t1 = {
|
|
130
129
|
originX,
|
|
131
130
|
originY,
|
|
132
131
|
willChange: t0,
|
|
133
132
|
...style
|
|
134
|
-
}, $[
|
|
133
|
+
}, $[18] = originX, $[19] = originY, $[20] = style, $[21] = t0, $[22] = t1) : t1 = $[22];
|
|
135
134
|
let rootStyle = t1, t2 = arrowX === null ? void 0 : arrowX, t3 = arrowY === null ? void 0 : arrowY, t4;
|
|
136
|
-
$[
|
|
135
|
+
$[23] !== t2 || $[24] !== t3 ? (t4 = {
|
|
137
136
|
left: t2,
|
|
138
137
|
top: t3,
|
|
139
138
|
right: void 0,
|
|
140
139
|
bottom: void 0
|
|
141
|
-
}, $[
|
|
142
|
-
let arrowStyle = t4, t5
|
|
143
|
-
$[
|
|
140
|
+
}, $[23] = t2, $[24] = t3, $[25] = t4) : t4 = $[25];
|
|
141
|
+
let arrowStyle = t4, t5;
|
|
142
|
+
$[26] === className ? t5 = $[27] : (t5 = clsx(tooltipCard, className), $[26] = className, $[27] = t5);
|
|
143
|
+
let t6 = animate ? POPOVER_MOTION_PROPS : void 0, t7;
|
|
144
|
+
$[28] !== arrow || $[29] !== arrowRef || $[30] !== arrowStyle ? (t7 = arrow && /* @__PURE__ */ jsx(Arrow, {
|
|
144
145
|
ref: arrowRef,
|
|
145
146
|
style: arrowStyle,
|
|
146
147
|
width: 15,
|
|
147
148
|
height: 6,
|
|
148
149
|
radius: 2
|
|
149
|
-
}), $[
|
|
150
|
-
let
|
|
151
|
-
return $[
|
|
150
|
+
}), $[28] = arrow, $[29] = arrowRef, $[30] = arrowStyle, $[31] = t7) : t7 = $[31];
|
|
151
|
+
let t8;
|
|
152
|
+
return $[32] !== children || $[33] !== padding || $[34] !== placement || $[35] !== radius || $[36] !== ref || $[37] !== restProps || $[38] !== rootStyle || $[39] !== scheme || $[40] !== shadow || $[41] !== t5 || $[42] !== t6 || $[43] !== t7 ? (t8 = /* @__PURE__ */ jsxs(MotionCard, {
|
|
153
|
+
className: t5,
|
|
152
154
|
"data-ui": "Tooltip__card",
|
|
153
155
|
...restProps,
|
|
154
156
|
"data-placement": placement,
|
|
@@ -158,9 +160,9 @@ function TooltipCard(props) {
|
|
|
158
160
|
scheme,
|
|
159
161
|
shadow,
|
|
160
162
|
style: rootStyle,
|
|
161
|
-
...
|
|
162
|
-
children: [children,
|
|
163
|
-
}), $[
|
|
163
|
+
...t6,
|
|
164
|
+
children: [children, t7]
|
|
165
|
+
}), $[32] = children, $[33] = padding, $[34] = placement, $[35] = radius, $[36] = ref, $[37] = restProps, $[38] = rootStyle, $[39] = scheme, $[40] = shadow, $[41] = t5, $[42] = t6, $[43] = t7, $[44] = t8) : t8 = $[44], t8;
|
|
164
166
|
}
|
|
165
167
|
/**
|
|
166
168
|
* @beta
|
|
@@ -172,100 +174,94 @@ const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/t
|
|
|
172
174
|
function useTooltipDelayGroup() {
|
|
173
175
|
return useContext(TooltipDelayGroupContext);
|
|
174
176
|
}
|
|
175
|
-
const StyledTooltip = styled(Layer).withConfig({
|
|
176
|
-
displayName: "StyledTooltip",
|
|
177
|
-
componentId: "sc-nx2p4f-0"
|
|
178
|
-
})`pointer-events:none;`;
|
|
179
177
|
/**
|
|
180
178
|
* Tooltips display information when hovering, focusing or tapping.
|
|
181
179
|
*
|
|
182
180
|
* @public
|
|
183
181
|
*/
|
|
184
182
|
function Tooltip(props) {
|
|
185
|
-
let $ = c(
|
|
186
|
-
$[0] ===
|
|
187
|
-
let _animate = t0 !== void 0 && t0, arrowProp = t1 !== void 0 && t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = !usePrefersReducedMotion() && _animate, t6;
|
|
188
|
-
$[18] === fallbackPlacementsProp ? t6 = $[19] : (t6 = _getArrayProp(fallbackPlacementsProp), $[18] = fallbackPlacementsProp, $[19] = t6);
|
|
183
|
+
let $ = c(122), boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), { animate: t0, arrow: t1, boundaryElement: _boundaryElement, children: childProp, content, disabled, fallbackPlacements: _fallbackPlacementsProp, padding: t2, placement: t3, portal: portalProp, radius: t4, ref: forwardedRef, scheme, shadow: t5, zOffset: _zOffset, delay, ...restProps } = props, _animate = t0 !== void 0 && t0, arrowProp = t1 !== void 0 && t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = !usePrefersReducedMotion() && _animate, t6;
|
|
184
|
+
$[0] === fallbackPlacementsProp ? t6 = $[1] : (t6 = _getArrayProp(fallbackPlacementsProp), $[0] = fallbackPlacementsProp, $[1] = t6);
|
|
189
185
|
let fallbackPlacements = t6, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0), t7;
|
|
190
|
-
$[
|
|
186
|
+
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[2] = t7) : t7 = $[2], useImperativeHandle(forwardedRef, t7);
|
|
191
187
|
let portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, t8;
|
|
192
|
-
$[
|
|
188
|
+
$[3] !== animate || $[4] !== arrowProp || $[5] !== boundaryElement || $[6] !== fallbackPlacements ? (t8 = {
|
|
193
189
|
animate,
|
|
194
190
|
arrowProp,
|
|
195
191
|
arrowRef,
|
|
196
192
|
boundaryElement,
|
|
197
193
|
fallbackPlacements,
|
|
198
194
|
rootBoundary: "viewport"
|
|
199
|
-
}, $[
|
|
195
|
+
}, $[3] = animate, $[4] = arrowProp, $[5] = boundaryElement, $[6] = fallbackPlacements, $[7] = t8) : t8 = $[7];
|
|
200
196
|
let middleware = useMiddleware(t8), t9;
|
|
201
|
-
$[
|
|
197
|
+
$[8] === referenceElement ? t9 = $[9] : (t9 = { reference: referenceElement }, $[8] = referenceElement, $[9] = t9);
|
|
202
198
|
let t10;
|
|
203
|
-
$[
|
|
199
|
+
$[10] !== middleware || $[11] !== placementProp || $[12] !== t9 ? (t10 = {
|
|
204
200
|
middleware,
|
|
205
201
|
placement: placementProp,
|
|
206
202
|
whileElementsMounted: autoUpdate,
|
|
207
203
|
elements: t9
|
|
208
|
-
}, $[
|
|
204
|
+
}, $[10] = middleware, $[11] = placementProp, $[12] = t9, $[13] = t10) : t10 = $[13];
|
|
209
205
|
let { floatingStyles, placement, middlewareData, refs, update } = useFloating(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), t11;
|
|
210
|
-
$[
|
|
206
|
+
$[14] === delayGroupContext ? t11 = $[15] : (t11 = delayGroupContext || {}, $[14] = delayGroupContext, $[15] = t11);
|
|
211
207
|
let { setIsGroupActive, setOpenTooltipId } = t11, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, t12;
|
|
212
|
-
$[
|
|
208
|
+
$[16] !== closeDelay || $[17] !== isInsideGroup || $[18] !== openDelay || $[19] !== setIsGroupActive || $[20] !== setIsOpen || $[21] !== setOpenTooltipId || $[22] !== tooltipId ? (t12 = (open, immediate) => {
|
|
213
209
|
if (isInsideGroup) {
|
|
214
210
|
if (open) {
|
|
215
211
|
let groupedOpenDelay = immediate ? 0 : openDelay;
|
|
216
212
|
setIsGroupActive?.(open, groupedOpenDelay), setOpenTooltipId?.(tooltipId, groupedOpenDelay);
|
|
217
213
|
} else setIsGroupActive?.(open, closeDelay > 200 ? closeDelay : 200), setOpenTooltipId?.(null, immediate ? 0 : closeDelay);
|
|
218
214
|
} else setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
|
|
219
|
-
}, $[
|
|
215
|
+
}, $[16] = closeDelay, $[17] = isInsideGroup, $[18] = openDelay, $[19] = setIsGroupActive, $[20] = setIsOpen, $[21] = setOpenTooltipId, $[22] = tooltipId, $[23] = t12) : t12 = $[23];
|
|
220
216
|
let handleIsOpenChange = t12, t13;
|
|
221
|
-
$[
|
|
217
|
+
$[24] !== childProp?.props || $[25] !== handleIsOpenChange ? (t13 = (e) => {
|
|
222
218
|
handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
|
|
223
|
-
}, $[
|
|
219
|
+
}, $[24] = childProp?.props, $[25] = handleIsOpenChange, $[26] = t13) : t13 = $[26], childProp?.props;
|
|
224
220
|
let handleBlur = t13, t14;
|
|
225
|
-
$[
|
|
221
|
+
$[27] !== childProp?.props || $[28] !== handleIsOpenChange ? (t14 = (e_0) => {
|
|
226
222
|
handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
|
|
227
|
-
}, $[
|
|
223
|
+
}, $[27] = childProp?.props, $[28] = handleIsOpenChange, $[29] = t14) : t14 = $[29], childProp?.props;
|
|
228
224
|
let handleClick = t14, t15;
|
|
229
|
-
$[
|
|
225
|
+
$[30] !== childProp?.props || $[31] !== handleIsOpenChange ? (t15 = (e_1) => {
|
|
230
226
|
handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
|
|
231
|
-
}, $[
|
|
227
|
+
}, $[30] = childProp?.props, $[31] = handleIsOpenChange, $[32] = t15) : t15 = $[32], childProp?.props;
|
|
232
228
|
let handleContextMenu = t15, t16;
|
|
233
|
-
$[
|
|
229
|
+
$[33] !== childProp?.props || $[34] !== handleIsOpenChange ? (t16 = (e_2) => {
|
|
234
230
|
handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
|
|
235
|
-
}, $[
|
|
231
|
+
}, $[33] = childProp?.props, $[34] = handleIsOpenChange, $[35] = t16) : t16 = $[35], childProp?.props;
|
|
236
232
|
let handleFocus = t16, t17;
|
|
237
|
-
$[
|
|
233
|
+
$[36] !== childProp?.props || $[37] !== handleIsOpenChange ? (t17 = (e_3) => {
|
|
238
234
|
handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
|
|
239
|
-
}, $[
|
|
235
|
+
}, $[36] = childProp?.props, $[37] = handleIsOpenChange, $[38] = t17) : t17 = $[38], childProp?.props;
|
|
240
236
|
let handleMouseEnter = t17, t18;
|
|
241
|
-
$[
|
|
237
|
+
$[39] !== childProp?.props || $[40] !== handleIsOpenChange ? (t18 = (e_4) => {
|
|
242
238
|
handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
|
|
243
|
-
}, $[
|
|
239
|
+
}, $[39] = childProp?.props, $[40] = handleIsOpenChange, $[41] = t18) : t18 = $[41], childProp?.props;
|
|
244
240
|
let handleMouseLeave = t18, t19;
|
|
245
|
-
$[
|
|
241
|
+
$[42] !== handleIsOpenChange || $[43] !== isInsideGroup || $[44] !== referenceElement || $[45] !== showTooltip ? (t19 = {
|
|
246
242
|
handleIsOpenChange,
|
|
247
243
|
referenceElement,
|
|
248
244
|
showTooltip,
|
|
249
245
|
isInsideGroup
|
|
250
|
-
}, $[
|
|
246
|
+
}, $[42] = handleIsOpenChange, $[43] = isInsideGroup, $[44] = referenceElement, $[45] = showTooltip, $[46] = t19) : t19 = $[46], useCloseOnMouseLeave(t19);
|
|
251
247
|
let t20, t21;
|
|
252
|
-
$[
|
|
248
|
+
$[47] !== disabled || $[48] !== handleIsOpenChange || $[49] !== showTooltip ? (t20 = () => {
|
|
253
249
|
disabled && showTooltip && handleIsOpenChange(!1);
|
|
254
250
|
}, t21 = [
|
|
255
251
|
disabled,
|
|
256
252
|
handleIsOpenChange,
|
|
257
253
|
showTooltip
|
|
258
|
-
], $[
|
|
254
|
+
], $[47] = disabled, $[48] = handleIsOpenChange, $[49] = showTooltip, $[50] = t20, $[51] = t21) : (t20 = $[50], t21 = $[51]), useEffect(t20, t21);
|
|
259
255
|
let t22, t23;
|
|
260
|
-
$[
|
|
256
|
+
$[52] !== content || $[53] !== handleIsOpenChange || $[54] !== showTooltip ? (t22 = () => {
|
|
261
257
|
!content && showTooltip && handleIsOpenChange(!1);
|
|
262
258
|
}, t23 = [
|
|
263
259
|
content,
|
|
264
260
|
handleIsOpenChange,
|
|
265
261
|
showTooltip
|
|
266
|
-
], $[
|
|
262
|
+
], $[52] = content, $[53] = handleIsOpenChange, $[54] = showTooltip, $[55] = t22, $[56] = t23) : (t22 = $[55], t23 = $[56]), useEffect(t22, t23);
|
|
267
263
|
let t24, t25;
|
|
268
|
-
$[
|
|
264
|
+
$[57] !== handleIsOpenChange || $[58] !== showTooltip ? (t24 = () => {
|
|
269
265
|
if (!showTooltip) return;
|
|
270
266
|
let handleWindowKeyDown = function handleWindowKeyDown(event) {
|
|
271
267
|
event.key === "Escape" && handleIsOpenChange(!1, !0);
|
|
@@ -273,22 +269,22 @@ function Tooltip(props) {
|
|
|
273
269
|
return window.addEventListener("keydown", handleWindowKeyDown), () => {
|
|
274
270
|
window.removeEventListener("keydown", handleWindowKeyDown);
|
|
275
271
|
};
|
|
276
|
-
}, t25 = [handleIsOpenChange, showTooltip], $[
|
|
272
|
+
}, t25 = [handleIsOpenChange, showTooltip], $[57] = handleIsOpenChange, $[58] = showTooltip, $[59] = t24, $[60] = t25) : (t24 = $[59], t25 = $[60]), useEffect(t24, t25);
|
|
277
273
|
let t26;
|
|
278
|
-
$[
|
|
274
|
+
$[61] !== boundaryElement || $[62] !== portalElement?.offsetWidth ? (t26 = () => {
|
|
279
275
|
let availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
|
|
280
276
|
setTooltipMaxWidth(Math.min(...availableWidths) - 8);
|
|
281
|
-
}, $[
|
|
277
|
+
}, $[61] = boundaryElement, $[62] = portalElement?.offsetWidth, $[63] = t26) : t26 = $[63];
|
|
282
278
|
let t27;
|
|
283
|
-
$[
|
|
279
|
+
$[64] !== boundaryElement || $[65] !== portalElement ? (t27 = [boundaryElement, portalElement], $[64] = boundaryElement, $[65] = portalElement, $[66] = t27) : t27 = $[66], useLayoutEffect(t26, t27);
|
|
284
280
|
let t28;
|
|
285
|
-
$[
|
|
281
|
+
$[67] === update ? t28 = $[68] : (t28 = (arrowEl) => {
|
|
286
282
|
arrowRef.current = arrowEl, update();
|
|
287
|
-
}, $[
|
|
283
|
+
}, $[67] = update, $[68] = t28);
|
|
288
284
|
let setArrow = t28, t29;
|
|
289
|
-
$[
|
|
285
|
+
$[69] === refs ? t29 = $[70] : (t29 = (node) => {
|
|
290
286
|
ref.current = node, refs.setFloating(node);
|
|
291
|
-
}, $[
|
|
287
|
+
}, $[69] = refs, $[70] = t29);
|
|
292
288
|
let setFloating = t29, t30;
|
|
293
289
|
bb0: {
|
|
294
290
|
if (!childProp) {
|
|
@@ -296,7 +292,7 @@ function Tooltip(props) {
|
|
|
296
292
|
break bb0;
|
|
297
293
|
}
|
|
298
294
|
let t31;
|
|
299
|
-
$[
|
|
295
|
+
$[71] !== childProp || $[72] !== handleBlur || $[73] !== handleClick || $[74] !== handleContextMenu || $[75] !== handleFocus || $[76] !== handleMouseEnter || $[77] !== handleMouseLeave ? (t31 = cloneElement(childProp, {
|
|
300
296
|
onBlur: handleBlur,
|
|
301
297
|
onFocus: handleFocus,
|
|
302
298
|
onMouseEnter: handleMouseEnter,
|
|
@@ -304,23 +300,23 @@ function Tooltip(props) {
|
|
|
304
300
|
onClick: handleClick,
|
|
305
301
|
onContextMenu: handleContextMenu,
|
|
306
302
|
ref: setReferenceElement
|
|
307
|
-
}), $[
|
|
303
|
+
}), $[71] = childProp, $[72] = handleBlur, $[73] = handleClick, $[74] = handleContextMenu, $[75] = handleFocus, $[76] = handleMouseEnter, $[77] = handleMouseLeave, $[78] = t31) : t31 = $[78], t30 = t31;
|
|
308
304
|
}
|
|
309
305
|
let child = t30, t31;
|
|
310
|
-
$[
|
|
306
|
+
$[79] === childProp ? t31 = $[80] : (t31 = childProp ? getElementRef(childProp) : null, $[79] = childProp, $[80] = t31);
|
|
311
307
|
let t32, t33;
|
|
312
|
-
if ($[
|
|
308
|
+
if ($[81] === referenceElement ? (t32 = $[82], t33 = $[83]) : (t32 = () => referenceElement, t33 = [referenceElement], $[81] = referenceElement, $[82] = t32, $[83] = t33), useImperativeHandle(t31, t32, t33), !child) {
|
|
313
309
|
let t34;
|
|
314
|
-
return $[
|
|
310
|
+
return $[84] === Symbol.for("react.memo_cache_sentinel") ? (t34 = /* @__PURE__ */ jsx(Fragment$1, {}), $[84] = t34) : t34 = $[84], t34;
|
|
315
311
|
}
|
|
316
312
|
if (disabled) return child;
|
|
317
|
-
let
|
|
318
|
-
$[
|
|
313
|
+
let T0 = Layer, t35 = clsx(tooltipLayer, restProps.className), t36 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0, t37;
|
|
314
|
+
$[85] !== floatingStyles || $[86] !== t36 ? (t37 = {
|
|
319
315
|
...floatingStyles,
|
|
320
|
-
maxWidth:
|
|
321
|
-
}, $[
|
|
322
|
-
let
|
|
323
|
-
$[
|
|
316
|
+
maxWidth: t36
|
|
317
|
+
}, $[85] = floatingStyles, $[86] = t36, $[87] = t37) : t37 = $[87];
|
|
318
|
+
let t38;
|
|
319
|
+
$[88] !== animate || $[89] !== arrowProp || $[90] !== arrowX || $[91] !== arrowY || $[92] !== content || $[93] !== originX || $[94] !== originY || $[95] !== padding || $[96] !== placement || $[97] !== radius || $[98] !== restProps || $[99] !== scheme || $[100] !== setArrow || $[101] !== setFloating || $[102] !== shadow ? (t38 = /* @__PURE__ */ jsx(TooltipCard, {
|
|
324
320
|
...restProps,
|
|
325
321
|
animate,
|
|
326
322
|
arrow: arrowProp,
|
|
@@ -336,32 +332,33 @@ function Tooltip(props) {
|
|
|
336
332
|
scheme,
|
|
337
333
|
shadow,
|
|
338
334
|
children: content
|
|
339
|
-
}), $[
|
|
340
|
-
let
|
|
341
|
-
$[
|
|
335
|
+
}), $[88] = animate, $[89] = arrowProp, $[90] = arrowX, $[91] = arrowY, $[92] = content, $[93] = originX, $[94] = originY, $[95] = padding, $[96] = placement, $[97] = radius, $[98] = restProps, $[99] = scheme, $[100] = setArrow, $[101] = setFloating, $[102] = shadow, $[103] = t38) : t38 = $[103];
|
|
336
|
+
let t39;
|
|
337
|
+
$[104] !== T0 || $[105] !== restProps || $[106] !== setFloating || $[107] !== t35 || $[108] !== t37 || $[109] !== t38 || $[110] !== zOffset ? (t39 = /* @__PURE__ */ jsx(T0, {
|
|
342
338
|
"data-ui": "Tooltip",
|
|
343
339
|
...restProps,
|
|
340
|
+
className: t35,
|
|
344
341
|
ref: setFloating,
|
|
345
|
-
style:
|
|
342
|
+
style: t37,
|
|
346
343
|
zOffset,
|
|
347
|
-
children:
|
|
348
|
-
}), $[
|
|
349
|
-
let tooltip =
|
|
350
|
-
$[
|
|
344
|
+
children: t38
|
|
345
|
+
}), $[104] = T0, $[105] = restProps, $[106] = setFloating, $[107] = t35, $[108] = t37, $[109] = t38, $[110] = zOffset, $[111] = t39) : t39 = $[111];
|
|
346
|
+
let tooltip = t39, t40;
|
|
347
|
+
$[112] !== portalProp || $[113] !== tooltip ? (t40 = portalProp ? /* @__PURE__ */ jsx(Portal, {
|
|
351
348
|
__unstable_name: typeof portalProp == "string" ? portalProp : void 0,
|
|
352
349
|
children: tooltip
|
|
353
|
-
}) : tooltip, $[
|
|
354
|
-
let tooltipNode =
|
|
355
|
-
$[
|
|
350
|
+
}) : tooltip, $[112] = portalProp, $[113] = tooltip, $[114] = t40) : t40 = $[114];
|
|
351
|
+
let tooltipNode = t40, t41;
|
|
352
|
+
$[115] !== animate || $[116] !== showTooltip || $[117] !== tooltipNode ? (t41 = animate ? /* @__PURE__ */ jsx(AnimateActivity, {
|
|
356
353
|
layoutMode: "default",
|
|
357
354
|
mode: showTooltip ? "visible" : "hidden",
|
|
358
355
|
children: tooltipNode
|
|
359
356
|
}) : /* @__PURE__ */ jsx(Activity, {
|
|
360
357
|
mode: showTooltip ? "visible" : "hidden",
|
|
361
358
|
children: tooltipNode
|
|
362
|
-
}), $[
|
|
363
|
-
let
|
|
364
|
-
return $[
|
|
359
|
+
}), $[115] = animate, $[116] = showTooltip, $[117] = tooltipNode, $[118] = t41) : t41 = $[118];
|
|
360
|
+
let t42;
|
|
361
|
+
return $[119] !== child || $[120] !== t41 ? (t42 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t41, child] }), $[119] = child, $[120] = t41, $[121] = t42) : t42 = $[121], t42;
|
|
365
362
|
}
|
|
366
363
|
function useMiddleware(t0) {
|
|
367
364
|
let $ = c(17), { animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary } = t0, ret;
|