@react-aria/tag 3.6.2 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/types.d.ts +11 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/useTagGroup.main.js +1 -1
- package/dist/useTagGroup.main.js.map +1 -1
- package/dist/useTagGroup.mjs +1 -1
- package/dist/useTagGroup.module.js +1 -1
- package/dist/useTagGroup.module.js.map +1 -1
- package/package.json +11 -11
- package/src/useTagGroup.ts +13 -4
package/dist/types.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AriaGridListProps } from "@react-aria/gridlist";
|
|
1
2
|
import { AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, Key, KeyboardDelegate, LabelableProps, MultipleSelection, RefObject, SelectionBehavior, FocusableElement, Node } from "@react-types/shared";
|
|
2
3
|
import { ListState } from "@react-stately/list";
|
|
3
4
|
import { ReactNode } from "react";
|
|
@@ -13,7 +14,7 @@ export interface TagGroupAria {
|
|
|
13
14
|
/** Props for the tag group error message element, if any. */
|
|
14
15
|
errorMessageProps: DOMAttributes;
|
|
15
16
|
}
|
|
16
|
-
export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
|
|
17
|
+
export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, Pick<AriaGridListProps<T>, 'escapeKeyBehavior'>, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
|
|
17
18
|
/** How multiple selection should behave in the collection. */
|
|
18
19
|
selectionBehavior?: SelectionBehavior;
|
|
19
20
|
/** Whether selection should occur on press up instead of press down. */
|
|
@@ -22,6 +23,15 @@ export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelecti
|
|
|
22
23
|
onRemove?: (keys: Set<Key>) => void;
|
|
23
24
|
/** An error message for the field. */
|
|
24
25
|
errorMessage?: ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* Whether pressing the escape key should clear selection in the TagGroup or not.
|
|
28
|
+
*
|
|
29
|
+
* Most experiences should not modify this option as it eliminates a keyboard user's ability to
|
|
30
|
+
* easily clear selection. Only use if the escape key is being handled externally or should not
|
|
31
|
+
* trigger selection clearing contextually.
|
|
32
|
+
* @default 'clearSelection'
|
|
33
|
+
*/
|
|
34
|
+
escapeKeyBehavior?: 'clearSelection' | 'none';
|
|
25
35
|
}
|
|
26
36
|
interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'children'> {
|
|
27
37
|
/**
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;AAsBA;IACE,0CAA0C;IAC1C,SAAS,EAAE,aAAa,CAAC;IACzB,wDAAwD;IACxD,UAAU,EAAE,aAAa,CAAC;IAC1B,2DAA2D;IAC3D,gBAAgB,EAAE,aAAa,CAAC;IAChC,6DAA6D;IAC7D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED,mCAAmC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAAI,CAAC,aAAa,EAAE,cAAc,CAAC;IACnN,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,wEAAwE;IACxE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpC,sCAAsC;IACtC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAA;CAC9C;AAED,8BAAqC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,UAAU,CAAC;IACpF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAQD;;;;;;GAMG;AACH,4BAA4B,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,YAAY,CAqDnI;ACrGD,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC;IACtE,qCAAqC;IACrC,QAAQ,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,aAAa,EAAE,aAAa,CAAC;IAC7B,uCAAuC;IACvC,iBAAiB,EAAE,eAAe,CAAC;IACnC,sCAAsC;IACtC,cAAc,EAAE,OAAO,CAAA;CACxB;AAED,8BAA8B,CAAC;IAC7B,mGAAmG;IACnG,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;CACd;AAED;;;;;GAKG;AACH,uBAAuB,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,OAAO,CAqEvH","sources":["packages/@react-aria/tag/src/packages/@react-aria/tag/src/useTagGroup.ts","packages/@react-aria/tag/src/packages/@react-aria/tag/src/useTag.ts","packages/@react-aria/tag/src/packages/@react-aria/tag/src/index.ts","packages/@react-aria/tag/src/index.ts"],"sourcesContent":[null,null,null,"/*\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\nexport {useTag} from './useTag';\nexport {useTagGroup} from './useTagGroup';\n\nexport type {TagGroupAria, AriaTagGroupProps} from './useTagGroup';\nexport type {AriaTagProps, TagAria} from './useTag';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/dist/useTagGroup.main.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
var $jLhmn$reactariagridlist = require("@react-aria/gridlist");
|
|
1
2
|
var $jLhmn$reactariautils = require("@react-aria/utils");
|
|
2
3
|
var $jLhmn$reactariaselection = require("@react-aria/selection");
|
|
3
4
|
var $jLhmn$react = require("react");
|
|
4
5
|
var $jLhmn$reactarialabel = require("@react-aria/label");
|
|
5
6
|
var $jLhmn$reactariainteractions = require("@react-aria/interactions");
|
|
6
|
-
var $jLhmn$reactariagridlist = require("@react-aria/gridlist");
|
|
7
7
|
var $jLhmn$reactariai18n = require("@react-aria/i18n");
|
|
8
8
|
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuDM,MAAM,4CAA8C,IAAI;AASxD,SAAS,0CAAe,KAA6B,EAAE,KAAmB,EAAE,GAAkC;IACnH,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,mBAAmB,MAAM,gBAAgB,IAAI,IAAI,CAAA,GAAA,8CAAmB,EAAE;QACxE,YAAY,MAAM,UAAU;aAC5B;QACA,aAAa;mBACb;QACA,cAAc,MAAM,YAAY;QAChC,kBAAkB,MAAM,gBAAgB,CAAC,gBAAgB;IAC3D;IACA,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,8BAAO,EAAE;QAC3E,GAAG,KAAK;QACR,kBAAkB;IACpB;IACA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAU,EAAE;QAC5B,GAAG,KAAK;QACR,GAAG,UAAU;0BACb;QACA,iBAAiB;QACjB,cAAc;QACd,4BAA4B;IAC9B,GAAG,OAAO;IAEV,IAAI,CAAC,eAAe,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC/C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;QACtC,qBAAqB;IACvB;IACA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAE9B,mDAAmD;IACnD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE,MAAM,UAAU,CAAC,IAAI;IAC5C,CAAA,GAAA,sBAAQ,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,gCAAS,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/tag/src/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 '@react-aria/gridlist';\nimport {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, Key, KeyboardDelegate, LabelableProps, MultipleSelection, RefObject, SelectionBehavior} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {ListKeyboardDelegate} from '@react-aria/selection';\nimport type {ListState} from '@react-stately/list';\nimport {ReactNode, useEffect, useRef, useState} from 'react';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\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> extends CollectionBase<T>, MultipleSelection, Pick<AriaGridListProps<T>, 'escapeKeyBehavior'>, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {\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 /** 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 * @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.\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\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>(props: AriaTagGroupOptions<T>, state: ListState<T>, ref: RefObject<HTMLElement | null>): TagGroupAria {\n let {direction} = useLocale();\n let keyboardDelegate = props.keyboardDelegate || 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 ...props,\n ...fieldProps,\n keyboardDelegate,\n shouldFocusWrap: true,\n linkBehavior: 'override',\n keyboardNavigationBehavior: 'tab'\n }, state, ref);\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' : null,\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.main.js.map"}
|
package/dist/useTagGroup.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import {useGridList as $eUtJD$useGridList} from "@react-aria/gridlist";
|
|
1
2
|
import {filterDOMProps as $eUtJD$filterDOMProps, mergeProps as $eUtJD$mergeProps} from "@react-aria/utils";
|
|
2
3
|
import {ListKeyboardDelegate as $eUtJD$ListKeyboardDelegate} from "@react-aria/selection";
|
|
3
4
|
import {useState as $eUtJD$useState, useRef as $eUtJD$useRef, useEffect as $eUtJD$useEffect} from "react";
|
|
4
5
|
import {useField as $eUtJD$useField} from "@react-aria/label";
|
|
5
6
|
import {useFocusWithin as $eUtJD$useFocusWithin} from "@react-aria/interactions";
|
|
6
|
-
import {useGridList as $eUtJD$useGridList} from "@react-aria/gridlist";
|
|
7
7
|
import {useLocale as $eUtJD$useLocale} from "@react-aria/i18n";
|
|
8
8
|
|
|
9
9
|
/*
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import {useGridList as $eUtJD$useGridList} from "@react-aria/gridlist";
|
|
1
2
|
import {filterDOMProps as $eUtJD$filterDOMProps, mergeProps as $eUtJD$mergeProps} from "@react-aria/utils";
|
|
2
3
|
import {ListKeyboardDelegate as $eUtJD$ListKeyboardDelegate} from "@react-aria/selection";
|
|
3
4
|
import {useState as $eUtJD$useState, useRef as $eUtJD$useRef, useEffect as $eUtJD$useEffect} from "react";
|
|
4
5
|
import {useField as $eUtJD$useField} from "@react-aria/label";
|
|
5
6
|
import {useFocusWithin as $eUtJD$useFocusWithin} from "@react-aria/interactions";
|
|
6
|
-
import {useGridList as $eUtJD$useGridList} from "@react-aria/gridlist";
|
|
7
7
|
import {useLocale as $eUtJD$useLocale} from "@react-aria/i18n";
|
|
8
8
|
|
|
9
9
|
/*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuDM,MAAM,4CAA8C,IAAI;AASxD,SAAS,0CAAe,KAA6B,EAAE,KAAmB,EAAE,GAAkC;IACnH,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,mBAAmB,MAAM,gBAAgB,IAAI,IAAI,CAAA,GAAA,2BAAmB,EAAE;QACxE,YAAY,MAAM,UAAU;aAC5B;QACA,aAAa;mBACb;QACA,cAAc,MAAM,YAAY;QAChC,kBAAkB,MAAM,gBAAgB,CAAC,gBAAgB;IAC3D;IACA,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC3E,GAAG,KAAK;QACR,kBAAkB;IACpB;IACA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,kBAAU,EAAE;QAC5B,GAAG,KAAK;QACR,GAAG,UAAU;0BACb;QACA,iBAAiB;QACjB,cAAc;QACd,4BAA4B;IAC9B,GAAG,OAAO;IAEV,IAAI,CAAC,eAAe,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC/C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACtC,qBAAqB;IACvB;IACA,IAAI,WAAW,CAAA,GAAA,qBAAa,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,iBAAS,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/tag/src/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 '@react-aria/gridlist';\nimport {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, Key, KeyboardDelegate, LabelableProps, MultipleSelection, RefObject, SelectionBehavior} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {ListKeyboardDelegate} from '@react-aria/selection';\nimport type {ListState} from '@react-stately/list';\nimport {ReactNode, useEffect, useRef, useState} from 'react';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\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> extends CollectionBase<T>, MultipleSelection, Pick<AriaGridListProps<T>, 'escapeKeyBehavior'>, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {\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 /** 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 * @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.\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.\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>(props: AriaTagGroupOptions<T>, state: ListState<T>, ref: RefObject<HTMLElement | null>): TagGroupAria {\n let {direction} = useLocale();\n let keyboardDelegate = props.keyboardDelegate || 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 ...props,\n ...fieldProps,\n keyboardDelegate,\n shouldFocusWrap: true,\n linkBehavior: 'override',\n keyboardNavigationBehavior: 'tab'\n }, state, ref);\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' : null,\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.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/tag",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -26,15 +26,15 @@
|
|
|
26
26
|
"url": "https://github.com/adobe/react-spectrum"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@react-aria/gridlist": "^3.13.
|
|
30
|
-
"@react-aria/i18n": "^3.12.
|
|
31
|
-
"@react-aria/interactions": "^3.25.
|
|
32
|
-
"@react-aria/label": "^3.7.
|
|
33
|
-
"@react-aria/selection": "^3.
|
|
34
|
-
"@react-aria/utils": "^3.
|
|
35
|
-
"@react-stately/list": "^3.12.
|
|
36
|
-
"@react-types/button": "^3.
|
|
37
|
-
"@react-types/shared": "^3.
|
|
29
|
+
"@react-aria/gridlist": "^3.13.3",
|
|
30
|
+
"@react-aria/i18n": "^3.12.11",
|
|
31
|
+
"@react-aria/interactions": "^3.25.4",
|
|
32
|
+
"@react-aria/label": "^3.7.20",
|
|
33
|
+
"@react-aria/selection": "^3.25.0",
|
|
34
|
+
"@react-aria/utils": "^3.30.0",
|
|
35
|
+
"@react-stately/list": "^3.12.4",
|
|
36
|
+
"@react-types/button": "^3.13.0",
|
|
37
|
+
"@react-types/shared": "^3.31.0",
|
|
38
38
|
"@swc/helpers": "^0.5.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "8b9348ff255e018b2dd9b27e2a45507cadfa1d35"
|
|
48
48
|
}
|
package/src/useTagGroup.ts
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
import {AriaGridListProps, useGridList} from '@react-aria/gridlist';
|
|
13
14
|
import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, Key, KeyboardDelegate, LabelableProps, MultipleSelection, RefObject, SelectionBehavior} from '@react-types/shared';
|
|
14
15
|
import {filterDOMProps, mergeProps} from '@react-aria/utils';
|
|
15
16
|
import {ListKeyboardDelegate} from '@react-aria/selection';
|
|
@@ -17,7 +18,6 @@ import type {ListState} from '@react-stately/list';
|
|
|
17
18
|
import {ReactNode, useEffect, useRef, useState} from 'react';
|
|
18
19
|
import {useField} from '@react-aria/label';
|
|
19
20
|
import {useFocusWithin} from '@react-aria/interactions';
|
|
20
|
-
import {useGridList} from '@react-aria/gridlist';
|
|
21
21
|
import {useLocale} from '@react-aria/i18n';
|
|
22
22
|
|
|
23
23
|
export interface TagGroupAria {
|
|
@@ -31,7 +31,7 @@ export interface TagGroupAria {
|
|
|
31
31
|
errorMessageProps: DOMAttributes
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
|
|
34
|
+
export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, Pick<AriaGridListProps<T>, 'escapeKeyBehavior'>, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
|
|
35
35
|
/** How multiple selection should behave in the collection. */
|
|
36
36
|
selectionBehavior?: SelectionBehavior,
|
|
37
37
|
/** Whether selection should occur on press up instead of press down. */
|
|
@@ -39,7 +39,16 @@ export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelecti
|
|
|
39
39
|
/** Handler that is called when a user deletes a tag. */
|
|
40
40
|
onRemove?: (keys: Set<Key>) => void,
|
|
41
41
|
/** An error message for the field. */
|
|
42
|
-
errorMessage?: ReactNode
|
|
42
|
+
errorMessage?: ReactNode,
|
|
43
|
+
/**
|
|
44
|
+
* Whether pressing the escape key should clear selection in the TagGroup or not.
|
|
45
|
+
*
|
|
46
|
+
* Most experiences should not modify this option as it eliminates a keyboard user's ability to
|
|
47
|
+
* easily clear selection. Only use if the escape key is being handled externally or should not
|
|
48
|
+
* trigger selection clearing contextually.
|
|
49
|
+
* @default 'clearSelection'
|
|
50
|
+
*/
|
|
51
|
+
escapeKeyBehavior?: 'clearSelection' | 'none'
|
|
43
52
|
}
|
|
44
53
|
|
|
45
54
|
export interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'children'> {
|
|
@@ -54,7 +63,7 @@ interface HookData {
|
|
|
54
63
|
onRemove?: (keys: Set<Key>) => void
|
|
55
64
|
}
|
|
56
65
|
|
|
57
|
-
export const hookData = new WeakMap<ListState<any>, HookData>();
|
|
66
|
+
export const hookData: WeakMap<ListState<any>, HookData> = new WeakMap<ListState<any>, HookData>();
|
|
58
67
|
|
|
59
68
|
/**
|
|
60
69
|
* Provides the behavior and accessibility implementation for a tag group component.
|