@react-spectrum/listbox 3.13.3 → 3.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/listbox",
-  "version": "3.13.3",
+  "version": "3.14.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,23 +36,23 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.18.4",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.4",
-    "@react-aria/listbox": "^3.13.5",
-    "@react-aria/utils": "^3.25.3",
-    "@react-aria/virtualizer": "^4.0.4",
-    "@react-spectrum/layout": "^3.6.9",
-    "@react-spectrum/progress": "^3.7.10",
-    "@react-spectrum/text": "^3.5.9",
-    "@react-spectrum/utils": "^3.11.11",
-    "@react-stately/collections": "^3.11.0",
-    "@react-stately/layout": "^4.0.3",
-    "@react-stately/list": "^3.11.0",
-    "@react-stately/virtualizer": "^4.1.0",
-    "@react-types/listbox": "^3.5.2",
-    "@react-types/shared": "^3.25.0",
-    "@spectrum-icons/ui": "^3.6.10",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/listbox": "^3.14.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-aria/virtualizer": "^4.1.1",
+    "@react-spectrum/layout": "^3.6.11",
+    "@react-spectrum/progress": "^3.7.12",
+    "@react-spectrum/text": "^3.5.11",
+    "@react-spectrum/utils": "^3.12.1",
+    "@react-stately/collections": "^3.12.1",
+    "@react-stately/layout": "^4.1.1",
+    "@react-stately/list": "^3.11.2",
+    "@react-stately/virtualizer": "^4.2.1",
+    "@react-types/listbox": "^3.5.4",
+    "@react-types/shared": "^3.27.0",
+    "@spectrum-icons/ui": "^3.6.12",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -60,11 +60,11 @@
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.2.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8e0a28d188cdbdbd2b32296fa034b1b02ddde229"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

package/src/ListBox.tsx

@@ -17,7 +17,14 @@ import {SpectrumListBoxProps} from '@react-types/listbox';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useListState} from '@react-stately/list';
 
-function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {
+// 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);
@@ -29,14 +36,4 @@ function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<H
       state={state}
       layout={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
-
-
-/**
- * A list of options that can allow selection of one or more.
- */
-const _ListBox = React.forwardRef(ListBox) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-export {_ListBox as ListBox};
+}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;

package/src/ListBoxBase.tsx

@@ -21,9 +21,9 @@ import {ListBoxLayout} from './ListBoxLayout';
 import {ListBoxOption} from './ListBoxOption';
 import {ListBoxSection} from './ListBoxSection';
 import {ListState} from '@react-stately/list';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useObjectRef} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';
+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';
@@ -62,28 +62,31 @@ export function useListBoxLayout<T>(): ListBoxLayout<T> {
   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 */
-function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElement | null>) {
-  let {layout, state, shouldFocusOnHover, shouldUseVirtualFocus, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;
+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, ref);
+  }, 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>, ReactElement>;
-  let renderWrapper = useCallback((parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {
+  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}
+          item={reusableView.content!}
+          layoutInfo={reusableView.layoutInfo!}
           virtualizer={reusableView.virtualizer}
-          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo}>
+          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>
           {renderChildren(children.filter(c => c.viewType === 'item'))}
         </ListBoxSection>
       );
@@ -92,7 +95,7 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
     return (
       <VirtualizerItem
         key={reusableView.key}
-        layoutInfo={reusableView.layoutInfo}
+        layoutInfo={reusableView.layoutInfo!}
         virtualizer={reusableView.virtualizer}
         parent={parent?.layoutInfo}>
         {reusableView.rendered}
@@ -109,7 +112,7 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
         <Virtualizer
           {...styleProps}
           {...mergeProps(listBoxProps, domProps)}
-          ref={ref}
+          ref={objectRef}
           persistedKeys={persistedKeys}
           autoFocus={!!props.autoFocus || undefined}
           scrollDirection="vertical"
@@ -129,28 +132,25 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
           isLoading={isLoading}
           onLoadMore={props.onLoadMore}
           onScroll={onScroll}>
-          {useCallback((type, item: Node<T>) => {
+          {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>
   );
-}
-
-// 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
-const _ListBoxBase = React.forwardRef(ListBoxBase) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
-export {_ListBoxBase as ListBoxBase};
+}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
 
 function LoadingState() {
-  let {state} = useContext(ListBoxContext);
+  let {state} = useContext(ListBoxContext)!;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');
   return (
     // aria-selected isn't needed here since this option is not selectable.
@@ -166,7 +166,7 @@ function LoadingState() {
 }
 
 function EmptyState() {
-  let {renderEmptyState} = useContext(ListBoxContext);
+  let {renderEmptyState} = useContext(ListBoxContext)!;
   let emptyState = renderEmptyState ? renderEmptyState() : null;
   if (emptyState == null) {
     return null;

package/src/ListBoxContext.ts

@@ -20,4 +20,4 @@ interface ListBoxContextValue {
   shouldUseVirtualFocus: boolean
 }
 
-export const ListBoxContext = React.createContext<ListBoxContextValue>(null);
+export const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);

package/src/ListBoxLayout.ts

@@ -32,7 +32,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
     let y = this.contentSize.height;
 
     if (this.isLoading) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, 40);
+      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);
       let loader = new LayoutInfo('loader', 'loader', rect);
       let node = {
         layoutInfo: loader,
@@ -44,7 +44,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
     }
 
     if (nodes.length === 0) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.placeholderHeight ?? this.virtualizer.visibleRect.height);
+      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,
@@ -67,6 +67,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
       parentKey: node.key,
       value: null,
       level: node.level,
+      index: node.index,
       hasChildNodes: false,
       childNodes: [],
       rendered: node.rendered,
@@ -81,7 +82,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
     y += header.layoutInfo.rect.height;
 
     let section = super.buildSection(node, x, y);
-    section.children.unshift(header);
+    section.children!.unshift(header);
     return section;
   }
 }

package/src/ListBoxOption.tsx

@@ -36,7 +36,7 @@ export function ListBoxOption<T>(props: OptionProps<T>) {
     key
   } = item;
   let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext);
+  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext)!;
 
   let ref = useRef<any>(undefined);
   let {optionProps, labelProps, descriptionProps, isSelected, isDisabled, isFocused} = useOption(

package/src/ListBoxSection.tsx

@@ -20,8 +20,9 @@ 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'> {
-  headerLayoutInfo: LayoutInfo,
+interface ListBoxSectionProps<T> extends Omit<VirtualizerItemOptions, 'ref' | 'layoutInfo'> {
+  layoutInfo: LayoutInfo,
+  headerLayoutInfo: LayoutInfo | null,
   item: Node<T>,
   children?: ReactNode
 }
@@ -34,7 +35,7 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
     'aria-label': item['aria-label']
   });
 
-  let headerRef = useRef(undefined);
+  let headerRef = useRef<HTMLDivElement | null>(null);
   useVirtualizerItem({
     layoutInfo: headerLayoutInfo,
     virtualizer,
@@ -42,7 +43,7 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
   });
 
   let {direction} = useLocale();
-  let {state} = useContext(ListBoxContext);
+  let {state} = useContext(ListBoxContext)!;
 
   return (
     <Fragment>

package/dist/vars.487ba452.css.map

@@ -1 +0,0 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;AAmBE;;;;;AAMA;;;;AAKF;;;;;;;AAWA;;;;;;;;;;;;;AAgBE;;;;AAIA;;;;AAIA;;;;AAKE;;;;AAKF;;;;AAMF;;;;;;AAMA;;;;;;AAMA;;;;;;AAOA;;;;;;;;;AAaA;;;;;;;;;;;;AAcE;;;;AAGA;;;;AAKF;;;;;AAMA;;;;;;;;;;AAgBE;;;;AAOF;;;;;;AAOA;;;;;;AAOA;;;;;;AAOA;;;;;;AAMA;;;;;;;;AAUA;;;;;;;;AASA;;;;AAGE;;;;;;AAKE;;;;AAKF;;;;;;;;AAOE;;;;;;;;AAQA;;;;;AAIE;;;;;;;;;;AAyBN;;;;;;;AAWA;;;;;AAKA;;;;AAIA;;;;;AAIE;;;;;;AAOA;;;;;AASE;;;;AAKF;;;;AAKA;;;;;;;AACE;;;;AAUJ;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAQA;;;;AAIA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;;;;AAKE;;;;AAAA;;;;AAKF;EACE;;;;;EAIA;;;;;;;;;;;;;;;;;;;EAkBE;;;;EAGA;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF","sources":["packages/@adobe/spectrum-css-temp/components/menu/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.487ba452.css.map"}