UNPKG

@react-spectrum/s2

Version:
1 lines 20.5 kB
{"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, lightDark, 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 {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {linearGradient} from '../style/spectrum-theme' with {type: 'macro'};\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' | keyof GlobalDOMAttributes>, 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' | keyof GlobalDOMAttributes>, 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 button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n ...control({shape: 'pill', wrap: true, icon: true}),\n position: 'relative',\n justifyContent: 'center',\n textAlign: 'start',\n fontWeight: 'bold',\n userSelect: 'none',\n width: 'fit',\n textDecoration: 'none', // for link buttons\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 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: baseColor('neutral'),\n secondary: baseColor('gray-100'),\n accent: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n negative: {\n default: lightDark('negative-900', 'negative-700'),\n isHovered: lightDark('negative-1000', 'negative-600'),\n isPressed: lightDark('negative-1000', 'negative-600'),\n isFocusVisible: lightDark('negative-1000', 'negative-600')\n },\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: baseColor('neutral'),\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: baseColor('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\nexport function usePendingState(isPending: boolean) {\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n if (isPending) {\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n setIsProgressVisible(false);\n }\n return () => {\n clearTimeout(timeout);\n };\n }, [isPending]);\n return {isProgressVisible};\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 = false,\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} = usePendingState(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 visibility: {\n isProgressVisible: 'hidden'\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 visibility: {\n isProgressVisible: 'hidden'\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 visibility: {\n default: 'hidden',\n isProgressVisible: 'visible'\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 let {\n fillStyle = 'fill',\n size = 'M',\n variant = 'primary',\n staticColor,\n styles,\n children\n } = props;\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,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor,\n isPending: false\n }, 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 variant\n })} />\n )\n : null}\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 children === 'string' ? <Text>{children}</Text> : children}\n </Provider>\n </>)}\n </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}