react-aria/dist/private/button/useToggleButtonGroup.mjs.map

Spectrum UI components in React

{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AA+BM,SAAS,0CACd,KAAiC,EACjC,KAAuB,EACvB,GAAkC;IAElC,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,wCAAS,EAAE,OAAO;IAEvC,OAAO;QACL,YAAY;YACV,GAAG,YAAY;YACf,MAAM,MAAM,aAAa,KAAK,WAAW,eAAe,aAAa,IAAI;YACzE,iBAAiB;QACnB;IACF;AACF;AAmDO,SAAS,0CACd,KAAoD,EACpD,KAAuB,EACvB,GAAmB;IAEnB,IAAI,cAA2B;QAC7B,YAAY,MAAM,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE;QAC3C,iBAAiB;QACjB,aAAY,UAAU;YACpB,MAAM,WAAW,CAAC,MAAM,EAAE,EAAE;QAC9B;QACA;YACE,MAAM,SAAS,CAAC,MAAM,EAAE;QAC1B;IACF;IAEA,IAAI,aAAC,SAAS,cAAE,UAAU,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,yCAAc,EACnE;QACE,GAAG,KAAK;QACR,IAAI;QACJ,YAAY,MAAM,UAAU,IAAI,MAAM,UAAU;IAClD,GACA,aACA;IAEF,IAAI,MAAM,aAAa,KAAK,UAAU;QACpC,YAAY,IAAI,GAAG;QACnB,WAAW,CAAC,eAAe,GAAG,YAAY,UAAU;QACpD,OAAO,WAAW,CAAC,eAAe;IACpC;IAEA,OAAO;mBACL;oBACA;oBACA;qBACA;IACF;AACF","sources":["packages/react-aria/src/button/useToggleButtonGroup.ts"],"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 {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  ElementType,\n  HTMLAttributes,\n  InputHTMLAttributes\n} from 'react';\nimport {AriaLabelingProps, DOMAttributes, Key, Orientation, RefObject} from '@react-types/shared';\nimport {AriaToggleButtonProps, ToggleButtonAria, useToggleButton} from './useToggleButton';\nimport {ToggleGroupProps, ToggleGroupState} from 'react-stately/useToggleGroupState';\nimport {ToggleState} from 'react-stately/useToggleState';\nimport {useToolbar} from '../toolbar/useToolbar';\n\nexport interface AriaToggleButtonGroupProps extends ToggleGroupProps, AriaLabelingProps {\n  /**\n   * The orientation of the the toggle button group.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n}\n\nexport interface ToggleButtonGroupAria {\n  /**\n   * Props for the toggle button group container.\n   */\n  groupProps: DOMAttributes;\n}\n\nexport function useToggleButtonGroup(\n  props: AriaToggleButtonGroupProps,\n  state: ToggleGroupState,\n  ref: RefObject<HTMLElement | null>\n): ToggleButtonGroupAria {\n  let {isDisabled} = props;\n  let {toolbarProps} = useToolbar(props, ref);\n\n  return {\n    groupProps: {\n      ...toolbarProps,\n      role: state.selectionMode === 'single' ? 'radiogroup' : toolbarProps.role,\n      'aria-disabled': isDisabled\n    }\n  };\n}\n\nexport interface AriaToggleButtonGroupItemProps<E extends ElementType = 'button'> extends Omit<\n  AriaToggleButtonProps<E>,\n  'id' | 'isSelected' | 'defaultSelected' | 'onChange'\n> {\n  /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */\n  id: Key;\n}\n\nexport interface AriaToggleButtonGroupItemOptions<E extends ElementType> extends Omit<\n  AriaToggleButtonGroupItemProps<E>,\n  'children'\n> {}\n\n// Order with overrides is important: 'button' should be default\nexport function useToggleButtonGroupItem(\n  props: AriaToggleButtonGroupItemOptions<'button'>,\n  state: ToggleGroupState,\n  ref: RefObject<HTMLButtonElement | null>\n): ToggleButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;\nexport function useToggleButtonGroupItem(\n  props: AriaToggleButtonGroupItemOptions<'a'>,\n  state: ToggleGroupState,\n  ref: RefObject<HTMLAnchorElement | null>\n): ToggleButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;\nexport function useToggleButtonGroupItem(\n  props: AriaToggleButtonGroupItemOptions<'div'>,\n  state: ToggleGroupState,\n  ref: RefObject<HTMLDivElement | null>\n): ToggleButtonAria<HTMLAttributes<HTMLDivElement>>;\nexport function useToggleButtonGroupItem(\n  props: AriaToggleButtonGroupItemOptions<'input'>,\n  state: ToggleGroupState,\n  ref: RefObject<HTMLInputElement | null>\n): ToggleButtonAria<InputHTMLAttributes<HTMLInputElement>>;\nexport function useToggleButtonGroupItem(\n  props: AriaToggleButtonGroupItemOptions<'span'>,\n  state: ToggleGroupState,\n  ref: RefObject<HTMLSpanElement | null>\n): ToggleButtonAria<HTMLAttributes<HTMLSpanElement>>;\nexport function useToggleButtonGroupItem(\n  props: AriaToggleButtonGroupItemOptions<ElementType>,\n  state: ToggleGroupState,\n  ref: RefObject<Element | null>\n): ToggleButtonAria<DOMAttributes>;\n/**\n * Provides the behavior and accessibility implementation for a toggle button component.\n * ToggleButtons allow users to toggle a selection on or off, for example switching between two\n * states or modes.\n */\nexport function useToggleButtonGroupItem(\n  props: AriaToggleButtonGroupItemOptions<ElementType>,\n  state: ToggleGroupState,\n  ref: RefObject<any>\n): ToggleButtonAria<HTMLAttributes<any>> {\n  let toggleState: ToggleState = {\n    isSelected: state.selectedKeys.has(props.id),\n    defaultSelected: false,\n    setSelected(isSelected) {\n      state.setSelected(props.id, isSelected);\n    },\n    toggle() {\n      state.toggleKey(props.id);\n    }\n  };\n\n  let {isPressed, isSelected, isDisabled, buttonProps} = useToggleButton(\n    {\n      ...props,\n      id: undefined,\n      isDisabled: props.isDisabled || state.isDisabled\n    },\n    toggleState,\n    ref\n  );\n  if (state.selectionMode === 'single') {\n    buttonProps.role = 'radio';\n    buttonProps['aria-checked'] = toggleState.isSelected;\n    delete buttonProps['aria-pressed'];\n  }\n\n  return {\n    isPressed,\n    isSelected,\n    isDisabled,\n    buttonProps\n  };\n}\n"],"names":[],"version":3,"file":"useToggleButtonGroup.mjs.map"}