@react-aria/tag 3.4.8 → 3.4.9
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.map +1 -1
- package/dist/useTag.main.js +8 -3
- package/dist/useTag.main.js.map +1 -1
- package/dist/useTag.mjs +8 -3
- package/dist/useTag.module.js +8 -3
- package/dist/useTag.module.js.map +1 -1
- package/package.json +11 -11
- package/src/useTag.ts +14 -3
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAAI,CAAC,aAAa,EAAE,cAAc,CAAC;IAClK,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpC,sCAAsC;IACtC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB;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,CAoDnI;ACzFD,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,
|
|
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,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAAI,CAAC,aAAa,EAAE,cAAc,CAAC;IAClK,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpC,sCAAsC;IACtC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB;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,CAoDnI;ACzFD,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,CAoEvH","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/useTag.main.js
CHANGED
|
@@ -43,8 +43,10 @@ function $a442534c81d8ad16$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
43
43
|
delete rowProps.onKeyDownCapture;
|
|
44
44
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
45
45
|
let { descriptionProps: _, ...stateWithoutDescription } = states;
|
|
46
|
+
let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;
|
|
46
47
|
let onKeyDown = (e)=>{
|
|
47
48
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
49
|
+
if (isDisabled) return;
|
|
48
50
|
e.preventDefault();
|
|
49
51
|
if (state.selectionManager.isSelected(item.key)) onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set(state.selectionManager.selectedKeys));
|
|
50
52
|
else onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set([
|
|
@@ -56,14 +58,17 @@ function $a442534c81d8ad16$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
56
58
|
if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) modality = 'pointer';
|
|
57
59
|
let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
|
|
58
60
|
let descProps = (0, $8p8DL$reactariautils.useDescription)(description);
|
|
59
|
-
let
|
|
61
|
+
let isItemFocused = item.key === state.selectionManager.focusedKey;
|
|
62
|
+
let isFocused = state.selectionManager.focusedKey != null;
|
|
63
|
+
let tabIndex = -1;
|
|
64
|
+
if (!isDisabled && (isItemFocused || !isFocused)) tabIndex = 0;
|
|
60
65
|
let domProps = (0, $8p8DL$reactariautils.filterDOMProps)(item.props);
|
|
61
66
|
let linkProps = (0, $8p8DL$reactariautils.useSyntheticLinkProps)(item.props);
|
|
62
67
|
return {
|
|
63
68
|
removeButtonProps: {
|
|
64
69
|
'aria-label': stringFormatter.format('removeButtonLabel'),
|
|
65
70
|
'aria-labelledby': `${buttonId} ${rowProps.id}`,
|
|
66
|
-
isDisabled:
|
|
71
|
+
isDisabled: isDisabled,
|
|
67
72
|
id: buttonId,
|
|
68
73
|
onPress: ()=>onRemove ? onRemove(new Set([
|
|
69
74
|
item.key
|
|
@@ -71,7 +76,7 @@ function $a442534c81d8ad16$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
71
76
|
excludeFromTabOrder: true
|
|
72
77
|
},
|
|
73
78
|
rowProps: (0, $8p8DL$reactariautils.mergeProps)(rowProps, domProps, linkProps, {
|
|
74
|
-
tabIndex:
|
|
79
|
+
tabIndex: tabIndex,
|
|
75
80
|
onKeyDown: onRemove ? onKeyDown : undefined,
|
|
76
81
|
'aria-describedby': descProps['aria-describedby']
|
|
77
82
|
}),
|
package/dist/useTag.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAsCM,SAAS,0CAAU,KAAsB,EAAE,KAAmB,EAAE,GAAuC;IAC5G,IAAI,QAAC,IAAI,EAAC,GAAG;IACb,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,WAAW,CAAA,GAAA,2BAAI;IAEnB,IAAI,YAAC,QAAQ,EAAC,GAAG,CAAA,GAAA,kCAAO,EAAE,GAAG,CAAC,UAAU,CAAC;IACzC,IAAI,YAAC,QAAQ,iBAAE,aAAa,EAAE,GAAG,QAAO,GAAG,CAAA,GAAA,wCAAc,EAAE;QACzD,MAAM;IACR,GAAG,OAAO;IAEV,gEAAgE;IAChE,OAAO,SAAS,gBAAgB;IAChC,6DAA6D;IAC7D,IAAI,EAAC,kBAAkB,CAAC,EAAE,GAAG,yBAAwB,GAAG;IAExD,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,EAAE,GAAG,KAAK,aAAa;YAC/C,EAAE,cAAc;YAChB,IAAI,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,GAAG,GAC5C,qBAAA,+BAAA,SAAW,IAAI,IAAI,MAAM,gBAAgB,CAAC,YAAY;iBAEtD,qBAAA,+BAAA,SAAW,IAAI,IAAI;gBAAC,KAAK,GAAG;aAAC;QAEjC;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mDAAqB;IACpC,IAAI,aAAa,aAAe,OAAO,WAAW,eAAe,kBAAkB,QACjF,WAAW;IAEb,IAAI,cAAc,YAAa,CAAA,aAAa,cAAc,aAAa,SAAQ,IAAK,gBAAgB,MAAM,CAAC,uBAAuB;IAClI,IAAI,YAAY,CAAA,GAAA,oCAAa,EAAE;IAE/B,IAAI,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAsCM,SAAS,0CAAU,KAAsB,EAAE,KAAmB,EAAE,GAAuC;IAC5G,IAAI,QAAC,IAAI,EAAC,GAAG;IACb,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,WAAW,CAAA,GAAA,2BAAI;IAEnB,IAAI,YAAC,QAAQ,EAAC,GAAG,CAAA,GAAA,kCAAO,EAAE,GAAG,CAAC,UAAU,CAAC;IACzC,IAAI,YAAC,QAAQ,iBAAE,aAAa,EAAE,GAAG,QAAO,GAAG,CAAA,GAAA,wCAAc,EAAE;QACzD,MAAM;IACR,GAAG,OAAO;IAEV,gEAAgE;IAChE,OAAO,SAAS,gBAAgB;IAChC,6DAA6D;IAC7D,IAAI,EAAC,kBAAkB,CAAC,EAAE,GAAG,yBAAwB,GAAG;IAExD,IAAI,aAAa,MAAM,YAAY,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,KAAK,KAAK,CAAC,UAAU;IAC1E,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,EAAE,GAAG,KAAK,aAAa;YAC/C,IAAI,YACF;YAGF,EAAE,cAAc;YAChB,IAAI,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,GAAG,GAC5C,qBAAA,+BAAA,SAAW,IAAI,IAAI,MAAM,gBAAgB,CAAC,YAAY;iBAEtD,qBAAA,+BAAA,SAAW,IAAI,IAAI;gBAAC,KAAK,GAAG;aAAC;QAEjC;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mDAAqB;IACpC,IAAI,aAAa,aAAe,OAAO,WAAW,eAAe,kBAAkB,QACjF,WAAW;IAEb,IAAI,cAAc,YAAa,CAAA,aAAa,cAAc,aAAa,SAAQ,IAAK,gBAAgB,MAAM,CAAC,uBAAuB;IAClI,IAAI,YAAY,CAAA,GAAA,oCAAa,EAAE;IAE/B,IAAI,gBAAgB,KAAK,GAAG,KAAK,MAAM,gBAAgB,CAAC,UAAU;IAClE,IAAI,YAAY,MAAM,gBAAgB,CAAC,UAAU,IAAI;IACrD,IAAI,WAAW;IACf,IAAI,CAAC,cAAe,CAAA,iBAAiB,CAAC,SAAQ,GAC5C,WAAW;IAGb,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,KAAK,KAAK;IACxC,IAAI,YAAY,CAAA,GAAA,2CAAoB,EAAE,KAAK,KAAK;IAChD,OAAO;QACL,mBAAmB;YACjB,cAAc,gBAAgB,MAAM,CAAC;YACrC,mBAAmB,GAAG,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;wBAC/C;YACA,IAAI;YACJ,SAAS,IAAM,WAAW,SAAS,IAAI,IAAI;oBAAC,KAAK,GAAG;iBAAC,KAAK;YAC1D,qBAAqB;QACvB;QACA,UAAU,CAAA,GAAA,gCAAS,EAAE,UAAU,UAAU,WAAW;sBAClD;YACA,WAAW,WAAW,YAAY;YAClC,oBAAoB,SAAS,CAAC,mBAAmB;QACnD;QACA,eAAe,CAAA,GAAA,gCAAS,EAAE,eAAe;YACvC,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,cAAc,KAAK,CAAC,aAAa;QACnC;QACA,GAAG,uBAAuB;QAC1B,gBAAgB,CAAC,CAAC;IACpB;AACF","sources":["packages/@react-aria/tag/src/useTag.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 {AriaButtonProps} from '@react-types/button';\nimport {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId, useSyntheticLinkProps} from '@react-aria/utils';\nimport {hookData} from './useTagGroup';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {KeyboardEvent} from 'react';\nimport type {ListState} from '@react-stately/list';\nimport {SelectableItemStates} from '@react-aria/selection';\nimport {useGridListItem} from '@react-aria/gridlist';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\n\nexport interface TagAria extends Omit<SelectableItemStates, 'hasAction'> {\n /** Props for the tag row element. */\n rowProps: DOMAttributes,\n /** Props for the tag cell element. */\n gridCellProps: DOMAttributes,\n /** Props for the tag remove button. */\n removeButtonProps: AriaButtonProps,\n /** Whether the tag can be removed. */\n allowsRemoving: boolean\n}\n\nexport interface AriaTagProps<T> {\n /** An object representing the tag. Contains all the relevant information that makes up the tag. */\n item: Node<T>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tag component.\n * @param props - Props to be applied to the tag.\n * @param state - State for the tag group, as returned by `useListState`.\n * @param ref - A ref to a DOM element for the tag.\n */\nexport function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefObject<FocusableElement | null>): TagAria {\n let {item} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/tag');\n let buttonId = useId();\n\n let {onRemove} = hookData.get(state) || {};\n let {rowProps, gridCellProps, ...states} = useGridListItem({\n node: item\n }, state, ref);\n\n // We want the group to handle keyboard navigation between tags.\n delete rowProps.onKeyDownCapture;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {descriptionProps: _, ...stateWithoutDescription} = states;\n\n let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;\n let onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Delete' || e.key === 'Backspace') {\n if (isDisabled) {\n return;\n }\n\n e.preventDefault();\n if (state.selectionManager.isSelected(item.key)) {\n onRemove?.(new Set(state.selectionManager.selectedKeys));\n } else {\n onRemove?.(new Set([item.key]));\n }\n }\n };\n\n let modality = useInteractionModality();\n if (modality === 'virtual' && (typeof window !== 'undefined' && 'ontouchstart' in window)) {\n modality = 'pointer';\n }\n let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';\n let descProps = useDescription(description);\n\n let isItemFocused = item.key === state.selectionManager.focusedKey;\n let isFocused = state.selectionManager.focusedKey != null;\n let tabIndex = -1;\n if (!isDisabled && (isItemFocused || !isFocused)) {\n tabIndex = 0;\n }\n\n let domProps = filterDOMProps(item.props);\n let linkProps = useSyntheticLinkProps(item.props);\n return {\n removeButtonProps: {\n 'aria-label': stringFormatter.format('removeButtonLabel'),\n 'aria-labelledby': `${buttonId} ${rowProps.id}`,\n isDisabled,\n id: buttonId,\n onPress: () => onRemove ? onRemove(new Set([item.key])) : null,\n excludeFromTabOrder: true\n },\n rowProps: mergeProps(rowProps, domProps, linkProps, {\n tabIndex,\n onKeyDown: onRemove ? onKeyDown : undefined,\n 'aria-describedby': descProps['aria-describedby']\n }),\n gridCellProps: mergeProps(gridCellProps, {\n 'aria-errormessage': props['aria-errormessage'],\n 'aria-label': props['aria-label']\n }),\n ...stateWithoutDescription,\n allowsRemoving: !!onRemove\n };\n}\n"],"names":[],"version":3,"file":"useTag.main.js.map"}
|
package/dist/useTag.mjs
CHANGED
|
@@ -37,8 +37,10 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
37
37
|
delete rowProps.onKeyDownCapture;
|
|
38
38
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
39
39
|
let { descriptionProps: _, ...stateWithoutDescription } = states;
|
|
40
|
+
let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;
|
|
40
41
|
let onKeyDown = (e)=>{
|
|
41
42
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
43
|
+
if (isDisabled) return;
|
|
42
44
|
e.preventDefault();
|
|
43
45
|
if (state.selectionManager.isSelected(item.key)) onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set(state.selectionManager.selectedKeys));
|
|
44
46
|
else onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set([
|
|
@@ -50,14 +52,17 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
50
52
|
if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) modality = 'pointer';
|
|
51
53
|
let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
|
|
52
54
|
let descProps = (0, $ioKwR$useDescription)(description);
|
|
53
|
-
let
|
|
55
|
+
let isItemFocused = item.key === state.selectionManager.focusedKey;
|
|
56
|
+
let isFocused = state.selectionManager.focusedKey != null;
|
|
57
|
+
let tabIndex = -1;
|
|
58
|
+
if (!isDisabled && (isItemFocused || !isFocused)) tabIndex = 0;
|
|
54
59
|
let domProps = (0, $ioKwR$filterDOMProps)(item.props);
|
|
55
60
|
let linkProps = (0, $ioKwR$useSyntheticLinkProps)(item.props);
|
|
56
61
|
return {
|
|
57
62
|
removeButtonProps: {
|
|
58
63
|
'aria-label': stringFormatter.format('removeButtonLabel'),
|
|
59
64
|
'aria-labelledby': `${buttonId} ${rowProps.id}`,
|
|
60
|
-
isDisabled:
|
|
65
|
+
isDisabled: isDisabled,
|
|
61
66
|
id: buttonId,
|
|
62
67
|
onPress: ()=>onRemove ? onRemove(new Set([
|
|
63
68
|
item.key
|
|
@@ -65,7 +70,7 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
65
70
|
excludeFromTabOrder: true
|
|
66
71
|
},
|
|
67
72
|
rowProps: (0, $ioKwR$mergeProps)(rowProps, domProps, linkProps, {
|
|
68
|
-
tabIndex:
|
|
73
|
+
tabIndex: tabIndex,
|
|
69
74
|
onKeyDown: onRemove ? onKeyDown : undefined,
|
|
70
75
|
'aria-describedby': descProps['aria-describedby']
|
|
71
76
|
}),
|
package/dist/useTag.module.js
CHANGED
|
@@ -37,8 +37,10 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
37
37
|
delete rowProps.onKeyDownCapture;
|
|
38
38
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
39
39
|
let { descriptionProps: _, ...stateWithoutDescription } = states;
|
|
40
|
+
let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;
|
|
40
41
|
let onKeyDown = (e)=>{
|
|
41
42
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
43
|
+
if (isDisabled) return;
|
|
42
44
|
e.preventDefault();
|
|
43
45
|
if (state.selectionManager.isSelected(item.key)) onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set(state.selectionManager.selectedKeys));
|
|
44
46
|
else onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set([
|
|
@@ -50,14 +52,17 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
50
52
|
if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) modality = 'pointer';
|
|
51
53
|
let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
|
|
52
54
|
let descProps = (0, $ioKwR$useDescription)(description);
|
|
53
|
-
let
|
|
55
|
+
let isItemFocused = item.key === state.selectionManager.focusedKey;
|
|
56
|
+
let isFocused = state.selectionManager.focusedKey != null;
|
|
57
|
+
let tabIndex = -1;
|
|
58
|
+
if (!isDisabled && (isItemFocused || !isFocused)) tabIndex = 0;
|
|
54
59
|
let domProps = (0, $ioKwR$filterDOMProps)(item.props);
|
|
55
60
|
let linkProps = (0, $ioKwR$useSyntheticLinkProps)(item.props);
|
|
56
61
|
return {
|
|
57
62
|
removeButtonProps: {
|
|
58
63
|
'aria-label': stringFormatter.format('removeButtonLabel'),
|
|
59
64
|
'aria-labelledby': `${buttonId} ${rowProps.id}`,
|
|
60
|
-
isDisabled:
|
|
65
|
+
isDisabled: isDisabled,
|
|
61
66
|
id: buttonId,
|
|
62
67
|
onPress: ()=>onRemove ? onRemove(new Set([
|
|
63
68
|
item.key
|
|
@@ -65,7 +70,7 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
65
70
|
excludeFromTabOrder: true
|
|
66
71
|
},
|
|
67
72
|
rowProps: (0, $ioKwR$mergeProps)(rowProps, domProps, linkProps, {
|
|
68
|
-
tabIndex:
|
|
73
|
+
tabIndex: tabIndex,
|
|
69
74
|
onKeyDown: onRemove ? onKeyDown : undefined,
|
|
70
75
|
'aria-describedby': descProps['aria-describedby']
|
|
71
76
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAsCM,SAAS,0CAAU,KAAsB,EAAE,KAAmB,EAAE,GAAuC;IAC5G,IAAI,QAAC,IAAI,EAAC,GAAG;IACb,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,WAAW,CAAA,GAAA,YAAI;IAEnB,IAAI,YAAC,QAAQ,EAAC,GAAG,CAAA,GAAA,yCAAO,EAAE,GAAG,CAAC,UAAU,CAAC;IACzC,IAAI,YAAC,QAAQ,iBAAE,aAAa,EAAE,GAAG,QAAO,GAAG,CAAA,GAAA,sBAAc,EAAE;QACzD,MAAM;IACR,GAAG,OAAO;IAEV,gEAAgE;IAChE,OAAO,SAAS,gBAAgB;IAChC,6DAA6D;IAC7D,IAAI,EAAC,kBAAkB,CAAC,EAAE,GAAG,yBAAwB,GAAG;IAExD,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,EAAE,GAAG,KAAK,aAAa;YAC/C,EAAE,cAAc;YAChB,IAAI,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,GAAG,GAC5C,qBAAA,+BAAA,SAAW,IAAI,IAAI,MAAM,gBAAgB,CAAC,YAAY;iBAEtD,qBAAA,+BAAA,SAAW,IAAI,IAAI;gBAAC,KAAK,GAAG;aAAC;QAEjC;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,6BAAqB;IACpC,IAAI,aAAa,aAAe,OAAO,WAAW,eAAe,kBAAkB,QACjF,WAAW;IAEb,IAAI,cAAc,YAAa,CAAA,aAAa,cAAc,aAAa,SAAQ,IAAK,gBAAgB,MAAM,CAAC,uBAAuB;IAClI,IAAI,YAAY,CAAA,GAAA,qBAAa,EAAE;IAE/B,IAAI,
|
|
1
|
+
{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAsCM,SAAS,0CAAU,KAAsB,EAAE,KAAmB,EAAE,GAAuC;IAC5G,IAAI,QAAC,IAAI,EAAC,GAAG;IACb,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,WAAW,CAAA,GAAA,YAAI;IAEnB,IAAI,YAAC,QAAQ,EAAC,GAAG,CAAA,GAAA,yCAAO,EAAE,GAAG,CAAC,UAAU,CAAC;IACzC,IAAI,YAAC,QAAQ,iBAAE,aAAa,EAAE,GAAG,QAAO,GAAG,CAAA,GAAA,sBAAc,EAAE;QACzD,MAAM;IACR,GAAG,OAAO;IAEV,gEAAgE;IAChE,OAAO,SAAS,gBAAgB;IAChC,6DAA6D;IAC7D,IAAI,EAAC,kBAAkB,CAAC,EAAE,GAAG,yBAAwB,GAAG;IAExD,IAAI,aAAa,MAAM,YAAY,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,KAAK,KAAK,CAAC,UAAU;IAC1E,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,EAAE,GAAG,KAAK,aAAa;YAC/C,IAAI,YACF;YAGF,EAAE,cAAc;YAChB,IAAI,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,GAAG,GAC5C,qBAAA,+BAAA,SAAW,IAAI,IAAI,MAAM,gBAAgB,CAAC,YAAY;iBAEtD,qBAAA,+BAAA,SAAW,IAAI,IAAI;gBAAC,KAAK,GAAG;aAAC;QAEjC;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,6BAAqB;IACpC,IAAI,aAAa,aAAe,OAAO,WAAW,eAAe,kBAAkB,QACjF,WAAW;IAEb,IAAI,cAAc,YAAa,CAAA,aAAa,cAAc,aAAa,SAAQ,IAAK,gBAAgB,MAAM,CAAC,uBAAuB;IAClI,IAAI,YAAY,CAAA,GAAA,qBAAa,EAAE;IAE/B,IAAI,gBAAgB,KAAK,GAAG,KAAK,MAAM,gBAAgB,CAAC,UAAU;IAClE,IAAI,YAAY,MAAM,gBAAgB,CAAC,UAAU,IAAI;IACrD,IAAI,WAAW;IACf,IAAI,CAAC,cAAe,CAAA,iBAAiB,CAAC,SAAQ,GAC5C,WAAW;IAGb,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,KAAK,KAAK;IACxC,IAAI,YAAY,CAAA,GAAA,4BAAoB,EAAE,KAAK,KAAK;IAChD,OAAO;QACL,mBAAmB;YACjB,cAAc,gBAAgB,MAAM,CAAC;YACrC,mBAAmB,GAAG,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;wBAC/C;YACA,IAAI;YACJ,SAAS,IAAM,WAAW,SAAS,IAAI,IAAI;oBAAC,KAAK,GAAG;iBAAC,KAAK;YAC1D,qBAAqB;QACvB;QACA,UAAU,CAAA,GAAA,iBAAS,EAAE,UAAU,UAAU,WAAW;sBAClD;YACA,WAAW,WAAW,YAAY;YAClC,oBAAoB,SAAS,CAAC,mBAAmB;QACnD;QACA,eAAe,CAAA,GAAA,iBAAS,EAAE,eAAe;YACvC,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,cAAc,KAAK,CAAC,aAAa;QACnC;QACA,GAAG,uBAAuB;QAC1B,gBAAgB,CAAC,CAAC;IACpB;AACF","sources":["packages/@react-aria/tag/src/useTag.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 {AriaButtonProps} from '@react-types/button';\nimport {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId, useSyntheticLinkProps} from '@react-aria/utils';\nimport {hookData} from './useTagGroup';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {KeyboardEvent} from 'react';\nimport type {ListState} from '@react-stately/list';\nimport {SelectableItemStates} from '@react-aria/selection';\nimport {useGridListItem} from '@react-aria/gridlist';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\n\nexport interface TagAria extends Omit<SelectableItemStates, 'hasAction'> {\n /** Props for the tag row element. */\n rowProps: DOMAttributes,\n /** Props for the tag cell element. */\n gridCellProps: DOMAttributes,\n /** Props for the tag remove button. */\n removeButtonProps: AriaButtonProps,\n /** Whether the tag can be removed. */\n allowsRemoving: boolean\n}\n\nexport interface AriaTagProps<T> {\n /** An object representing the tag. Contains all the relevant information that makes up the tag. */\n item: Node<T>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tag component.\n * @param props - Props to be applied to the tag.\n * @param state - State for the tag group, as returned by `useListState`.\n * @param ref - A ref to a DOM element for the tag.\n */\nexport function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefObject<FocusableElement | null>): TagAria {\n let {item} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/tag');\n let buttonId = useId();\n\n let {onRemove} = hookData.get(state) || {};\n let {rowProps, gridCellProps, ...states} = useGridListItem({\n node: item\n }, state, ref);\n\n // We want the group to handle keyboard navigation between tags.\n delete rowProps.onKeyDownCapture;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {descriptionProps: _, ...stateWithoutDescription} = states;\n\n let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;\n let onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Delete' || e.key === 'Backspace') {\n if (isDisabled) {\n return;\n }\n\n e.preventDefault();\n if (state.selectionManager.isSelected(item.key)) {\n onRemove?.(new Set(state.selectionManager.selectedKeys));\n } else {\n onRemove?.(new Set([item.key]));\n }\n }\n };\n\n let modality = useInteractionModality();\n if (modality === 'virtual' && (typeof window !== 'undefined' && 'ontouchstart' in window)) {\n modality = 'pointer';\n }\n let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';\n let descProps = useDescription(description);\n\n let isItemFocused = item.key === state.selectionManager.focusedKey;\n let isFocused = state.selectionManager.focusedKey != null;\n let tabIndex = -1;\n if (!isDisabled && (isItemFocused || !isFocused)) {\n tabIndex = 0;\n }\n\n let domProps = filterDOMProps(item.props);\n let linkProps = useSyntheticLinkProps(item.props);\n return {\n removeButtonProps: {\n 'aria-label': stringFormatter.format('removeButtonLabel'),\n 'aria-labelledby': `${buttonId} ${rowProps.id}`,\n isDisabled,\n id: buttonId,\n onPress: () => onRemove ? onRemove(new Set([item.key])) : null,\n excludeFromTabOrder: true\n },\n rowProps: mergeProps(rowProps, domProps, linkProps, {\n tabIndex,\n onKeyDown: onRemove ? onKeyDown : undefined,\n 'aria-describedby': descProps['aria-describedby']\n }),\n gridCellProps: mergeProps(gridCellProps, {\n 'aria-errormessage': props['aria-errormessage'],\n 'aria-label': props['aria-label']\n }),\n ...stateWithoutDescription,\n allowsRemoving: !!onRemove\n };\n}\n"],"names":[],"version":3,"file":"useTag.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/tag",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.9",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/gridlist": "^3.10.
|
|
26
|
-
"@react-aria/i18n": "^3.12.
|
|
27
|
-
"@react-aria/interactions": "^3.
|
|
28
|
-
"@react-aria/label": "^3.7.
|
|
29
|
-
"@react-aria/selection": "^3.
|
|
30
|
-
"@react-aria/utils": "^3.
|
|
31
|
-
"@react-stately/list": "^3.11.
|
|
32
|
-
"@react-types/button": "^3.10.
|
|
33
|
-
"@react-types/shared": "^3.
|
|
25
|
+
"@react-aria/gridlist": "^3.10.1",
|
|
26
|
+
"@react-aria/i18n": "^3.12.5",
|
|
27
|
+
"@react-aria/interactions": "^3.23.0",
|
|
28
|
+
"@react-aria/label": "^3.7.14",
|
|
29
|
+
"@react-aria/selection": "^3.22.0",
|
|
30
|
+
"@react-aria/utils": "^3.27.0",
|
|
31
|
+
"@react-stately/list": "^3.11.2",
|
|
32
|
+
"@react-types/button": "^3.10.2",
|
|
33
|
+
"@react-types/shared": "^3.27.0",
|
|
34
34
|
"@swc/helpers": "^0.5.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
|
|
44
44
|
}
|
package/src/useTag.ts
CHANGED
|
@@ -61,8 +61,13 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
|
|
|
61
61
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
62
62
|
let {descriptionProps: _, ...stateWithoutDescription} = states;
|
|
63
63
|
|
|
64
|
+
let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;
|
|
64
65
|
let onKeyDown = (e: KeyboardEvent) => {
|
|
65
66
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
67
|
+
if (isDisabled) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
66
71
|
e.preventDefault();
|
|
67
72
|
if (state.selectionManager.isSelected(item.key)) {
|
|
68
73
|
onRemove?.(new Set(state.selectionManager.selectedKeys));
|
|
@@ -79,20 +84,26 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
|
|
|
79
84
|
let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
|
|
80
85
|
let descProps = useDescription(description);
|
|
81
86
|
|
|
82
|
-
let
|
|
87
|
+
let isItemFocused = item.key === state.selectionManager.focusedKey;
|
|
88
|
+
let isFocused = state.selectionManager.focusedKey != null;
|
|
89
|
+
let tabIndex = -1;
|
|
90
|
+
if (!isDisabled && (isItemFocused || !isFocused)) {
|
|
91
|
+
tabIndex = 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
83
94
|
let domProps = filterDOMProps(item.props);
|
|
84
95
|
let linkProps = useSyntheticLinkProps(item.props);
|
|
85
96
|
return {
|
|
86
97
|
removeButtonProps: {
|
|
87
98
|
'aria-label': stringFormatter.format('removeButtonLabel'),
|
|
88
99
|
'aria-labelledby': `${buttonId} ${rowProps.id}`,
|
|
89
|
-
isDisabled
|
|
100
|
+
isDisabled,
|
|
90
101
|
id: buttonId,
|
|
91
102
|
onPress: () => onRemove ? onRemove(new Set([item.key])) : null,
|
|
92
103
|
excludeFromTabOrder: true
|
|
93
104
|
},
|
|
94
105
|
rowProps: mergeProps(rowProps, domProps, linkProps, {
|
|
95
|
-
tabIndex
|
|
106
|
+
tabIndex,
|
|
96
107
|
onKeyDown: onRemove ? onKeyDown : undefined,
|
|
97
108
|
'aria-describedby': descProps['aria-describedby']
|
|
98
109
|
}),
|