@react-spectrum/s2 0.10.0 → 0.11.0

package/src/SelectBoxGroup.tsx

@@ -0,0 +1,408 @@
+/*
+ * Copyright 2025 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 CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
+import {box, iconStyles} from './Checkbox';
+import Checkmark from '../ui-icons/Checkmark';
+import {
+  ContextValue,
+  DEFAULT_SLOT,
+  ListBox,
+  ListBoxItem,
+  ListBoxProps,
+  Provider
+} from 'react-aria-components';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Orientation} from '@react-types/shared';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {IllustrationContext} from '../src/Icon';
+import {pressScale} from './pressScale';
+import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef} from 'react';
+import {TextContext} from './Content';
+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'> {
+  /**
+   * The SelectBox elements contained within the SelectBoxGroup.
+   */
+  children: ReactNode,
+  /**
+   * The layout direction of the content in each SelectBox.
+   * @default 'vertical'
+   */
+  orientation?: Orientation,
+  /**
+   * The selection mode for the SelectBoxGroup.
+   * @default 'single'
+   */
+  selectionMode?: 'single' | 'multiple',
+  /**
+   * Whether the SelectBoxGroup is disabled.
+   */
+  isDisabled?: boolean
+}
+
+export interface SelectBoxProps extends StyleProps {
+  /** The unique id of the SelectBox. */
+  id?: Key,
+  /** A string representation of the SelectBox's contents, used for features like typeahead. */
+  textValue?: string,
+  /** An accessibility label for this item. */
+  'aria-label'?: string,
+  /**
+   * The contents of the SelectBox.
+   */
+  children: ReactNode,
+  /**
+   * Whether the SelectBox is disabled.
+   */
+  isDisabled?: boolean
+}
+
+interface SelectBoxContextValue {
+  allowMultiSelect?: boolean,
+  orientation?: Orientation,
+  isDisabled?: boolean
+}
+
+const SelectBoxContext = createContext<SelectBoxContextValue>({orientation: 'vertical'});
+export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+
+const labelOnly = ':has([slot=label]):not(:has([slot=description]))';
+const noIllustration = ':not(:has([slot=illustration]))';
+const selectBoxStyles = style({
+  ...focusRing(),
+  display: 'grid',
+  gridAutoRows: '1fr',
+  position: 'relative',
+  font: 'ui',
+  cursor: 'default',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  width: {
+    default: 170,
+    orientation: {
+      horizontal: 368
+    }
+  },
+  height: {
+    default: 170,
+    orientation: {
+      horizontal: 'auto'
+    }
+  },
+  minWidth: {
+    default: 144,
+    orientation: {
+      horizontal: 188
+    }
+  },
+  maxWidth: {
+    default: 170,
+    orientation: {
+      horizontal: 480
+    }
+  },
+  minHeight: {
+    default: 144,
+    orientation: {
+      horizontal: 80
+    }
+  },
+  maxHeight: {
+    default: 170,
+    orientation: {
+      horizontal: 240
+    }
+  },
+  padding: {
+    default: 24,
+    orientation: {
+      horizontal: 16
+    }
+  },
+  paddingStart: {
+    orientation: {
+      horizontal: 32
+    }
+  },
+  paddingEnd: {
+    orientation: {
+      horizontal: 24
+    }
+  },
+  gridTemplateAreas: {
+    orientation: {
+      vertical: [
+        'illustration',
+        '.',
+        'label'
+      ],
+      horizontal: {
+        default: [
+          'illustration . label',
+          'illustration . description'
+        ],
+        [labelOnly]: [
+          'illustration . label'
+        ]
+      }
+    }
+  },
+  gridTemplateRows: {
+    orientation: {
+      vertical: ['min-content', 8, 'min-content'],
+      horizontal: {
+        default: ['min-content', 2, 'min-content'],
+        [noIllustration]: ['min-content']
+      }
+    }
+  },
+  gridTemplateColumns: {
+    orientation: {
+      horizontal: 'min-content 10px 1fr'
+    }
+  },
+  alignContent: {
+    orientation: {
+      vertical: 'center'
+    }
+  },
+  borderRadius: 'lg',
+  borderStyle: 'solid',
+  borderColor: {
+    default: 'transparent',
+    isSelected: 'gray-900',
+    isDisabled: 'transparent'
+  },
+  backgroundColor: {
+    default: 'layer-2',
+    isDisabled: 'disabled'
+  },
+  color: {
+    isDisabled: 'disabled'
+  },
+  boxShadow: {
+    default: 'emphasized',
+    isHovered: 'elevated',
+    isSelected: 'elevated',
+    isDisabled: 'none'
+  },
+  borderWidth: 2,
+  transition: 'default'
+}, getAllowedOverrides());
+
+const illustrationContainer = style({
+  gridArea: 'illustration',
+  alignSelf: 'center',
+  justifySelf: 'center',
+  minSize: 48,
+  '--iconPrimary': {
+    type: 'color',
+    value: {
+      default: baseColor('neutral'),
+      isDisabled: 'disabled'
+    }
+  }
+});
+
+const descriptionText = style({
+  gridArea: 'description',
+  alignSelf: 'center',
+  display: {
+    default: 'block',
+    orientation: {
+      vertical: 'none'
+    }
+  },
+  overflow: 'hidden',
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  color: {
+    default: baseColor('neutral'),
+    isDisabled: 'disabled'
+  }
+});
+
+const labelText = style({
+  gridArea: 'label',
+  alignSelf: 'center',
+  justifySelf: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  width: '100%',
+  overflow: 'hidden',
+  minWidth: 0,
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  fontWeight: {
+    orientation: {
+      horizontal: 'bold'
+    }
+  },
+  color: {
+    default: baseColor('neutral'),
+    isDisabled: 'disabled'
+  }
+});
+
+const gridStyles = style<{orientation?: Orientation}>({
+  display: 'grid',
+  gridAutoRows: '1fr',
+  gap: 24,
+  justifyContent: 'center',
+  '--size': {
+    type: 'width',
+    value: {
+      orientation: {
+        horizontal: 368,
+        vertical: 170
+      }
+    }
+  },
+  gridTemplateColumns: {
+    orientation: {
+      horizontal: 'repeat(auto-fit, var(--size))',
+      vertical: 'repeat(auto-fit, var(--size))'
+    }
+  }
+}, getAllowedOverrides());
+
+/**
+ * SelectBox is a single selectable item in a SelectBoxGroup.
+ */
+export function SelectBox(props: SelectBoxProps): ReactNode {
+  let {children, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;
+  
+  let {
+    orientation = 'vertical',
+    isDisabled: groupDisabled = false
+  } = useContext(SelectBoxContext);
+
+  const isDisabled = individualDisabled || groupDisabled;
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <ListBoxItem
+      isDisabled={isDisabled}
+      ref={ref}
+      className={renderProps => (UNSAFE_className || '') + selectBoxStyles({
+        ...renderProps,
+        orientation
+      }, styles)}
+      style={pressScale(ref, UNSAFE_style)}
+      {...otherProps}>
+      {({isSelected, isDisabled, isHovered}) => {
+        return (
+          <>
+            <div 
+              className={style({
+                position: 'absolute',
+                top: 8,
+                insetStart: 8,
+                pointerEvents: 'none'
+              })}
+              aria-hidden="true">
+              {!isDisabled && (
+                <div
+                  className={box({
+                    isSelected,
+                    isDisabled,
+                    size: 'M'
+                  } as any)}>
+                  <Checkmark 
+                    size="S" 
+                    className={iconStyles} />
+                </div>
+              )}
+            </div>
+            <Provider
+              values={[
+                [IllustrationContext, {
+                  size: 'S',
+                  styles: illustrationContainer({size: 'S', orientation, isDisabled, isHovered})
+                }],
+                [TextContext, {
+                  slots: {
+                    [DEFAULT_SLOT]: {
+                      styles: labelText({orientation, isDisabled, isHovered})
+                    },
+                    label: {
+                      styles: labelText({orientation, isDisabled, isHovered})
+                    },
+                    description: {
+                      styles: descriptionText({orientation, isDisabled, isHovered})
+                    }
+                  }
+                }]
+              ]}>
+              {children}
+            </Provider>
+          </>
+        );
+      }}
+    </ListBoxItem>
+  );
+}
+
+/*
+ * SelectBoxGroup allows users to select one or more options from a list.
+ */
+export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
+
+  let {
+    children,
+    selectionMode = 'single',
+    orientation = 'vertical',
+    isDisabled = false,
+    UNSAFE_className,
+    UNSAFE_style,
+    styles,
+    ...otherProps
+  } = props;
+
+  const selectBoxContextValue = useMemo(
+    () => {
+      const contextValue = {
+        orientation,
+        isDisabled
+      };
+      return contextValue;
+    },
+    [orientation, isDisabled]
+  );
+
+  return (
+    <ListBox
+      selectionMode={selectionMode}
+      layout="grid"
+      className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}
+      style={UNSAFE_style}
+      {...otherProps}>
+      <SelectBoxContext.Provider value={selectBoxContextValue}>
+        {children}
+      </SelectBoxContext.Provider>
+    </ListBox>
+  );
+});

package/src/SkeletonCollection.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {createLeafComponent} from '@react-aria/collections';
+import {CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {ReactNode} from 'react';
 import {Skeleton} from './Skeleton';
 
@@ -20,10 +20,14 @@ export interface SkeletonCollectionProps {
 
 let cache = new WeakMap();
 
+class SkeletonNode extends CollectionNode<unknown> {
+  static readonly type = 'skeleton';
+}
+
 /**
  * A SkeletonCollection generates placeholder content within a collection component such as CardView.
  */
-export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
+export const SkeletonCollection = createLeafComponent(SkeletonNode, (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?

package/src/Tabs.tsx

@@ -82,10 +82,23 @@ const InternalTabsContext = createContext<Partial<TabsProps> & {
   prevRef?: RefObject<DOMRect | null>,
   selectedKey?: Key | null
 }>({});
-const CollapseContext = createContext({
+
+interface CollapseContextType {
+  showTabs: boolean,
+  menuId: string,
+  valueId: string,
+  ariaLabel?: string | undefined,
+  ariaDescribedBy?: string | undefined,
+  tabs: Array<Node<any>>,
+  listRef?: RefObject<HTMLDivElement | null>,
+  onSelectionChange?: (key: Key) => void
+}
+
+const CollapseContext = createContext<CollapseContextType>({
   showTabs: true,
   menuId: '',
-  valueId: ''
+  valueId: '',
+  tabs: []
 });
 
 const tabs = style({
@@ -198,35 +211,57 @@ const tablist = style({
   minWidth: 'min'
 });
 
+const tablistWrapper = style({
+  position: 'relative',
+  minWidth: 0,
+  flexShrink: 0,
+  flexGrow: 0
+}, getAllowedOverrides());
+
 export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
-  let {showTabs} = useContext(CollapseContext) ?? {};
+  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};
+  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);
 
   if (showTabs) {
     return <TabListInner {...props} />;
   }
-  return null;
+  
+  return (
+    <div className={tablistWrapper(null, props.styles)}>
+      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
+        <HiddenTabs items={tabs} density={density} listRef={listRef} />
+      </div>}
+      <TabsMenu
+        id={menuId}
+        valueId={valueId}
+        items={tabs}
+        onSelectionChange={onSelectionChange}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy} />
+    </div>
+  );
 }
 
 function TabListInner<T extends object>(props: TabListProps<T>) {
   let {
     tablistRef,
+    orientation,
     density,
     labelBehavior,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   } = useContext(InternalTabsContext) ?? {};
+  let {tabs, listRef} = useContext(CollapseContext) ?? {};
 
   return (
     <div
       style={props.UNSAFE_style}
       className={
         (props.UNSAFE_className || '') +
-        style({
-          position: 'relative',
-          flexGrow: 0,
-          flexShrink: 0,
-          minWidth: 'min'
-        }, getAllowedOverrides())(null, props.styles)}>
+        tablistWrapper(null, props.styles)}>
+      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
+        <HiddenTabs items={tabs} density={density} listRef={listRef} />
+      </div>}
       <RACTabList
         {...props}
         aria-label={ariaLabel}
@@ -519,7 +554,7 @@ let HiddenTabs = function (props: {
   size?: string,
   density?: 'compact' | 'regular'
 }) {
-  let {listRef, items, size, density} = props;
+  let {listRef, items = [], size, density} = props;
 
   return (
     <div
@@ -612,7 +647,7 @@ let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionCha
 };
 
 let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {
-  let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;
+  let {orientation = 'horizontal', onSelectionChange} = props;
   let [showItems, _setShowItems] = useState(true);
   showItems = orientation === 'vertical' ? true : showItems;
   let setShowItems = useCallback((value: boolean) => {
@@ -683,14 +718,7 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
   } else {
     contents = (
       <>
-        <TabsMenu
-          id={menuId}
-          valueId={valueId}
-          items={children}
-          onSelectionChange={onSelectionChange}
-          aria-label={props['aria-label']}
-          aria-describedby={props['aria-labelledby']} />
-        <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>
+        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef, onSelectionChange, ariaLabel: props['aria-label'], ariaDescribedBy: props['aria-labelledby']}}>
           {props.children}
         </CollapseContext.Provider>
       </>
@@ -699,10 +727,7 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
 
   return (
     <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>
-      <div className={tablist({orientation, labelBehavior, density})}>
-        <HiddenTabs items={children} density={density} listRef={listRef} />
-      </div>
-      <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>
+      <CollapseContext.Provider value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>
         {contents}
       </CollapseContext.Provider>
     </div>

package/src/index.ts

@@ -72,6 +72,7 @@ export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl';
+export {SelectBox, SelectBoxGroup, SelectBoxGroupContext} from './SelectBoxGroup';
 export {Slider, SliderContext} from './Slider';
 export {Skeleton, useIsSkeleton} from './Skeleton';
 export {SkeletonCollection} from './SkeletonCollection';
@@ -148,6 +149,7 @@ export type {RadioProps} from './Radio';
 export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SegmentedControlProps, SegmentedControlItemProps} from './SegmentedControl';
+export type {SelectBoxProps, SelectBoxGroupProps} from './SelectBoxGroup';
 export type {SliderProps} from './Slider';
 export type {RangeCalendarProps} from './RangeCalendar';
 export type {RangeSliderProps} from './RangeSlider';