@react-spectrum/s2/dist/ActionButtonGroup.css.map

Spectrum 2 UI components in React

{"mappings":"AAiDgC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","sources":["packages/@react-spectrum/s2/src/ActionButtonGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps} from '@react-types/shared';\nimport {ContextValue, SlotProps, Toolbar} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonGroupProps extends AriaLabelingProps, UnsafeStyles, SlotProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The children of the group. */\n  children: ReactNode,\n  /**\n   * Size of the buttons.\n   * @default \"M\"\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Spacing between the buttons.\n   * @default \"regular\"\n   */\n  density?: 'compact' | 'regular',\n  /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n  isQuiet?: boolean,\n  /** Whether the buttons should divide the container width equally. */\n  isJustified?: boolean,\n  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n  staticColor?: 'white' | 'black' | 'auto',\n  /**\n   * The axis the group should align with.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** Whether the group is disabled. */\n  isDisabled?: boolean\n}\n\nexport const actionGroupStyle = style({\n  display: 'flex',\n  flexDirection: {\n    orientation: {\n      horizontal: 'row',\n      vertical: 'column'\n    }\n  },\n  gap: {\n    density: {\n      compact: 2,\n      regular: {\n        size: {\n          XS: 4,\n          S: 4,\n          M: 8,\n          L: 8,\n          XL: 8\n        }\n      }\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n\nexport const ActionButtonGroupContext = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    orientation = 'horizontal',\n    isJustified,\n    children,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles\n  } = props;\n\n  return (\n    <Toolbar\n      {...props}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>\n      <ActionButtonGroupContext.Provider value={props}>\n        {children}\n      </ActionButtonGroupContext.Provider>\n    </Toolbar>\n  );\n});\n"],"names":[],"version":3,"file":"ActionButtonGroup.css.map"}