@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/ActionButton.css.map

@@ -1 +1 @@
-{"mappings":"AC6GyB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwRC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;EAaA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA1XA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;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;;;;;;AAAA;EAAA;IAAA","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\n@import \"013b65d3da939c1f\";\n@import \"972afc4b5ba1159d\";\n@import \"acfc0efdd0802285\";\n@import \"aa888a89d05cf059\";\n@import \"9e70c4e8eb0b3795\";\n@import \"e88ce811713423f6\";\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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  space,\n  style\n} from '../style' with {type: 'macro'};\nimport {ButtonProps, ButtonRenderProps, Button as RACButton} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport CornerTriangle from '../ui-icons/CornerTriangle';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {usePendingState} from './Button';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n  staticColor?: 'black' | 'white' | 'auto';\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n  /** Whether the ActionButton should be selected (controlled). */\n  isSelected?: boolean;\n  /**\n   * Whether the button should be displayed with an [emphasized\n   * style](https://spectrum.adobe.com/page/action-button/#Emphasis).\n   */\n  isEmphasized?: boolean;\n}\n\ninterface ActionGroupItemStyleProps {\n  density?: 'regular' | 'compact';\n  orientation?: 'horizontal' | 'vertical';\n  isJustified?: boolean;\n}\n\nexport interface ActionButtonProps\n  extends\n    Omit<\n      ButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ActionButtonStyleProps {\n  /** The content to display in the ActionButton. */\n  children: ReactNode;\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst avatarOnly = ':has([slot=avatar]):not(:has([slot=icon], [data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<\n  ButtonRenderProps &\n    ActionButtonStyleProps &\n    ToggleButtonStyleProps &\n    ActionGroupItemStyleProps & {isInGroup: boolean; isStaticColor: boolean}\n>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...controlStyle,\n    display: 'grid',\n    justifyContent: 'center',\n    flexShrink: {\n      default: 1,\n      isInGroup: 0\n    },\n    flexGrow: {\n      isJustified: 1\n    },\n    flexBasis: {\n      isJustified: 0\n    },\n    fontWeight: 'medium',\n    width: 'fit',\n    userSelect: 'none',\n    transition: 'default',\n    forcedColorAdjust: 'none',\n    position: 'relative',\n    gridTemplateAreas: {\n      default: ['icon text'],\n      [iconOnly]: ['icon'],\n      [textOnly]: ['text']\n    },\n    gridTemplateColumns: {\n      default: ['auto', 'auto'],\n      [iconOnly]: ['auto'],\n      [textOnly]: ['auto']\n    },\n    backgroundColor: {\n      default: {\n        ...baseColor('gray-100'),\n        default: {\n          default: 'gray-100',\n          isQuiet: 'transparent'\n        }\n      },\n      isSelected: {\n        default: baseColor('neutral'),\n        isEmphasized: {\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        isDisabled: {\n          default: 'gray-100',\n          isQuiet: 'transparent'\n        }\n      },\n      isStaticColor: {\n        ...baseColor('transparent-overlay-100'),\n        default: {\n          default: 'transparent-overlay-100',\n          isQuiet: 'transparent'\n        },\n        isSelected: {\n          default: baseColor('transparent-overlay-800'),\n          isDisabled: {\n            default: 'transparent-overlay-100',\n            isQuiet: 'transparent'\n          }\n        }\n      },\n      forcedColors: {\n        default: 'ButtonFace',\n        isSelected: {\n          default: 'Highlight',\n          isDisabled: 'ButtonFace'\n        }\n      }\n    },\n    color: {\n      default: baseColor('neutral'),\n      isSelected: {\n        default: 'gray-25',\n        isEmphasized: 'white'\n      },\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: 'transparent-overlay-1000',\n        isSelected: 'auto',\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isSelected: 'HighlightText',\n        isDisabled: {\n          default: 'GrayText'\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    borderStyle: 'none',\n    borderTopStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          ':first-child': controlStyle.borderRadius\n        }\n      }\n    },\n    borderTopEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          orientation: {\n            horizontal: {\n              ':last-child': controlStyle.borderRadius\n            },\n            vertical: {\n              ':first-child': controlStyle.borderRadius\n            }\n          }\n        }\n      }\n    },\n    borderBottomStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          orientation: {\n            horizontal: {\n              ':first-child': controlStyle.borderRadius\n            },\n            vertical: {\n              ':last-child': controlStyle.borderRadius\n            }\n          }\n        }\n      }\n    },\n    borderBottomEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          ':last-child': controlStyle.borderRadius\n        }\n      }\n    },\n    zIndex: {\n      isFocusVisible: 2\n    },\n    disableTapHighlight: true,\n    '--badgeTop': {\n      type: 'top',\n      value: {\n        default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n        [textOnly]: 0\n      }\n    },\n    '--iconWidth': {\n      type: 'width',\n      value: fontRelative(20)\n    },\n    '--badgePosition': {\n      type: 'width',\n      value: {\n        default: '--iconWidth',\n        [textOnly]: 'full'\n      }\n    },\n    paddingX: {\n      default: controlStyle.paddingX,\n      [avatarOnly]: 0\n    },\n    // `control` sets this, but we need to override it for avatar only buttons.\n    '--iconMargin': {\n      type: 'marginStart',\n      value: {\n        default: fontRelative(-2),\n        [iconOnly]: 0,\n        [avatarOnly]: 0\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n// Matching icon sizes. TBD.\nconst avatarSize: Record<NonNullable<ActionButtonStyleProps['size']>, number> = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\ninterface ActionButtonContextProps extends Partial<ActionButtonProps> {\n  holdAffordance?: boolean;\n}\n\nexport const ActionButtonContext =\n  createContext<ContextValue<ActionButtonContextProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action. They're used for similar, task-based options\n * within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of\n * attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(\n  props: ActionButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n  props = useFormProps(props as any);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {isPending = false, holdAffordance} = props as ActionButtonContextProps;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let ctx = useSlottedContext(ActionButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    size = props.size || 'M',\n    isDisabled\n  } = ctx || {};\n\n  let {isProgressVisible} = usePendingState(isPending);\n  let {direction} = useLocale();\n\n  return (\n    <RACButton\n      {...props}\n      isDisabled={props.isDisabled ?? isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        btnStyles(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            isDisabled: renderProps.isDisabled || isProgressVisible,\n            staticColor,\n            isStaticColor: !!staticColor,\n            size,\n            isQuiet,\n            density,\n            isJustified,\n            orientation,\n            isInGroup\n          },\n          props.styles\n        )\n      }>\n      {({isDisabled}) => (\n        <>\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({\n                    gridArea: 'text',\n                    truncate: true,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon'})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ],\n              [\n                AvatarContext,\n                {\n                  size: avatarSize[size],\n                  styles: style({\n                    marginStart: '--iconMargin',\n                    gridArea: 'icon'\n                  })\n                }\n              ],\n              [\n                ImageContext,\n                {\n                  styles: style({\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ],\n              [\n                NotificationBadgeContext,\n                {\n                  staticColor: staticColor,\n                  size: props.size === 'XS' ? undefined : props.size,\n                  isDisabled: isDisabled,\n                  styles: style({\n                    position: 'absolute',\n                    top: '--badgeTop',\n                    marginTop: 'calc((self(height) * -1)/2)',\n                    marginStart: 'calc(var(--iconMargin) * 2 + (self(height) * -1)/4)',\n                    gridColumnStart: 1,\n                    insetStart: '--badgePosition',\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\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                        XS: 12,\n                        S: 14,\n                        M: 18,\n                        L: 20,\n                        XL: 24\n                      }\n                    }\n                  })({size})}\n                />\n              </div>\n            )}\n          </Provider>\n          {holdAffordance && (\n            <CornerTriangle\n              size={size === 'XS' ? 'S' : size}\n              className={style({\n                position: 'absolute',\n                insetEnd: {\n                  size: {\n                    XS: space(3),\n                    S: space(3),\n                    M: 4,\n                    L: space(5),\n                    XL: space(6)\n                  }\n                },\n                bottom: {\n                  size: {\n                    XS: space(3),\n                    S: space(3),\n                    M: 4,\n                    L: space(5),\n                    XL: space(6)\n                  }\n                },\n                scaleX: {\n                  direction: {\n                    rtl: -1\n                  }\n                }\n              })({direction, size})}\n            />\n          )}\n        </>\n      )}\n    </RACButton>\n  );\n});\n"],"names":[],"version":3,"file":"ActionButton.css.map"}
+{"mappings":"AC4GyB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwRC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;EAaA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA1XA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;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;;;;;;AAAA;EAAA;IAAA","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\n@import \"013b65d3da939c1f\";\n@import \"972afc4b5ba1159d\";\n@import \"acfc0efdd0802285\";\n@import \"aa888a89d05cf059\";\n@import \"9e70c4e8eb0b3795\";\n@import \"e88ce811713423f6\";\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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  space,\n  style\n} from '../style' with {type: 'macro'};\nimport {ButtonProps, ButtonRenderProps, Button as RACButton} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport CornerTriangle from '../ui-icons/CornerTriangle';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport intlMessages from '../intl/*.json';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {usePendingState} from './Button';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n  staticColor?: 'black' | 'white' | 'auto';\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n  /** Whether the ActionButton should be selected (controlled). */\n  isSelected?: boolean;\n  /**\n   * Whether the button should be displayed with an [emphasized\n   * style](https://spectrum.adobe.com/page/action-button/#Emphasis).\n   */\n  isEmphasized?: boolean;\n}\n\ninterface ActionGroupItemStyleProps {\n  density?: 'regular' | 'compact';\n  orientation?: 'horizontal' | 'vertical';\n  isJustified?: boolean;\n}\n\nexport interface ActionButtonProps\n  extends\n    Omit<\n      ButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ActionButtonStyleProps {\n  /** The content to display in the ActionButton. */\n  children: ReactNode;\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst avatarOnly = ':has([slot=avatar]):not(:has([slot=icon], [data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<\n  ButtonRenderProps &\n    ActionButtonStyleProps &\n    ToggleButtonStyleProps &\n    ActionGroupItemStyleProps & {isInGroup: boolean; isStaticColor: boolean}\n>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...controlStyle,\n    display: 'grid',\n    justifyContent: 'center',\n    flexShrink: {\n      default: 1,\n      isInGroup: 0\n    },\n    flexGrow: {\n      isJustified: 1\n    },\n    flexBasis: {\n      isJustified: 0\n    },\n    fontWeight: 'medium',\n    width: 'fit',\n    userSelect: 'none',\n    transition: 'default',\n    forcedColorAdjust: 'none',\n    position: 'relative',\n    gridTemplateAreas: {\n      default: ['icon text'],\n      [iconOnly]: ['icon'],\n      [textOnly]: ['text']\n    },\n    gridTemplateColumns: {\n      default: ['auto', 'auto'],\n      [iconOnly]: ['auto'],\n      [textOnly]: ['auto']\n    },\n    backgroundColor: {\n      default: {\n        ...baseColor('gray-100'),\n        default: {\n          default: 'gray-100',\n          isQuiet: 'transparent'\n        }\n      },\n      isSelected: {\n        default: baseColor('neutral'),\n        isEmphasized: {\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        isDisabled: {\n          default: 'gray-100',\n          isQuiet: 'transparent'\n        }\n      },\n      isStaticColor: {\n        ...baseColor('transparent-overlay-100'),\n        default: {\n          default: 'transparent-overlay-100',\n          isQuiet: 'transparent'\n        },\n        isSelected: {\n          default: baseColor('transparent-overlay-800'),\n          isDisabled: {\n            default: 'transparent-overlay-100',\n            isQuiet: 'transparent'\n          }\n        }\n      },\n      forcedColors: {\n        default: 'ButtonFace',\n        isSelected: {\n          default: 'Highlight',\n          isDisabled: 'ButtonFace'\n        }\n      }\n    },\n    color: {\n      default: baseColor('neutral'),\n      isSelected: {\n        default: 'gray-25',\n        isEmphasized: 'white'\n      },\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: 'transparent-overlay-1000',\n        isSelected: 'auto',\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isSelected: 'HighlightText',\n        isDisabled: {\n          default: 'GrayText'\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    borderStyle: 'none',\n    borderTopStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          ':first-child': controlStyle.borderRadius\n        }\n      }\n    },\n    borderTopEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          orientation: {\n            horizontal: {\n              ':last-child': controlStyle.borderRadius\n            },\n            vertical: {\n              ':first-child': controlStyle.borderRadius\n            }\n          }\n        }\n      }\n    },\n    borderBottomStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          orientation: {\n            horizontal: {\n              ':first-child': controlStyle.borderRadius\n            },\n            vertical: {\n              ':last-child': controlStyle.borderRadius\n            }\n          }\n        }\n      }\n    },\n    borderBottomEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: 'none',\n          ':last-child': controlStyle.borderRadius\n        }\n      }\n    },\n    zIndex: {\n      isFocusVisible: 2\n    },\n    disableTapHighlight: true,\n    '--badgeTop': {\n      type: 'top',\n      value: {\n        default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n        [textOnly]: 0\n      }\n    },\n    '--iconWidth': {\n      type: 'width',\n      value: fontRelative(20)\n    },\n    '--badgePosition': {\n      type: 'width',\n      value: {\n        default: '--iconWidth',\n        [textOnly]: 'full'\n      }\n    },\n    paddingX: {\n      default: controlStyle.paddingX,\n      [avatarOnly]: 0\n    },\n    // `control` sets this, but we need to override it for avatar only buttons.\n    '--iconMargin': {\n      type: 'marginStart',\n      value: {\n        default: fontRelative(-2),\n        [iconOnly]: 0,\n        [avatarOnly]: 0\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n// Matching icon sizes. TBD.\nconst avatarSize: Record<NonNullable<ActionButtonStyleProps['size']>, number> = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\ninterface ActionButtonContextProps extends Partial<ActionButtonProps> {\n  holdAffordance?: boolean;\n}\n\nexport const ActionButtonContext =\n  createContext<ContextValue<ActionButtonContextProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action. They're used for similar, task-based options\n * within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of\n * attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(\n  props: ActionButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n  props = useFormProps(props as any);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {isPending = false, holdAffordance} = props as ActionButtonContextProps;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let ctx = useSlottedContext(ActionButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    size = props.size || 'M',\n    isDisabled\n  } = ctx || {};\n\n  let {isProgressVisible} = usePendingState(isPending);\n  let {direction} = useLocale();\n\n  return (\n    <RACButton\n      {...props}\n      isDisabled={props.isDisabled ?? isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        btnStyles(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            isDisabled: renderProps.isDisabled || isProgressVisible,\n            staticColor,\n            isStaticColor: !!staticColor,\n            size,\n            isQuiet,\n            density,\n            isJustified,\n            orientation,\n            isInGroup\n          },\n          props.styles\n        )\n      }>\n      {({isDisabled}) => (\n        <>\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({\n                    gridArea: 'text',\n                    truncate: true,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon'})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ],\n              [\n                AvatarContext,\n                {\n                  size: avatarSize[size],\n                  styles: style({\n                    marginStart: '--iconMargin',\n                    gridArea: 'icon'\n                  })\n                }\n              ],\n              [\n                ImageContext,\n                {\n                  styles: style({\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ],\n              [\n                NotificationBadgeContext,\n                {\n                  staticColor: staticColor,\n                  size: props.size === 'XS' ? undefined : props.size,\n                  isDisabled: isDisabled,\n                  styles: style({\n                    position: 'absolute',\n                    top: '--badgeTop',\n                    marginTop: 'calc((self(height) * -1)/2)',\n                    marginStart: 'calc(var(--iconMargin) * 2 + (self(height) * -1)/4)',\n                    gridColumnStart: 1,\n                    insetStart: '--badgePosition',\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\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                        XS: 12,\n                        S: 14,\n                        M: 18,\n                        L: 20,\n                        XL: 24\n                      }\n                    }\n                  })({size})}\n                />\n              </div>\n            )}\n          </Provider>\n          {holdAffordance && (\n            <CornerTriangle\n              size={size === 'XS' ? 'S' : size}\n              className={style({\n                position: 'absolute',\n                insetEnd: {\n                  size: {\n                    XS: space(3),\n                    S: space(3),\n                    M: 4,\n                    L: space(5),\n                    XL: space(6)\n                  }\n                },\n                bottom: {\n                  size: {\n                    XS: space(3),\n                    S: space(3),\n                    M: 4,\n                    L: space(5),\n                    XL: space(6)\n                  }\n                },\n                scaleX: {\n                  direction: {\n                    rtl: -1\n                  }\n                }\n              })({direction, size})}\n            />\n          )}\n        </>\n      )}\n    </RACButton>\n  );\n});\n"],"names":[],"version":3,"file":"ActionButton.css.map"}