@react-spectrum/s2 1.1.0 → 1.2.0

package/src/Menu.tsx

@@ -34,21 +34,25 @@ import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
-import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
+import {createContext, forwardRef, JSX, ReactElement, ReactNode, useContext, useRef, useState} from 'react';
 import {divider} from './Divider';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes, PressEvent} from '@react-types/shared';
 import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';
-import {IconContext} from './Icon'; // chevron right removed??
-import {ImageContext} from './Image';
+import {IconContext} from './Icon';
+import {ImageContext} from './Image'; // chevron right removed??
+import InfoCircleIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 import {InPopoverContext, Popover, PopoverContext} from './Popover';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import LinkOutIcon from '../ui-icons/LinkOut';
 import {mergeStyles} from '../style/runtime';
 import {Placement, useLocale} from 'react-aria';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
-import {useGlobalListeners} from '@react-aria/utils';
+import {useGlobalListeners, useId} from '@react-aria/utils';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 // viewbox on LinkOut is super weird just because i copied the icon from designs...
 // need to strip id's from icons
@@ -317,6 +321,7 @@ let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
 
 let descriptor = style({
   gridArea: 'descriptor',
+  placeSelf: 'end',
   marginStart: 8,
   '--iconPrimary': {
     type: 'fill',
@@ -324,6 +329,19 @@ let descriptor = style({
   }
 });
 
+let descriptorIcon = style<{size: 'S' | 'M' | 'L' | 'XL'}>({
+  marginEnd: 0,
+  display: 'block',
+  size: {
+    size: {
+      S: 16,
+      M: 20,
+      L: 24,
+      XL: 26
+    }
+  }
+});
+
 let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({
   size: 'M',
   isSubmenu: false,
@@ -331,6 +349,7 @@ let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu
 });
 
 let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);
+let UnavailableContext = createContext(false);
 
 let wrappingDiv = style({
   display: 'flex',
@@ -459,6 +478,33 @@ const linkIconSize = {
   XL: 'XL'
 } as const;
 
+interface UnavailableIconWrapperProps {
+  direction: 'ltr' | 'rtl',
+  size: 'S' | 'M' | 'L' | 'XL',
+  id?: string
+}
+
+function UnavailableIconWrapper(props: UnavailableIconWrapperProps) {
+  let {direction, size, id} = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+
+  return (
+    <div slot="descriptor" className={mergeStyles(descriptor, style({marginBottom: fontRelative(-1)}))} id={id}>
+      <Provider values={[[IconContext, {slots: {icon: {styles: descriptorIcon({size})}}}]]}>
+        <InfoCircleIcon
+          aria-label={stringFormatter.format('menu.unavailable')}
+          className={style({
+            scaleX: {
+              direction: {
+                rtl: -1
+              }
+            }
+          })({direction})} />
+      </Provider>
+    </div>
+  );
+}
+
 export function MenuItem(props: MenuItemProps): ReactNode {
   let ref = useRef(null);
   let isLink = props.href != null;
@@ -466,9 +512,13 @@ export function MenuItem(props: MenuItemProps): ReactNode {
   let {size, hideLinkOutIcon} = useContext(InternalMenuContext);
   let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
   let {direction} = useLocale();
+  let isUnavailable = useContext(UnavailableContext);
+  let infoIconId = useId();
+
   return (
     <AriaMenuItem
       {...props}
+      aria-describedby={isUnavailable ? infoIconId : undefined}
       textValue={textValue}
       ref={ref}
       style={pressScale(ref, props.UNSAFE_style)}
@@ -518,17 +568,21 @@ export function MenuItem(props: MenuItemProps): ReactNode {
                 </div>
               )}
               {renderProps.hasSubmenu && (
-                <div slot="descriptor" className={descriptor}>
-                  <ChevronRightIcon
-                    size={size}
-                    className={style({
-                      scaleX: {
-                        direction: {
-                          rtl: -1
-                        }
-                      }
-                    })({direction})} />
-                </div>
+                isUnavailable
+                  ? <UnavailableIconWrapper direction={direction} size={size} id={infoIconId} />
+                  : (
+                    <div slot="descriptor" className={descriptor}>
+                      <ChevronRightIcon
+                        size={size}
+                        className={style({
+                          scaleX: {
+                            direction: {
+                              rtl: -1
+                            }
+                          }
+                        })({direction})} />
+                    </div>
+                  )
               )}
             </Provider>
           </>
@@ -611,7 +665,37 @@ function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
   );
 }
 
-export {MenuTrigger, SubmenuTrigger};
+export interface UnavailableMenuItemTriggerProps {
+  /**
+   * The contents of the UnavailableMenuItemTrigger. The first child should be a MenuItem and the second child be a ContextualHelpPopover.
+   */
+  children: ReactElement[],
+  /**
+   * Whether the menu item is currently unavailable.
+   * @default false
+   */
+  isUnavailable?: boolean
+}
+
+function UnavailableMenuItemTrigger(props: UnavailableMenuItemTriggerProps): JSX.Element {
+  let {isUnavailable = false, children} = props;
+  if (isUnavailable) {
+    return (
+      <UnavailableContext.Provider value={isUnavailable}>
+        <AriaSubmenuTrigger>
+          {children[0]}
+          <PopoverContext.Provider value={{hideArrow: true, offset: -2, crossOffset: -8, placement: 'end top'}}>
+            {children[1]}
+          </PopoverContext.Provider>
+        </AriaSubmenuTrigger>
+      </UnavailableContext.Provider>
+    );
+  }
+
+  return children[0] as JSX.Element;
+}
+
+export {MenuTrigger, SubmenuTrigger, UnavailableMenuItemTrigger};
 
 // This is purely so that storybook generates the types for both Menu and MenuTrigger
 interface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}

package/src/Picker.tsx

@@ -29,6 +29,7 @@ import {
   ListLayout,
   Provider,
   SectionProps,
+  SelectStateContext,
   SelectValue,
   Virtualizer
 } from 'react-aria-components';
@@ -50,6 +51,7 @@ import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
 import {control, controlBorderRadius, controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createHideableComponent} from '@react-aria/collections';
+import {createShadowTreeWalker, getOwnerDocument, isFocusable, useGlobalListeners, useSlotId} from '@react-aria/utils';
 import {
   Divider,
   listbox,
@@ -76,9 +78,8 @@ import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
-import {useGlobalListeners, useSlotId} from '@react-aria/utils';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useScale} from './utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -123,7 +124,13 @@ export interface PickerProps<T extends object, M extends SelectionMode = 'single
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
     menuWidth?: number,
     /** The current loading state of the Picker. */
-    loadingState?: LoadingState
+    loadingState?: LoadingState,
+    /**
+     * Custom renderer for the picker value. Allows one to provide a custom element to render selected items.
+     *
+     * @note The returned ReactNode should not have interactable elements as it will break accessibility.
+     */
+    renderValue?: (selectedItems: T[]) => ReactNode
 }
 
 interface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}
@@ -227,7 +234,8 @@ const valueStyles = style({
   },
   truncate: true,
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
+  height: '100%'
 });
 
 const iconStyles = style({
@@ -298,6 +306,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     placeholder = stringFormatter.format('picker.placeholder'),
     isQuiet,
     loadingState,
+    renderValue,
     onLoadMore,
     ...pickerProps
   } = props;
@@ -376,6 +385,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
             </FieldLabel>
             <PickerButton
               loadingState={loadingState}
+              renderValue={renderValue}
               isOpen={isOpen}
               isQuiet={isQuiet}
               isFocusVisible={isFocusVisible}
@@ -482,7 +492,14 @@ const avatarSize = {
   XL: 26
 } as const;
 
-interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>, Pick<PickerProps<T>, 'loadingState'> {
+// https://w3c.github.io/aria/#widget_roles
+let INTERACTIVE_ARIA_ROLES = new Set([
+  'application', 'button', 'checkbox', 'combobox', 'gridcell', 'link', 'menuitem',
+  'menuitemcheckbox', 'menuitemradio', 'option', 'radio', 'searchbox', 'separator',
+  'slider', 'spinbutton', 'switch', 'tab', 'textbox', 'treeitem'
+]);
+
+interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>, Pick<PickerProps<T>, 'loadingState' | 'renderValue'> {
   loadingCircle: ReactNode,
   buttonRef: RefObject<HTMLButtonElement | null>
 }
@@ -498,9 +515,40 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
     isDisabled,
     loadingState,
     loadingCircle,
-    buttonRef
+    buttonRef,
+    renderValue
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  let renderValueRef = useRef(null);
+
+  let state = useContext(SelectStateContext)!;
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production' || !renderValue) {
+      return;
+    }
+
+    if (!renderValueRef.current) {
+      return;
+    }
+
+    let doc = getOwnerDocument(renderValueRef.current);
+    let walker = createShadowTreeWalker(
+      doc,
+      renderValueRef.current,
+      NodeFilter.SHOW_ELEMENT,
+      {
+        acceptNode(node: Element) {
+          let role = node.getAttribute('role');
+          let interactive = isFocusable(node) || (role != null && INTERACTIVE_ARIA_ROLES.has(role));
+          return interactive ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+    let next = walker.nextNode();
+    if (next) {
+      console.warn('Picker\'s value should not have interactive children for accessibility.');
+    }
+  }, [state.selectedItems, renderValue]);
 
   // For mouse interactions, pickers open on press start. When the popover underlay appears
   // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
@@ -533,8 +581,20 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
         })}>
         {(renderProps) => (
           <>
-            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
+            <SelectValue
+              className={
+                valueStyles({isQuiet}) +
+                (renderValue ? '' : ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}'))
+              }>
               {({selectedItems, defaultChildren}) => {
+                const selectedValues = selectedItems.filter((item): item is T => item != null);
+                const defaultRenderedValue = selectedItems.length <= 1
+                  ? defaultChildren
+                  : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>;
+                const renderedValue = selectedItems.length > 0 && renderValue
+                  ? renderValue(selectedValues)
+                  : defaultRenderedValue;
+
                 return (
                   <Provider
                     values={[
@@ -579,10 +639,11 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
                       }],
                       [InsideSelectValueContext, true]
                     ]}>
-                    {selectedItems.length <= 1
-                      ? defaultChildren
-                      : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>
-                    }
+                    {renderValue ? (
+                      <div ref={renderValueRef} style={{display: 'contents'}}>
+                        {renderedValue}
+                      </div>
+                      ) : renderedValue}
                   </Provider>
                 );
               }}

package/src/TableView.tsx

@@ -17,10 +17,12 @@ import {
   ButtonContext,
   CellRenderProps,
   Collection,
+  CollectionRendererContext,
   ColumnRenderProps,
   ColumnResizer,
   ContextValue,
   DEFAULT_SLOT,
+  DefaultCollectionRenderer,
   Form,
   Key,
   OverlayTriggerStateContext,
@@ -59,7 +61,7 @@ import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg';
 import {ColumnSize} from '@react-types/table';
 import {CustomDialog, DialogContainer} from '..';
 import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared';
-import {getActiveElement, getOwnerDocument, nodeContains, useLayoutEffect, useObjectRef} from '@react-aria/utils';
+import {getActiveElement, getOwnerDocument, isFocusWithin, nodeContains, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -439,7 +441,9 @@ export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
   if (renderEmptyState != null && !isLoading) {
     emptyRender = (props: TableBodyRenderProps) => (
       <div className={centeredWrapper}>
-        {renderEmptyState(props)}
+        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
+          {renderEmptyState(props)}
+        </CollectionRendererContext.Provider>
       </div>
     );
   } else if (loadingState === 'loading') {
@@ -943,20 +947,13 @@ const commonCellStyles = {
   borderXWidth: 0,
   borderStyle: 'solid',
   position: 'relative',
-  color: {
-    default: 'gray-800',
-    forcedColors: 'ButtonText'
-  },
+  color: '--rowTextColor',
   outlineStyle: 'none',
   paddingX: 16 // table-edge-to-content
 } as const;
 
 const cell = style<CellRenderProps & S2TableProps & {isDivider: boolean}>({
   ...commonCellStyles,
-  color: {
-    default: baseColor('neutral-subdued'),
-    isSelected: baseColor('neutral')
-  },
   paddingY: centerPadding(),
   minHeight: {
     default: 40,
@@ -1301,7 +1298,7 @@ function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean,
             onOpenChange={setIsOpen}
             ref={popoverRef}
             shouldCloseOnInteractOutside={() => {
-              if (!nodeContains(popoverRef.current, document.activeElement)) {
+              if (!isFocusWithin(popoverRef.current)) {
                 return false;
               }
               formRef.current?.requestSubmit();
@@ -1393,6 +1390,16 @@ const rowBackgroundColor = {
   }
 } as const;
 
+const rowTextColor = {
+  default: baseColor('neutral-subdued'),
+  isSelected: baseColor('neutral'),
+  isDisabled: {
+    default: 'disabled',
+    forcedColors: 'GrayText'
+  },
+  forcedColors: 'ButtonText'
+} as const;
+
 const row = style<RowRenderProps & S2TableProps>({
   height: 'full',
   position: 'relative',
@@ -1402,6 +1409,10 @@ const row = style<RowRenderProps & S2TableProps>({
     type: 'backgroundColor',
     value: rowBackgroundColor
   },
+  '--rowTextColor': {
+    type: 'color',
+    value: rowTextColor
+  },
   '--rowFocusIndicatorColor': {
     type: 'outlineColor',
     value: {
@@ -1446,6 +1457,13 @@ const row = style<RowRenderProps & S2TableProps>({
   forcedColorAdjust: 'none'
 });
 
+const selectionCheckbox = style({
+  visibility: {
+    default: 'visible',
+    ':is([slot="selection"][data-disabled="true"])': 'hidden'
+  }
+});
+
 export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'isDisabled' | 'onAction' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>, LinkDOMProps {}
 
 /**
@@ -1472,7 +1490,7 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
         // The `spread` otherProps must be after className in Cell.
         // @ts-ignore
         <Cell isSticky className={checkboxCellStyle}>
-          <Checkbox slot="selection" />
+          <Checkbox slot="selection" styles={selectionCheckbox} />
         </Cell>
       )}
       <Collection items={columns} dependencies={[...dependencies, columns]}>

package/src/Toast.tsx

@@ -19,7 +19,7 @@ import Chevron from '../s2wf-icons/S2_Icon_ChevronDown_20_N.svg';
 import {CloseButton} from './CloseButton';
 import {createContext, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {DOMProps} from '@react-types/shared';
-import {filterDOMProps, isWebKit, useEvent} from '@react-aria/utils';
+import {filterDOMProps, getEventTarget, isWebKit, useEvent} from '@react-aria/utils';
 import {flushSync} from 'react-dom';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {FocusScope, useModalOverlay} from 'react-aria';
@@ -446,7 +446,7 @@ function SpectrumToastList({placement, align, reduceMotion}) {
   let toastListRef = useRef(null);
   useEvent(toastListRef, 'click', (e) => {
     // Have to check if this is a button because stopPropagation in react events doesn't affect native events.
-    if (!isExpanded && !(e.target as Element)?.closest('button')) {
+    if (!isExpanded && !(getEventTarget(e) as Element)?.closest('button')) {
       toggleExpanded();
     }
   });

package/src/TreeView.tsx

@@ -41,13 +41,16 @@ import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';
 import {Text, TextContext} from './Content';
+import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 import {useScale} from './utils';
 
 interface S2TreeProps {
   /** Handler that is called when a user performs an action on a row. */
-  onAction?: (key: Key) => void
+  onAction?: (key: Key) => void,
+  /** Provides the ActionBar to display when items are selected in the TreeView. */
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
 export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps {
@@ -71,6 +74,16 @@ interface TreeRendererContextValue {
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
 
+const treeViewWrapper = style({
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex',
+  isolation: 'isolate',
+  disableTapHighlight: true,
+  position: 'relative',
+  overflow: 'clip'
+}, getAllowedOverrides({height: true}));
+
 // TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
 // scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
@@ -94,7 +107,7 @@ const tree = style({
     type: 'width',
     value: 16
   }
-}, getAllowedOverrides({height: true}));
+});
 
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
@@ -109,8 +122,11 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
   }
 
   let domRef = useDOMRef(ref);
+  let scrollRef = useRef<HTMLElement | null>(null);
 
-  return (
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
+  let treeContent = (
     <Virtualizer
       layout={ListLayout}
       layoutOptions={{
@@ -119,15 +135,36 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
       <TreeRendererContext.Provider value={{renderer}}>
         <Tree
           {...props}
-          style={UNSAFE_style}
-          className={renderProps => (UNSAFE_className ?? '') + tree({...renderProps}, props.styles)}
+          style={{
+            ...(!props.renderActionBar ? UNSAFE_style : {}),
+            paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
+            scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
+          }}
+          className={renderProps => (!props.renderActionBar ? (UNSAFE_className ?? '') : '') + tree({...renderProps})}
           selectionBehavior="toggle"
-          ref={domRef}>
+          selectedKeys={selectedKeys}
+          defaultSelectedKeys={undefined}
+          onSelectionChange={onSelectionChange}
+          ref={props.renderActionBar ? (scrollRef as any) : domRef}>
           {props.children}
         </Tree>
       </TreeRendererContext.Provider>
     </Virtualizer>
   );
+
+  if (props.renderActionBar) {
+    return (
+      <div
+        ref={domRef}
+        className={(UNSAFE_className ?? '') + treeViewWrapper(null, props.styles)}
+        style={UNSAFE_style}>
+        {treeContent}
+        {actionBar}
+      </div>
+    );
+  }
+
+  return treeContent;
 });
 
 const rowBackgroundColor = {

package/src/index.ts

@@ -37,7 +37,7 @@ export {ColorSwatch, ColorSwatchContext} from './ColorSwatch';
 export {ColorSwatchPicker, ColorSwatchPickerContext} from './ColorSwatchPicker';
 export {ColorWheel, ColorWheelContext} from './ColorWheel';
 export {ComboBox, ComboBoxItem, ComboBoxSection, ComboBoxContext} from './ComboBox';
-export {ContextualHelp, ContextualHelpContext} from './ContextualHelp';
+export {ContextualHelp, ContextualHelpContext, ContextualHelpPopover} from './ContextualHelp';
 export {DateField, DateFieldContext} from './DateField';
 export {DatePicker, DatePickerContext} from './DatePicker';
 export {DateRangePicker, DateRangePickerContext} from './DateRangePicker';
@@ -57,7 +57,8 @@ export {Image, ImageContext} from './Image';
 export {ImageCoordinator} from './ImageCoordinator';
 export {InlineAlert, InlineAlertContext} from './InlineAlert';
 export {Link, LinkContext} from './Link';
-export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, MenuContext} from './Menu';
+export {ListView, ListViewContext, ListViewItem} from './ListView';
+export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, UnavailableMenuItemTrigger, MenuContext} from './Menu';
 export {Meter, MeterContext} from './Meter';
 export {NotificationBadge, NotificationBadgeContext} from './NotificationBadge';
 export {NumberField, NumberFieldContext} from './NumberField';
@@ -119,6 +120,7 @@ export type {ColorSwatchProps} from './ColorSwatch';
 export type {ColorSwatchPickerProps} from './ColorSwatchPicker';
 export type {ColorWheelProps} from './ColorWheel';
 export type {ComboBoxProps, ComboBoxItemProps, ComboBoxSectionProps} from './ComboBox';
+export type {ContextualHelpProps, ContextualHelpStyleProps, ContextualHelpPopoverProps} from './ContextualHelp';
 export type {DateFieldProps} from './DateField';
 export type {DatePickerProps} from './DatePicker';
 export type {DateRangePickerProps} from './DateRangePicker';
@@ -136,7 +138,8 @@ export type {InlineAlertProps} from './InlineAlert';
 export type {ImageProps} from './Image';
 export type {ImageCoordinatorProps} from './ImageCoordinator';
 export type {LinkProps} from './Link';
-export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps} from './Menu';
+export type {ListViewProps, ListViewItemProps} from './ListView';
+export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps} from './Menu';
 export type {MeterProps} from './Meter';
 export type {NotificationBadgeProps} from './NotificationBadge';
 export type {PickerProps, PickerItemProps, PickerSectionProps} from './Picker';