@react-spectrum/s2 1.3.1 → 1.5.0

package/src/TabsPicker.tsx

@@ -11,28 +11,22 @@
  */
 import {PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover';
 
-import {Select as AriaSelect, SelectProps as AriaSelectProps, SelectValue} from 'react-aria-components/Select';
+import {
+  Select as AriaSelect,
+  SelectProps as AriaSelectProps,
+  SelectValue
+} from 'react-aria-components/Select';
 import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
 import {Button} from 'react-aria-components/Button';
 import {centerBaseline} from './CenterBaseline';
-import {
-  checkmark,
-  description,
-  icon,
-  label,
-  menuitem,
-  sectionHeader,
-  sectionHeading
-} from './Menu';
+import {checkmark, description, icon, label, menuitem, sectionHeader, sectionHeading} from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
 import {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';
 import {controlFont, fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
 import {css} from '../style/style-macro' with {type: 'macro'};
 import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
-import {
-  FieldLabel
-} from './Field';
+import {FieldLabel} from './Field';
 import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
@@ -46,42 +40,49 @@ import {useFocusableRef} from './useDOMRef';
 import {useFormProps} from './Form';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
-export interface PickerStyleProps {
+export interface PickerStyleProps {}
+export interface PickerProps<T>
+  extends
+    Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'render' | '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 interface PickerProps<T extends object> extends
-  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'render' | '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);
+export const PickerContext =
+  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(
+    null
+  );
 const inputButton = style({
   ...focusRing(),
   ...fieldInput(),
@@ -119,7 +120,16 @@ const inputButton = style({
 export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
-  gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
+  gridTemplateColumns: [
+    edgeToText(32),
+    'auto',
+    'auto',
+    'minmax(0, 1fr)',
+    'auto',
+    'auto',
+    'auto',
+    edgeToText(32)
+  ],
   boxSizing: 'border-box',
   width: 'full',
   maxHeight: 'inherit',
@@ -153,7 +163,7 @@ const iconCenterWrapper = style({
   }
 });
 let InsideSelectValueContext = createContext(false);
-function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+function Picker<T>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
   props = useFormProps(props);
@@ -190,44 +200,55 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
               // Prevent press scale from sticking while Picker is open.
               // @ts-ignore
               isPressed={false}
-              className={renderProps => inputButton({
-                ...renderProps,
-                size: 'M',
-                isOpen,
-                isQuiet,
-                density
-              })}>
+              className={renderProps =>
+                inputButton({
+                  ...renderProps,
+                  size: 'M',
+                  isOpen,
+                  isQuiet,
+                  density
+                })
+              }>
               <SelectValue className={valueStyles + ' ' + css('&> * {display: none;}')}>
                 {({defaultChildren}) => {
                   return (
                     <Provider
                       values={[
-                        [IconContext, {
-                          slots: {
-                            icon: {
-                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
-                              styles: icon
+                        [
+                          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})
+                        ],
+                        [
+                          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}
@@ -235,9 +256,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                   );
                 }}
               </SelectValue>
-              <ChevronIcon
-                size={size}
-                className={iconStyles} />
+              <ChevronIcon size={size} className={iconStyles} />
             </Button>
             <Popover
               hideArrow
@@ -257,20 +276,26 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                 <Provider
                   values={[
                     [HeaderContext, {styles: sectionHeader({size})}],
-                    [HeadingContext, {
-                      // @ts-ignore
-                      role: 'presentation',
-                      styles: sectionHeading
-                    }],
-                    [TextContext, {
-                      slots: {
-                        'description': {styles: description({size, isFocused: false, isDisabled: false})}
+                    [
+                      HeadingContext,
+                      {
+                        // @ts-ignore
+                        role: 'presentation',
+                        styles: sectionHeading
                       }
-                    }]
+                    ],
+                    [
+                      TextContext,
+                      {
+                        slots: {
+                          description: {
+                            styles: description({size, isFocused: false, isDisabled: false})
+                          }
+                        }
+                      }
+                    ]
                   ]}>
-                  <ListBox
-                    items={items}
-                    className={menu}>
+                  <ListBox items={items} className={menu}>
                     {children}
                   </ListBox>
                 </Provider>
@@ -284,12 +309,12 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
   );
 }
 /**
- * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ * 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<{isDisabled?: boolean}>({
   backgroundColor: {
     default: 'neutral',
@@ -310,9 +335,9 @@ function TabLine(props: {isDisabled?: boolean}) {
   return <div className={selectedIndicator(props)} />;
 }
 
-
-export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render'>, StyleProps {
-  children: ReactNode
+export interface PickerItemProps
+  extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render'>, StyleProps {
+  children: ReactNode;
 }
 export function PickerItem(props: PickerItemProps): ReactNode {
   let ref = useRef(null);
@@ -322,17 +347,27 @@ export function PickerItem(props: PickerItemProps): ReactNode {
     <ListBoxItem
       {...props}
       ref={ref}
-      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}
+      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) => {
+      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}
-            }}}>
+            value={{
+              slots: {
+                icon: {
+                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}),
+                  styles: icon
+                }
+              }
+            }}>
             <DefaultProvider
               context={TextContext}
               value={{
@@ -340,7 +375,9 @@ export function PickerItem(props: PickerItemProps): ReactNode {
                   [DEFAULT_SLOT]: {styles: label({size})}
                 }
               }}>
-              {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}
+              {!isLink && (
+                <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />
+              )}
               {typeof children === 'string' ? <Text>{children}</Text> : children}
             </DefaultProvider>
           </DefaultProvider>
@@ -350,7 +387,15 @@ export function PickerItem(props: PickerItemProps): ReactNode {
   );
 }
 // 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}) {
+function DefaultProvider({
+  context,
+  value,
+  children
+}: {
+  context: React.Context<any>;
+  value: any;
+  children: any;
+}) {
   let inSelectValue = useContext(InsideSelectValueContext);
   if (inSelectValue) {
     return children;