npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-4ad04f00f-250328 → 3.0.0-nightly-3c9b36ae9-250330 - Mend

@react-spectrum/s2 3.0.0-nightly-4ad04f00f-250328 → 3.0.0-nightly-3c9b36ae9-250330

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.

Files changed (41) hide show

package/dist/Button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /*\n The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n \n @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'accent' \| 'negative' \| 'premium' \| 'genai',\n /\n The background style of the Button.\n \n @default 'fill'\n /\n fillStyle?: 'fill' \| 'outline',\n /\n The size of the Button.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the Button appears over a color background. /\n staticColor?: 'white' \| 'black' \| 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' \| 'style' \| 'children'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/\n Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n /\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. /\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' \|\| variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/*\n A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n variant: props.variant \|\| 'primary',\n fillStyle: props.fillStyle \|\| 'fill',\n size: props.size \|\| 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\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 </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}
1	+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /*\n The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n \n @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'accent' \| 'negative' \| 'premium' \| 'genai',\n /\n The background style of the Button.\n \n @default 'fill'\n /\n fillStyle?: 'fill' \| 'outline',\n /\n The size of the Button.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the Button appears over a color background. /\n staticColor?: 'white' \| 'black' \| 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'onClick'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' \| 'style' \| 'children' \| 'onClick'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/\n Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n /\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. /\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' \|\| variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/*\n A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n variant: props.variant \|\| 'primary',\n fillStyle: props.fillStyle \|\| 'fill',\n size: props.size \|\| 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\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 </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}

package/dist/Button.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"ACmEe;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;;;;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;;;;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;;;;EAwNE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;;;;EAmIQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CJ;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/ZL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwNE;;;;;;AAxNF;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA0OS;;;;;;AAAA;;;;;;AAAA","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\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 {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /*\n The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n \n @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'accent' \| 'negative' \| 'premium' \| 'genai',\n /\n The background style of the Button.\n \n @default 'fill'\n /\n fillStyle?: 'fill' \| 'outline',\n /\n The size of the Button.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the Button appears over a color background. /\n staticColor?: 'white' \| 'black' \| 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' \| 'style' \| 'children'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/\n Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n /\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. /\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' \|\| variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/*\n A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n variant: props.variant \|\| 'primary',\n fillStyle: props.fillStyle \|\| 'fill',\n size: props.size \|\| 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\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 </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.css.map"}
1	+ {"mappings":"ACmEe;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;;;;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;;;;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;;;;EAwNE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;;;;EAmIQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CJ;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/ZL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwNE;;;;;;AAxNF;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA0OS;;;;;;AAAA;;;;;;AAAA","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\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 {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /*\n The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n \n @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'accent' \| 'negative' \| 'premium' \| 'genai',\n /\n The background style of the Button.\n \n @default 'fill'\n /\n fillStyle?: 'fill' \| 'outline',\n /\n The size of the Button.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the Button appears over a color background. /\n staticColor?: 'white' \| 'black' \| 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'onClick'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' \| 'style' \| 'children' \| 'onClick'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/\n Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n /\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. /\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' \|\| variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/*\n A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n variant: props.variant \|\| 'primary',\n fillStyle: props.fillStyle \|\| 'fill',\n size: props.size \|\| 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\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 </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.css.map"}

package/dist/Button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /*\n The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n \n @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'accent' \| 'negative' \| 'premium' \| 'genai',\n /\n The background style of the Button.\n \n @default 'fill'\n /\n fillStyle?: 'fill' \| 'outline',\n /\n The size of the Button.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the Button appears over a color background. /\n staticColor?: 'white' \| 'black' \| 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' \| 'style' \| 'children'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/\n Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n /\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. /\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' \|\| variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/*\n A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n variant: props.variant \|\| 'primary',\n fillStyle: props.fillStyle \|\| 'fill',\n size: props.size \|\| 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\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 </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.mjs.map"}
1	+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /*\n The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n \n @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'accent' \| 'negative' \| 'premium' \| 'genai',\n /\n The background style of the Button.\n \n @default 'fill'\n /\n fillStyle?: 'fill' \| 'outline',\n /\n The size of the Button.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the Button appears over a color background. /\n staticColor?: 'white' \| 'black' \| 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'onClick'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' \| 'style' \| 'children' \| 'onClick'>, StyleProps, ButtonStyleProps {\n /* The content to display in the Button. /\n children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/\n Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n /\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. /\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' \|\| variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n isDisabled: renderProps.isDisabled \|\| isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/*\n A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n variant: props.variant \|\| 'primary',\n fillStyle: props.fillStyle \|\| 'fill',\n size: props.size \|\| 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\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 </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.mjs.map"}

package/dist/ButtonGroup.cjs CHANGED Viewed

@@ -4,8 +4,8 @@ var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
 var $5rFNy$reactjsxruntime = require("react/jsx-runtime");
 var $5rFNy$reactariacomponents = require("react-aria-components");
 var $5rFNy$react = require("react");
-var $5rFNy$reactspectrumutils = require("@react-spectrum/utils");
 var $5rFNy$reactariautils = require("@react-aria/utils");
+var $5rFNy$reactspectrumutils = require("@react-spectrum/utils");
 function $parcel$export(e, n, v, s) {
@@ -65,7 +65,7 @@ const $e1016b8947dbadb8$var$buttongroup = function anonymous(props, overrides) {
 const $e1016b8947dbadb8$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $5rFNy$react.forwardRef)(function ButtonGroup(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $e1016b8947dbadb8$export$4c574c91bb0be0e2);
     let domRef = (0, $5rFNy$reactspectrumutils.useDOMRef)(ref);
-    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled } = props;
+    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled, ...otherProps } = props;
     let [hasOverflow, setHasOverflow] = (0, $5rFNy$reactariautils.useValueEffect)(false);
     let checkForOverflow = (0, $5rFNy$react.useCallback)(()=>{
         let computeHasOverflow = ()=>{
@@ -117,6 +117,7 @@ const $e1016b8947dbadb8$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $5rFNy$react
         isDisabled: isDisabled
     };
     return /*#__PURE__*/ (0, $5rFNy$reactjsxruntime.jsx)("div", {
+        ...(0, $5rFNy$reactariautils.filterDOMProps)(otherProps),
         ref: domRef,
         style: props.UNSAFE_style,
         className: (props.UNSAFE_className || '') + $e1016b8947dbadb8$var$buttongroup({

package/dist/ButtonGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+E,CAAC;AAE9H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,~~EACX~~,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,oCAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,wBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,2CAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gCAAC;~~QACC~~,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,uCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,2CAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n useDOMRef,\n useResizeObserver\n} from '@react-spectrum/utils';\nimport {~~useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {~~useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n /\n The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n * any switching behaviors between 'vertical' and 'horizontal'.\n \n @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical',\n /\n The alignment of the Buttons within the ButtonGroup.\n \n @default 'start'\n /\n align?: 'start' \| 'end' \| 'center',\n /\n The size of the Buttons within the ButtonGroup.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n /* The Buttons contained within the ButtonGroup. /\n children: ReactNode,\n /* Whether the Buttons in the ButtonGroup are all disabled. /\n isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n /* Whether the ButtonGroup shouldn't be rendered. /\n isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n display: 'inline-flex',\n position: 'relative',\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12\n }\n },\n flexDirection: {\n default: 'row',\n orientation: {\n vertical: 'column'\n }\n },\n alignItems: {\n default: 'center',\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/\n ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n /\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n let domRef = useDOMRef(ref);\n let {\n size = 'M',\n orientation = 'horizontal',\n align = 'start',\n children,\n isDisabled\n } = props;\n\n let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n let checkForOverflow = useCallback(() => {\n let computeHasOverflow = () => {\n if (domRef.current && orientation === 'horizontal') {\n let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n // If any buttons have negative X positions (align=\"end\") or extend beyond\n // the width of the button group (align=\"start\"), then switch to vertical.\n if (buttonGroupChildren.some(child => child.offsetLeft < 0 \|\| child.offsetLeft + child.offsetWidth > maxX)) {\n return true;\n }\n return false;\n }\n };\n if (orientation === 'horizontal') {\n setHasOverflow(function () {\n // Force to horizontal for measurement.\n yield false;\n\n // Measure, and update if there is overflow.\n yield computeHasOverflow();\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef, orientation, setHasOverflow, children]);\n\n // There are two main reasons we need to remeasure:\n // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n useLayoutEffect(() => {\n checkForOverflow();\n }, [checkForOverflow]);\n\n // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n let parent = useRef<HTMLElement \| null>(null);\n useLayoutEffect(() => {\n if (domRef.current) {\n parent.current = domRef.current.parentElement as HTMLElement;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef.current]);\n useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n if ((props as ButtonGroupContextValue).isHidden) {\n return null;\n }\n\n let context = {styles: style({flexShrink: 0}), size, isDisabled};\n return (\n <div\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + buttongroup({\n align,\n orientation: orientation === 'vertical' \|\| hasOverflow ? 'vertical' : 'horizontal',\n size\n }, props.styles)}>\n <Provider\n values={[\n [ButtonContext, context],\n [LinkButtonContext, context]\n ]}>\n {children}\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.cjs.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+E,CAAC;AAE9H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACV,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,oCAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,wBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,2CAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAC9B,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,uCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,2CAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n useDOMRef,\n useResizeObserver\n} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n /\n The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n * any switching behaviors between 'vertical' and 'horizontal'.\n \n @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical',\n /\n The alignment of the Buttons within the ButtonGroup.\n \n @default 'start'\n /\n align?: 'start' \| 'end' \| 'center',\n /\n The size of the Buttons within the ButtonGroup.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n /* The Buttons contained within the ButtonGroup. /\n children: ReactNode,\n /* Whether the Buttons in the ButtonGroup are all disabled. /\n isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n /* Whether the ButtonGroup shouldn't be rendered. /\n isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n display: 'inline-flex',\n position: 'relative',\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12\n }\n },\n flexDirection: {\n default: 'row',\n orientation: {\n vertical: 'column'\n }\n },\n alignItems: {\n default: 'center',\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/\n ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n /\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n let domRef = useDOMRef(ref);\n let {\n size = 'M',\n orientation = 'horizontal',\n align = 'start',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n let checkForOverflow = useCallback(() => {\n let computeHasOverflow = () => {\n if (domRef.current && orientation === 'horizontal') {\n let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n // If any buttons have negative X positions (align=\"end\") or extend beyond\n // the width of the button group (align=\"start\"), then switch to vertical.\n if (buttonGroupChildren.some(child => child.offsetLeft < 0 \|\| child.offsetLeft + child.offsetWidth > maxX)) {\n return true;\n }\n return false;\n }\n };\n if (orientation === 'horizontal') {\n setHasOverflow(function () {\n // Force to horizontal for measurement.\n yield false;\n\n // Measure, and update if there is overflow.\n yield computeHasOverflow();\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef, orientation, setHasOverflow, children]);\n\n // There are two main reasons we need to remeasure:\n // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n useLayoutEffect(() => {\n checkForOverflow();\n }, [checkForOverflow]);\n\n // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n let parent = useRef<HTMLElement \| null>(null);\n useLayoutEffect(() => {\n if (domRef.current) {\n parent.current = domRef.current.parentElement as HTMLElement;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef.current]);\n useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n if ((props as ButtonGroupContextValue).isHidden) {\n return null;\n }\n\n let context = {styles: style({flexShrink: 0}), size, isDisabled};\n return (\n <div\n {...filterDOMProps(otherProps)}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + buttongroup({\n align,\n orientation: orientation === 'vertical' \|\| hasOverflow ? 'vertical' : 'horizontal',\n size\n }, props.styles)}>\n <Provider\n values={[\n [ButtonContext, context],\n [LinkButtonContext, context]\n ]}>\n {children}\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.cjs.map"}

package/dist/ButtonGroup.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AC6DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;~~EAuGK~~;;;;;~~AAvGL~~","sources":["46da5d9d2ee61a4a","packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["@import \"8be38106edd06864\";\n@import \"d77a01524490dd5a\";\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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n useDOMRef,\n useResizeObserver\n} from '@react-spectrum/utils';\nimport {~~useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {~~useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n /\n The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n * any switching behaviors between 'vertical' and 'horizontal'.\n \n @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical',\n /\n The alignment of the Buttons within the ButtonGroup.\n \n @default 'start'\n /\n align?: 'start' \| 'end' \| 'center',\n /\n The size of the Buttons within the ButtonGroup.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n /* The Buttons contained within the ButtonGroup. /\n children: ReactNode,\n /* Whether the Buttons in the ButtonGroup are all disabled. /\n isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n /* Whether the ButtonGroup shouldn't be rendered. /\n isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n display: 'inline-flex',\n position: 'relative',\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12\n }\n },\n flexDirection: {\n default: 'row',\n orientation: {\n vertical: 'column'\n }\n },\n alignItems: {\n default: 'center',\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/\n ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n /\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n let domRef = useDOMRef(ref);\n let {\n size = 'M',\n orientation = 'horizontal',\n align = 'start',\n children,\n isDisabled\n } = props;\n\n let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n let checkForOverflow = useCallback(() => {\n let computeHasOverflow = () => {\n if (domRef.current && orientation === 'horizontal') {\n let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n // If any buttons have negative X positions (align=\"end\") or extend beyond\n // the width of the button group (align=\"start\"), then switch to vertical.\n if (buttonGroupChildren.some(child => child.offsetLeft < 0 \|\| child.offsetLeft + child.offsetWidth > maxX)) {\n return true;\n }\n return false;\n }\n };\n if (orientation === 'horizontal') {\n setHasOverflow(function () {\n // Force to horizontal for measurement.\n yield false;\n\n // Measure, and update if there is overflow.\n yield computeHasOverflow();\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef, orientation, setHasOverflow, children]);\n\n // There are two main reasons we need to remeasure:\n // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n useLayoutEffect(() => {\n checkForOverflow();\n }, [checkForOverflow]);\n\n // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n let parent = useRef<HTMLElement \| null>(null);\n useLayoutEffect(() => {\n if (domRef.current) {\n parent.current = domRef.current.parentElement as HTMLElement;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef.current]);\n useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n if ((props as ButtonGroupContextValue).isHidden) {\n return null;\n }\n\n let context = {styles: style({flexShrink: 0}), size, isDisabled};\n return (\n <div\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + buttongroup({\n align,\n orientation: orientation === 'vertical' \|\| hasOverflow ? 'vertical' : 'horizontal',\n size\n }, props.styles)}>\n <Provider\n values={[\n [ButtonContext, context],\n [LinkButtonContext, context]\n ]}>\n {children}\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}
1	+ {"mappings":"AC6DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwGK;;;;;AAxGL","sources":["46da5d9d2ee61a4a","packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["@import \"8be38106edd06864\";\n@import \"d77a01524490dd5a\";\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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n useDOMRef,\n useResizeObserver\n} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n /\n The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n * any switching behaviors between 'vertical' and 'horizontal'.\n \n @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical',\n /\n The alignment of the Buttons within the ButtonGroup.\n \n @default 'start'\n /\n align?: 'start' \| 'end' \| 'center',\n /\n The size of the Buttons within the ButtonGroup.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n /* The Buttons contained within the ButtonGroup. /\n children: ReactNode,\n /* Whether the Buttons in the ButtonGroup are all disabled. /\n isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n /* Whether the ButtonGroup shouldn't be rendered. /\n isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n display: 'inline-flex',\n position: 'relative',\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12\n }\n },\n flexDirection: {\n default: 'row',\n orientation: {\n vertical: 'column'\n }\n },\n alignItems: {\n default: 'center',\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/\n ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n /\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n let domRef = useDOMRef(ref);\n let {\n size = 'M',\n orientation = 'horizontal',\n align = 'start',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n let checkForOverflow = useCallback(() => {\n let computeHasOverflow = () => {\n if (domRef.current && orientation === 'horizontal') {\n let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n // If any buttons have negative X positions (align=\"end\") or extend beyond\n // the width of the button group (align=\"start\"), then switch to vertical.\n if (buttonGroupChildren.some(child => child.offsetLeft < 0 \|\| child.offsetLeft + child.offsetWidth > maxX)) {\n return true;\n }\n return false;\n }\n };\n if (orientation === 'horizontal') {\n setHasOverflow(function () {\n // Force to horizontal for measurement.\n yield false;\n\n // Measure, and update if there is overflow.\n yield computeHasOverflow();\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef, orientation, setHasOverflow, children]);\n\n // There are two main reasons we need to remeasure:\n // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n useLayoutEffect(() => {\n checkForOverflow();\n }, [checkForOverflow]);\n\n // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n let parent = useRef<HTMLElement \| null>(null);\n useLayoutEffect(() => {\n if (domRef.current) {\n parent.current = domRef.current.parentElement as HTMLElement;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef.current]);\n useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n if ((props as ButtonGroupContextValue).isHidden) {\n return null;\n }\n\n let context = {styles: style({flexShrink: 0}), size, isDisabled};\n return (\n <div\n {...filterDOMProps(otherProps)}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + buttongroup({\n align,\n orientation: orientation === 'vertical' \|\| hasOverflow ? 'vertical' : 'horizontal',\n size\n }, props.styles)}>\n <Provider\n values={[\n [ButtonContext, context],\n [LinkButtonContext, context]\n ]}>\n {children}\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}

package/dist/ButtonGroup.mjs CHANGED Viewed

@@ -4,8 +4,8 @@ import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} fr
 import {jsx as $bnJX2$jsx} from "react/jsx-runtime";
 import {Provider as $bnJX2$Provider} from "react-aria-components";
 import {createContext as $bnJX2$createContext, forwardRef as $bnJX2$forwardRef, useCallback as $bnJX2$useCallback, useRef as $bnJX2$useRef} from "react";
+import {useValueEffect as $bnJX2$useValueEffect, useLayoutEffect as $bnJX2$useLayoutEffect, filterDOMProps as $bnJX2$filterDOMProps} from "@react-aria/utils";
 import {useDOMRef as $bnJX2$useDOMRef, useResizeObserver as $bnJX2$useResizeObserver} from "@react-spectrum/utils";
-import {useValueEffect as $bnJX2$useValueEffect, useLayoutEffect as $bnJX2$useLayoutEffect} from "@react-aria/utils";
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -58,7 +58,7 @@ const $472eaa9a9b344b9a$var$buttongroup = function anonymous(props, overrides) {
 const $472eaa9a9b344b9a$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $bnJX2$forwardRef)(function ButtonGroup(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $472eaa9a9b344b9a$export$4c574c91bb0be0e2);
     let domRef = (0, $bnJX2$useDOMRef)(ref);
-    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled } = props;
+    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled, ...otherProps } = props;
     let [hasOverflow, setHasOverflow] = (0, $bnJX2$useValueEffect)(false);
     let checkForOverflow = (0, $bnJX2$useCallback)(()=>{
         let computeHasOverflow = ()=>{
@@ -110,6 +110,7 @@ const $472eaa9a9b344b9a$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $bnJX2$forwa
         isDisabled: isDisabled
     };
     return /*#__PURE__*/ (0, $bnJX2$jsx)("div", {
+        ...(0, $bnJX2$filterDOMProps)(otherProps),
         ref: domRef,
         style: props.UNSAFE_style,
         className: (props.UNSAFE_className || '') + $472eaa9a9b344b9a$var$buttongroup({

package/dist/ButtonGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+E,CAAC;AAE9H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,~~EACX~~,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,kBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gBAAC;~~QACC~~,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,yCAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n useDOMRef,\n useResizeObserver\n} from '@react-spectrum/utils';\nimport {~~useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {~~useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n /\n The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n * any switching behaviors between 'vertical' and 'horizontal'.\n \n @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical',\n /\n The alignment of the Buttons within the ButtonGroup.\n \n @default 'start'\n /\n align?: 'start' \| 'end' \| 'center',\n /\n The size of the Buttons within the ButtonGroup.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n /* The Buttons contained within the ButtonGroup. /\n children: ReactNode,\n /* Whether the Buttons in the ButtonGroup are all disabled. /\n isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n /* Whether the ButtonGroup shouldn't be rendered. /\n isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n display: 'inline-flex',\n position: 'relative',\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12\n }\n },\n flexDirection: {\n default: 'row',\n orientation: {\n vertical: 'column'\n }\n },\n alignItems: {\n default: 'center',\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/\n ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n /\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n let domRef = useDOMRef(ref);\n let {\n size = 'M',\n orientation = 'horizontal',\n align = 'start',\n children,\n isDisabled\n } = props;\n\n let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n let checkForOverflow = useCallback(() => {\n let computeHasOverflow = () => {\n if (domRef.current && orientation === 'horizontal') {\n let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n // If any buttons have negative X positions (align=\"end\") or extend beyond\n // the width of the button group (align=\"start\"), then switch to vertical.\n if (buttonGroupChildren.some(child => child.offsetLeft < 0 \|\| child.offsetLeft + child.offsetWidth > maxX)) {\n return true;\n }\n return false;\n }\n };\n if (orientation === 'horizontal') {\n setHasOverflow(function () {\n // Force to horizontal for measurement.\n yield false;\n\n // Measure, and update if there is overflow.\n yield computeHasOverflow();\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef, orientation, setHasOverflow, children]);\n\n // There are two main reasons we need to remeasure:\n // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n useLayoutEffect(() => {\n checkForOverflow();\n }, [checkForOverflow]);\n\n // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n let parent = useRef<HTMLElement \| null>(null);\n useLayoutEffect(() => {\n if (domRef.current) {\n parent.current = domRef.current.parentElement as HTMLElement;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef.current]);\n useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n if ((props as ButtonGroupContextValue).isHidden) {\n return null;\n }\n\n let context = {styles: style({flexShrink: 0}), size, isDisabled};\n return (\n <div\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + buttongroup({\n align,\n orientation: orientation === 'vertical' \|\| hasOverflow ? 'vertical' : 'horizontal',\n size\n }, props.styles)}>\n <Provider\n values={[\n [ButtonContext, context],\n [LinkButtonContext, context]\n ]}>\n {children}\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}
1	+ {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+E,CAAC;AAE9H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACV,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,kBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,yCAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n useDOMRef,\n useResizeObserver\n} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n /\n The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n * any switching behaviors between 'vertical' and 'horizontal'.\n \n @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical',\n /\n The alignment of the Buttons within the ButtonGroup.\n \n @default 'start'\n /\n align?: 'start' \| 'end' \| 'center',\n /\n The size of the Buttons within the ButtonGroup.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n /* The Buttons contained within the ButtonGroup. /\n children: ReactNode,\n /* Whether the Buttons in the ButtonGroup are all disabled. /\n isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n /* Whether the ButtonGroup shouldn't be rendered. /\n isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n display: 'inline-flex',\n position: 'relative',\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12\n }\n },\n flexDirection: {\n default: 'row',\n orientation: {\n vertical: 'column'\n }\n },\n alignItems: {\n default: 'center',\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: 'start',\n align: {\n end: 'end',\n center: 'center'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/\n ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n /\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n let domRef = useDOMRef(ref);\n let {\n size = 'M',\n orientation = 'horizontal',\n align = 'start',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n let checkForOverflow = useCallback(() => {\n let computeHasOverflow = () => {\n if (domRef.current && orientation === 'horizontal') {\n let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n // If any buttons have negative X positions (align=\"end\") or extend beyond\n // the width of the button group (align=\"start\"), then switch to vertical.\n if (buttonGroupChildren.some(child => child.offsetLeft < 0 \|\| child.offsetLeft + child.offsetWidth > maxX)) {\n return true;\n }\n return false;\n }\n };\n if (orientation === 'horizontal') {\n setHasOverflow(function () {\n // Force to horizontal for measurement.\n yield false;\n\n // Measure, and update if there is overflow.\n yield computeHasOverflow();\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef, orientation, setHasOverflow, children]);\n\n // There are two main reasons we need to remeasure:\n // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n useLayoutEffect(() => {\n checkForOverflow();\n }, [checkForOverflow]);\n\n // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n let parent = useRef<HTMLElement \| null>(null);\n useLayoutEffect(() => {\n if (domRef.current) {\n parent.current = domRef.current.parentElement as HTMLElement;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [domRef.current]);\n useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n if ((props as ButtonGroupContextValue).isHidden) {\n return null;\n }\n\n let context = {styles: style({flexShrink: 0}), size, isDisabled};\n return (\n <div\n {...filterDOMProps(otherProps)}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + buttongroup({\n align,\n orientation: orientation === 'vertical' \|\| hasOverflow ? 'vertical' : 'horizontal',\n size\n }, props.styles)}>\n <Provider\n values={[\n [ButtonContext, context],\n [LinkButtonContext, context]\n ]}>\n {children}\n </Provider>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}

package/dist/Image.cjs CHANGED Viewed

@@ -130,7 +130,7 @@ const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react
         queueMicrotask(onLoad);
         animation(domRef.current);
     });
-    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.');
+    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.');
     let errorState = !isSkeleton && state === 'error' && renderError?.();
     let isRevealed = state === 'revealed' && !isSkeleton;
     let isTransitioning = isRevealed && loadTime > 200;

package/dist/Image.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2DO,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAA4D;AAgBpG,SAAS,kCAAY,GAAW;IAC9B,OAAO;QACL,OAAO;aACP;QACA,WAAW,KAAK,GAAG;QACnB,UAAU;IACZ;AACF;AAEA,SAAS,8BAAQ,KAAY,EAAE,MAAc;IAC3C,OAAQ,OAAO,IAAI;QACjB,KAAK;YACH,OAAO;gBACL,OAAO;gBACP,KAAK,OAAO,GAAG;gBACf,WAAW,KAAK,GAAG;gBACnB,UAAU;YACZ;QAEF,KAAK;QACL,KAAK;YACH,OAAO;gBACL,GAAG,KAAK;gBACR,OAAO,OAAO,IAAI;YACpB;QAEF,KAAK;YACH,OAAO;gBACL,GAAG,KAAK;gBACR,OAAO;gBACP,UAAU,KAAK,GAAG,KAAK,MAAM,SAAS;YACxC;QAEF;YACE,OAAO;IACX;AACF;AAEA,MAAM;AAKN,MAAM;;;;;;;;;;;;;;;;AAiBC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,MAAoC;IACpG,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,QAAQ;IAEzD,IAAI,OACF,MAAM,YACN,MAAM,oBACN,mBAAmB,kBACnB,YAAY,eACZ,WAAW,SACX,QAAQ,CAAA,GAAA,2CAAgB,QACxB,OAAO;IACP,UAAU;IACV,SAAS;IACT,GAAG,eACH,WAAW,YACX,QAAQ,iBACR,aAAa,WACb,OAAO,kBACP,cAAc,QACd,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,AAAC,MAA4B,MAAM;IAEhD,IAAI,aAAC,SAAS,YAAE,QAAQ,cAAE,UAAU,QAAE,IAAI,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACzD,IAAI,CAAC,SAAC,KAAK,EAAE,KAAK,OAAO,YAAE,QAAQ,EAAC,EAAE,SAAS,GAAG,CAAA,GAAA,uBAAS,EAAE,+BAAS,KAAK;IAE3E,IAAI,QAAQ,WAAW,CAAC,QACtB,SAAS;QAAC,MAAM;aAAU;IAAG;IAG/B,IAAI,UAAU,YAAY,aAAa,CAAC,QACtC,SAAS;QAAC,MAAM;IAAU;IAG5B,IAAI,SAAS,CAAA,GAAA,mBAAK,EAA2B;IAC7C,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,QACF;QAGF,SAAS;QACT,OAAO;YACL,WAAW;QACb;IACF,GAAG;QAAC;QAAQ;QAAU;QAAY;KAAI;IAEtC,IAAI,SAAS,CAAA,GAAA,wBAAU,EAAE;QACvB,KAAK;QACL,SAAS;YAAC,MAAM;QAAQ;IAC1B,GAAG;QAAC;QAAM;KAAI;IAEd,IAAI,UAAU,CAAA,GAAA,wBAAU,EAAE;QACxB,SAAS;YAAC,MAAM;QAAO;QACvB,WAAW;IACb,GAAG;QAAC;QAAY;KAAI;IAEpB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAC7B,IAAI,cAAc,cAAc,UAAU,aAAa,UAAU;IACjE,IAAI,YAAY,CAAA,GAAA,6CAAkB,EAAE;IACpC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,QACF;QAGF,0FAA0F;QAC1F,IAAI,UAAU,aAAa,OAAO,OAAO,EAAE,UACzC,0DAA0D;QAC1D,2BAA2B;QAC3B,eAAe;QAGjB,UAAU,OAAO,OAAO;IAC1B;IAEA,IAAI,MAAM,GAAG,IAAI,MACf,QAAQ,IAAI,CACV;IAMJ,IAAI,aAAa,CAAC,cAAc,UAAU,WAAW;IACrD,IAAI,aAAa,UAAU,cAAc,CAAC;IAC1C,IAAI,kBAAkB,cAAc,WAAW;IAC/C,OAAO,CAAA,GAAA,oBAAM,EAAE,IAAM,SAAS,qBAC5B,iCAAC;YACC,KAAK;YACL,MAAM,QAAQ;YACd,OAAO;YACP,WAAW,mBAAmB,CAAA,GAAA,qCAAU,EAAE,qCAAe,UAAU,MAAQ,CAAA,cAAc,CAAA,GAAA,sCAAW,IAAI,EAAC;;gBACxG;gBACA,CAAC,4BACA,gCAAC;oBACE,GAAG,2CAAqB,cAAc;oBACvC,KAAK;oBACL,KAAK;oBACL,aAAa;oBACb,UAAU;oBACV,SAAS;oBACT,gBAAgB;oBAChB,KAAK;oBACL,QAAQ;oBACR,SAAS;oBACT,WAAW,gCAAU;oCAAC;yCAAY;oBAAe;;;YAGtD;QAAC;QAAM;QAAQ;QAAQ;QAAc;QAAkB;QAAQ;QAAa;QAAY;QAAK;QAAK;QAAa;QAAU;QAAe;QAAS;QAAgB;QAAQ;QAAS;QAAY;KAAgB;AACnN;AAEA,SAAS,2CAAqB,aAAuC;IACnE,MAAM,SAAS,CAAA,GAAA,oBAAM,EAAE,KAAK,CAAC;IAC7B,MAAM,QAAQ,SAAS,MAAM,CAAC,EAAE,EAAE;IAClC,IAAI,SAAS,IACX,OAAO;uBAAC;IAAa;IAEvB,OAAO;QAAC,eAAe;IAAa;AACtC","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.cjs.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.cjs.map"}