@react-spectrum/tag 3.0.0-nightly.3180 → 3.0.0

package/src/TagGroup.tsx

@@ -10,113 +10,272 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
-import {GridCollection, useGridState} from '@react-stately/grid';
-import {mergeProps} from '@react-aria/utils';
-import React, {ReactElement, useMemo} from 'react';
-import {SpectrumTagGroupProps} from '@react-types/tag';
+import {ActionButton} from '@react-spectrum/button';
+import {AriaTagGroupProps, useTagGroup} from '@react-aria/tag';
+import {classNames, useDOMRef} from '@react-spectrum/utils';
+import {DOMRef, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared';
+import {Field} from '@react-spectrum/label';
+import {FocusRing, FocusScope} from '@react-aria/focus';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {ListCollection, useListState} from '@react-stately/list';
+import {ListKeyboardDelegate} from '@react-aria/selection';
+import {Provider, useProvider, useProviderProps} from '@react-spectrum/provider';
+import React, {ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
 import {Tag} from './Tag';
-import {TagKeyboardDelegate, useTagGroup} from '@react-aria/tag';
-import {useGrid} from '@react-aria/grid';
-import {useListState} from '@react-stately/list';
-import {useLocale} from '@react-aria/i18n';
-import {useProviderProps} from '@react-spectrum/provider';
+import {useFormProps} from '@react-spectrum/form';
+import {useId, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
+const TAG_STYLES = {
+  medium: {
+    height: 24,
+    margin: 4
+  },
+  large: {
+    height: 30,
+    margin: 5
+  }
+};
+
+export interface SpectrumTagGroupProps<T> extends Omit<AriaTagGroupProps<T>, 'selectionMode' | 'disallowEmptySelection' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionBehavior' | 'disabledKeys'>, StyleProps, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, Omit<Validation, 'isRequired'> {
+  /** The label to display on the action button.  */
+  actionLabel?: string,
+  /** Handler that is called when the action button is pressed. */
+  onAction?: () => void,
+  /** Sets what the TagGroup should render when there are no tags to display. */
+  renderEmptyState?: () => JSX.Element,
+  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */
+  maxRows?: number
+}
 
 function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
-    isDisabled,
-    isRemovable,
-    onRemove,
-    ...otherProps
+    maxRows,
+    children,
+    actionLabel,
+    onAction,
+    labelPosition,
+    renderEmptyState = () => stringFormatter.format('noTags')
   } = props;
   let domRef = useDOMRef(ref);
-  let {styleProps} = useStyleProps(otherProps);
+  let containerRef = useRef(null);
+  let tagsRef = useRef(null);
   let {direction} = useLocale();
-  let listState = useListState(props);
-  let gridCollection = useMemo(() => new GridCollection({
-    columnCount: isRemovable ? 2 : 1,
-    items: [...listState.collection].map(item => {
-      let childNodes = [{
-        ...item,
-        index: 0,
-        type: 'cell'
-      }];
-
-      // add column of clear buttons if removable
-      if (isRemovable) {
-        childNodes.push({
-          key: `remove-${item.key}`,
-          type: 'cell',
-          index: 1,
-          value: null,
-          level: 0,
-          rendered: null,
-          textValue: item.textValue, // TODO localize?
-          hasChildNodes: false,
-          childNodes: []
-        });
-      }
-
-      return {
-        type: 'item',
-        childNodes
+  let {scale} = useProvider();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);
+  let state = useListState(props);
+  let [tagState, setTagState] = useValueEffect({visibleTagCount: state.collection.size, showCollapseButton: false});
+  let keyboardDelegate = useMemo(() => {
+    let collection = isCollapsed
+      ? new ListCollection([...state.collection].slice(0, tagState.visibleTagCount))
+      : new ListCollection([...state.collection]);
+    return new ListKeyboardDelegate({
+      collection,
+      ref: domRef,
+      direction,
+      orientation: 'horizontal'
+    });
+  }, [direction, isCollapsed, state.collection, tagState.visibleTagCount, domRef]) as ListKeyboardDelegate<T>;
+  // Remove onAction from props so it doesn't make it into useGridList.
+  delete props.onAction;
+  let {gridProps, labelProps, descriptionProps, errorMessageProps} = useTagGroup({...props, keyboardDelegate}, state, tagsRef);
+  let actionsId = useId();
+  let actionsRef = useRef(null);
+
+  let updateVisibleTagCount = useCallback(() => {
+    if (maxRows > 0) {
+      let computeVisibleTagCount = () => {
+        // Refs can be null at runtime.
+        let currContainerRef: HTMLDivElement | null = containerRef.current;
+        let currTagsRef: HTMLDivElement | null = tagsRef.current;
+        let currActionsRef: HTMLDivElement | null = actionsRef.current;
+        if (!currContainerRef || !currTagsRef || state.collection.size === 0) {
+          return {
+            visibleTagCount: 0,
+            showCollapseButton: false
+          };
+        }
+
+        // Count rows and show tags until we hit the maxRows.
+        let tags = [...currTagsRef.children];
+        let currY = -Infinity;
+        let rowCount = 0;
+        let index = 0;
+        let tagWidths: number[] = [];
+        for (let tag of tags) {
+          let {width, y} = tag.getBoundingClientRect();
+
+          if (y !== currY) {
+            currY = y;
+            rowCount++;
+          }
+
+          if (rowCount > maxRows) {
+            break;
+          }
+          tagWidths.push(width);
+          index++;
+        }
+
+        // Remove tags until there is space for the collapse button and action button (if present) on the last row.
+        let buttons = [...currActionsRef.children];
+        if (buttons.length > 0 && rowCount >= maxRows) {
+          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);
+          buttonsWidth += TAG_STYLES[scale].margin * 2 * buttons.length;
+          let end = direction === 'ltr' ? 'right' : 'left';
+          let containerEnd = currContainerRef.parentElement.getBoundingClientRect()[end];
+          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];
+          lastTagEnd += TAG_STYLES[scale].margin;
+          let availableWidth = containerEnd - lastTagEnd;
+
+          while (availableWidth < buttonsWidth && index > 0) {
+            availableWidth += tagWidths.pop();
+            index--;
+          }
+        }
+
+        return {
+          visibleTagCount: Math.max(index, 1),
+          showCollapseButton: index < state.collection.size
+        };
       };
-    })
-  }), [listState.collection, isRemovable]);
-  let state = useGridState({
-    ...props,
-    collection: gridCollection,
-    focusMode: 'cell'
-  });
-  let keyboardDelegate = new TagKeyboardDelegate({
-    collection: state.collection,
-    disabledKeys: state.disabledKeys,
-    ref: domRef,
-    direction,
-    focusMode: 'cell'
-  });
-  let {gridProps} = useGrid({
-    ...props,
-    keyboardDelegate
-  }, state, domRef);
-  const {tagGroupProps} = useTagGroup(props, listState);
-
-  // Don't want the grid to be focusable or accessible via keyboard
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {tabIndex, ...otherGridProps} = gridProps;
+
+      setTagState(function *() {
+        // Update to show all items.
+        yield {visibleTagCount: state.collection.size, showCollapseButton: true};
+
+        // Measure, and update to show the items until maxRows is reached.
+        yield computeVisibleTagCount();
+      });
+    }
+  }, [maxRows, setTagState, direction, scale, state.collection.size]);
+
+  useResizeObserver({ref: containerRef, onResize: updateVisibleTagCount});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(updateVisibleTagCount, [children]);
+
+  useEffect(() => {
+    // Recalculate visible tags when fonts are loaded.
+    document.fonts?.ready.then(() => updateVisibleTagCount());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  let visibleTags = useMemo(() =>
+    [...state.collection].slice(0, isCollapsed ? tagState.visibleTagCount : state.collection.size),
+    [isCollapsed, state.collection, tagState.visibleTagCount]
+  );
+
+  let handlePressCollapse = () => {
+    // Prevents button from losing focus if focusedKey got collapsed.
+    state.selectionManager.setFocusedKey(null);
+    setIsCollapsed(prevCollapsed => !prevCollapsed);
+  };
+
+  let showActions = tagState.showCollapseButton || (actionLabel && onAction);
+  let isEmpty = state.collection.size === 0;
+
+  let containerStyle = useMemo(() => {
+    if (maxRows == null || !isCollapsed || isEmpty) {
+      return undefined;
+    }
+    let maxHeight = (TAG_STYLES[scale].height + (TAG_STYLES[scale].margin * 2)) * maxRows;
+    return {maxHeight, overflow: 'hidden'};
+  }, [isCollapsed, maxRows, isEmpty, scale]);
+
   return (
-    <div
-      {...mergeProps(styleProps, tagGroupProps, otherGridProps)}
-      className={
-        classNames(
-          styles,
-          'spectrum-Tags',
-          {
-            'is-disabled': isDisabled
-          },
-          styleProps.className
-        )
-      }
-      ref={domRef}>
-      {[...gridCollection].map(item => (
-        <Tag
-          {...item.childNodes[0].props}
-          key={item.key}
-          item={item}
-          state={state}
-          isDisabled={isDisabled || state.disabledKeys.has(item?.childNodes[0]?.key)}
-          isRemovable={isRemovable}
-          onRemove={onRemove}>
-          {item.childNodes[0].rendered}
-        </Tag>
-        ))}
-    </div>
+    <FocusScope>
+      <Field
+        {...props}
+        labelProps={labelProps}
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+        showErrorIcon
+        ref={domRef}
+        elementType="span"
+        wrapperClassName={
+          classNames(
+            styles,
+            'spectrum-Tags-fieldWrapper',
+            {
+              'spectrum-Tags-fieldWrapper--positionSide': labelPosition === 'side'
+            }
+          )
+        }>
+        <div
+          ref={containerRef}
+          style={containerStyle}
+          className={
+            classNames(
+              styles,
+              'spectrum-Tags-container',
+              {
+                'spectrum-Tags-container--empty': isEmpty
+              }
+            )
+          }>
+          <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
+            <div
+              ref={tagsRef}
+              {...gridProps}
+              className={classNames(styles, 'spectrum-Tags')}>
+              {visibleTags.map(item => (
+                <Tag
+                  {...item.props}
+                  key={item.key}
+                  item={item}
+                  state={state}>
+                  {item.rendered}
+                </Tag>
+              ))}
+              {isEmpty && (
+                <div className={classNames(styles, 'spectrum-Tags-empty-state')}>
+                  {renderEmptyState()}
+                </div>
+              )}
+            </div>
+          </FocusRing>
+          {showActions && !isEmpty &&
+            <Provider isDisabled={false}>
+              <div
+                role="group"
+                ref={actionsRef}
+                id={actionsId}
+                aria-label={stringFormatter.format('actions')}
+                aria-labelledby={`${gridProps.id} ${actionsId}`}
+                className={classNames(styles, 'spectrum-Tags-actions')}>
+                {tagState.showCollapseButton &&
+                  <ActionButton
+                    isQuiet
+                    onPress={handlePressCollapse}
+                    UNSAFE_className={classNames(styles, 'spectrum-Tags-actionButton')}>
+                    {isCollapsed ?
+                      stringFormatter.format('showAllButtonLabel', {tagCount: state.collection.size}) :
+                      stringFormatter.format('hideButtonLabel')
+                    }
+                  </ActionButton>
+                }
+                {actionLabel && onAction &&
+                  <ActionButton
+                    isQuiet
+                    onPress={() => onAction?.()}
+                    UNSAFE_className={classNames(styles, 'spectrum-Tags-actionButton')}>
+                    {actionLabel}
+                  </ActionButton>
+                }
+              </div>
+            </Provider>
+          }
+        </div>
+      </Field>
+    </FocusScope>
   );
 }
 
+/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
 const _TagGroup = React.forwardRef(TagGroup) as <T>(props: SpectrumTagGroupProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
 export {_TagGroup as TagGroup};

package/src/index.ts

@@ -10,6 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-/// <reference types="css-module-types" />
-
-export * from './TagGroup';
+export {TagGroup} from './TagGroup';
+export {Item} from '@react-stately/collections';
+export type {SpectrumTagGroupProps} from './TagGroup';