react-aria/dist/private/tag/useTagGroup.mjs.map

Spectrum UI components in React

{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkFM,MAAM,4CAA8C,IAAI;AAWxD,SAAS,0CACd,KAA6B,EAC7B,KAAmB,EACnB,GAAkC;IAElC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,yCAAQ;IAC1B,IAAI,mBACF,MAAM,gBAAgB,IACtB,IAAI,CAAA,GAAA,yCAAmB,EAAE;QACvB,YAAY,MAAM,UAAU;aAC5B;QACA,aAAa;mBACb;QACA,cAAc,MAAM,YAAY;QAChC,kBAAkB,MAAM,gBAAgB,CAAC,gBAAgB;IAC3D;IACF,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,yCAAO,EAAE;QAC3E,GAAG,KAAK;QACR,kBAAkB;IACpB;IACA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,yCAAU,EAC1B;QACE,GAAG,KAAK;QACR,GAAG,UAAU;0BACb;QACA,iBAAiB;QACjB,cAAc;QACd,4BAA4B;IAC9B,GACA,OACA;IAGF,IAAI,CAAC,eAAe,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC/C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,yCAAa,EAAE;QACtC,qBAAqB;IACvB;IACA,IAAI,WAAW,CAAA,GAAA,yCAAa,EAAE;IAE9B,mDAAmD;IACnD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE,MAAM,UAAU,CAAC,IAAI;IAC5C,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,IAAI,OAAO,IAAI,UAAU,OAAO,GAAG,KAAK,MAAM,UAAU,CAAC,IAAI,KAAK,KAAK,eACzE,IAAI,OAAO,CAAC,KAAK;QAEnB,UAAU,OAAO,GAAG,MAAM,UAAU,CAAC,IAAI;IAC3C,GAAG;QAAC,MAAM,UAAU,CAAC,IAAI;QAAE;QAAe;KAAI;IAE9C,0CAAS,GAAG,CAAC,OAAO;QAAC,UAAU,MAAM,QAAQ;IAAA;IAE7C,OAAO;QACL,WAAW,CAAA,GAAA,yCAAS,EAAE,WAAW,UAAU;YACzC,MAAM,MAAM,UAAU,CAAC,IAAI,GAAG,SAAS;YACvC,eAAe;YACf,iBAAiB;YACjB,aAAa,gBAAgB,WAAW;YACxC,GAAG,gBAAgB;YACnB,GAAG,UAAU;QACf;oBACA;0BACA;2BACA;IACF;AACF","sources":["packages/react-aria/src/tag/useTagGroup.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 {AriaGridListProps, useGridList} from '../gridlist/useGridList';\n\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMAttributes,\n  DOMProps,\n  HelpTextProps,\n  Key,\n  KeyboardDelegate,\n  LabelableProps,\n  MultipleSelection,\n  RefObject,\n  SelectionBehavior\n} from '@react-types/shared';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {ListKeyboardDelegate} from '../selection/ListKeyboardDelegate';\nimport type {ListState} from 'react-stately/useListState';\nimport {mergeProps} from '../utils/mergeProps';\nimport {ReactNode, useEffect, useRef, useState} from 'react';\nimport {useField} from '../label/useField';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useLocale} from '../i18n/I18nProvider';\n\nexport interface TagGroupAria {\n  /** Props for the tag grouping element. */\n  gridProps: DOMAttributes;\n  /** Props for the tag group's visible label (if any). */\n  labelProps: DOMAttributes;\n  /** Props for the tag group description element, if any. */\n  descriptionProps: DOMAttributes;\n  /** Props for the tag group error message element, if any. */\n  errorMessageProps: DOMAttributes;\n}\n\nexport interface AriaTagGroupProps<T>\n  extends\n    CollectionBase<T>,\n    MultipleSelection,\n    Pick<AriaGridListProps<T>, 'escapeKeyBehavior' | 'onAction'>,\n    DOMProps,\n    LabelableProps,\n    AriaLabelingProps,\n    Omit<HelpTextProps, 'errorMessage'> {\n  /**\n   * How multiple selection should behave in the collection.\n   *\n   * @default 'toggle'\n   */\n  selectionBehavior?: SelectionBehavior;\n  /** Whether selection should occur on press up instead of press down. */\n  shouldSelectOnPressUp?: boolean;\n  /** Handler that is called when a user deletes a tag. */\n  onRemove?: (keys: Set<Key>) => void;\n  /** An error message for the field. */\n  errorMessage?: ReactNode;\n  /**\n   * Whether pressing the escape key should clear selection in the TagGroup 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}\n\nexport interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'children'> {\n  /**\n   * An optional keyboard delegate to handle arrow key navigation,\n   * to override the default.\n   */\n  keyboardDelegate?: KeyboardDelegate;\n}\n\ninterface HookData {\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport const hookData: WeakMap<ListState<any>, HookData> = new WeakMap<ListState<any>, HookData>();\n\n/**\n * Provides the behavior and accessibility implementation for a tag group component. A tag group is\n * a focusable list of labels, categories, keywords, filters, or other items, with support for\n * keyboard navigation, selection, and removal.\n *\n * @param props - Props to be applied to the tag group.\n * @param state - State for the tag group, as returned by `useListState`.\n * @param ref - A ref to a DOM element for the tag group.\n */\nexport function useTagGroup<T>(\n  props: AriaTagGroupOptions<T>,\n  state: ListState<T>,\n  ref: RefObject<HTMLElement | null>\n): TagGroupAria {\n  let {direction} = useLocale();\n  let keyboardDelegate =\n    props.keyboardDelegate ||\n    new ListKeyboardDelegate({\n      collection: state.collection,\n      ref,\n      orientation: 'horizontal',\n      direction,\n      disabledKeys: state.disabledKeys,\n      disabledBehavior: state.selectionManager.disabledBehavior\n    });\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span'\n  });\n  let {gridProps} = useGridList(\n    {\n      ...props,\n      ...fieldProps,\n      keyboardDelegate,\n      shouldFocusWrap: true,\n      linkBehavior: 'override',\n      keyboardNavigationBehavior: 'tab'\n    },\n    state,\n    ref\n  );\n\n  let [isFocusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithinChange: setFocusWithin\n  });\n  let domProps = filterDOMProps(props);\n\n  // If the last tag is removed, focus the container.\n  let prevCount = useRef(state.collection.size);\n  useEffect(() => {\n    if (ref.current && prevCount.current > 0 && state.collection.size === 0 && isFocusWithin) {\n      ref.current.focus();\n    }\n    prevCount.current = state.collection.size;\n  }, [state.collection.size, isFocusWithin, ref]);\n\n  hookData.set(state, {onRemove: props.onRemove});\n\n  return {\n    gridProps: mergeProps(gridProps, domProps, {\n      role: state.collection.size ? 'grid' : 'group',\n      'aria-atomic': false,\n      'aria-relevant': 'additions',\n      'aria-live': isFocusWithin ? 'polite' : 'off',\n      ...focusWithinProps,\n      ...fieldProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps\n  };\n}\n"],"names":[],"version":3,"file":"useTagGroup.mjs.map"}