@react-spectrum/card 3.0.0-alpha.52 → 3.0.0-alpha.54

package/src/CardBase.tsx

@@ -1,188 +0,0 @@
-// @ts-nocheck
-/*
- * Copyright 2021 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 {AriaCardProps, SpectrumCardProps} from '@react-types/card';
-import {Checkbox} from '@react-spectrum/checkbox';
-import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, Node} from '@react-types/shared';
-import {filterDOMProps, mergeProps, nodeContains, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';
-import {FocusRing, getFocusableTreeWalker} from '@react-aria/focus';
-import React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
-import {useCardViewContext} from './CardViewContext';
-import {useFocusWithin, useHover} from '@react-aria/interactions';
-import {useProviderProps} from '@react-spectrum/provider';
-
-interface CardBaseProps<T> extends SpectrumCardProps {
-  articleProps?: HTMLAttributes<HTMLElement>,
-  item?: Node<T>
-}
-
-/**
- * TODO: Add description of component here.
- */
-export const CardBase = React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
-  props = useProviderProps(props);
-  let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
-  let {state} = context;
-  let manager = state?.selectionManager;
-  let {
-    isQuiet,
-    orientation = 'vertical',
-    articleProps = {role: 'article'},
-    item,
-    layout,
-    children
-  } = props;
-
-  let key = item?.key;
-  let isSelected = manager?.isSelected(key);
-  let isDisabled = state?.disabledKeys.has(key);
-  let onChange = () => manager?.select(key);
-
-  let {styleProps} = useStyleProps(props);
-  let {cardProps, titleProps, contentProps} = useCard(props);
-  let domRef = useDOMRef(ref);
-  let gridRef = useRef<HTMLDivElement>(undefined);
-  let checkboxRef = useRef(null);
-
-  // cards are only interactive if there is a selection manager and it allows selection
-  let {hoverProps, isHovered} = useHover({isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled});
-  let [isFocused, setIsFocused] = useState(false);
-  let {focusWithinProps} = useFocusWithin({
-    onFocusWithinChange: setIsFocused,
-    isDisabled
-  });
-
-  // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
-  let hasPreviewImage = useHasChild(`.${styles['spectrum-Card-image']}`, gridRef);
-  let hasPreviewIllustration = useHasChild(`.${styles['spectrum-Card-illustration']}`, gridRef);
-  let hasPreview = hasPreviewImage || hasPreviewIllustration;
-
-  // this is for horizontal cards
-  let [height, setHeight] = useState(NaN);
-  let updateHeight = useCallback(() => {
-    if (orientation !== 'horizontal') {
-      return;
-    }
-
-    let cardHeight = gridRef.current.getBoundingClientRect().height;
-    setHeight(cardHeight);
-  }, [orientation, gridRef, setHeight]);
-  useResizeObserver({ref: gridRef, onResize: updateHeight});
-
-  let aspectRatioEnforce = undefined;
-  if (orientation === 'horizontal' && !isNaN(height)) {
-    aspectRatioEnforce = {
-      height: `${height}px`,
-      width: `${height}px`
-    };
-  }
-
-  let slots = useMemo(() => ({
-    image: {UNSAFE_className: classNames(styles, 'spectrum-Card-image'), objectFit: orientation === 'horizontal' ? 'cover' : 'contain', alt: '', ...aspectRatioEnforce},
-    illustration: {UNSAFE_className: classNames(styles, 'spectrum-Card-illustration'), ...aspectRatioEnforce},
-    avatar: {UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'), size: 'avatar-size-400'},
-    heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},
-    content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},
-    detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [titleProps, contentProps, height, isQuiet, orientation]);
-
-  useLayoutEffect(() => {
-    if (gridRef?.current) {
-      let walker = getFocusableTreeWalker(gridRef.current);
-      let nextNode = walker.nextNode();
-      while (nextNode != null) {
-        if (checkboxRef.current && !nodeContains(checkboxRef.current.UNSAFE_getDOMNode(), nextNode)) {
-          console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
-          break;
-        }
-        nextNode = walker.nextNode();
-      }
-    }
-  }, [children]);
-
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
-      <div
-        {...styleProps}
-        {...mergeProps(cardProps, focusWithinProps, hoverProps, filterDOMProps(props), articleProps)}
-        ref={domRef}
-        className={classNames(styles, 'spectrum-Card', {
-          'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
-          'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
-          'spectrum-Card--horizontal': orientation === 'horizontal',
-          'spectrum-Card--noPreview': !hasPreview,
-          'is-hovered': isHovered,
-          'is-focused': isFocused,
-          'is-selected': isSelected,
-          'spectrum-Card--waterfall': layout === 'waterfall',
-          'spectrum-Card--gallery': layout === 'gallery',
-          'spectrum-Card--grid': layout === 'grid',
-          'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
-        }, styleProps.className)}>
-        <div ref={gridRef} className={classNames(styles, 'spectrum-Card-grid')}>
-          {manager && manager.selectionMode !== 'none' && (
-            <div className={classNames(styles, 'spectrum-Card-checkboxWrapper')}>
-              <Checkbox
-                ref={checkboxRef}
-                isDisabled={isDisabled}
-                excludeFromTabOrder
-                isSelected={isSelected}
-                onChange={onChange}
-                UNSAFE_className={classNames(styles, 'spectrum-Card-checkbox')}
-                isEmphasized
-                aria-label="select" />
-            </div>
-          )}
-          <SlotProvider slots={slots}>
-            {children}
-          </SlotProvider>
-          <div className={classNames(styles, 'spectrum-Card-decoration')} />
-        </div>
-      </div>
-    </FocusRing>
-  );
-});
-
-interface AriaCardOptions extends AriaCardProps {
-}
-
-interface CardAria {
-  cardProps: HTMLAttributes<HTMLDivElement>,
-  titleProps: HTMLAttributes<HTMLDivElement>,
-  contentProps: HTMLAttributes<HTMLDivElement>
-}
-
-function useCard(props: AriaCardOptions): CardAria {
-  let titleId = useSlotId();
-  let descriptionId = useSlotId();
-  let titleProps = useMemo(() => ({
-    id: titleId
-  }), [titleId]);
-  let contentProps = useMemo(() => ({
-    id: descriptionId
-  }), [descriptionId]);
-
-  return {
-    cardProps: {
-      ...filterDOMProps(props),
-      'aria-labelledby': titleId,
-      'aria-describedby': descriptionId,
-      tabIndex: 0
-    },
-    titleProps,
-    contentProps
-  };
-}

package/src/CardView.tsx

@@ -1,250 +0,0 @@
-// @ts-nocheck
-/*
- * Copyright 2021 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 {CardBase} from './CardBase';
-import {CardViewContext, useCardViewContext} from './CardViewContext';
-import {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue, Node} from '@react-types/shared';
-import {GridCollection, useGridState} from '@react-stately/grid';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {mergeProps} from '@react-aria/utils';
-import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react';
-import {ReusableView} from '@react-stately/virtualizer';
-import {SpectrumCardViewProps} from '@react-types/card';
-import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
-import {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useGrid, useGridCell, useGridRow} from '@react-aria/grid';
-import {useListState} from '@react-stately/list';
-import {useProvider} from '@react-spectrum/provider';
-import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';
-
-/**
- * TODO: Add description of component here.
- */
-export const CardView = React.forwardRef(function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let {scale} = useProvider();
-  let {styleProps} = useStyleProps(props);
-  let domRef = useDOMRef(ref);
-  let {
-    isQuiet,
-    renderEmptyState,
-    layout,
-    loadingState,
-    onLoadMore,
-    cardOrientation = 'vertical'
-  } = props;
-
-  let collator = useCollator({usage: 'search', sensitivity: 'base'});
-  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
-  let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);
-  let layoutType = cardViewLayout.layoutType;
-
-  let {direction} = useLocale();
-  let {collection} = useListState(props);
-
-  let gridCollection = useMemo(() => new GridCollection<T>({
-    columnCount: 1,
-    items: [...collection].map(item => ({
-      // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys
-      ...item,
-      hasChildNodes: true,
-      childNodes: [{
-        key: `cell-${item.key}`,
-        type: 'cell',
-        value: null,
-        level: 0,
-        rendered: null,
-        textValue: item.textValue,
-        hasChildNodes: false,
-        childNodes: []
-      }]
-    }))
-  }), [collection]);
-
-  let state = useGridState({
-    ...props,
-    selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
-    collection: gridCollection,
-    focusMode: 'cell'
-  });
-
-  cardViewLayout.collection = gridCollection;
-  cardViewLayout.disabledKeys = state.disabledKeys;
-
-  let {gridProps} = useGrid({
-    ...props,
-    isVirtualized: true,
-    keyboardDelegate: cardViewLayout
-  }, state, domRef);
-
-  type View = ReusableView<Node<T>, ReactNode>;
-  let renderWrapper = useCallback((parent: View, reusableView: View) => (
-    <VirtualizerItem
-      key={reusableView.key}
-      layoutInfo={reusableView.layoutInfo}
-      virtualizer={reusableView.virtualizer}
-      parent={parent?.layoutInfo}>
-      {reusableView.rendered}
-    </VirtualizerItem>
-  ), []);
-
-  let focusedKey = state.selectionManager.focusedKey;
-  let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
-  if (focusedItem?.parentKey != null) {
-    focusedKey = focusedItem.parentKey;
-  }
-
-  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
-
-  // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
-  return (
-    <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>
-      <Virtualizer
-        {...gridProps}
-        {...styleProps}
-        className={classNames(styles, 'spectrum-CardView')}
-        ref={domRef}
-        persistedKeys={persistedKeys}
-        scrollDirection="vertical"
-        layout={cardViewLayout}
-        collection={gridCollection}
-        isLoading={isLoading}
-        onLoadMore={onLoadMore}
-        layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}
-        renderWrapper={renderWrapper}
-        style={{
-          ...styleProps.style,
-          scrollPaddingTop: cardViewLayout.margin || 0
-        }}>
-        {useCallback((type, item) => {
-          if (type === 'item') {
-            return (
-              <InternalCard item={item} />
-            );
-          } else if (type === 'loader') {
-            return <LoadingState />;
-          } else if (type === 'placeholder') {
-            return <EmptyState />;
-          }
-        }, [])}
-      </Virtualizer>
-    </CardViewContext.Provider>
-
-  );
-}) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-
-function LoadingState() {
-  let {state} = useCardViewContext();
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');
-  return (
-    <CenteredWrapper>
-      <ProgressCircle
-        isIndeterminate
-        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
-    </CenteredWrapper>
-  );
-}
-
-function EmptyState() {
-  let {renderEmptyState} = useCardViewContext();
-  let emptyState = renderEmptyState ? renderEmptyState() : null;
-  if (emptyState == null) {
-    return null;
-  }
-
-  return (
-    <CenteredWrapper>
-      {emptyState}
-    </CenteredWrapper>
-  );
-}
-
-function CenteredWrapper({children}) {
-  let {state} = useCardViewContext();
-  return (
-    <div
-      role="row"
-      aria-rowindex={state.collection.size + 1}
-      className={classNames(styles, 'spectrum-CardView-centeredWrapper')}>
-      <div role="gridcell">
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function InternalCard(props) {
-  let {
-    item
-  } = props;
-  let cellNode = [...item.childNodes][0];
-  let {state, cardOrientation, isQuiet, layout} = useCardViewContext();
-
-  let layoutType = layout.layoutType;
-  let rowRef = useRef(undefined);
-  let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);
-  let unwrappedRef = useUnwrapDOMRef(cellRef);
-
-  let {rowProps: gridRowProps} = useGridRow({
-    node: item,
-    isVirtualized: true
-  }, state, rowRef);
-
-  let {gridCellProps} = useGridCell({
-    node: cellNode,
-    focusMode: 'cell'
-  }, state, unwrappedRef);
-
-  // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode="none" CardView.
-  let allowsInteraction = state.selectionManager.selectionMode !== 'none';
-  let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
-
-  let onKeyDown = (e) => {
-    if (e.key === ' ' && isDisabled) {
-      e.preventDefault();
-    }
-  };
-
-  let rowProps = mergeProps(
-    gridRowProps,
-    {onKeyDown}
-  );
-
-  if (layoutType === 'grid' || layoutType === 'gallery') {
-    isQuiet = true;
-  }
-
-  if (layoutType !== 'grid') {
-    cardOrientation = 'vertical';
-  }
-
-  // We don't want to focus the checkbox (or any other focusable elements) within the Card
-  // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
-  // the cards in the CardView is handled by useGrid => useSelectableCollection instead.
-  delete gridCellProps.onKeyDownCapture;
-  return (
-    <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>
-      <CardBase
-        ref={cellRef}
-        articleProps={gridCellProps}
-        isQuiet={isQuiet}
-        orientation={cardOrientation}
-        item={item}
-        layout={layoutType}>
-        {item.rendered}
-      </CardBase>
-    </div>
-  );
-}

package/src/CardViewContext.tsx

@@ -1,27 +0,0 @@
-// @ts-nocheck
-/*
- * 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 React, {useContext} from 'react';
-
-export interface CardViewContextValue {
-  state: 'idle' | 'loading' | 'error',
-  isQuiet: boolean,
-  layout: 'grid' | 'gallery' | 'waterfall',
-  cardOrientation: 'horizontal' | 'vertical',
-  renderEmptyState: () => React.ReactNode
-}
-export const CardViewContext = React.createContext<CardViewContextValue>(null);
-
-export function useCardViewContext(): CardViewContextValue | null {
-  return useContext(CardViewContext);
-}