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

Spectrum 2 UI components in React

{"mappings":"AAwDkB;EAAA;;;;EAAA","sources":["packages/@react-spectrum/s2/src/Accordion.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';\nimport {ContextValue, DisclosureGroup, RenderProps, SlotProps} from 'react-aria-components';\nimport {\n  Disclosure,\n  DisclosureContext,\n  DisclosureHeader,\n  DisclosurePanel,\n  DisclosureTitle\n} from './Disclosure';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {style} from '../style' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps {\n  /** The accordion item elements in the accordion. */\n  children: React.ReactNode,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /**\n   * The size of the accordion.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the accordion items.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the accordion should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** Whether multiple accordion items can be expanded at the same time. */\n  allowsMultipleExpanded?: boolean,\n  /** Whether all accordion items are disabled. */\n  isDisabled?: boolean,\n  /** The currently expanded keys in the accordion (controlled). */\n  expandedKeys?: Iterable<Key>,\n  /** The initial expanded keys in the accordion (uncontrolled). */\n  defaultExpandedKeys?: Iterable<Key>,\n  /** Handler that is called when accordion items are expanded or collapsed. */\n  onExpandedChange?: (keys: Set<Key>) => any\n}\n\nconst accordion = style({\n  display: 'flex',\n  flexDirection: 'column'\n}, getAllowedOverrides({height: true}));\n\nexport const AccordionContext = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * An accordion is a container for multiple accordion items.\n */\nexport const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    size = 'M',\n    density = 'regular',\n    isQuiet\n  } = props;\n  return (\n    <DisclosureContext.Provider value={{size, isQuiet, density}}>\n      <DisclosureGroup\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + accordion(null, props.styles)}>\n        {props.children}\n      </DisclosureGroup>\n    </DisclosureContext.Provider>\n  );\n});\n\nexport interface AccordionItemState {\n  /** Whether the accordion item is currently expanded. */\n  readonly isExpanded: boolean,\n  /** Sets whether the accordion item is expanded. */\n  setExpanded(isExpanded: boolean): void,\n  /** Expand the accordion item. */\n  expand(): void,\n  /** Collapse the accordion item. */\n  collapse(): void,\n  /** Toggles the accordion item's visibility. */\n  toggle(): void\n}\n\nexport interface AccordionItemRenderProps {\n  /**\n   * Whether the accordion item is expanded.\n   * @selector [data-expanded]\n   */\n  isExpanded: boolean,\n  /**\n   * Whether the accordion item has keyboard focus.\n   * @selector [data-focus-visible-within]\n   */\n  isFocusVisibleWithin: boolean,\n  /**\n   * Whether the accordion item is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the accordion item.\n   */\n  state: AccordionItemState\n}\n\nexport interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style'>, SlotProps, StyleProps {\n  /**\n   * The size of the accordion item.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the accordion item.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the accordion item should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the accordion item, consisting of a accordion item title and accordion item panel. */\n  children: ReactNode,\n  /** An id for the accordion item, matching the id used in `expandedKeys`. */\n  id?: Key,\n  /** Whether the accordion item is disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the accordion item's expanded state changes. */\n  onExpandedChange?: (isExpanded: boolean) => void,\n  /** Whether the accordion item is expanded (controlled). */\n  isExpanded?: boolean,\n  /** Whether the accordion item is expanded by default (uncontrolled). */\n  defaultExpanded?: boolean\n}\n\n/**\n * A accordion item is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.\n */\nexport const AccordionItem = forwardRef(function AccordionItem(props: AccordionItemProps, ref: DOMRef<HTMLDivElement>) {\n  return <Disclosure {...props} ref={ref} />;\n});\n\nexport interface AccordionItemTitleProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the accordion item title.\n   *\n   * @default 3\n   */\n  level?: number,\n  /** The contents of the accordion item title. */\n  children: React.ReactNode\n}\n\n/**\n * An accordion item title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nexport const AccordionItemTitle = forwardRef(function AccordionItemTitle(props: AccordionItemTitleProps, ref: DOMRef<HTMLDivElement>) {\n  return <DisclosureTitle {...props} ref={ref} />;\n});\n\nexport interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps {\n  /** The contents of the accordion item header. */\n  children: React.ReactNode\n}\n\n/**\n * A wrapper element for the accordion item title that can contain other elements not part of the trigger.\n */\nexport const AccordionItemHeader = forwardRef(function AccordionItemHeader(props: AccordionItemHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  return <DisclosureHeader {...props} ref={ref} />;\n});\n\nexport interface AccordionItemPanelProps extends UnsafeStyles, DOMProps, AriaLabelingProps {\n  /** The contents of the accordion item panel. */\n  children: React.ReactNode,\n  /**\n   * The accessibility role for the accordion item panel.\n   * @default 'group'\n   */\n  role?: 'group' | 'region'\n}\n\n/**\n * An accordion item panel is a collapsible section of content that is hidden until the accordion item is expanded.\n */\nexport const AccordionItemPanel = forwardRef(function AccordionItemPanel(props: AccordionItemPanelProps, ref: DOMRef<HTMLDivElement>) {\n  return <DisclosurePanel {...props} ref={ref} />;\n});\n"],"names":[],"version":3,"file":"Accordion.css.map"}