@react-spectrum/s2 3.0.0-nightly-086ad3115-240912 → 3.0.0-nightly-8ab4f20de-240913

package/src/Skeleton.tsx

@@ -0,0 +1,142 @@
+/*
+ * Copyright 2024 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 {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
+import {colorToken} from '../style/tokens' with {type: 'macro'};
+import {mergeRefs} from '@react-aria/utils';
+import {mergeStyles} from '../style/runtime';
+import {raw} from '../style/style-macro' with {type: 'macro'};
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleString} from '../style/types';
+
+let reduceMotion = typeof window?.matchMedia === 'function'
+  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  : false;
+
+export function useLoadingAnimation(isAnimating: boolean) {
+  let animationRef = useRef<Animation | null>(null);
+  return useCallback((element: HTMLElement | null) => {
+    if (isAnimating && !animationRef.current && element && !reduceMotion) {
+      // Use web animation API instead of CSS animations so that we can
+      // synchronize it between all loading elements on the page (via startTime).
+      animationRef.current = element.animate(
+        [
+          {backgroundPosition: '100%'},
+          {backgroundPosition: '0%'}
+        ],
+        {
+          duration: 2000,
+          iterations: Infinity,
+          easing: 'ease-in-out'
+        }
+      );
+      animationRef.current.startTime = 0;
+    } else if (!isAnimating && animationRef.current) {
+      animationRef.current.cancel();
+      animationRef.current = null;
+    }
+  }, [isAnimating]);
+}
+
+export type SkeletonElement = ReactElement<{
+  children?: ReactNode,
+  className?: string,
+  ref?: Ref<HTMLElement>,
+  inert?: boolean | 'true'
+}>;
+
+export const SkeletonContext = createContext<boolean | null>(null);
+export function useIsSkeleton(): boolean {
+  return useContext(SkeletonContext) || false;
+}
+
+export interface SkeletonProps {
+  children: ReactNode,
+  isLoading: boolean
+}
+
+export function Skeleton({children, isLoading}: SkeletonProps) {
+  // Disable all form components inside a skeleton.
+  return (
+    <SkeletonContext.Provider value={isLoading}>
+      {children}
+    </SkeletonContext.Provider>
+  );
+}
+
+export const loadingStyle = raw(`
+  background-image: linear-gradient(to right, ${colorToken('gray-100')} 33%, light-dark(${colorToken('gray-25')}, ${colorToken('gray-300')}), ${colorToken('gray-100')} 66%);
+  background-size: 300%;
+  * {
+    visibility: hidden;
+  }
+`, 'UNSAFE_overrides');
+
+export function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {
+  let isSkeleton = useContext(SkeletonContext);
+  if (isSkeleton) {
+    children = <SkeletonText>{children}</SkeletonText>;
+    style = {
+      ...style,
+      // This ensures the ellipsis on truncated text is also hidden.
+      // -webkit-text-fill-color overrides any `color` property that is also set.
+      WebkitTextFillColor: 'transparent'
+    };
+  }
+  return [children, style];
+}
+
+// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.
+export function SkeletonText({children}) {
+  return (
+    <span
+      // @ts-ignore - compatibility with React < 19
+      inert="true"
+      ref={useLoadingAnimation(true)}
+      className={loadingStyle + style({
+        color: 'transparent',
+        boxDecorationBreak: 'clone',
+        borderRadius: 'sm'
+      })}>
+      {children}
+    </span>
+  );
+}
+
+// Clones the child element and displays it with skeleton styling.
+export function SkeletonWrapper({children}: {children: SkeletonElement}) {
+  let isLoading = useContext(SkeletonContext);
+  let animation = useLoadingAnimation(isLoading || false);
+  if (isLoading == null) {
+    return children;
+  }
+
+  let childRef = 'ref' in children ? children.ref as any : children.props.ref;
+  return (
+    <SkeletonContext.Provider value={null}>
+      {isLoading ? cloneElement(children, {
+        ref: mergeRefs(childRef, animation),
+        className: (children.props.className || '') + ' ' + loadingStyle,
+        inert: 'true'
+      }) : children}
+    </SkeletonContext.Provider>
+  );
+}
+
+// Adds default border radius around icons when displayed in a skeleton.
+export function useSkeletonIcon(styles: StyleString): StyleString {
+  let isSkeleton = useContext(SkeletonContext);
+  if (isSkeleton) {
+    return mergeStyles(style({borderRadius: 'sm'}), styles);
+  }
+  return styles || '' as StyleString;
+}

package/src/SkeletonCollection.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 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 {createLeafComponent} from '@react-aria/collections';
+import {ReactNode} from 'react';
+import {Skeleton} from './Skeleton';
+
+export interface SkeletonCollectionProps {
+  children: () => ReactNode
+}
+
+let cache = new WeakMap();
+export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
+  // Cache rendering based on node object identity. This allows the children function to randomize
+  // its content (e.g. heights) and preserve on re-renders.
+  // TODO: do we need a `dependencies` prop here?
+  let cached = cache.get(node);
+  if (!cached) {
+    cached = (
+      <Skeleton isLoading>
+        {props.children()}
+      </Skeleton>
+    );
+    cache.set(node, cached);
+  }
+  return cached;
+});

package/src/StatusLight.tsx

@@ -17,7 +17,9 @@ import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useIsSkeleton} from './Skeleton';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface StatusLightStyleProps {
@@ -64,7 +66,7 @@ const wrapper = style<StatusLightStyleProps>({
   disableTapHighlight: true
 }, getAllowedOverrides());
 
-const light = style<StatusLightStyleProps>({
+const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
   size: {
     size: {
       S: 8,
@@ -94,7 +96,8 @@ const light = style<StatusLightStyleProps>({
       cinnamon: 'cinnamon',
       brown: 'brown',
       silver: 'silver'
-    }
+    },
+    isSkeleton: 'gray-200'
   }
 });
 
@@ -102,6 +105,7 @@ function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
   let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
   let domRef = useDOMRef(ref);
+  let isSkeleton = useIsSkeleton();
 
   if (!children && !props['aria-label']) {
     console.warn('If no children are provided, an aria-label must be specified');
@@ -119,11 +123,11 @@ function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
       style={UNSAFE_style}
       className={UNSAFE_className + wrapper({size, variant}, styles)}>
       <CenterBaseline>
-        <svg className={light({size, variant})} aria-hidden="true">
+        <svg className={light({size, variant, isSkeleton})} aria-hidden="true">
           <circle r="50%" cx="50%" cy="50%" />
         </svg>
       </CenterBaseline>
-      {children}
+      <Text>{children}</Text>
     </div>
   );
 }

package/src/ToggleButton.tsx

@@ -18,9 +18,11 @@ import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
+import {SkeletonContext} from './Skeleton';
 import {StyleProps} from './style-utils';
 import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useFormProps} from './Form';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
@@ -34,6 +36,7 @@ export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps,
 
 function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
+  props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
   return (
     <RACToggleButton
@@ -49,6 +52,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
       }, props.styles)}>
       <Provider
         values={[
+          [SkeletonContext, null],
           [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),

package/src/index.ts

@@ -19,6 +19,8 @@ export {Badge, BadgeContext} from './Badge';
 export {Breadcrumbs, Breadcrumb, BreadcrumbsContext} from './Breadcrumbs';
 export {Button, LinkButton, ButtonContext, LinkButtonContext} from './Button';
 export {ButtonGroup, ButtonGroupContext} from './ButtonGroup';
+export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from './Card';
+export {CardView} from './CardView';
 export {Checkbox, CheckboxContext} from './Checkbox';
 export {CheckboxGroup, CheckboxGroupContext} from './CheckboxGroup';
 export {ColorArea, ColorAreaContext} from './ColorArea';
@@ -29,7 +31,7 @@ export {ColorSwatchPicker, ColorSwatchPickerContext} from './ColorSwatchPicker';
 export {ColorWheel, ColorWheelContext} from './ColorWheel';
 export {ComboBox, ComboBoxItem, ComboBoxSection, ComboBoxContext} from './ComboBox';
 export {ContextualHelp, ContextualHelpContext} from './ContextualHelp';
-export {Heading, HeadingContext, Header, HeaderContext, Content, ContentContext, Footer, FooterContext, Image, ImageContext, Text, TextContext, Keyboard, KeyboardContext} from './Content';
+export {Heading, HeadingContext, Header, HeaderContext, Content, ContentContext, Footer, FooterContext, Text, TextContext, Keyboard, KeyboardContext} from './Content';
 export {Dialog} from './Dialog';
 export {DialogTrigger} from './DialogTrigger';
 export {DialogContainer, useDialogContainer} from './DialogContainer';
@@ -38,6 +40,8 @@ export {DropZone, DropZoneContext} from './DropZone';
 export {Form} from './Form';
 export {IconContext, IllustrationContext} from './Icon';
 export {IllustratedMessage, IllustratedMessageContext} from './IllustratedMessage';
+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';
@@ -52,6 +56,8 @@ export {RadioGroup, RadioGroupContext} from './RadioGroup';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {Slider, SliderContext} from './Slider';
+export {Skeleton, useIsSkeleton} from './Skeleton';
+export {SkeletonCollection} from './SkeletonCollection';
 export {StatusLight, StatusLightContext} from './StatusLight';
 export {Switch, SwitchContext} from './Switch';
 export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
@@ -72,6 +78,8 @@ export type {BreadcrumbsProps, BreadcrumbProps} from './Breadcrumbs';
 export type {BadgeProps} from './Badge';
 export type {ButtonProps, LinkButtonProps} from './Button';
 export type {ButtonGroupProps} from './ButtonGroup';
+export type {CardProps, CardPreviewProps, AssetCardProps, ProductCardProps, UserCardProps} from './Card';
+export type {CardViewProps} from './CardView';
 export type {CheckboxProps} from './Checkbox';
 export type {CheckboxGroupProps} from './CheckboxGroup';
 export type {ColorAreaProps} from './ColorArea';
@@ -89,6 +97,8 @@ export type {DropZoneProps} from './DropZone';
 export type {FormProps} from './Form';
 export type {IconProps, IconContextValue} from './Icon';
 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 {MeterProps} from './Meter';
@@ -101,6 +111,8 @@ export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SliderProps} from './Slider';
 export type {RangeSliderProps} from './RangeSlider';
+export type {SkeletonProps} from './Skeleton';
+export type {SkeletonCollectionProps} from './SkeletonCollection';
 export type {StatusLightProps} from './StatusLight';
 export type {SwitchProps} from './Switch';
 export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';

package/src/style-utils.ts

@@ -188,7 +188,7 @@ const heightProperties = [
 ] as const;
 
 export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
-export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof heightProperties)[number]>;
+export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
 export interface UnsafeStyles {
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */

package/src/GridList.tsx

@@ -1,50 +0,0 @@
-/*
- * Copyright 2024 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 {
-  GridList as AriaGridList,
-  GridListItem as AriaGridListItem,
-  Button,
-  GridListItemProps,
-  GridListProps
-} from 'react-aria-components';
-
-import {Checkbox} from './Checkbox';
-
-
-export function GridList<T extends object>(
-  {children, ...props}: GridListProps<T>
-) {
-  return (
-    <AriaGridList {...props}>
-      {children}
-    </AriaGridList>
-  );
-}
-
-export function GridListItem({children, ...props}: GridListItemProps) {
-  let textValue = typeof children === 'string' ? children : undefined;
-  return (
-    <AriaGridListItem textValue={textValue} {...props}>
-      {({selectionMode, selectionBehavior, allowsDragging}) => (
-        <>
-          {/* Add elements for drag and drop and selection. */}
-          {allowsDragging && <Button slot="drag">≡</Button>}
-          {selectionMode === 'multiple' && selectionBehavior === 'toggle' && (
-            <Checkbox slot="selection" />
-          )}
-          {children}
-        </>
-      )}
-    </AriaGridListItem>
-  );
-}