@react-spectrum/listbox 3.15.11 → 3.16.0

package/src/ListBox.tsx

@@ -1,39 +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 {DOMRef} from '@react-types/shared';
-import {ListBoxBase, useListBoxLayout} from './ListBoxBase';
-import React, {ReactElement} from 'react';
-import {SpectrumListBoxProps} from '@react-types/listbox';
-import {useDOMRef} from '@react-spectrum/utils';
-import {useListState} from '@react-stately/list';
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-
-
-/**
- * A list of options that can allow selection of one or more.
- */
-export const ListBox = React.forwardRef(function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let state = useListState(props);
-  let layout = useListBoxLayout();
-  let domRef = useDOMRef(ref);
-
-  return (
-    <ListBoxBase
-      {...props}
-      ref={domRef}
-      state={state}
-      layout={layout} />
-  );
-}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;

package/src/ListBoxBase.tsx

@@ -1,183 +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 {AriaLabelingProps, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared';
-import {AriaListBoxOptions, useListBox} from '@react-aria/listbox';
-import {classNames, useStyleProps} from '@react-spectrum/utils';
-import {FocusScope} from '@react-aria/focus';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {ListBoxContext} from './ListBoxContext';
-import {ListBoxLayout} from './ListBoxLayout';
-import {ListBoxOption} from './ListBoxOption';
-import {ListBoxSection} from './ListBoxSection';
-import {ListState} from '@react-stately/list';
-import {mergeProps, useObjectRef} from '@react-aria/utils';
-import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';
-import {ReusableView} from '@react-stately/virtualizer';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useProvider} from '@react-spectrum/provider';
-import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';
-
-interface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {
-  layout: ListBoxLayout<T>,
-  state: ListState<T>,
-  autoFocus?: boolean | FocusStrategy,
-  shouldFocusWrap?: boolean,
-  shouldSelectOnPressUp?: boolean,
-  focusOnPointerEnter?: boolean,
-  domProps?: HTMLAttributes<HTMLElement>,
-  disallowEmptySelection?: boolean,
-  shouldUseVirtualFocus?: boolean,
-  isLoading?: boolean,
-  showLoadingSpinner?: boolean,
-  onLoadMore?: () => void,
-  renderEmptyState?: () => ReactNode,
-  onScroll?: () => void
-}
-
-/** @private */
-export function useListBoxLayout<T>(): ListBoxLayout<T> {
-  let {scale} = useProvider();
-  let layout = useMemo(() =>
-    new ListBoxLayout<T>({
-      estimatedRowHeight: scale === 'large' ? 48 : 32,
-      estimatedHeadingHeight: scale === 'large' ? 33 : 26,
-      paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA
-      placeholderHeight: scale === 'large' ? 48 : 32
-    })
-  , [scale]);
-
-  return layout;
-}
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-/** @private */
-export const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {
-  let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;
-  let objectRef = useObjectRef(ref);
-  let {listBoxProps} = useListBox({
-    ...props,
-    layoutDelegate: layout,
-    isVirtualized: true
-  }, state, objectRef);
-  let {styleProps} = useStyleProps(props);
-
-  // This overrides collection view's renderWrapper to support hierarchy of items in sections.
-  // The header is extracted from the children so it can receive ARIA labeling properties.
-  type View = ReusableView<Node<T>, ReactNode>;
-  let renderWrapper = useCallback((parent: View | null, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {
-    if (reusableView.viewType === 'section') {
-      return (
-        <ListBoxSection
-          key={reusableView.key}
-          item={reusableView.content!}
-          layoutInfo={reusableView.layoutInfo!}
-          virtualizer={reusableView.virtualizer}
-          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>
-          {renderChildren(children.filter(c => c.viewType === 'item'))}
-        </ListBoxSection>
-      );
-    }
-
-    return (
-      <VirtualizerItem
-        key={reusableView.key}
-        layoutInfo={reusableView.layoutInfo!}
-        virtualizer={reusableView.virtualizer}
-        parent={parent?.layoutInfo}>
-        {reusableView.rendered}
-      </VirtualizerItem>
-    );
-  }, []);
-
-  let focusedKey = state.selectionManager.focusedKey;
-  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
-
-  return (
-    <ListBoxContext.Provider value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>
-      <FocusScope>
-        <Virtualizer
-          {...styleProps}
-          {...mergeProps(listBoxProps, domProps)}
-          ref={objectRef}
-          persistedKeys={persistedKeys}
-          autoFocus={!!props.autoFocus || undefined}
-          scrollDirection="vertical"
-          className={
-            classNames(
-              styles,
-              'spectrum-Menu',
-              styleProps.className
-            )
-          }
-          layout={layout}
-          layoutOptions={useMemo(() => ({
-            isLoading: showLoadingSpinner
-          }), [showLoadingSpinner])}
-          collection={state.collection}
-          renderWrapper={renderWrapper}
-          isLoading={isLoading}
-          onLoadMore={props.onLoadMore}
-          onScroll={onScroll}>
-          {useCallback((type, item: Node<T>): ReactNode => {
-            if (type === 'item') {
-              return <ListBoxOption item={item} />;
-            } else if (type === 'loader') {
-              return <LoadingState />;
-            } else if (type === 'placeholder') {
-              return <EmptyState />;
-            } else {
-              return null;
-            }
-          }, [])}
-        </Virtualizer>
-      </FocusScope>
-    </ListBoxContext.Provider>
-  );
-}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
-
-function LoadingState() {
-  let {state} = useContext(ListBoxContext)!;
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');
-  return (
-    // aria-selected isn't needed here since this option is not selectable.
-    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-    <div role="option" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>
-      <ProgressCircle
-        isIndeterminate
-        size="S"
-        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')}
-        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />
-    </div>
-  );
-}
-
-function EmptyState() {
-  let {renderEmptyState} = useContext(ListBoxContext)!;
-  let emptyState = renderEmptyState ? renderEmptyState() : null;
-  if (emptyState == null) {
-    return null;
-  }
-
-  return (
-    <div
-      // aria-selected isn't needed here since this option is not selectable.
-      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-      role="option">
-      {emptyState}
-    </div>
-  );
-}

package/src/ListBoxContext.ts

@@ -1,23 +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 {ListState} from '@react-stately/list';
-import React, {ReactNode} from 'react';
-
-interface ListBoxContextValue {
-  state: ListState<unknown>,
-  renderEmptyState?: () => ReactNode,
-  shouldFocusOnHover: boolean,
-  shouldUseVirtualFocus: boolean
-}
-
-export const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);

package/src/ListBoxLayout.ts

@@ -1,88 +0,0 @@
-import {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';
-import {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout';
-import {Node} from '@react-types/shared';
-
-interface ListBoxLayoutProps extends ListLayoutOptions {
-  isLoading?: boolean
-}
-
-interface ListBoxLayoutOptions extends ListLayoutOptions {
-  placeholderHeight: number,
-  paddingY: number
-}
-
-export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
-  private isLoading: boolean = false;
-  private placeholderHeight: number;
-  private paddingY: number;
-
-  constructor(opts: ListBoxLayoutOptions) {
-    super(opts);
-    this.placeholderHeight = opts.placeholderHeight;
-    this.paddingY = opts.paddingY;
-  }
-
-  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {
-    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
-    super.update(invalidationContext);
-  }
-
-  protected buildCollection(): LayoutNode[] {
-    let nodes = super.buildCollection(this.paddingY);
-    let y = this.contentSize.height;
-
-    if (this.isLoading) {
-      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      let node = {
-        layoutInfo: loader,
-        validRect: loader.rect
-      };
-      nodes.push(node);
-      this.layoutNodes.set(loader.key, node);
-      y = loader.rect.maxY;
-    }
-
-    if (nodes.length === 0) {
-      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, this.placeholderHeight ?? this.virtualizer!.visibleRect.height);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      let node = {
-        layoutInfo: placeholder,
-        validRect: placeholder.rect
-      };
-      nodes.push(node);
-      this.layoutNodes.set(placeholder.key, node);
-      y = placeholder.rect.maxY;
-    }
-
-    this.contentSize.height = y + this.paddingY;
-    return nodes;
-  }
-
-  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
-    // Synthesize a collection node for the header.
-    let headerNode = {
-      type: 'header',
-      key: node.key + ':header',
-      parentKey: node.key,
-      value: null,
-      level: node.level,
-      index: node.index,
-      hasChildNodes: false,
-      childNodes: [],
-      rendered: node.rendered,
-      textValue: node.textValue
-    };
-
-    // Build layout node for it and adjust y offset of section children.
-    let header = this.buildSectionHeader(headerNode, x, y);
-    header.node = headerNode;
-    header.layoutInfo.parentKey = node.key;
-    this.layoutNodes.set(headerNode.key, header);
-    y += header.layoutInfo.rect.height;
-
-    let section = super.buildSection(node, x, y);
-    section.children!.unshift(header);
-    return section;
-  }
-}

package/src/ListBoxOption.tsx

@@ -1,113 +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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
-import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
-import {FocusRing} from '@react-aria/focus';
-import {Grid} from '@react-spectrum/layout';
-import {isFocusVisible, useHover} from '@react-aria/interactions';
-import {ListBoxContext} from './ListBoxContext';
-import {mergeProps} from '@react-aria/utils';
-import {Node} from '@react-types/shared';
-import React, {JSX, useContext, useRef} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {Text} from '@react-spectrum/text';
-import {useOption} from '@react-aria/listbox';
-
-interface OptionProps<T> {
-  item: Node<T>
-}
-
-/** @private */
-export function ListBoxOption<T>(props: OptionProps<T>): JSX.Element {
-  let {item} = props;
-
-  let {
-    rendered,
-    key
-  } = item;
-  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext)!;
-
-  let ref = useRef<any>(undefined);
-  let {optionProps, labelProps, descriptionProps, isSelected, isDisabled, isFocused} = useOption(
-    {
-      'aria-label': item['aria-label'],
-      key,
-      isVirtualized: true
-    },
-    state,
-    ref
-  );
-  let {hoverProps, isHovered} = useHover({
-    ...props,
-    isDisabled
-  });
-
-  let contents = typeof rendered === 'string'
-    ? <Text>{rendered}</Text>
-    : rendered;
-
-  let isKeyboardModality = isFocusVisible();
-
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
-      <ElementType
-        {...mergeProps(optionProps, shouldFocusOnHover ? {} : hoverProps)}
-        ref={ref}
-        className={classNames(
-          styles,
-          'spectrum-Menu-item',
-          {
-            // If using virtual focus, apply focused styles to the item when the user is interacting with keyboard modality
-            'is-focused': shouldUseVirtualFocus && isFocused && isKeyboardModality,
-            'is-disabled': isDisabled,
-            'is-selected': isSelected,
-            'is-selectable': state.selectionManager.selectionMode !== 'none',
-            // When shouldFocusOnHover is false, apply hover styles both when hovered with the mouse.
-            // Otherwise, apply hover styles when focused using non-keyboard modality.
-            'is-hovered': (isHovered && !shouldFocusOnHover) || (isFocused && !isKeyboardModality)
-          }
-        )}>
-        <Grid
-          UNSAFE_className={
-            classNames(
-              styles,
-              'spectrum-Menu-itemGrid'
-            )
-          }>
-          <ClearSlots>
-            <SlotProvider
-              slots={{
-                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},
-                icon: {size: 'S', UNSAFE_className: styles['spectrum-Menu-icon']},
-                avatar: {size: 'avatar-size-100', UNSAFE_className: styles['spectrum-Menu-avatar']},
-                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps}
-              }}>
-              {contents}
-              {isSelected &&
-                <CheckmarkMedium
-                  slot="checkmark"
-                  UNSAFE_className={
-                    classNames(
-                      styles,
-                      'spectrum-Menu-checkmark'
-                    )
-                  } />
-              }
-            </SlotProvider>
-          </ClearSlots>
-        </Grid>
-      </ElementType>
-    </FocusRing>
-  );
-}

package/src/ListBoxSection.tsx

@@ -1,85 +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 {classNames} from '@react-spectrum/utils';
-import {LayoutInfo} from '@react-stately/virtualizer';
-import {layoutInfoToStyle, useVirtualizerItem, VirtualizerItemOptions} from '@react-aria/virtualizer';
-import {ListBoxContext} from './ListBoxContext';
-import {Node} from '@react-types/shared';
-import React, {Fragment, JSX, ReactNode, useContext, useRef} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {useListBoxSection} from '@react-aria/listbox';
-import {useLocale} from '@react-aria/i18n';
-
-interface ListBoxSectionProps<T> extends Omit<VirtualizerItemOptions, 'ref' | 'layoutInfo'> {
-  layoutInfo: LayoutInfo,
-  headerLayoutInfo: LayoutInfo | null,
-  item: Node<T>,
-  children?: ReactNode
-}
-
-/** @private */
-export function ListBoxSection<T>(props: ListBoxSectionProps<T>): JSX.Element {
-  let {children, layoutInfo, headerLayoutInfo, virtualizer, item} = props;
-  let {headingProps, groupProps} = useListBoxSection({
-    heading: item.rendered,
-    'aria-label': item['aria-label']
-  });
-
-  let headerRef = useRef<HTMLDivElement | null>(null);
-  useVirtualizerItem({
-    layoutInfo: headerLayoutInfo,
-    virtualizer,
-    ref: headerRef
-  });
-
-  let {direction} = useLocale();
-  let {state} = useContext(ListBoxContext)!;
-
-  return (
-    <Fragment>
-      {headerLayoutInfo && <div role="presentation" ref={headerRef} style={layoutInfoToStyle(headerLayoutInfo, direction)}>
-        {item.key !== state.collection.getFirstKey() &&
-          <div
-            role="presentation"
-            className={classNames(
-              styles,
-              'spectrum-Menu-divider'
-            )} />
-        }
-        {item.rendered &&
-          <div
-            {...headingProps}
-            className={
-              classNames(
-                styles,
-                'spectrum-Menu-sectionHeading'
-              )
-            }>
-            {item.rendered}
-          </div>
-        }
-      </div>}
-      <div
-        {...groupProps}
-        style={layoutInfoToStyle(layoutInfo, direction)}
-        className={
-          classNames(
-            styles,
-            'spectrum-Menu'
-          )
-        }>
-        {children}
-      </div>
-    </Fragment>
-  );
-}