@react-spectrum/s2 0.11.1 → 0.12.0

package/src/SelectBoxGroup.tsx

@@ -26,6 +26,7 @@ import {IllustrationContext} from '../src/Icon';
 import {pressScale} from './pressScale';
 import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef} from 'react';
 import {TextContext} from './Content';
+import {useFocusVisible} from 'react-aria';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'shouldSelectOnPressUp' | 'shouldFocusWrap' | 'style' | 'className'> {
@@ -293,7 +294,7 @@ const gridStyles = style<{orientation?: Orientation}>({
  */
 export function SelectBox(props: SelectBoxProps): ReactNode {
   let {children, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;
-  
+
   let {
     orientation = 'vertical',
     isDisabled: groupDisabled = false
@@ -301,6 +302,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
 
   const isDisabled = individualDisabled || groupDisabled;
   const ref = useRef<HTMLDivElement>(null);
+  let {isFocusVisible} = useFocusVisible();
 
   return (
     <ListBoxItem
@@ -308,6 +310,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
       ref={ref}
       className={renderProps => (UNSAFE_className || '') + selectBoxStyles({
         ...renderProps,
+        isFocusVisible: isFocusVisible && renderProps.isFocused,
         orientation
       }, styles)}
       style={pressScale(ref, UNSAFE_style)}
@@ -315,7 +318,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
       {({isSelected, isDisabled, isHovered}) => {
         return (
           <>
-            <div 
+            <div
               className={style({
                 position: 'absolute',
                 top: 8,
@@ -330,8 +333,8 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
                     isDisabled,
                     size: 'M'
                   } as any)}>
-                  <Checkmark 
-                    size="S" 
+                  <Checkmark
+                    size="S"
                     className={iconStyles} />
                 </div>
               )}
@@ -382,27 +385,22 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
     ...otherProps
   } = props;
 
-  const selectBoxContextValue = useMemo(
-    () => {
-      const contextValue = {
-        orientation,
-        isDisabled
-      };
-      return contextValue;
-    },
-    [orientation, isDisabled]
-  );
+  const selectBoxContextValue = useMemo(() => ({
+    orientation,
+    isDisabled
+  }), [orientation, isDisabled]);
 
   return (
-    <ListBox
-      selectionMode={selectionMode}
-      layout="grid"
-      className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}
-      style={UNSAFE_style}
-      {...otherProps}>
-      <SelectBoxContext.Provider value={selectBoxContextValue}>
+    <SelectBoxContext.Provider value={selectBoxContextValue}>
+      <ListBox
+        selectionMode={selectionMode}
+        layout="grid"
+        orientation={orientation}
+        className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}
+        style={UNSAFE_style}
+        {...otherProps}>
         {children}
-      </SelectBoxContext.Provider>
-    </ListBox>
+      </ListBox>
+    </SelectBoxContext.Provider>
   );
 });

package/src/TableView.tsx

@@ -55,7 +55,6 @@ import {IconContext} from './Icon';
 import intlMessages from '../intl/*.json';
 import {LayoutNode} from '@react-stately/layout';
 import {Menu, MenuItem, MenuSection, MenuTrigger} from './Menu';
-import {mergeStyles} from '../style/runtime';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
@@ -125,10 +124,12 @@ const tableWrapper = style({
   position: 'relative',
   // Clip ActionBar animation.
   overflow: 'clip'
-});
+}, getAllowedOverrides({height: true}));
 
 const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boolean}>({
   width: 'full',
+  height: 'full',
+  boxSizing: 'border-box',
   userSelect: 'none',
   minHeight: 0,
   minWidth: 0,
@@ -163,7 +164,7 @@ const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boo
   scrollPaddingStart: {
     isCheckboxSelection: 40
   }
-}, getAllowedOverrides({height: true}));
+});
 
 // component-height-100
 const DEFAULT_HEADER_HEIGHT = {
@@ -320,7 +321,7 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
       onResize={propsOnResize}
       onResizeEnd={onResizeEnd}
       onResizeStart={onResizeStart}
-      className={(UNSAFE_className || '') + mergeStyles(tableWrapper, styles)}
+      className={(UNSAFE_className || '') + tableWrapper(null, styles)}
       style={UNSAFE_style}>
       <Virtualizer
         layout={S2TableLayout}
@@ -461,7 +462,7 @@ const cellFocus = {
 } as const;
 
 function CellFocusRing() {
-  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />;
+  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0, pointerEvents: 'none'})({isFocusVisible: true})} />;
 }
 
 const columnStyles = style({
@@ -1035,8 +1036,8 @@ export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLD
       {...otherProps}>
       {({isFocusVisible}) => (
         <>
-          {isFocusVisible && <CellFocusRing />}
           <span className={cellContent({...tableVisualOptions, isSticky, align: align || 'start'})}>{children}</span>
+          {isFocusVisible && <CellFocusRing />}
         </>
       )}
     </RACCell>

package/src/Tabs.tsx

@@ -22,6 +22,7 @@ import {
   Tab as RACTab,
   TabList as RACTabList,
   Tabs as RACTabs,
+  SelectionIndicator,
   TabListStateContext,
   TabRenderProps
 } from 'react-aria-components';
@@ -36,7 +37,7 @@ import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResize
 import {Picker, PickerItem} from './TabsPicker';
 import {Text, TextContext} from './Content';
 import {useControlledState} from '@react-stately/utils';
-import {useDOMRef, useMediaQuery} from '@react-spectrum/utils';
+import {useDOMRef} from '@react-spectrum/utils';
 import {useHasTabbableChild} from '@react-aria/focus';
 import {useLocale} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -79,7 +80,6 @@ export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'sty
 export const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
 const InternalTabsContext = createContext<Partial<TabsProps> & {
   tablistRef?: RefObject<HTMLDivElement | null>,
-  prevRef?: RefObject<DOMRect | null>,
   selectedKey?: Key | null
 }>({});
 
@@ -133,14 +133,6 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
   }
 
   let tablistRef = useRef<HTMLDivElement | null>(null);
-  let prevRef = useRef<DOMRect | null>(null);
-
-  let onChange = useEffectEvent((val: Key) => {
-    if (tablistRef.current) {
-      prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;
-    }
-    setValue(val);
-  });
 
   return (
     <Provider
@@ -152,8 +144,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           disabledKeys,
           selectedKey: value,
           tablistRef,
-          prevRef,
-          onSelectionChange: onChange,
+          onSelectionChange: setValue,
           labelBehavior,
           'aria-label': props['aria-label'],
           'aria-labelledby': props['aria-labelledby']
@@ -164,7 +155,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           <CollapsingTabs
             {...props}
             selectedKey={value}
-            onSelectionChange={onChange}
+            onSelectionChange={setValue}
             collection={collection}
             containerRef={domRef} />
         )}
@@ -294,6 +285,13 @@ const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}
       vertical: '[2px]'
     }
   },
+  contain: 'strict',
+  transition: {
+    default: '[translate,width,height]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  },
+  transitionDuration: 200,
+  transitionTimingFunction: 'out',
   bottom: {
     default: 0
   },
@@ -353,6 +351,7 @@ const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavi
   alignItems: 'center',
   position: 'relative',
   cursor: 'default',
+  textDecoration: 'none',
   flexShrink: 0,
   transition: 'default',
   paddingX: {
@@ -373,7 +372,7 @@ const icon = style({
 });
 
 export function Tab(props: TabProps): ReactNode {
-  let {density, orientation, labelBehavior, prevRef} = useContext(InternalTabsContext) ?? {};
+  let {density, orientation, labelBehavior} = useContext(InternalTabsContext) ?? {};
 
   let contentId = useId();
   let ariaLabelledBy = props['aria-labelledby'] || '';
@@ -389,7 +388,6 @@ export function Tab(props: TabProps): ReactNode {
       {({
           // @ts-ignore
           isMenu,
-          isSelected,
           isDisabled
         }) => {
         if (isMenu) {
@@ -416,10 +414,8 @@ export function Tab(props: TabProps): ReactNode {
                 }]
               ]}>
               <TabInner
-                isSelected={isSelected}
                 orientation={orientation!}
-                isDisabled={isDisabled}
-                prevRef={prevRef}>
+                isDisabled={isDisabled}>
                 {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
               </TabInner>
             </Provider>
@@ -430,53 +426,17 @@ export function Tab(props: TabProps): ReactNode {
   );
 }
 
-function TabInner({isSelected, isDisabled, orientation, children, prevRef}: {
-  isSelected: boolean,
+function TabInner({isDisabled, orientation, children}: {
   isDisabled: boolean,
   orientation: Orientation,
-  children: ReactNode,
-  prevRef?: RefObject<DOMRect | null>
+  children: ReactNode
 }) {
-  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
   let ref = useRef<HTMLDivElement | null>(null);
-
-  useLayoutEffect(() => {
-    if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {
-      let currentItem = ref?.current.getBoundingClientRect();
-
-      if (orientation === 'horizontal') {
-        let deltaX = prevRef.current.left - currentItem.left;
-        ref.current.animate(
-          [
-            {transform: `translateX(${deltaX}px)`, width: `${prevRef.current.width}px`},
-            {transform: 'translateX(0px)', width: '100%'}
-          ],
-          {
-            duration: 200,
-            easing: 'ease-out'
-          }
-        );
-      } else {
-        let deltaY = prevRef.current.top - currentItem.top;
-        ref.current.animate(
-          [
-            {transform: `translateY(${deltaY}px)`, height: `${prevRef.current.height}px`},
-            {transform: 'translateY(0px)', height: '100%'}
-          ],
-          {
-            duration: 200,
-            easing: 'ease-out'
-          }
-        );
-      }
-
-      prevRef.current = null;
-    }
-  }, [isSelected, reduceMotion, prevRef, orientation]);
+  let isHidden = useContext(HiddenTabsContext);
 
   return (
     <>
-      {isSelected && <div ref={ref} className={selectedIndicator({isDisabled, orientation})} />}
+      {!isHidden && <SelectionIndicator ref={ref} className={selectedIndicator({isDisabled, orientation})} />}
       {children}
     </>
   );
@@ -548,6 +508,8 @@ function isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disa
   return false;
 }
 
+const HiddenTabsContext = createContext(false);
+
 let HiddenTabs = function (props: {
   listRef: RefObject<HTMLDivElement | null>,
   items: Array<Node<any>>,
@@ -572,18 +534,20 @@ let HiddenTabs = function (props: {
         overflow: 'hidden',
         opacity: 0
       })}>
-      {items.map((item) => {
-        // pull off individual props as an allow list, don't want refs or other props getting through
-        return (
-          <div
-            data-hidden-tab
-            style={item.props.UNSAFE_style}
-            key={item.key}
-            className={item.props.className({size, density})}>
-            {item.props.children({size, density})}
-          </div>
-        );
-      })}
+      <HiddenTabsContext.Provider value>
+        {items.map((item) => {
+          // pull off individual props as an allow list, don't want refs or other props getting through
+          return (
+            <div
+              data-hidden-tab
+              style={item.props.UNSAFE_style}
+              key={item.key}
+              className={item.props.className({size, density})}>
+              {item.props.children({size, density})}
+            </div>
+          );
+        })}
+      </HiddenTabsContext.Provider>
     </div>
   );
 };

package/src/TabsPicker.tsx

@@ -44,8 +44,8 @@ import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-ty
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
-import {Placement} from 'react-aria';
-import {PopoverBase} from './Popover';
+import {Placement, useLocale} from 'react-aria';
+import {Popover} from './Popover';
 import {pressScale} from './pressScale';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
@@ -178,6 +178,9 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
   const menuOffset: number = 6;
   const size = 'M';
   let ariaLabelledby = props['aria-labelledby'] ?? '';
+  let {direction: dir} = useLocale();
+  let RTLFlipOffset = dir === 'rtl' ? -1 : 1;
+
   return (
     <div>
       <AriaSelect
@@ -241,37 +244,43 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                 size={size}
                 className={iconStyles} />
             </Button>
-            <PopoverBase
+            <Popover
               hideArrow
               offset={menuOffset}
+              crossOffset={RTLFlipOffset * -12}
               placement={`${direction} ${align}` as Placement}
               shouldFlip={shouldFlip}
               styles={style({
-                marginStart: -12,
                 minWidth: 192,
-                width: 'calc(var(--trigger-width) + (-2 * self(marginStart)))'
+                width: 'calc(var(--trigger-width) - 24)'
               })}>
-              <Provider
-                values={[
-                  [HeaderContext, {styles: sectionHeader({size})}],
-                  [HeadingContext, {
-                    // @ts-ignore
-                    role: 'presentation',
-                    styles: sectionHeading
-                  }],
-                  [TextContext, {
-                    slots: {
-                      description: {styles: description({size})}
-                    }
-                  }]
-                ]}>
-                <ListBox
-                  items={items}
-                  className={menu}>
-                  {children}
-                </ListBox>
-              </Provider>
-            </PopoverBase>
+              <div
+                className={style({
+                  display: 'flex',
+                  size: 'full'
+                })}>
+                <Provider
+                  values={[
+                    [HeaderContext, {styles: sectionHeader({size})}],
+                    [HeadingContext, {
+                      // @ts-ignore
+                      role: 'presentation',
+                      styles: sectionHeading
+                    }],
+                    [TextContext, {
+                      slots: {
+                        description: {styles: description({size})}
+                      }
+                    }]
+                  ]}>
+                  <ListBox
+                    items={items}
+                    className={menu}>
+                    {children}
+                  </ListBox>
+                </Provider>
+              </div>
+            </Popover>
           </>
         )}
       </AriaSelect>

package/src/TagGroup.tsx

@@ -323,7 +323,15 @@ function TagGroupInner<T>({
                       style={item.props.UNSAFE_style}
                       key={item.key}
                       className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>
-                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}
+                      <TagWrapper
+                        key={item.key}
+                        id={item.key}
+                        textValue={item.textValue}
+                        isInRealDOM
+                        size={size}
+                        allowsRemoving={!!onRemove}
+                        {...item.props}
+                        children={item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})} />
                     </div>
                   );
                 })}
@@ -516,41 +524,41 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas
   return (
     <>
       {isInRealDOM && (
-      <div
-        className={style({
-          display: 'flex',
-          minWidth: 0,
-          alignItems: 'center',
-          gap: 'text-to-visual',
-          forcedColorAdjust: 'none',
-          backgroundColor: 'transparent'
-        })}>
-        <Provider
-          values={[
-            [TextContext, {styles: style({order: 1, truncate: true})}],
-            [IconContext, {
-              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
-            }],
-            [AvatarContext, {
-              size: avatarSize[size],
-              styles: style({order: 0})
-            }],
-            [ImageContext, {
-              styles: style({
-                size: fontRelative(20),
-                flexShrink: 0,
-                order: 0,
-                aspectRatio: 'square',
-                objectFit: 'contain',
-                borderRadius: 'sm'
-              })
-            }]
-          ]}>
-          {children}
-        </Provider>
-      </div>
-        )}
+        <div
+          className={style({
+            display: 'flex',
+            minWidth: 0,
+            alignItems: 'center',
+            gap: 'text-to-visual',
+            forcedColorAdjust: 'none',
+            backgroundColor: 'transparent'
+          })}>
+          <Provider
+            values={[
+              [TextContext, {styles: style({order: 1, truncate: true})}],
+              [IconContext, {
+                render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+                styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+              }],
+              [AvatarContext, {
+                size: avatarSize[size],
+                styles: style({order: 0})
+              }],
+              [ImageContext, {
+                styles: style({
+                  size: fontRelative(20),
+                  flexShrink: 0,
+                  order: 0,
+                  aspectRatio: 'square',
+                  objectFit: 'contain',
+                  borderRadius: 'sm'
+                })
+              }]
+            ]}>
+            {children}
+          </Provider>
+        </div>
+      )}
       {!isInRealDOM && children}
       {allowsRemoving && isInRealDOM && (
         <ClearButton

package/src/TextField.tsx

@@ -18,6 +18,7 @@ import {
   composeRenderProps,
   ContextValue,
   InputContext,
+  InputProps,
   useSlottedContext
 } from 'react-aria-components';
 import {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -25,14 +26,14 @@ import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHand
 import {createFocusableRef} from '@react-spectrum/utils';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
-import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {mergeRefs} from '@react-aria/utils';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the text field.
    *
@@ -159,7 +160,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
 
 function TextAreaInput() {
   // Force re-render when value changes so we update the height.
-  useSlottedContext(AriaTextAreaContext) ?? {};
+  let {placeholder} = useSlottedContext(AriaTextAreaContext) ?? {};
   let onHeightChange = (input: HTMLTextAreaElement) => {
     // TODO: only do this if an explicit height is not given?
     if (input) {
@@ -180,20 +181,24 @@ function TextAreaInput() {
       input.style.alignSelf = prevAlignment;
     }
   };
+  let {ref} = useSlottedContext(InputContext) ?? {};
 
   return (
     <AriaTextArea
-      ref={onHeightChange}
+      ref={mergeRefs(onHeightChange, ref as RefObject<HTMLTextAreaElement | null>)}
       // Workaround for baseline alignment bug in Safari.
       // https://bugs.webkit.org/show_bug.cgi?id=142968
-      placeholder=" "
+      placeholder={placeholder ?? ' '}
       className={style({
         paddingX: 0,
         paddingY: centerPadding(),
         minHeight: controlSize(),
         boxSizing: 'border-box',
         backgroundColor: 'transparent',
-        color: 'inherit',
+        color: {
+          default: 'inherit',
+          '::placeholder': 'gray-600'
+        },
         fontFamily: 'inherit',
         fontSize: 'inherit',
         fontWeight: 'inherit',

package/src/TimeField.tsx

@@ -41,6 +41,10 @@ export interface TimeFieldProps<T extends TimeValue> extends
 
 export const TimeFieldContext = createContext<ContextValue<Partial<TimeFieldProps<any>>, HTMLDivElement>>(null);
 
+/**
+ * TimeFields allow users to enter and edit time values using a keyboard.
+ * Each part of the time is displayed in an individually editable segment.
+ */
 export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(
   props: TimeFieldProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {

package/src/Tooltip.tsx

@@ -101,6 +101,9 @@ const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light da
   opacity: {
     isEntering: 0,
     isExiting: 0
+  },
+  overflowWrap: {
+    default: 'break-word'
   }
 });
 

package/src/TreeView.tsx

@@ -40,7 +40,7 @@ import intlMessages from '../intl/*.json';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
-import {TextContext} from './Content';
+import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 import {useScale} from './utils';
@@ -372,7 +372,7 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
                 [ActionButtonGroupContext, {styles: treeActions}],
                 [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]
               ]}>
-              {children}
+              {typeof children === 'string' ? <Text>{children}</Text> : children}
             </Provider>
             {isFocusVisible && isDetached && <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}
           </div>

package/src/index.ts

@@ -65,7 +65,7 @@ export {Picker, PickerItem, PickerSection, PickerContext} from './Picker';
 export {Popover} from './Popover';
 export {ProgressBar, ProgressBarContext} from './ProgressBar';
 export {ProgressCircle, ProgressCircleContext} from './ProgressCircle';
-export {Provider} from './Provider';
+export {Provider, ColorSchemeContext} from './Provider';
 export {Radio} from './Radio';
 export {RadioGroup, RadioGroupContext} from './RadioGroup';
 export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
@@ -94,6 +94,7 @@ export {pressScale} from './pressScale';
 export {Autocomplete} from 'react-aria-components';
 export {Collection} from 'react-aria-components';
 export {FileTrigger} from 'react-aria-components';
+export {parseColor} from 'react-aria-components';
 
 export type {AccordionProps} from './Accordion';
 export type {ActionBarProps} from './ActionBar';
@@ -167,4 +168,4 @@ export type {ToggleButtonProps} from './ToggleButton';
 export type {ToggleButtonGroupProps} from './ToggleButtonGroup';
 export type {TooltipProps} from './Tooltip';
 export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps, TreeViewLoadMoreItemProps} from './TreeView';
-export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor} from 'react-aria-components';
+export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor, Color, Key, Selection} from 'react-aria-components';