@react-spectrum/s2 0.5.0 → 0.7.0

package/src/TabsPicker.tsx

@@ -0,0 +1,350 @@
+/*
+ * 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 {
+  PopoverProps as AriaPopoverProps,
+  Select as AriaSelect,
+  SelectProps as AriaSelectProps,
+  Button,
+  ContextValue,
+  DEFAULT_SLOT,
+  ListBox,
+  ListBoxItem,
+  ListBoxItemProps,
+  ListBoxProps,
+  Provider,
+  SelectValue
+} from 'react-aria-components';
+import {centerBaseline} from './CenterBaseline';
+import {
+  checkmark,
+  description,
+  icon,
+  label,
+  menuitem,
+  sectionHeader,
+  sectionHeading
+} from './Menu';
+import CheckmarkIcon from '../ui-icons/Checkmark';
+import ChevronIcon from '../ui-icons/Chevron';
+import {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
+import {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  FieldLabel
+} from './Field';
+import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';
+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 {pressScale} from './pressScale';
+import {raw} from '../style/style-macro' with {type: 'macro'};
+import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import {useFocusableRef} from '@react-spectrum/utils';
+import {useFormProps} from './Form';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+export interface PickerStyleProps {
+}
+export interface PickerProps<T extends object> extends
+  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'placeholder'>,
+  PickerStyleProps,
+  StyleProps,
+  SpectrumLabelableProps,
+  Pick<ListBoxProps<T>, 'items'>,
+  Pick<AriaPopoverProps, 'shouldFlip'> {
+    /** The contents of the collection. */
+    children: ReactNode | ((item: T) => ReactNode),
+    /**
+     * Direction the menu will render relative to the Picker.
+     *
+     * @default 'bottom'
+     */
+    direction?: 'bottom' | 'top',
+    /**
+     * Alignment of the menu relative to the input target.
+     *
+     * @default 'start'
+     */
+    align?: 'start' | 'end',
+    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
+    menuWidth?: number,
+    /** Density of the tabs, affects the height of the picker. */
+    density: 'compact' | 'regular',
+    /**
+     * If the tab picker should only display icon and no text for the button label.
+     * @default 'show
+     */
+    labelBehavior?: 'show' | 'hide',
+    /** Id for the SelectedValue so we can label using it. */
+    valueId?: string
+}
+export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+const inputButton = style({
+  ...focusRing(),
+  ...fieldInput(),
+  outlineStyle: {
+    default: 'none',
+    isFocusVisible: 'solid'
+  },
+  position: 'relative',
+  font: 'ui',
+  display: 'flex',
+  textAlign: 'start',
+  borderStyle: 'none',
+  borderRadius: 'sm',
+  alignItems: 'center',
+  transition: 'default',
+  columnGap: 'text-to-visual',
+  paddingX: 0,
+  backgroundColor: 'transparent',
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled'
+  },
+  maxWidth: {
+    isQuiet: 'max'
+  },
+  disableTapHighlight: true,
+  height: {
+    default: 48,
+    density: {
+      compact: 32
+    }
+  },
+  boxSizing: 'border-box'
+});
+export let menu = style({
+  outlineStyle: 'none',
+  display: 'grid',
+  gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
+  boxSizing: 'border-box',
+  maxHeight: '[inherit]',
+  overflow: 'auto',
+  padding: 8,
+  fontFamily: 'sans',
+  fontSize: 'control'
+});
+const valueStyles = style({
+  flexGrow: 0,
+  truncate: true,
+  display: 'flex',
+  alignItems: 'center',
+  height: 'full'
+});
+const iconStyles = style({
+  flexShrink: 0,
+  rotate: 90,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+const iconCenterWrapper = style({
+  display: 'flex',
+  gridArea: 'icon',
+  paddingStart: {
+    labelBehavior: {
+      hide: size(6)
+    }
+  }
+});
+let InsideSelectValueContext = createContext(false);
+function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
+  let domRef = useFocusableRef(ref);
+  props = useFormProps(props);
+  let {
+    direction = 'bottom',
+    align = 'start',
+    shouldFlip = true,
+    children,
+    items,
+    density,
+    labelBehavior = 'show',
+    valueId,
+    ...pickerProps
+  } = props;
+  let isQuiet = true;
+  const menuOffset: number = 6;
+  const size = 'M';
+  let ariaLabelledby = props['aria-labelledby'] ?? '';
+  return (
+    <div>
+      <AriaSelect
+        {...pickerProps}
+        aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>
+        {({isOpen}) => (
+          <>
+            <FieldLabel isQuiet={isQuiet} />
+            <Button
+              ref={domRef}
+              style={renderProps => pressScale(domRef)(renderProps)}
+              // Prevent press scale from sticking while Picker is open.
+              // @ts-ignore
+              isPressed={false}
+              className={renderProps => inputButton({
+                ...renderProps,
+                size: 'M',
+                isOpen,
+                isQuiet,
+                density
+              })}>
+              <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>
+                {({defaultChildren}) => {
+                  return (
+                    <Provider
+                      values={[
+                        [IconContext, {
+                          slots: {
+                            icon: {
+                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
+                              styles: icon
+                            }
+                          }
+                        }],
+                        [TextContext, {
+                          slots: {
+                            // Default slot is useful when converting other collections to PickerItems.
+                            [DEFAULT_SLOT]: {
+                              id: valueId,
+                              styles: style({
+                                display: {
+                                  default: 'block',
+                                  labelBehavior: {
+                                    hide: 'none'
+                                  }
+                                },
+                                flexGrow: 1,
+                                truncate: true
+                              })({labelBehavior})
+                            }
+                          }
+                        }],
+                        [InsideSelectValueContext, true]
+                      ]}>
+                      {defaultChildren}
+                    </Provider>
+                  );
+                }}
+              </SelectValue>
+              <ChevronIcon
+                size={size}
+                className={iconStyles} />
+            </Button>
+            <PopoverBase
+              hideArrow
+              offset={menuOffset}
+              placement={`${direction} ${align}` as Placement}
+              shouldFlip={shouldFlip}
+              styles={style({
+                marginStart: -12,
+                minWidth: 192,
+                width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+              })}>
+              <Provider
+                values={[
+                  [HeaderContext, {styles: sectionHeader({size})}],
+                  [HeadingContext, {styles: sectionHeading}],
+                  [TextContext, {
+                    slots: {
+                      description: {styles: description({size})}
+                    }
+                  }]
+                ]}>
+                <ListBox
+                  items={items}
+                  className={menu}>
+                  {children}
+                </ListBox>
+              </Provider>
+            </PopoverBase>
+          </>
+        )}
+      </AriaSelect>
+      <TabLine isDisabled={props.isDisabled} />
+    </div>
+  );
+}
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */
+let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
+export {_Picker as Picker};
+
+
+const selectedIndicator = style({
+  backgroundColor: {
+    default: 'neutral',
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'Highlight',
+      isDisabled: 'GrayText'
+    }
+  },
+  height: '[2px]',
+  borderStyle: 'none',
+  borderRadius: 'full',
+  marginTop: '[-2px]',
+  transitionDuration: 130,
+  transitionTimingFunction: 'in-out'
+});
+function TabLine(props) {
+  return <div className={selectedIndicator(props)} />;
+}
+
+
+export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
+  children: ReactNode
+}
+export function PickerItem(props: PickerItemProps) {
+  let ref = useRef(null);
+  let isLink = props.href != null;
+  const size = 'M';
+  return (
+    <ListBoxItem
+      {...props}
+      ref={ref}
+      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}
+      style={pressScale(ref, props.UNSAFE_style)}
+      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>
+      {(renderProps) => {
+        let {children} = props;
+        return (
+          <DefaultProvider
+            context={IconContext}
+            value={{slots: {
+              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}
+            }}}>
+            <DefaultProvider
+              context={TextContext}
+              value={{
+                slots: {
+                  [DEFAULT_SLOT]: {styles: label({size})}
+                }
+              }}>
+              {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}
+              {typeof children === 'string' ? <Text>{children}</Text> : children}
+            </DefaultProvider>
+          </DefaultProvider>
+        );
+      }}
+    </ListBoxItem>
+  );
+}
+// A Context.Provider that only sets a value if not inside SelectValue.
+function DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {
+  let inSelectValue = useContext(InsideSelectValueContext);
+  if (inSelectValue) {
+    return children;
+  }
+  return <context.Provider value={value}>{children}</context.Provider>;
+}

package/src/TagGroup.tsx

@@ -40,19 +40,19 @@ import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {IconContext} from './Icon';
 import {ImageContext} from './Image';
+import {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 // Get types from RSP and extend those?
 export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {
   /** The children of the tag. */
-  children?: ReactNode
+  children: ReactNode
 }
 
 export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {
@@ -80,7 +80,7 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | '
   onGroupAction?: () => void
 }
 
-export const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+export const TagGroupContext = createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 const helpTextStyles = style({
   gridArea: 'helptext',
@@ -103,7 +103,8 @@ const helpTextStyles = style({
 
 const InternalTagGroupContext = createContext<TagGroupProps<any>>({});
 
-function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
+export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);
   props = useFormProps(props);
   let {onRemove} = props;
@@ -114,11 +115,7 @@ function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDiv
       </CollectionBuilder>
     </InternalTagGroupContext.Provider>
   );
-}
-
-/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
-let _TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(TagGroup);
-export {_TagGroup as TagGroup};
+});
 
 function TagGroupInner<T>({
   props: {
@@ -322,7 +319,7 @@ function TagGroupInner<T>({
             {maxRows != null && (
               <div
                 // @ts-ignore
-                inert="true"
+                inert={inertValue(true)}
                 ref={hiddenTagsRef}
                 className={style({
                   display: 'inline',
@@ -360,7 +357,7 @@ function TagGroupInner<T>({
                 minWidth: 'full',
                 font: 'ui'
               })}>
-              {item => <_Tag {...item.props} id={item.key} textValue={item.textValue} />}
+              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}
             </TagList>
             {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&
               <ActionGroup
@@ -519,7 +516,8 @@ const avatarSize = {
   L: 24
 } as const;
 
-function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
+/** An individual Tag for TagGroups. */
+export const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
   textValue ||= typeof children === 'string' ? children : undefined;
   let ctx = useSlottedContext(TagGroupContext);
   let isInRealDOM = Boolean(ctx?.size);
@@ -541,12 +539,7 @@ function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivEleme
       ))}
     </AriaTag>
   );
-}
-
-
-/** An individual Tag for TagGroups. */
-let _Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(Tag);
-export {_Tag as Tag};
+});
 
 function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {
   let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};

package/src/TextField.tsx

@@ -41,35 +41,37 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);
+export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
 
-function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * TextFields are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+export const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);
   return (
-    <_TextFieldBase
+    <TextFieldBase
       {...props}
       ref={ref}>
       <Input />
-    </_TextFieldBase>
+    </TextFieldBase>
   );
-}
-
-/**
- * TextFields are text inputs that allow users to input custom text entries
- * with a keyboard. Various decorations can be displayed around the field to
- * communicate the entry requirements.
- */
-let _TextField = forwardRef(TextField);
-export {_TextField as TextField};
+});
 
 export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}
 
-export const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);
+export const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);
 
-function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+/**
+ * TextAreas are multiline text inputs, useful for cases where users have
+ * a sizable amount of text to enter. They allow for all customizations that
+ * are available to text fields.
+ */
+export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);
   return (
-    <_TextFieldBase
+    <TextFieldBase
       {...props}
       ref={ref}
       fieldGroupCss={style({
@@ -77,19 +79,11 @@ function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElemen
         height: 'auto'
       })}>
       <TextAreaInput />
-    </_TextFieldBase>
+    </TextFieldBase>
   );
-}
+});
 
-/**
- * TextAreas are multiline text inputs, useful for cases where users have
- * a sizable amount of text to enter. They allow for all customizations that
- * are available to text fields.
- */
-let _TextArea = forwardRef(TextArea);
-export {_TextArea as TextArea};
-
-function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
+export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useRef<HTMLDivElement>(null);
   let formContext = useContext(FormContext);
@@ -162,9 +156,7 @@ function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupC
       </>))}
     </AriaTextField>
   );
-}
-
-let _TextFieldBase = forwardRef(TextFieldBase);
+});
 
 function TextAreaInput() {
   // Force re-render when value changes so we update the height.

package/src/ToggleButton.tsx

@@ -28,14 +28,18 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the button. */
-  children?: ReactNode,
+  children: ReactNode,
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
   isEmphasized?: boolean
 }
 
-export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * ToggleButtons allow users to toggle a selection on or off, for example
+ * switching between two states or modes.
+ */
+export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
@@ -61,6 +65,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
       className={renderProps => (props.UNSAFE_className || '') + btnStyles({
         ...renderProps,
         staticColor,
+        isStaticColor: !!staticColor,
         size,
         isQuiet,
         isEmphasized,
@@ -83,11 +88,4 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
       </Provider>
     </RACToggleButton>
   );
-}
-
-/**
- * ToggleButtons allow users to toggle a selection on or off, for example
- * switching between two states or modes.
- */
-let _ToggleButton = forwardRef(ToggleButton);
-export {_ToggleButton as ToggleButton};
+});

package/src/ToggleButtonGroup.tsx

@@ -20,9 +20,12 @@ export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RAC
   isEmphasized?: boolean
 }
 
-export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>(null);
+export const ToggleButtonGroupContext = createContext<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>>(null);
 
-function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
+ */
+export const ToggleButtonGroup = forwardRef(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonGroupContext);
   let {
     density = 'regular',
@@ -46,10 +49,4 @@ function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTML
       </ToggleButtonGroupContext.Provider>
     </RACToggleButtonGroup>
   );
-}
-
-/**
- * A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
- */
-const _ToggleButtonGroup = forwardRef(ToggleButtonGroup);
-export {_ToggleButtonGroup as ToggleButtonGroup};
+});