@react-spectrum/s2 0.7.1 → 0.8.0

package/src/Provider.tsx

@@ -50,7 +50,7 @@ export interface ProviderProps extends UnsafeStyles {
 
 export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
 
-export function Provider(props: ProviderProps) {
+export function Provider(props: ProviderProps): ReactNode {
   let result = <ProviderInner {...props} />;
   let parentColorScheme = useContext(ColorSchemeContext);
   let colorScheme = props.colorScheme || parentColorScheme;

package/src/RangeCalendar.tsx

@@ -20,6 +20,7 @@ import {
   Heading,
   Text
 } from 'react-aria-components';
+import {ReactNode} from 'react';
 
 
 export interface RangeCalendarProps<T extends DateValue>
@@ -29,7 +30,7 @@ export interface RangeCalendarProps<T extends DateValue>
 
 export function RangeCalendar<T extends DateValue>(
   {errorMessage, ...props}: RangeCalendarProps<T>
-) {
+): ReactNode {
   return (
     <AriaRangeCalendar {...props}>
       <header>

package/src/Skeleton.tsx

@@ -19,7 +19,7 @@ import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {useMediaQuery} from '@react-spectrum/utils';
 
-export function useLoadingAnimation(isAnimating: boolean) {
+export function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {
   let animationRef = useRef<Animation | null>(null);
   let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
   return useCallback((element: HTMLElement | null) => {
@@ -65,7 +65,7 @@ export interface SkeletonProps {
 /**
  * A Skeleton wraps around content to render it as a placeholder.
  */
-export function Skeleton({children, isLoading}: SkeletonProps) {
+export function Skeleton({children, isLoading}: SkeletonProps): ReactNode {
   // Disable all form components inside a skeleton.
   return (
     <SkeletonContext.Provider value={isLoading}>
@@ -97,7 +97,7 @@ export function useSkeletonText(children: ReactNode, style: CSSProperties | unde
 }
 
 // Rendered inside <Text> to create skeleton line boxes via box-decoration-break.
-export function SkeletonText({children}) {
+export function SkeletonText({children}: {children: ReactNode}): ReactNode {
   return (
     <span
       // @ts-ignore - compatibility with React < 19
@@ -114,7 +114,7 @@ export function SkeletonText({children}) {
 }
 
 // Clones the child element and displays it with skeleton styling.
-export function SkeletonWrapper({children}: {children: SkeletonElement}) {
+export function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {
   let isLoading = useContext(SkeletonContext);
   let animation = useLoadingAnimation(isLoading || false);
   if (isLoading == null) {

package/src/Slider.tsx

@@ -317,7 +317,7 @@ export let filledTrack = style({
   translateY: '[-50%]'
 });
 
-export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}) {
+export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}): ReactNode {
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {

package/src/StatusLight.tsx

@@ -112,11 +112,11 @@ export const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props:
   let domRef = useDOMRef(ref);
   let isSkeleton = useIsSkeleton();
 
-  if (!children && !props['aria-label']) {
+  if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {
     console.warn('If no children are provided, an aria-label must be specified');
   }
 
-  if (!role && (props['aria-label'] || props['aria-labelledby'])) {
+  if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {
     console.warn('A labelled StatusLight must have a role.');
   }
 

package/src/Tabs.tsx

@@ -182,12 +182,13 @@ const tablist = style({
   flexBasis: '[0%]'
 });
 
-export function TabList<T extends object>(props: TabListProps<T>) {
+export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
   let {showTabs} = useContext(CollapseContext) ?? {};
 
   if (showTabs) {
     return <TabListInner {...props} />;
   }
+  return null;
 }
 
 function TabListInner<T extends object>(props: TabListProps<T>) {
@@ -362,7 +363,7 @@ const icon = style({
   }
 });
 
-export function Tab(props: TabProps) {
+export function Tab(props: TabProps): ReactNode {
   let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};
 
   let contentId = useId();
@@ -421,7 +422,7 @@ const tabPanel = style({
   minWidth: 0
 }, getAllowedOverrides({height: true}));
 
-export function TabPanel(props: TabPanelProps) {
+export function TabPanel(props: TabPanelProps): ReactNode | null {
   let {showTabs} = useContext(CollapseContext);
   let {selectedKey} = useContext(InternalTabsContext);
   if (showTabs) {

package/src/TabsPicker.tsx

@@ -305,7 +305,7 @@ function TabLine(props) {
 export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
   children: ReactNode
 }
-export function PickerItem(props: PickerItemProps) {
+export function PickerItem(props: PickerItemProps): ReactNode {
   let ref = useRef(null);
   let isLink = props.href != null;
   const size = 'M';

package/src/TimeField.tsx

@@ -30,7 +30,7 @@ export interface TimeFieldProps<T extends TimeValue>
 
 export function TimeField<T extends TimeValue>(
   {label, description, errorMessage, ...props}: TimeFieldProps<T>
-) {
+): ReactNode {
   return (
     <AriaTimeField {...props}>
       <Label>{label}</Label>

package/src/Toast.module.css

@@ -0,0 +1,153 @@
+/* Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element */
+html.toast-add,
+html.toast-remove,
+html.toast-expand,
+html.toast-collapse,
+html.toast-clear,
+html:active-view-transition-type(toast-add, toast-remove, toast-expand, toast-collapse, toast-clear) {
+  view-transition-name: none;
+
+  .toast-controls {
+    view-transition-name: toast-controls;
+  }
+
+  .toast-background {
+    view-transition-name: toast-background;
+  }
+
+  &::view-transition-group(toast-background) {
+    z-index: -1;
+  }
+
+  &::view-transition-group(*) {
+    animation-duration: 400ms;
+  }
+}
+
+html.toast-add,
+html.toast-remove,
+html:active-view-transition-type(toast-add, toast-remove) {
+  /* The new toast should slide in and out. With reduce motion enabled, it fades by default. */
+  @media (prefers-reduced-motion: no-preference) {
+    &::view-transition-new(.toast):only-child {
+      animation-name: slide-in;
+    }
+
+    &::view-transition-old(.toast):only-child {
+      animation-name: slide-out;
+    }
+  }
+
+  &::view-transition-group(.toast.bottom) {
+    --slideX: 0;
+    --slideY: calc(100% + 12px);
+  }
+  
+  &::view-transition-group(.toast.top) {
+    --slideX: 0;
+    --slideY: calc(-100% - 12px);
+  }
+  
+  &::view-transition-group(.toast.start) {
+    --slideX: calc(-100% - 12px);
+    --slideY: 0;
+  }
+  
+  &::view-transition-group(.toast.end) {
+    --slideX: calc(100% + 12px);
+    --slideY: 0;
+  }  
+}
+
+/* Make the "Show all" button animate slightly faster/slower than other components when expanding/collapsing.
+ * This prevents it from appearing to overlap the text when it fades out and the text repositions. */
+html.toast-expand,
+html:active-view-transition-type(toast-expand) {
+  &::view-transition-group(toast-expand) {
+    animation-duration: 300ms;
+  }
+}
+
+html.toast-collapse,
+html:active-view-transition-type(toast-collapse) {
+  &::view-transition-group(toast-expand) {
+    animation-duration: 600ms;
+  }
+}
+
+html.toast-expand,
+html.toast-collapse,
+html:active-view-transition-type(toast-expand, toast-collapse) {
+  @media (prefers-reduced-motion: no-preference) {
+    /* When expanding/collapsing, animate the components of the main toast individually. */
+    .toast-content {
+      view-transition-name: toast-content;
+    }
+
+    .toast-expand {
+      view-transition-name: toast-expand;
+    }
+
+    .toast-action {
+      view-transition-name: toast-action;
+    }
+
+    .toast-close {
+      view-transition-name: toast-close;
+    }
+
+    /* Force toast controls to be visible during the animation */
+    .toast-controls {
+      display: flex;
+    }
+
+    /* Smoothly transition the size of toasts. */
+    &::view-transition-old(.toast),
+    &::view-transition-new(.toast) {
+      /* Make the old and new images fill the size of the parent group. */
+      height: 100%;
+      width: 100%;
+    }
+
+    /* Background toasts don't have their components split apart in separate view transitions.
+     * This means we need to do some tricks to get the aspect ratio to transition smoothly.
+     * Clipping messes up the shadows a bit, but it's less noticeable on the background toasts. */
+    &::view-transition-old(.background-toast),
+    &::view-transition-new(.background-toast) {
+      /* Cover all of the available space without stretching the aspect ratio */
+      object-fit: cover;
+      object-position: top center;
+      /* Clip to retain rounded corners */
+      clip-path: inset(0px round 10px);
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    /* Do not animate individual toasts in reduced motion. The whole list cross-fades instead. */
+    .toast {
+      view-transition-name: none !important;
+    }
+
+    .toast-list-expanded {
+      view-transition-name: toast-list-expanded;
+    }
+
+    .toast-list-collapsed {
+      view-transition-name: toast-list-collapsed;
+    }
+  }
+}
+
+@keyframes slide-in {
+  from {
+    translate: var(--slideX) var(--slideY);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out {
+  to {
+    translate: var(--slideX) var(--slideY);
+    opacity: 0;
+  }
+}