react-aria/dist/private/listbox/useListBox.cjs.map

Spectrum UI components in React

{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuHM,SAAS,0CACd,KAA4B,EAC5B,KAAmB,EACnB,GAAkC;IAElC,IAAI,WAAW,CAAA,GAAA,wCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,mFAAmF;IACnF,IAAI,oBAAoB,MAAM,iBAAiB,IAAI;IACnD,IAAI,cAAc,MAAM,WAAW,IAAI;IACvC,IAAI,eACF,MAAM,YAAY,IAAK,CAAA,sBAAsB,YAAY,WAAW,UAAS;IAC/E,IAAI,sBAAsB,YAAY,iBAAiB,UACrD,8FAA8F;IAC9F,8FAA8F;IAC9F,oCAAoC;IACpC,eAAe;IAGjB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,2CAAgB,EAAE;QAClC,GAAG,KAAK;aACR;QACA,kBAAkB,MAAM,gBAAgB;QACxC,YAAY,MAAM,UAAU;QAC5B,cAAc,MAAM,YAAY;sBAChC;IACF;IAEA,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,wCAAa,EAAE;QACtC,eAAe,MAAM,OAAO;QAC5B,cAAc,MAAM,MAAM;QAC1B,qBAAqB,MAAM,aAAa;IAC1C;IAEA,mDAAmD;IACnD,IAAI,KAAK,CAAA,GAAA,+BAAI,EAAE,MAAM,EAAE;IACvB,CAAA,GAAA,kCAAO,EAAE,GAAG,CAAC,OAAO;YAClB;QACA,uBAAuB,MAAM,qBAAqB;QAClD,uBAAuB,MAAM,qBAAqB;QAClD,oBAAoB,MAAM,kBAAkB;QAC5C,eAAe,MAAM,aAAa;QAClC,UAAU,MAAM,QAAQ;sBACxB;QACA,aAAa;QACb,uBAAuB,KAAK,CAAC,wBAAwB;IACvD;IAEA,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,kCAAO,EAAE;QACtC,GAAG,KAAK;YACR;QACA,6CAA6C;QAC7C,6CAA6C;QAC7C,kBAAkB;IACpB;IAEA,OAAO;oBACL;QACA,cAAc,CAAA,GAAA,oCAAS,EACrB,UACA,kBACA,MAAM,gBAAgB,CAAC,aAAa,KAAK,aACrC;YACE,wBAAwB;QAC1B,IACA,CAAC,GACL;YACE,MAAM;YACN,oBAAoB;YACpB,GAAG,CAAA,GAAA,oCAAS,EAAE,YAAY,UAAU;QACtC;IAEJ;AACF","sources":["packages/react-aria/src/listbox/useListBox.ts"],"sourcesContent":["/*\n * Copyright 2020 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  AriaLabelingProps,\n  CollectionBase,\n  DOMAttributes,\n  DOMProps,\n  FocusEvents,\n  FocusStrategy,\n  Key,\n  KeyboardDelegate,\n  LayoutDelegate,\n  MultipleSelection,\n  Orientation,\n  RefObject,\n  SelectionBehavior\n} from '@react-types/shared';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {listData} from './utils';\nimport {ListState} from 'react-stately/useListState';\nimport {mergeProps} from '../utils/mergeProps';\nimport {ReactNode} from 'react';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useId} from '../utils/useId';\nimport {useLabel} from '../label/useLabel';\nimport {useSelectableList} from '../selection/useSelectableList';\n\nexport interface ListBoxProps<T> extends CollectionBase<T>, MultipleSelection, FocusEvents {\n  /** Whether to auto focus the listbox or an option. */\n  autoFocus?: boolean | FocusStrategy;\n  /** Whether focus should wrap around when the end/start is reached. */\n  shouldFocusWrap?: boolean;\n}\n\nexport interface AriaListBoxPropsBase<T> extends ListBoxProps<T>, DOMProps, AriaLabelingProps {\n  /**\n   * Whether pressing the escape key should clear selection in the listbox or not.\n   *\n   * Most experiences should not modify this option as it eliminates a keyboard user's ability to\n   * easily clear selection. Only use if the escape key is being handled externally or should not\n   * trigger selection clearing contextually.\n   *\n   * @default 'clearSelection'\n   */\n  escapeKeyBehavior?: 'clearSelection' | 'none';\n}\nexport interface AriaListBoxProps<T> extends AriaListBoxPropsBase<T> {\n  /**\n   * An optional visual label for the listbox.\n   */\n  label?: ReactNode;\n  /** How multiple selection should behave in the collection. */\n  selectionBehavior?: SelectionBehavior;\n  /** Whether selection should occur on press up instead of press down. */\n  shouldSelectOnPressUp?: boolean;\n  /** Whether options should be focused when the user hovers over them. */\n  shouldFocusOnHover?: boolean;\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends\n   * on the collection's `selectionBehavior` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void;\n}\n\nexport interface ListBoxAria {\n  /** Props for the listbox element. */\n  listBoxProps: DOMAttributes;\n  /** Props for the listbox's visual label element (if any). */\n  labelProps: DOMAttributes;\n}\n\nexport interface AriaListBoxOptions<T> extends Omit<AriaListBoxProps<T>, 'children'> {\n  /** Whether the listbox uses virtual scrolling. */\n  isVirtualized?: boolean;\n\n  /**\n   * An optional keyboard delegate implementation for type to select,\n   * to override the default.\n   */\n  keyboardDelegate?: KeyboardDelegate;\n\n  /**\n   * A delegate object that provides layout information for items in the collection.\n   * By default this uses the DOM, but this can be overridden to implement things like\n   * virtualized scrolling.\n   */\n  layoutDelegate?: LayoutDelegate;\n\n  /**\n   * Whether the listbox items should use virtual focus instead of being focused directly.\n   */\n  shouldUseVirtualFocus?: boolean;\n\n  /**\n   * The behavior of links in the collection.\n   * - 'action': link behaves like onAction.\n   * - 'selection': link follows selection interactions (e.g. if URL drives selection).\n   * - 'override': links override all other interactions (link items are not selectable).\n   *\n   * @default 'override'\n   */\n  linkBehavior?: 'action' | 'selection' | 'override';\n\n  /**\n   * The primary orientation of the items. Usually this is the direction that the collection\n   * scrolls.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a listbox component.\n * A listbox displays a list of options and allows a user to select one or more of them.\n *\n * @param props - Props for the listbox.\n * @param state - State for the listbox, as returned by `useListState`.\n */\nexport function useListBox<T>(\n  props: AriaListBoxOptions<T>,\n  state: ListState<T>,\n  ref: RefObject<HTMLElement | null>\n): ListBoxAria {\n  let domProps = filterDOMProps(props, {labelable: true});\n  // Use props instead of state here. We don't want this to change due to long press.\n  let selectionBehavior = props.selectionBehavior || 'toggle';\n  let orientation = props.orientation || 'vertical';\n  let linkBehavior =\n    props.linkBehavior || (selectionBehavior === 'replace' ? 'action' : 'override');\n  if (selectionBehavior === 'toggle' && linkBehavior === 'action') {\n    // linkBehavior=\"action\" does not work with selectionBehavior=\"toggle\" because there is no way\n    // to initiate selection (checkboxes are not allowed inside a listbox). Link items will not be\n    // selectable in this configuration.\n    linkBehavior = 'override';\n  }\n\n  let {listProps} = useSelectableList({\n    ...props,\n    ref,\n    selectionManager: state.selectionManager,\n    collection: state.collection,\n    disabledKeys: state.disabledKeys,\n    linkBehavior\n  });\n\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithin: props.onFocus,\n    onBlurWithin: props.onBlur,\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  // Share list id and some props with child options.\n  let id = useId(props.id);\n  listData.set(state, {\n    id,\n    shouldUseVirtualFocus: props.shouldUseVirtualFocus,\n    shouldSelectOnPressUp: props.shouldSelectOnPressUp,\n    shouldFocusOnHover: props.shouldFocusOnHover,\n    isVirtualized: props.isVirtualized,\n    onAction: props.onAction,\n    linkBehavior,\n    // @ts-ignore\n    UNSTABLE_itemBehavior: props['UNSTABLE_itemBehavior']\n  });\n\n  let {labelProps, fieldProps} = useLabel({\n    ...props,\n    id,\n    // listbox is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span'\n  });\n\n  return {\n    labelProps,\n    listBoxProps: mergeProps(\n      domProps,\n      focusWithinProps,\n      state.selectionManager.selectionMode === 'multiple'\n        ? {\n            'aria-multiselectable': 'true'\n          }\n        : {},\n      {\n        role: 'listbox',\n        'aria-orientation': orientation,\n        ...mergeProps(fieldProps, listProps)\n      }\n    )\n  };\n}\n"],"names":[],"version":3,"file":"useListBox.cjs.map"}