Merge branch 'main' of github.com:adobe/react-spectrum into fix-download

# Conflicts:
#	packages/dev/s2-docs/src/SearchMenu.tsx

Author: devongovett

packages/@react-spectrum/s2/src/Divider.tsx

@@ -29,7 +29,7 @@ interface DividerSpectrumProps {
    */
   size?: 'S' | 'M' | 'L',
   /**
-   * How thick the Divider should be.
+   * The orientation of the Divider.
    * @default 'horizontal'
    */
   orientation?: 'horizontal' | 'vertical',

packages/dev/s2-docs/pages/s2/Icons.mdx

@@ -1,7 +1,7 @@
 import {Layout} from '../../src/Layout';
 import {InstallCommand} from '../../src/InstallCommand';
 import {Command} from '../../src/Command';
-import {IconCards} from '../../src/IconCards';
+import {IconCards} from '../../src/IconSearchView';
 import {IconColors} from '../../src/IconColors';
 import {IconSizes} from '../../src/IconSizes';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';

packages/dev/s2-docs/src/IconCards.tsx renamed to packages/dev/s2-docs/src/IconSearchView.tsx

@@ -2,16 +2,17 @@
 'use client';
 
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
-import {Content, Heading, IllustratedMessage, pressScale, SearchField} from '@react-spectrum/s2';
+import Close from '@react-spectrum/s2/icons/Close';
+import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore
 import icons from '/packages/@react-spectrum/s2/s2wf-icons/*.svg';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
-import React, {useCallback, useRef} from 'react';
+import React, {useCallback, useMemo, useRef} from 'react';
 
-const iconList = Object.keys(icons).map(name => ({id: name.replace(/^S2_Icon_(.*?)(Size\d+)?_2.*/, '$1'), icon: icons[name].default}));
+export const iconList = Object.keys(icons).map(name => ({id: name.replace(/^S2_Icon_(.*?)(Size\d+)?_2.*/, '$1'), icon: icons[name].default}));
 
 const itemStyle = style({
   ...focusRing(),
@@ -37,7 +38,8 @@ const itemStyle = style({
   gap: 4,
   alignItems: 'center',
   justifyContent: 'center',
-  paddingX: 4
+  paddingX: 4,
+  cursor: 'default'
 });
 
 let handleCopyImport = (id: string) => {
@@ -48,6 +50,119 @@ let handleCopyImport = (id: string) => {
   });
 };
 
+interface IconSearchViewProps {
+  filteredItems: typeof iconList
+}
+
+export function IconSearchView({filteredItems}: IconSearchViewProps) {
+  return (
+    <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(12, 12), preserveAspectRatio: true}}>
+      <ListBox
+        onAction={(item) => handleCopyImport(item.toString())}
+        items={filteredItems}
+        layout="grid"
+        className={style({width: '100%', scrollPaddingY: 4})}
+        renderEmptyState={() => (
+          <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
+            <NoSearchResults />
+            <Heading>No results</Heading>
+            <Content>Try a different search term.</Content>
+          </IllustratedMessage>
+        )}>
+        {item => <IconItem item={item} />}
+      </ListBox>
+    </Virtualizer>
+  );
+}
+
+function IconItem({item}) {
+  let Icon = item.icon;
+  let ref = useRef(null);
+  return (
+    <ListBoxItem id={item.id} value={item} textValue={item.id} className={itemStyle} ref={ref} style={pressScale(ref)}>
+      <Icon styles={iconStyle({size: 'XL'})} />
+      <div
+        className={style({
+          maxWidth: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap'
+        })}>
+        {item.id}
+      </div>
+    </ListBoxItem>
+  );
+}
+
+export function SkeletonIconItem({item}: {item: {id: string}}) {
+  const PlaceholderIcon = Close;
+  const ref = useRef(null);
+  
+  const itemStyle = style({
+    ...focusRing(),
+    size: 'full',
+    backgroundColor: {
+      default: 'gray-50',
+      isHovered: 'gray-100',
+      isFocused: 'gray-100',
+      isSelected: 'neutral'
+    },
+    '--iconPrimary': {
+      type: 'color',
+      value: {
+        default: 'neutral',
+        isSelected: 'gray-25'
+      }
+    },
+    font: 'ui-sm',
+    borderRadius: 'default',
+    transition: 'default',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingX: 4
+  });
+
+  return (
+    <ListBoxItem 
+      id={item.id} 
+      value={item} 
+      textValue="skeleton" 
+      className={itemStyle} 
+      ref={ref}>
+      <PlaceholderIcon styles={iconStyle({size: 'XL'})} />
+      <div
+        className={style({
+          maxWidth: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap'
+        })}>
+        <Text styles={style({font: 'ui-sm'})}>Name</Text>
+      </div>
+    </ListBoxItem>
+  );
+}
+
+export function IconSearchSkeleton() {
+  const mockItems = useMemo(() => Array.from({length: 140}, (_, i) => ({id: `skeleton-${i}`})), []);
+
+  return (
+    <Skeleton isLoading>
+      <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(12, 12), preserveAspectRatio: true}}>
+        <ListBox
+          items={mockItems}
+          layout="grid"
+          className={style({width: '100%', scrollPaddingY: 4})}>
+          {(item) => <SkeletonIconItem item={item} />}
+        </ListBox>
+      </Virtualizer>
+    </Skeleton>
+  );
+}
+
 export function IconCards() {
   let {contains} = useFilter({sensitivity: 'base'});
   let filter = useCallback((textValue, inputValue) => {
@@ -84,22 +199,3 @@ export function IconCards() {
     </Autocomplete>
   );
 }
-
-function IconItem({item}) {
-  let Icon = item.icon;
-  let ref = useRef(null);
-  return (
-    <ListBoxItem id={item.id} value={item} textValue={item.id} className={itemStyle} ref={ref} style={pressScale(ref)}>
-      <Icon styles={iconStyle({size: 'XL'})} />
-      <div
-        className={style({
-          maxWidth: '100%',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap'
-        })}>
-        {item.id}
-      </div>
-    </ListBoxItem>
-  );
-}