@react-aria/tag 3.8.1 → 3.9.0

package/dist/zh-TW.main.js

@@ -1,7 +0,0 @@
-module.exports = {
-    "removeButtonLabel": `\u{79FB}\u{9664}`,
-    "removeDescription": `\u{6309} Delete \u{9375}\u{4EE5}\u{79FB}\u{9664}\u{6A19}\u{8A18}\u{3002}`
-};
-
-
-//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -1 +0,0 @@
-{"mappings":"AAAA,iBAAiB;IAAG,qBAAqB,CAAC,gBAAE,CAAC;IAC3C,qBAAqB,CAAC,wEAAgB,CAAC;AACzC","sources":["packages/@react-aria/tag/intl/zh-TW.json"],"sourcesContent":["{\n  \"removeButtonLabel\": \"移除\",\n  \"removeDescription\": \"按 Delete 鍵以移除標記。\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -1,9 +0,0 @@
-var $09cd168ab18773f4$exports = {};
-$09cd168ab18773f4$exports = {
-    "removeButtonLabel": `\u{79FB}\u{9664}`,
-    "removeDescription": `\u{6309} Delete \u{9375}\u{4EE5}\u{79FB}\u{9664}\u{6A19}\u{8A18}\u{3002}`
-};
-
-
-export {$09cd168ab18773f4$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -1,9 +0,0 @@
-var $09cd168ab18773f4$exports = {};
-$09cd168ab18773f4$exports = {
-    "removeButtonLabel": `\u{79FB}\u{9664}`,
-    "removeDescription": `\u{6309} Delete \u{9375}\u{4EE5}\u{79FB}\u{9664}\u{6A19}\u{8A18}\u{3002}`
-};
-
-
-export {$09cd168ab18773f4$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,qBAAqB,CAAC,gBAAE,CAAC;IAC3C,qBAAqB,CAAC,wEAAgB,CAAC;AACzC","sources":["packages/@react-aria/tag/intl/zh-TW.json"],"sourcesContent":["{\n  \"removeButtonLabel\": \"移除\",\n  \"removeDescription\": \"按 Delete 鍵以移除標記。\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/src/useTag.ts

@@ -1,119 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaButtonProps} from '@react-types/button';
-import {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useDescription, useId, useSyntheticLinkProps} from '@react-aria/utils';
-import {hookData} from './useTagGroup';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {KeyboardEvent} from 'react';
-import type {ListState} from '@react-stately/list';
-import {SelectableItemStates} from '@react-aria/selection';
-import {useFocusable, useInteractionModality} from '@react-aria/interactions';
-import {useGridListItem} from '@react-aria/gridlist';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-
-
-export interface TagAria extends Omit<SelectableItemStates, 'hasAction'> {
-  /** Props for the tag row element. */
-  rowProps: DOMAttributes,
-  /** Props for the tag cell element. */
-  gridCellProps: DOMAttributes,
-  /** Props for the tag remove button. */
-  removeButtonProps: AriaButtonProps,
-  /** Whether the tag can be removed. */
-  allowsRemoving: boolean
-}
-
-export interface AriaTagProps<T> {
-  /** An object representing the tag. Contains all the relevant information that makes up the tag. */
-  item: Node<T>
-}
-
-/**
- * Provides the behavior and accessibility implementation for a tag component.
- * @param props - Props to be applied to the tag.
- * @param state - State for the tag group, as returned by `useListState`.
- * @param ref - A ref to a DOM element for the tag.
- */
-export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefObject<FocusableElement | null>): TagAria {
-  let {item} = props;
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/tag');
-  let buttonId = useId();
-
-  let {onRemove} = hookData.get(state) || {};
-  let {rowProps, gridCellProps, ...states} = useGridListItem({
-    node: item
-  }, state, ref);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {descriptionProps: _, ...stateWithoutDescription} = states;
-
-  let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;
-  let onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Delete' || e.key === 'Backspace') {
-      if (isDisabled) {
-        return;
-      }
-
-      e.preventDefault();
-      if (state.selectionManager.isSelected(item.key)) {
-        onRemove?.(new Set(state.selectionManager.selectedKeys));
-      } else {
-        onRemove?.(new Set([item.key]));
-      }
-    }
-  };
-
-  let modality = useInteractionModality();
-  if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {
-    modality = 'pointer';
-  }
-  let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
-  let descProps = useDescription(description);
-
-  let isItemFocused = item.key === state.selectionManager.focusedKey;
-  let isFocused = state.selectionManager.focusedKey != null;
-  let tabIndex = -1;
-  if (!isDisabled && (isItemFocused || !isFocused)) {
-    tabIndex = 0;
-  }
-
-  let domProps = filterDOMProps(item.props);
-  let linkProps = useSyntheticLinkProps(item.props);
-  let {focusableProps} = useFocusable({
-    ...item.props,
-    isDisabled
-  }, ref);
-
-  return {
-    removeButtonProps: {
-      'aria-label': stringFormatter.format('removeButtonLabel'),
-      'aria-labelledby': `${buttonId} ${rowProps.id}`,
-      isDisabled,
-      id: buttonId,
-      onPress: () => onRemove ? onRemove(new Set([item.key])) : null
-    },
-    rowProps: mergeProps(focusableProps, rowProps, domProps, linkProps, {
-      tabIndex,
-      onKeyDown: onRemove ? onKeyDown : undefined,
-      'aria-describedby': descProps['aria-describedby']
-    }),
-    gridCellProps: mergeProps(gridCellProps, {
-      'aria-errormessage': props['aria-errormessage'],
-      'aria-label': props['aria-label']
-    }),
-    ...stateWithoutDescription,
-    allowsRemoving: !!onRemove
-  };
-}

package/src/useTagGroup.ts

@@ -1,128 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaGridListProps, useGridList} from '@react-aria/gridlist';
-import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, Key, KeyboardDelegate, LabelableProps, MultipleSelection, RefObject, SelectionBehavior} from '@react-types/shared';
-import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {ListKeyboardDelegate} from '@react-aria/selection';
-import type {ListState} from '@react-stately/list';
-import {ReactNode, useEffect, useRef, useState} from 'react';
-import {useField} from '@react-aria/label';
-import {useFocusWithin} from '@react-aria/interactions';
-import {useLocale} from '@react-aria/i18n';
-
-export interface TagGroupAria {
-  /** Props for the tag grouping element. */
-  gridProps: DOMAttributes,
-  /** Props for the tag group's visible label (if any). */
-  labelProps: DOMAttributes,
-  /** Props for the tag group description element, if any. */
-  descriptionProps: DOMAttributes,
-  /** Props for the tag group error message element, if any. */
-  errorMessageProps: DOMAttributes
-}
-
-export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, Pick<AriaGridListProps<T>, 'escapeKeyBehavior'>, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
-  /** How multiple selection should behave in the collection. */
-  selectionBehavior?: SelectionBehavior,
-  /** Whether selection should occur on press up instead of press down. */
-  shouldSelectOnPressUp?: boolean,
-  /** Handler that is called when a user deletes a tag.  */
-  onRemove?: (keys: Set<Key>) => void,
-  /** An error message for the field. */
-  errorMessage?: ReactNode,
-  /**
-   * Whether pressing the escape key should clear selection in the TagGroup or not.
-   *
-   * Most experiences should not modify this option as it eliminates a keyboard user's ability to
-   * easily clear selection. Only use if the escape key is being handled externally or should not
-   * trigger selection clearing contextually.
-   * @default 'clearSelection'
-   */
-  escapeKeyBehavior?: 'clearSelection' | 'none'
-}
-
-export interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'children'> {
-  /**
-   * An optional keyboard delegate to handle arrow key navigation,
-   * to override the default.
-   */
-  keyboardDelegate?: KeyboardDelegate
-}
-
-interface HookData {
-  onRemove?: (keys: Set<Key>) => void
-}
-
-export const hookData: WeakMap<ListState<any>, HookData> = new WeakMap<ListState<any>, HookData>();
-
-/**
- * Provides the behavior and accessibility implementation for a tag group component.
- * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
- * @param props - Props to be applied to the tag group.
- * @param state - State for the tag group, as returned by `useListState`.
- * @param ref - A ref to a DOM element for the tag group.
- */
-export function useTagGroup<T>(props: AriaTagGroupOptions<T>, state: ListState<T>, ref: RefObject<HTMLElement | null>): TagGroupAria {
-  let {direction} = useLocale();
-  let keyboardDelegate = props.keyboardDelegate || new ListKeyboardDelegate({
-    collection: state.collection,
-    ref,
-    orientation: 'horizontal',
-    direction,
-    disabledKeys: state.disabledKeys,
-    disabledBehavior: state.selectionManager.disabledBehavior
-  });
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
-    ...props,
-    labelElementType: 'span'
-  });
-  let {gridProps} = useGridList({
-    ...props,
-    ...fieldProps,
-    keyboardDelegate,
-    shouldFocusWrap: true,
-    linkBehavior: 'override',
-    keyboardNavigationBehavior: 'tab'
-  }, state, ref);
-
-  let [isFocusWithin, setFocusWithin] = useState(false);
-  let {focusWithinProps} = useFocusWithin({
-    onFocusWithinChange: setFocusWithin
-  });
-  let domProps = filterDOMProps(props);
-
-  // If the last tag is removed, focus the container.
-  let prevCount = useRef(state.collection.size);
-  useEffect(() => {
-    if (ref.current && prevCount.current > 0 && state.collection.size === 0 && isFocusWithin) {
-      ref.current.focus();
-    }
-    prevCount.current = state.collection.size;
-  }, [state.collection.size, isFocusWithin, ref]);
-
-  hookData.set(state, {onRemove: props.onRemove});
-
-  return {
-    gridProps: mergeProps(gridProps, domProps, {
-      role: state.collection.size ? 'grid' : 'group',
-      'aria-atomic': false,
-      'aria-relevant': 'additions',
-      'aria-live': isFocusWithin ? 'polite' : 'off',
-      ...focusWithinProps,
-      ...fieldProps
-    }),
-    labelProps,
-    descriptionProps,
-    errorMessageProps
-  };
-}