@react-spectrum/s2 3.0.0-nightly-d7511d723-250327 → 3.0.0-nightly-3c9b36ae9-250329
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/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +3 -2
- package/dist/ButtonGroup.cjs.map +1 -1
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup.mjs +3 -2
- package/dist/ButtonGroup.mjs.map +1 -1
- package/dist/Image.cjs +1 -1
- package/dist/Image.cjs.map +1 -1
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +1 -1
- package/dist/Image.mjs.map +1 -1
- package/dist/Link.cjs.map +1 -1
- package/dist/Link.css.map +1 -1
- package/dist/Link.mjs.map +1 -1
- package/dist/StatusLight.cjs +2 -2
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +2 -2
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/ToggleButton.cjs.map +1 -1
- package/dist/ToggleButton.css.map +1 -1
- package/dist/ToggleButton.mjs.map +1 -1
- package/dist/types.d.ts +6 -6
- package/dist/types.d.ts.map +1 -1
- package/package.json +19 -19
- package/src/ActionButton.tsx +1 -1
- package/src/Breadcrumbs.tsx +1 -1
- package/src/Button.tsx +2 -2
- package/src/ButtonGroup.tsx +4 -2
- package/src/Image.tsx +1 -1
- package/src/Link.tsx +1 -1
- package/src/StatusLight.tsx +2 -2
- package/src/ToggleButton.tsx +1 -1
package/dist/Image.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACiHsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AALI","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n","import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n /** The URL of the image. */\n src?: string,\n // TODO\n // srcSet?: string,\n // sizes?: string,\n /** Accessible alt text for the image. */\n alt?: string,\n /**\n * Indicates if the fetching of the image must be done using a CORS request.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n */\n crossOrigin?: 'anonymous' | 'use-credentials',\n /**\n * Whether the browser should decode images synchronously or asynchronously.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n */\n decoding?: 'async' | 'auto' | 'sync',\n /**\n * Provides a hint of the relative priority to use when fetching the image.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n */\n fetchPriority?: 'high' | 'low' | 'auto',\n /**\n * Whether the image should be loaded immediately or lazily when scrolled into view.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n */\n loading?: 'eager' | 'lazy',\n /**\n * A string indicating which referrer to use when fetching the resource.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n */\n referrerPolicy?: HTMLAttributeReferrerPolicy,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /** A function that is called to render a fallback when the image fails to load. */\n renderError?: () => ReactNode,\n /**\n * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n state: ImageState,\n src: string,\n startTime: number,\n loadTime: number\n}\n\ntype Action = \n | {type: 'update', src: string}\n | {type: 'loaded'}\n | {type: 'revealed'}\n | {type: 'error'};\n\nfunction createState(src: string): State {\n return {\n state: 'loading',\n src,\n startTime: Date.now(),\n loadTime: 0\n };\n}\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'update': {\n return {\n state: 'loading',\n src: action.src,\n startTime: Date.now(),\n loadTime: 0\n };\n }\n case 'loaded':\n case 'error': {\n return {\n ...state,\n state: action.type\n };\n }\n case 'revealed': {\n return {\n ...state,\n state: 'revealed',\n loadTime: Date.now() - state.startTime\n };\n }\n default:\n return state;\n }\n}\n\nconst wrapperStyles = style({\n backgroundColor: 'gray-100',\n overflow: 'hidden'\n});\n\nconst imgStyles = style({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: '[inherit]',\n objectPosition: '[inherit]',\n opacity: {\n default: 0,\n isRevealed: 1\n },\n transition: {\n default: 'none',\n isTransitioning: 'opacity'\n },\n transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n let {\n src = '',\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n renderError,\n group = DefaultImageGroup,\n // TODO\n // srcSet,\n // sizes,\n alt,\n crossOrigin,\n decoding,\n fetchPriority,\n loading,\n referrerPolicy,\n slot\n } = props;\n let hidden = (props as ImageContextValue).hidden;\n \n let {revealAll, register, unregister, load} = useContext(group);\n let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n if (src !== lastSrc && !hidden) {\n dispatch({type: 'update', src});\n }\n\n if (state === 'loaded' && revealAll && !hidden) {\n dispatch({type: 'revealed'});\n }\n\n let imgRef = useRef<HTMLImageElement | null>(null);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n register(src);\n return () => {\n unregister(src);\n };\n }, [hidden, register, unregister, src]);\n\n let onLoad = useCallback(() => {\n load(src);\n dispatch({type: 'loaded'});\n }, [load, src]);\n\n let onError = useCallback(() => {\n dispatch({type: 'error'});\n unregister(src);\n }, [unregister, src]);\n\n let isSkeleton = useIsSkeleton();\n let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n let animation = useLoadingAnimation(isAnimating);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n // If the image is already loaded, update state immediately instead of waiting for onLoad.\n if (state === 'loading' && imgRef.current?.complete) {\n // Queue a microtask so we don't hit React's update limit.\n // TODO: is this necessary?\n queueMicrotask(onLoad);\n }\n\n animation(domRef.current);\n });\n\n if (props.alt == null) {\n console.warn(\n 'The `alt` prop was not provided to an image. ' +\n 'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n 'is decorative or redundant with displayed text and should not be announced by screen readers.'\n );\n }\n\n let errorState = !isSkeleton && state === 'error' && renderError?.();\n let isRevealed = state === 'revealed' && !isSkeleton;\n let isTransitioning = isRevealed && loadTime > 200;\n return useMemo(() => hidden ? null : (\n <div\n ref={domRef}\n slot={slot || undefined}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' ' + (isAnimating ? loadingStyle : '')}>\n {errorState}\n {!errorState && (\n <img\n {...getFetchPriorityProp(fetchPriority)}\n src={src}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n ref={imgRef}\n onLoad={onLoad}\n onError={onError}\n className={imgStyles({isRevealed, isTransitioning})} />\n )}\n </div>\n ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n const pieces = version.split('.');\n const major = parseInt(pieces[0], 10);\n if (major >= 19) {\n return {fetchPriority};\n }\n return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.css.map"}
|
|
1
|
+
{"mappings":"ACiHsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AALI","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n","import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n /** The URL of the image. */\n src?: string,\n // TODO\n // srcSet?: string,\n // sizes?: string,\n /** Accessible alt text for the image. */\n alt?: string,\n /**\n * Indicates if the fetching of the image must be done using a CORS request.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n */\n crossOrigin?: 'anonymous' | 'use-credentials',\n /**\n * Whether the browser should decode images synchronously or asynchronously.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n */\n decoding?: 'async' | 'auto' | 'sync',\n /**\n * Provides a hint of the relative priority to use when fetching the image.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n */\n fetchPriority?: 'high' | 'low' | 'auto',\n /**\n * Whether the image should be loaded immediately or lazily when scrolled into view.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n */\n loading?: 'eager' | 'lazy',\n /**\n * A string indicating which referrer to use when fetching the resource.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n */\n referrerPolicy?: HTMLAttributeReferrerPolicy,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /** A function that is called to render a fallback when the image fails to load. */\n renderError?: () => ReactNode,\n /**\n * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n state: ImageState,\n src: string,\n startTime: number,\n loadTime: number\n}\n\ntype Action = \n | {type: 'update', src: string}\n | {type: 'loaded'}\n | {type: 'revealed'}\n | {type: 'error'};\n\nfunction createState(src: string): State {\n return {\n state: 'loading',\n src,\n startTime: Date.now(),\n loadTime: 0\n };\n}\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'update': {\n return {\n state: 'loading',\n src: action.src,\n startTime: Date.now(),\n loadTime: 0\n };\n }\n case 'loaded':\n case 'error': {\n return {\n ...state,\n state: action.type\n };\n }\n case 'revealed': {\n return {\n ...state,\n state: 'revealed',\n loadTime: Date.now() - state.startTime\n };\n }\n default:\n return state;\n }\n}\n\nconst wrapperStyles = style({\n backgroundColor: 'gray-100',\n overflow: 'hidden'\n});\n\nconst imgStyles = style({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: '[inherit]',\n objectPosition: '[inherit]',\n opacity: {\n default: 0,\n isRevealed: 1\n },\n transition: {\n default: 'none',\n isTransitioning: 'opacity'\n },\n transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n let {\n src = '',\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n renderError,\n group = DefaultImageGroup,\n // TODO\n // srcSet,\n // sizes,\n alt,\n crossOrigin,\n decoding,\n fetchPriority,\n loading,\n referrerPolicy,\n slot\n } = props;\n let hidden = (props as ImageContextValue).hidden;\n \n let {revealAll, register, unregister, load} = useContext(group);\n let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n if (src !== lastSrc && !hidden) {\n dispatch({type: 'update', src});\n }\n\n if (state === 'loaded' && revealAll && !hidden) {\n dispatch({type: 'revealed'});\n }\n\n let imgRef = useRef<HTMLImageElement | null>(null);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n register(src);\n return () => {\n unregister(src);\n };\n }, [hidden, register, unregister, src]);\n\n let onLoad = useCallback(() => {\n load(src);\n dispatch({type: 'loaded'});\n }, [load, src]);\n\n let onError = useCallback(() => {\n dispatch({type: 'error'});\n unregister(src);\n }, [unregister, src]);\n\n let isSkeleton = useIsSkeleton();\n let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n let animation = useLoadingAnimation(isAnimating);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n // If the image is already loaded, update state immediately instead of waiting for onLoad.\n if (state === 'loading' && imgRef.current?.complete) {\n // Queue a microtask so we don't hit React's update limit.\n // TODO: is this necessary?\n queueMicrotask(onLoad);\n }\n\n animation(domRef.current);\n });\n\n if (props.alt == null && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'The `alt` prop was not provided to an image. ' +\n 'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n 'is decorative or redundant with displayed text and should not be announced by screen readers.'\n );\n }\n\n let errorState = !isSkeleton && state === 'error' && renderError?.();\n let isRevealed = state === 'revealed' && !isSkeleton;\n let isTransitioning = isRevealed && loadTime > 200;\n return useMemo(() => hidden ? null : (\n <div\n ref={domRef}\n slot={slot || undefined}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' ' + (isAnimating ? loadingStyle : '')}>\n {errorState}\n {!errorState && (\n <img\n {...getFetchPriorityProp(fetchPriority)}\n src={src}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n ref={imgRef}\n onLoad={onLoad}\n onError={onError}\n className={imgStyles({isRevealed, isTransitioning})} />\n )}\n </div>\n ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n const pieces = version.split('.');\n const major = parseInt(pieces[0], 10);\n if (major >= 19) {\n return {fetchPriority};\n }\n return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.css.map"}
|
package/dist/Image.mjs
CHANGED
|
@@ -123,7 +123,7 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
|
|
|
123
123
|
queueMicrotask(onLoad);
|
|
124
124
|
animation(domRef.current);
|
|
125
125
|
});
|
|
126
|
-
if (props.alt == null) console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
|
|
126
|
+
if (props.alt == null && process.env.NODE_ENV !== 'production') console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
|
|
127
127
|
let errorState = !isSkeleton && state === 'error' && renderError?.();
|
|
128
128
|
let isRevealed = state === 'revealed' && !isSkeleton;
|
|
129
129
|
let isTransitioning = isRevealed && loadTime > 200;
|
package/dist/Image.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n /** The URL of the image. */\n src?: string,\n // TODO\n // srcSet?: string,\n // sizes?: string,\n /** Accessible alt text for the image. */\n alt?: string,\n /**\n * Indicates if the fetching of the image must be done using a CORS request.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n */\n crossOrigin?: 'anonymous' | 'use-credentials',\n /**\n * Whether the browser should decode images synchronously or asynchronously.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n */\n decoding?: 'async' | 'auto' | 'sync',\n /**\n * Provides a hint of the relative priority to use when fetching the image.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n */\n fetchPriority?: 'high' | 'low' | 'auto',\n /**\n * Whether the image should be loaded immediately or lazily when scrolled into view.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n */\n loading?: 'eager' | 'lazy',\n /**\n * A string indicating which referrer to use when fetching the resource.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n */\n referrerPolicy?: HTMLAttributeReferrerPolicy,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /** A function that is called to render a fallback when the image fails to load. */\n renderError?: () => ReactNode,\n /**\n * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n state: ImageState,\n src: string,\n startTime: number,\n loadTime: number\n}\n\ntype Action = \n | {type: 'update', src: string}\n | {type: 'loaded'}\n | {type: 'revealed'}\n | {type: 'error'};\n\nfunction createState(src: string): State {\n return {\n state: 'loading',\n src,\n startTime: Date.now(),\n loadTime: 0\n };\n}\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'update': {\n return {\n state: 'loading',\n src: action.src,\n startTime: Date.now(),\n loadTime: 0\n };\n }\n case 'loaded':\n case 'error': {\n return {\n ...state,\n state: action.type\n };\n }\n case 'revealed': {\n return {\n ...state,\n state: 'revealed',\n loadTime: Date.now() - state.startTime\n };\n }\n default:\n return state;\n }\n}\n\nconst wrapperStyles = style({\n backgroundColor: 'gray-100',\n overflow: 'hidden'\n});\n\nconst imgStyles = style({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: '[inherit]',\n objectPosition: '[inherit]',\n opacity: {\n default: 0,\n isRevealed: 1\n },\n transition: {\n default: 'none',\n isTransitioning: 'opacity'\n },\n transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n let {\n src = '',\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n renderError,\n group = DefaultImageGroup,\n // TODO\n // srcSet,\n // sizes,\n alt,\n crossOrigin,\n decoding,\n fetchPriority,\n loading,\n referrerPolicy,\n slot\n } = props;\n let hidden = (props as ImageContextValue).hidden;\n \n let {revealAll, register, unregister, load} = useContext(group);\n let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n if (src !== lastSrc && !hidden) {\n dispatch({type: 'update', src});\n }\n\n if (state === 'loaded' && revealAll && !hidden) {\n dispatch({type: 'revealed'});\n }\n\n let imgRef = useRef<HTMLImageElement | null>(null);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n register(src);\n return () => {\n unregister(src);\n };\n }, [hidden, register, unregister, src]);\n\n let onLoad = useCallback(() => {\n load(src);\n dispatch({type: 'loaded'});\n }, [load, src]);\n\n let onError = useCallback(() => {\n dispatch({type: 'error'});\n unregister(src);\n }, [unregister, src]);\n\n let isSkeleton = useIsSkeleton();\n let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n let animation = useLoadingAnimation(isAnimating);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n // If the image is already loaded, update state immediately instead of waiting for onLoad.\n if (state === 'loading' && imgRef.current?.complete) {\n // Queue a microtask so we don't hit React's update limit.\n // TODO: is this necessary?\n queueMicrotask(onLoad);\n }\n\n animation(domRef.current);\n });\n\n if (props.alt == null) {\n console.warn(\n 'The `alt` prop was not provided to an image. ' +\n 'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n 'is decorative or redundant with displayed text and should not be announced by screen readers.'\n );\n }\n\n let errorState = !isSkeleton && state === 'error' && renderError?.();\n let isRevealed = state === 'revealed' && !isSkeleton;\n let isTransitioning = isRevealed && loadTime > 200;\n return useMemo(() => hidden ? null : (\n <div\n ref={domRef}\n slot={slot || undefined}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' ' + (isAnimating ? loadingStyle : '')}>\n {errorState}\n {!errorState && (\n <img\n {...getFetchPriorityProp(fetchPriority)}\n src={src}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n ref={imgRef}\n onLoad={onLoad}\n onError={onError}\n className={imgStyles({isRevealed, isTransitioning})} />\n )}\n </div>\n ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n const pieces = version.split('.');\n const major = parseInt(pieces[0], 10);\n if (major >= 19) {\n return {fetchPriority};\n }\n return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n /** The URL of the image. */\n src?: string,\n // TODO\n // srcSet?: string,\n // sizes?: string,\n /** Accessible alt text for the image. */\n alt?: string,\n /**\n * Indicates if the fetching of the image must be done using a CORS request.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n */\n crossOrigin?: 'anonymous' | 'use-credentials',\n /**\n * Whether the browser should decode images synchronously or asynchronously.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n */\n decoding?: 'async' | 'auto' | 'sync',\n /**\n * Provides a hint of the relative priority to use when fetching the image.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n */\n fetchPriority?: 'high' | 'low' | 'auto',\n /**\n * Whether the image should be loaded immediately or lazily when scrolled into view.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n */\n loading?: 'eager' | 'lazy',\n /**\n * A string indicating which referrer to use when fetching the resource.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n */\n referrerPolicy?: HTMLAttributeReferrerPolicy,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /** A function that is called to render a fallback when the image fails to load. */\n renderError?: () => ReactNode,\n /**\n * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n state: ImageState,\n src: string,\n startTime: number,\n loadTime: number\n}\n\ntype Action = \n | {type: 'update', src: string}\n | {type: 'loaded'}\n | {type: 'revealed'}\n | {type: 'error'};\n\nfunction createState(src: string): State {\n return {\n state: 'loading',\n src,\n startTime: Date.now(),\n loadTime: 0\n };\n}\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'update': {\n return {\n state: 'loading',\n src: action.src,\n startTime: Date.now(),\n loadTime: 0\n };\n }\n case 'loaded':\n case 'error': {\n return {\n ...state,\n state: action.type\n };\n }\n case 'revealed': {\n return {\n ...state,\n state: 'revealed',\n loadTime: Date.now() - state.startTime\n };\n }\n default:\n return state;\n }\n}\n\nconst wrapperStyles = style({\n backgroundColor: 'gray-100',\n overflow: 'hidden'\n});\n\nconst imgStyles = style({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: '[inherit]',\n objectPosition: '[inherit]',\n opacity: {\n default: 0,\n isRevealed: 1\n },\n transition: {\n default: 'none',\n isTransitioning: 'opacity'\n },\n transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n let {\n src = '',\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n renderError,\n group = DefaultImageGroup,\n // TODO\n // srcSet,\n // sizes,\n alt,\n crossOrigin,\n decoding,\n fetchPriority,\n loading,\n referrerPolicy,\n slot\n } = props;\n let hidden = (props as ImageContextValue).hidden;\n \n let {revealAll, register, unregister, load} = useContext(group);\n let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n if (src !== lastSrc && !hidden) {\n dispatch({type: 'update', src});\n }\n\n if (state === 'loaded' && revealAll && !hidden) {\n dispatch({type: 'revealed'});\n }\n\n let imgRef = useRef<HTMLImageElement | null>(null);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n register(src);\n return () => {\n unregister(src);\n };\n }, [hidden, register, unregister, src]);\n\n let onLoad = useCallback(() => {\n load(src);\n dispatch({type: 'loaded'});\n }, [load, src]);\n\n let onError = useCallback(() => {\n dispatch({type: 'error'});\n unregister(src);\n }, [unregister, src]);\n\n let isSkeleton = useIsSkeleton();\n let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n let animation = useLoadingAnimation(isAnimating);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n // If the image is already loaded, update state immediately instead of waiting for onLoad.\n if (state === 'loading' && imgRef.current?.complete) {\n // Queue a microtask so we don't hit React's update limit.\n // TODO: is this necessary?\n queueMicrotask(onLoad);\n }\n\n animation(domRef.current);\n });\n\n if (props.alt == null && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'The `alt` prop was not provided to an image. ' +\n 'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n 'is decorative or redundant with displayed text and should not be announced by screen readers.'\n );\n }\n\n let errorState = !isSkeleton && state === 'error' && renderError?.();\n let isRevealed = state === 'revealed' && !isSkeleton;\n let isTransitioning = isRevealed && loadTime > 200;\n return useMemo(() => hidden ? null : (\n <div\n ref={domRef}\n slot={slot || undefined}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' ' + (isAnimating ? loadingStyle : '')}>\n {errorState}\n {!errorState && (\n <img\n {...getFetchPriorityProp(fetchPriority)}\n src={src}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n ref={imgRef}\n onLoad={onLoad}\n onError={onError}\n className={imgStyles({isRevealed, isTransitioning})} />\n )}\n </div>\n ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n const pieces = version.split('.');\n const major = parseInt(pieces[0], 10);\n if (major >= 19) {\n return {fetchPriority};\n }\n return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.mjs.map"}
|
package/dist/Link.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8BM,MAAM,0DAAc,CAAA,GAAA,0BAAY,EAA0E;AAEjH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CC,MAAM,4CAAO,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAAoC;IAC/G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WAAC,UAAU,wBAAW,WAAW,WAAE,OAAO,gBAAE,YAAY,gBAAE,YAAY,oBAAE,mBAAmB,YAAI,MAAM,YAAE,QAAQ,EAAC,GAAG;IAEvH,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc,MAAM;IAChD,CAAC,UAAU,aAAa,GAAG,CAAA,GAAA,yCAAc,EAAE,UAAU;IAErD,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,4CAA4C;QAC5C,OAAO,OAAO,CAAC,KAAK,GAAG;IAE3B,GAAG;QAAC;QAAQ;KAAW;IAEvB,qBACE,gCAAC,CAAA,GAAA,+BAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,2BAAK;gBAAC,GAAG,WAAW;yBAAE;6BAAS;gBAAa,eAAe,CAAC,CAAC;yBAAa;8BAAS;4BAAc;YAAU,GAAG;kBAC1J;;AAGP","sources":["packages/@react-spectrum/s2/src/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {SkeletonContext, useSkeletonText} from './Skeleton';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface LinkStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary',\n /** The static color style to apply. Useful when the link appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto',\n /** Whether the link is on its own vs inside a longer string of text. */\n isStandalone?: boolean,\n /** Whether the link should be displayed with a quiet style. */\n isQuiet?: boolean\n}\n\nexport interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {\n children: ReactNode\n}\n\nexport const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n borderRadius: 'sm',\n font: {\n isStandalone: 'ui'\n },\n color: {\n variant: {\n primary: 'accent',\n secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?\n },\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'LinkText'\n },\n transition: 'default',\n fontWeight: {\n isStandalone: 'medium'\n },\n textDecoration: {\n default: 'underline',\n isStandalone: {\n // Inline links must always have an underline for accessibility.\n isQuiet: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Links allow users to navigate to a different location.\n * They can be presented inline inside a paragraph or as standalone text.\n */\nexport const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkContext);\n let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;\n\n let domRef = useFocusableRef(ref);\n let isSkeleton = useContext(SkeletonContext) || false;\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n\n useLayoutEffect(() => {\n if (domRef.current) {\n // TODO: should RAC Link pass through inert?\n domRef.current.inert = isSkeleton;\n }\n }, [domRef, isSkeleton]);\n\n return (\n <RACLink\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>\n {children}\n </RACLink>\n );\n});\n"],"names":[],"version":3,"file":"Link.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8BM,MAAM,0DAAc,CAAA,GAAA,0BAAY,EAA0E;AAEjH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CC,MAAM,4CAAO,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAAoC;IAC/G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WAAC,UAAU,wBAAW,WAAW,WAAE,OAAO,gBAAE,YAAY,gBAAE,YAAY,oBAAE,mBAAmB,YAAI,MAAM,YAAE,QAAQ,EAAC,GAAG;IAEvH,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc,MAAM;IAChD,CAAC,UAAU,aAAa,GAAG,CAAA,GAAA,yCAAc,EAAE,UAAU;IAErD,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,4CAA4C;QAC5C,OAAO,OAAO,CAAC,KAAK,GAAG;IAE3B,GAAG;QAAC;QAAQ;KAAW;IAEvB,qBACE,gCAAC,CAAA,GAAA,+BAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,2BAAK;gBAAC,GAAG,WAAW;yBAAE;6BAAS;gBAAa,eAAe,CAAC,CAAC;yBAAa;8BAAS;4BAAc;YAAU,GAAG;kBAC1J;;AAGP","sources":["packages/@react-spectrum/s2/src/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {SkeletonContext, useSkeletonText} from './Skeleton';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface LinkStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary',\n /** The static color style to apply. Useful when the link appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto',\n /** Whether the link is on its own vs inside a longer string of text. */\n isStandalone?: boolean,\n /** Whether the link should be displayed with a quiet style. */\n isQuiet?: boolean\n}\n\nexport interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, LinkStyleProps {\n children: ReactNode\n}\n\nexport const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n borderRadius: 'sm',\n font: {\n isStandalone: 'ui'\n },\n color: {\n variant: {\n primary: 'accent',\n secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?\n },\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'LinkText'\n },\n transition: 'default',\n fontWeight: {\n isStandalone: 'medium'\n },\n textDecoration: {\n default: 'underline',\n isStandalone: {\n // Inline links must always have an underline for accessibility.\n isQuiet: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Links allow users to navigate to a different location.\n * They can be presented inline inside a paragraph or as standalone text.\n */\nexport const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkContext);\n let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;\n\n let domRef = useFocusableRef(ref);\n let isSkeleton = useContext(SkeletonContext) || false;\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n\n useLayoutEffect(() => {\n if (domRef.current) {\n // TODO: should RAC Link pass through inert?\n domRef.current.inert = isSkeleton;\n }\n }, [domRef, isSkeleton]);\n\n return (\n <RACLink\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>\n {children}\n </RACLink>\n );\n});\n"],"names":[],"version":3,"file":"Link.cjs.map"}
|
package/dist/Link.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA0Ca;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {SkeletonContext, useSkeletonText} from './Skeleton';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface LinkStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary',\n /** The static color style to apply. Useful when the link appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto',\n /** Whether the link is on its own vs inside a longer string of text. */\n isStandalone?: boolean,\n /** Whether the link should be displayed with a quiet style. */\n isQuiet?: boolean\n}\n\nexport interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {\n children: ReactNode\n}\n\nexport const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n borderRadius: 'sm',\n font: {\n isStandalone: 'ui'\n },\n color: {\n variant: {\n primary: 'accent',\n secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?\n },\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'LinkText'\n },\n transition: 'default',\n fontWeight: {\n isStandalone: 'medium'\n },\n textDecoration: {\n default: 'underline',\n isStandalone: {\n // Inline links must always have an underline for accessibility.\n isQuiet: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Links allow users to navigate to a different location.\n * They can be presented inline inside a paragraph or as standalone text.\n */\nexport const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkContext);\n let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;\n\n let domRef = useFocusableRef(ref);\n let isSkeleton = useContext(SkeletonContext) || false;\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n\n useLayoutEffect(() => {\n if (domRef.current) {\n // TODO: should RAC Link pass through inert?\n domRef.current.inert = isSkeleton;\n }\n }, [domRef, isSkeleton]);\n\n return (\n <RACLink\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>\n {children}\n </RACLink>\n );\n});\n"],"names":[],"version":3,"file":"Link.css.map"}
|
|
1
|
+
{"mappings":"AA0Ca;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {SkeletonContext, useSkeletonText} from './Skeleton';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface LinkStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary',\n /** The static color style to apply. Useful when the link appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto',\n /** Whether the link is on its own vs inside a longer string of text. */\n isStandalone?: boolean,\n /** Whether the link should be displayed with a quiet style. */\n isQuiet?: boolean\n}\n\nexport interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, LinkStyleProps {\n children: ReactNode\n}\n\nexport const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n borderRadius: 'sm',\n font: {\n isStandalone: 'ui'\n },\n color: {\n variant: {\n primary: 'accent',\n secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?\n },\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'LinkText'\n },\n transition: 'default',\n fontWeight: {\n isStandalone: 'medium'\n },\n textDecoration: {\n default: 'underline',\n isStandalone: {\n // Inline links must always have an underline for accessibility.\n isQuiet: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Links allow users to navigate to a different location.\n * They can be presented inline inside a paragraph or as standalone text.\n */\nexport const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkContext);\n let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;\n\n let domRef = useFocusableRef(ref);\n let isSkeleton = useContext(SkeletonContext) || false;\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n\n useLayoutEffect(() => {\n if (domRef.current) {\n // TODO: should RAC Link pass through inert?\n domRef.current.inert = isSkeleton;\n }\n }, [domRef, isSkeleton]);\n\n return (\n <RACLink\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>\n {children}\n </RACLink>\n );\n});\n"],"names":[],"version":3,"file":"Link.css.map"}
|
package/dist/Link.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8BM,MAAM,0DAAc,CAAA,GAAA,oBAAY,EAA0E;AAEjH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CC,MAAM,4CAAO,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAAoC;IAC/G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WAAC,UAAU,wBAAW,WAAW,WAAE,OAAO,gBAAE,YAAY,gBAAE,YAAY,oBAAE,mBAAmB,YAAI,MAAM,YAAE,QAAQ,EAAC,GAAG;IAEvH,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAc,MAAM;IAChD,CAAC,UAAU,aAAa,GAAG,CAAA,GAAA,yCAAc,EAAE,UAAU;IAErD,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,4CAA4C;QAC5C,OAAO,OAAO,CAAC,KAAK,GAAG;IAE3B,GAAG;QAAC;QAAQ;KAAW;IAEvB,qBACE,gBAAC,CAAA,GAAA,WAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,2BAAK;gBAAC,GAAG,WAAW;yBAAE;6BAAS;gBAAa,eAAe,CAAC,CAAC;yBAAa;8BAAS;4BAAc;YAAU,GAAG;kBAC1J;;AAGP","sources":["packages/@react-spectrum/s2/src/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {SkeletonContext, useSkeletonText} from './Skeleton';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface LinkStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary',\n /** The static color style to apply. Useful when the link appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto',\n /** Whether the link is on its own vs inside a longer string of text. */\n isStandalone?: boolean,\n /** Whether the link should be displayed with a quiet style. */\n isQuiet?: boolean\n}\n\nexport interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {\n children: ReactNode\n}\n\nexport const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n borderRadius: 'sm',\n font: {\n isStandalone: 'ui'\n },\n color: {\n variant: {\n primary: 'accent',\n secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?\n },\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'LinkText'\n },\n transition: 'default',\n fontWeight: {\n isStandalone: 'medium'\n },\n textDecoration: {\n default: 'underline',\n isStandalone: {\n // Inline links must always have an underline for accessibility.\n isQuiet: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Links allow users to navigate to a different location.\n * They can be presented inline inside a paragraph or as standalone text.\n */\nexport const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkContext);\n let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;\n\n let domRef = useFocusableRef(ref);\n let isSkeleton = useContext(SkeletonContext) || false;\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n\n useLayoutEffect(() => {\n if (domRef.current) {\n // TODO: should RAC Link pass through inert?\n domRef.current.inert = isSkeleton;\n }\n }, [domRef, isSkeleton]);\n\n return (\n <RACLink\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>\n {children}\n </RACLink>\n );\n});\n"],"names":[],"version":3,"file":"Link.mjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8BM,MAAM,0DAAc,CAAA,GAAA,oBAAY,EAA0E;AAEjH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CC,MAAM,4CAAO,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAAoC;IAC/G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WAAC,UAAU,wBAAW,WAAW,WAAE,OAAO,gBAAE,YAAY,gBAAE,YAAY,oBAAE,mBAAmB,YAAI,MAAM,YAAE,QAAQ,EAAC,GAAG;IAEvH,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAc,MAAM;IAChD,CAAC,UAAU,aAAa,GAAG,CAAA,GAAA,yCAAc,EAAE,UAAU;IAErD,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,4CAA4C;QAC5C,OAAO,OAAO,CAAC,KAAK,GAAG;IAE3B,GAAG;QAAC;QAAQ;KAAW;IAEvB,qBACE,gBAAC,CAAA,GAAA,WAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,2BAAK;gBAAC,GAAG,WAAW;yBAAE;6BAAS;gBAAa,eAAe,CAAC,CAAC;yBAAa;8BAAS;4BAAc;YAAU,GAAG;kBAC1J;;AAGP","sources":["packages/@react-spectrum/s2/src/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {SkeletonContext, useSkeletonText} from './Skeleton';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface LinkStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary',\n /** The static color style to apply. Useful when the link appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto',\n /** Whether the link is on its own vs inside a longer string of text. */\n isStandalone?: boolean,\n /** Whether the link should be displayed with a quiet style. */\n isQuiet?: boolean\n}\n\nexport interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, LinkStyleProps {\n children: ReactNode\n}\n\nexport const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n borderRadius: 'sm',\n font: {\n isStandalone: 'ui'\n },\n color: {\n variant: {\n primary: 'accent',\n secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?\n },\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'LinkText'\n },\n transition: 'default',\n fontWeight: {\n isStandalone: 'medium'\n },\n textDecoration: {\n default: 'underline',\n isStandalone: {\n // Inline links must always have an underline for accessibility.\n isQuiet: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Links allow users to navigate to a different location.\n * They can be presented inline inside a paragraph or as standalone text.\n */\nexport const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkContext);\n let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;\n\n let domRef = useFocusableRef(ref);\n let isSkeleton = useContext(SkeletonContext) || false;\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n\n useLayoutEffect(() => {\n if (domRef.current) {\n // TODO: should RAC Link pass through inert?\n domRef.current.inert = isSkeleton;\n }\n }, [domRef, isSkeleton]);\n\n return (\n <RACLink\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>\n {children}\n </RACLink>\n );\n});\n"],"names":[],"version":3,"file":"Link.mjs.map"}
|
package/dist/StatusLight.cjs
CHANGED
|
@@ -123,8 +123,8 @@ const $dad358896b5630fa$export$5f84c37a31c6e41c = /*#__PURE__*/ (0, $lz5dj$react
|
|
|
123
123
|
let { children: children, size: size = 'M', variant: variant, role: role, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles } = props;
|
|
124
124
|
let domRef = (0, $lz5dj$reactspectrumutils.useDOMRef)(ref);
|
|
125
125
|
let isSkeleton = (0, $5eb75e0c130e0669$exports.useIsSkeleton)();
|
|
126
|
-
if (!children && !props['aria-label']) console.warn('If no children are provided, an aria-label must be specified');
|
|
127
|
-
if (!role && (props['aria-label'] || props['aria-labelledby'])) console.warn('A labelled StatusLight must have a role.');
|
|
126
|
+
if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') console.warn('If no children are provided, an aria-label must be specified');
|
|
127
|
+
if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') console.warn('A labelled StatusLight must have a role.');
|
|
128
128
|
return /*#__PURE__*/ (0, $lz5dj$reactjsxruntime.jsxs)("div", {
|
|
129
129
|
...(0, $lz5dj$reactariautils.filterDOMProps)(props, {
|
|
130
130
|
labelable: !!role
|
package/dist/StatusLight.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChE,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,KAAM,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACzF,QAAQ,IAAI,CAAC;IAGf,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gCAAC,CAAA,GAAA,wCAAa;0BACZ,cAAA,gCAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gCAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gCAAC,CAAA,GAAA,8BAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.cjs.map"}
|
package/dist/StatusLight.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label']) {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
|
|
1
|
+
{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
|
package/dist/StatusLight.mjs
CHANGED
|
@@ -116,8 +116,8 @@ const $cd71613dba8ee178$export$5f84c37a31c6e41c = /*#__PURE__*/ (0, $2PVgW$forwa
|
|
|
116
116
|
let { children: children, size: size = 'M', variant: variant, role: role, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles } = props;
|
|
117
117
|
let domRef = (0, $2PVgW$useDOMRef)(ref);
|
|
118
118
|
let isSkeleton = (0, $5ad421ec19460c48$export$4f8dc7555740235c)();
|
|
119
|
-
if (!children && !props['aria-label']) console.warn('If no children are provided, an aria-label must be specified');
|
|
120
|
-
if (!role && (props['aria-label'] || props['aria-labelledby'])) console.warn('A labelled StatusLight must have a role.');
|
|
119
|
+
if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') console.warn('If no children are provided, an aria-label must be specified');
|
|
120
|
+
if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') console.warn('A labelled StatusLight must have a role.');
|
|
121
121
|
return /*#__PURE__*/ (0, $2PVgW$jsxs)("div", {
|
|
122
122
|
...(0, $2PVgW$filterDOMProps)(props, {
|
|
123
123
|
labelable: !!role
|
package/dist/StatusLight.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChE,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,KAAM,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACzF,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.mjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAyBM,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,gBACvB,eAAe,MAAM,YAAY,QACjC,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAEZ,qBACE,gCAAC,CAAA,GAAA,uCAAc;QACZ,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,mCAAQ,EAAE;gBACnE,GAAG,WAAW;6BACd;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;8BACA;gBACA,WAAW;yBACX;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the button. */\n children: ReactNode,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let ctx = useSlottedContext(ToggleButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n isEmphasized = props.isEmphasized,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n return (\n <RACToggleButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n isEmphasized,\n isPending: false,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAyBM,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,gBACvB,eAAe,MAAM,YAAY,QACjC,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAEZ,qBACE,gCAAC,CAAA,GAAA,uCAAc;QACZ,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,mCAAQ,EAAE;gBACnE,GAAG,WAAW;6BACd;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;8BACA;gBACA,WAAW;yBACX;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the button. */\n children: ReactNode,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let ctx = useSlottedContext(ToggleButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n isEmphasized = props.isEmphasized,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n return (\n <RACToggleButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n isEmphasized,\n isPending: false,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACgFiC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAHa","sources":["bc1013d4d937a6f8","packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["@import \"2356498b79989caa\";\n@import \"00644bdfe594b970\";\n@import \"2645bae9c4681078\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the button. */\n children: ReactNode,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let ctx = useSlottedContext(ToggleButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n isEmphasized = props.isEmphasized,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n return (\n <RACToggleButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n isEmphasized,\n isPending: false,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.css.map"}
|
|
1
|
+
{"mappings":"ACgFiC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAHa","sources":["bc1013d4d937a6f8","packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["@import \"2356498b79989caa\";\n@import \"00644bdfe594b970\";\n@import \"2645bae9c4681078\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the button. */\n children: ReactNode,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let ctx = useSlottedContext(ToggleButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n isEmphasized = props.isEmphasized,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n return (\n <RACToggleButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n isEmphasized,\n isPending: false,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.css.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAyBM,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,gBACvB,eAAe,MAAM,YAAY,QACjC,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAEZ,qBACE,gBAAC,CAAA,GAAA,mBAAc;QACZ,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,yCAAQ,EAAE;gBACnE,GAAG,WAAW;6BACd;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;8BACA;gBACA,WAAW;yBACX;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the button. */\n children: ReactNode,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let ctx = useSlottedContext(ToggleButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n isEmphasized = props.isEmphasized,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n return (\n <RACToggleButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n isEmphasized,\n isPending: false,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.mjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAyBM,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,gBACvB,eAAe,MAAM,YAAY,QACjC,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAEZ,qBACE,gBAAC,CAAA,GAAA,mBAAc;QACZ,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,yCAAQ,EAAE;gBACnE,GAAG,WAAW;6BACd;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;8BACA;gBACA,WAAW;yBACX;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the button. */\n children: ReactNode,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let ctx = useSlottedContext(ToggleButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n isEmphasized = props.isEmphasized,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n return (\n <RACToggleButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n isEmphasized,\n isPending: false,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.mjs.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -245,7 +245,7 @@ interface ActionButtonStyleProps {
|
|
|
245
245
|
/** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
|
|
246
246
|
isQuiet?: boolean;
|
|
247
247
|
}
|
|
248
|
-
export interface ActionButtonProps extends Omit<_ButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {
|
|
248
|
+
export interface ActionButtonProps extends Omit<_ButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending' | 'onClick'>, StyleProps, ActionButtonStyleProps {
|
|
249
249
|
/** The content to display in the ActionButton. */
|
|
250
250
|
children: ReactNode;
|
|
251
251
|
}
|
|
@@ -555,11 +555,11 @@ interface ButtonStyleProps {
|
|
|
555
555
|
/** The static color style to apply. Useful when the Button appears over a color background. */
|
|
556
556
|
staticColor?: 'white' | 'black' | 'auto';
|
|
557
557
|
}
|
|
558
|
-
export interface ButtonProps extends Omit<_ButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {
|
|
558
|
+
export interface ButtonProps extends Omit<_ButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, ButtonStyleProps {
|
|
559
559
|
/** The content to display in the Button. */
|
|
560
560
|
children: ReactNode;
|
|
561
561
|
}
|
|
562
|
-
export interface LinkButtonProps extends Omit<_LinkProps1, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {
|
|
562
|
+
export interface LinkButtonProps extends Omit<_LinkProps1, 'className' | 'style' | 'children' | 'onClick'>, StyleProps, ButtonStyleProps {
|
|
563
563
|
/** The content to display in the Button. */
|
|
564
564
|
children: ReactNode;
|
|
565
565
|
}
|
|
@@ -736,7 +736,7 @@ export interface BreadcrumbsProps<T> extends Omit<_BreadcrumbsProps1<T>, 'childr
|
|
|
736
736
|
export const BreadcrumbsContext: Context<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>;
|
|
737
737
|
/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
|
|
738
738
|
export const Breadcrumbs: <T extends object>(props: BreadcrumbsProps<T> & RefAttributes<DOMRefValue<HTMLOListElement>>) => ReactElement | null;
|
|
739
|
-
export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {
|
|
739
|
+
export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus' | 'onClick'>, LinkDOMProps {
|
|
740
740
|
/** The children of the breadcrumb item. */
|
|
741
741
|
children: ReactNode;
|
|
742
742
|
}
|
|
@@ -1183,7 +1183,7 @@ interface LinkStyleProps {
|
|
|
1183
1183
|
/** Whether the link should be displayed with a quiet style. */
|
|
1184
1184
|
isQuiet?: boolean;
|
|
1185
1185
|
}
|
|
1186
|
-
export interface LinkProps extends Omit<_LinkProps1, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {
|
|
1186
|
+
export interface LinkProps extends Omit<_LinkProps1, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, LinkStyleProps {
|
|
1187
1187
|
children: ReactNode;
|
|
1188
1188
|
}
|
|
1189
1189
|
export const LinkContext: Context<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
|
|
@@ -1661,7 +1661,7 @@ export const ToggleButtonGroupContext: Context<ContextValue<Partial<ToggleButton
|
|
|
1661
1661
|
* A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
|
|
1662
1662
|
*/
|
|
1663
1663
|
export const ToggleButtonGroup: ForwardRefExoticComponent<ToggleButtonGroupProps & RefAttributes<HTMLDivElement>>;
|
|
1664
|
-
export interface ToggleButtonProps extends Omit<_ToggleButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
|
|
1664
|
+
export interface ToggleButtonProps extends Omit<_ToggleButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, ActionButtonStyleProps {
|
|
1665
1665
|
/** The content to display in the button. */
|
|
1666
1666
|
children: ReactNode;
|
|
1667
1667
|
/** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
|