@react-spectrum/s2 0.2.1-nightly.4979

package/src/ComboBox.tsx

@@ -0,0 +1,379 @@
+/*
+ * 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 {
+  ComboBox as AriaComboBox,
+  ComboBoxProps as AriaComboBoxProps,
+  PopoverProps as AriaPopoverProps,
+  Section as AriaSection,
+  Button,
+  InputContext,
+  ListBox,
+  ListBoxItem,
+  ListBoxItemProps,
+  ListBoxProps,
+  Provider,
+  SectionProps
+} from 'react-aria-components';
+import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {centerBaseline} from './CenterBaseline';
+import {
+  checkmark,
+  description,
+  Divider,
+  icon,
+  iconCenterWrapper,
+  label,
+  menuitem,
+  section,
+  sectionHeader,
+  sectionHeading
+} from './Menu';
+import CheckmarkIcon from '../ui-icons/Checkmark';
+import ChevronIcon from '../ui-icons/Chevron';
+import {createContext, CSSProperties, forwardRef, ReactNode, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';
+import {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';
+import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
+import {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {FormContext, useFormProps} from './Form';
+import {forwardRefType} from './types';
+import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
+import {IconContext} from './Icon';
+import {menu} from './Picker';
+import {mergeRefs, useResizeObserver} from '@react-aria/utils';
+import {Placement} from 'react-aria';
+import {Popover} from './Popover';
+import {pressScale} from './pressScale';
+
+
+export interface ComboboxStyleProps {
+  /**
+   * The size of the Combobox.
+   *
+   * @default "M"
+   */
+  size?: 'S' | 'M' | 'L' | 'XL'
+}
+export interface ComboBoxProps<T extends object> extends
+  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,
+  ComboboxStyleProps,
+  StyleProps,
+  SpectrumLabelableProps,
+  HelpTextProps,
+  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
+}
+
+const inputButton = style({
+  display: 'flex',
+  outlineStyle: 'none',
+  textAlign: 'center',
+  borderStyle: 'none',
+  borderRadius: 'control-sm',
+  alignItems: 'center',
+  justifyContent: 'center',
+  size: {
+    size: {
+      S: 16,
+      M: 20,
+      L: 24,
+      XL: 32
+    }
+  },
+  marginStart: 'text-to-control',
+  aspectRatio: 'square',
+  flexShrink: 0,
+  transition: {
+    default: 'default',
+    forcedColors: 'none'
+  },
+  backgroundColor: {
+    default: baseColor('gray-100'),
+    isOpen: 'gray-200',
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonText',
+      isHovered: 'Highlight',
+      isOpen: 'Highlight',
+      isDisabled: 'GrayText'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonFace'
+    }
+  }
+});
+
+const iconStyles = style({
+  flexShrink: 0,
+  rotate: 90,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+
+let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
+
+function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: FocusableRef<HTMLDivElement>) {
+  let domRef = useFocusableRef(ref);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let formContext = useContext(FormContext);
+  props = useFormProps(props);
+  let {
+    direction = 'bottom',
+    align = 'start',
+    shouldFlip = true,
+    menuWidth,
+    label,
+    description: descriptionMessage,
+    errorMessage,
+    children,
+    items,
+    size = 'M',
+    labelPosition = 'top',
+    labelAlign = 'start',
+    necessityIndicator,
+    UNSAFE_className = '',
+    UNSAFE_style,
+    ...pickerProps
+  } = props;
+
+  // Expose imperative interface for ref
+  useImperativeHandle(ref, () => ({
+    ...createFocusableRef(domRef, inputRef),
+    select() {
+      if (inputRef.current) {
+        inputRef.current.select();
+      }
+    },
+    getInputElement() {
+      return inputRef.current;
+    }
+  }));
+
+  // Better way to encode this into a style? need to account for flipping
+  let menuOffset: number;
+  if (size === 'S') {
+    menuOffset = 6;
+  } else if (size === 'M') {
+    menuOffset = 6;
+  } else if (size === 'L') {
+    menuOffset = 7;
+  } else {
+    menuOffset = 8;
+  }
+
+  let triggerRef = useRef<HTMLDivElement>(null);
+   // Make menu width match input + button
+  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (triggerRef.current) {
+      let inputRect = triggerRef.current.getBoundingClientRect();
+      let minX = inputRect.left;
+      let maxX = inputRect.right;
+      setTriggerWidth((maxX - minX) + 'px');
+    }
+  }, [triggerRef, setTriggerWidth]);
+
+  useResizeObserver({
+    ref: triggerRef,
+    onResize: onResize
+  });
+
+  return (
+    <AriaComboBox
+      {...pickerProps}
+      style={UNSAFE_style}
+      className={UNSAFE_className + style(field(), getAllowedOverrides())({
+        isInForm: !!formContext,
+        labelPosition,
+        size
+      }, props.styles)}>
+      {({isDisabled, isOpen, isRequired, isInvalid}) => (
+        <>
+          <InternalComboboxContext.Provider value={{size}}>
+            <FieldLabel
+              isDisabled={isDisabled}
+              isRequired={isRequired}
+              size={size}
+              labelPosition={labelPosition}
+              labelAlign={labelAlign}
+              necessityIndicator={necessityIndicator}
+              contextualHelp={props.contextualHelp}>
+              {label}
+            </FieldLabel>
+            <FieldGroup
+              ref={triggerRef}
+              role="presentation"
+              isDisabled={isDisabled}
+              isInvalid={isInvalid}
+              size={size}
+              styles={style({
+                ...fieldInput(),
+                paddingStart: 'edge-to-text',
+                // better way to do this one? it's not actually half, they are
+                // [9, 4], [12, 6], [15, 8], [18, 8]
+                // also noticed that our measurement is including the border, making the padding too much
+                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'
+              })({size})}>
+              <InputContext.Consumer>
+                {ctx => (
+                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
+                    <Input />
+                  </InputContext.Provider>
+                )}
+              </InputContext.Consumer>
+              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
+              <Button
+                ref={buttonRef}
+                style={renderProps => pressScale(buttonRef)(renderProps)}
+                className={renderProps => inputButton({
+                  ...renderProps,
+                  size,
+                  isOpen
+                })}>
+                <ChevronIcon
+                  size={size}
+                  className={iconStyles} />
+              </Button>
+            </FieldGroup>
+            <HelpText
+              size={size}
+              isDisabled={isDisabled}
+              isInvalid={isInvalid}
+              description={descriptionMessage}>
+              {errorMessage}
+            </HelpText>
+            <Popover
+              hideArrow
+              triggerRef={triggerRef}
+              offset={menuOffset}
+              placement={`${direction} ${align}` as Placement}
+              shouldFlip={shouldFlip}
+              UNSAFE_style={{
+                width: menuWidth ? `${menuWidth}px` : undefined,
+                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out
+                '--trigger-width': `calc(${triggerWidth} - 2px)`
+              } as CSSProperties}
+              styles={style({
+                minWidth: '[var(--trigger-width)]',
+                width: '[var(--trigger-width)]'
+              })}>
+              <Provider
+                values={[
+                  [HeaderContext, {className: sectionHeader({size})}],
+                  [HeadingContext, {className: sectionHeading}],
+                  [TextContext, {
+                    slots: {
+                      'description': {className: description({size})}
+                    }
+                  }]
+                ]}>
+                <ListBox
+                  items={items}
+                  className={menu({size})}>
+                  {children}
+                </ListBox>
+              </Provider>
+            </Popover>
+          </InternalComboboxContext.Provider>
+        </>
+      )}
+    </AriaComboBox>
+  );
+}
+
+/**
+ * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
+ */
+let _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);
+export {_ComboBox as ComboBox};
+
+
+export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
+  children: ReactNode
+}
+
+export function ComboBoxItem(props: ComboBoxItemProps) {
+  let ref = useRef(null);
+  let isLink = props.href != null;
+  let {size} = useContext(InternalComboboxContext);
+  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 (
+          <>
+            <Provider
+              values={[
+                [IconContext, {
+                  slots: {
+                    icon: {render: centerBaseline({slot: 'icon', className: iconCenterWrapper}), styles: icon}
+                  }
+                }],
+                [TextContext, {
+                  slots: {
+                    label: {className: label},
+                    description: {className: description({...renderProps, size})}
+                  }
+                }]
+              ]}>
+              {!isLink && <CheckmarkIcon size={({S: 'S', M: 'L', L: 'XL', XL: 'XXL'} as const)[size]} className={checkmark({...renderProps, size})} />}
+              {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+            </Provider>
+          </>
+        );
+      }}
+    </ListBoxItem>
+  );
+}
+
+export interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}
+export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {
+  return (
+    <>
+      <AriaSection
+        {...props}
+        className={section}>
+        {props.children}
+      </AriaSection>
+      <Divider />
+    </>
+  );
+}

package/src/Content.tsx

@@ -0,0 +1,132 @@
+/*
+ * 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 {createContext, ForwardedRef, forwardRef, HTMLAttributes, ImgHTMLAttributes} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {HeadingProps, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, Text as TextAria, useContextProps} from 'react-aria-components';
+import {useDOMRef} from '@react-spectrum/utils';
+
+// TODO: export these types from RAC?
+interface SlottedValue<T> {
+  slots?: Record<string | symbol, T>
+}
+
+export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
+export type ContextValue<T, E extends Element> = SlottedContextValue<WithRef<T, E>>;
+export type WithRef<T, E> = T & {ref?: ForwardedRef<E>};
+
+export const HeadingContext = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});
+
+// Wrapper around RAC Heading to unmount when hidden.
+function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
+  [props, ref] = useContextProps(props, ref, HeadingContext);
+  if (props.hidden) {
+    return null;
+  }
+
+  return <RACHeading {...props} ref={ref} />;
+}
+
+const _Heading = forwardRef(Heading);
+export {_Heading as Heading};
+
+export const HeaderContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+
+function Header(props: HTMLAttributes<HTMLElement>, ref: DOMRef) {
+  let domRef = useDOMRef(ref);
+  [props, domRef] = useContextProps(props, domRef, HeaderContext);
+  if (props.hidden) {
+    return null;
+  }
+
+  return <RACHeader {...props} ref={domRef} />;
+}
+
+const _Header = forwardRef(Header);
+export {_Header as Header};
+
+export const ContentContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+
+function Content(props: HTMLAttributes<HTMLElement>, ref: DOMRef<HTMLDivElement>) {
+  let domRef = useDOMRef(ref);
+  [props, domRef] = useContextProps(props, domRef, ContentContext);
+  if (props.hidden) {
+    return null;
+  }
+  return <div {...props} ref={domRef} />;
+}
+
+const _Content = forwardRef(Content);
+export {_Content as Content};
+
+export const TextContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+
+function Text(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, TextContext);
+  if (props.hidden) {
+    return null;
+  }
+  return <TextAria {...props} ref={ref} />;
+}
+
+const _Text = forwardRef(Text);
+export {_Text as Text};
+
+export const KeyboardContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+
+function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, KeyboardContext);
+  if (props.hidden) {
+    return null;
+  }
+  return <KeyboardAria {...props} ref={ref} />;
+}
+
+const _Keyboard = forwardRef(Keyboard);
+export {_Keyboard as Keyboard};
+
+export const FooterContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+
+function Footer(props: HTMLAttributes<HTMLElement>, ref: DOMRef) {
+  let domRef = useDOMRef(ref);
+  [props, domRef] = useContextProps(props, domRef, FooterContext);
+  if (props.hidden) {
+    return null;
+  }
+  return <footer {...props} ref={domRef} />;
+}
+
+const _Footer = forwardRef(Footer);
+export {_Footer as Footer};
+
+export const ImageContext = createContext<ContextValue<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>({});
+
+function Image(props: ImgHTMLAttributes<HTMLImageElement>, ref: DOMRef<HTMLImageElement>) {
+  let domRef = useDOMRef(ref);
+  [props, domRef] = useContextProps(props, domRef, ImageContext);
+  if (props.hidden) {
+    return null;
+  }
+
+  if (props.alt == null) {
+    console.warn(
+      'The `alt` prop was not provided to an image. ' +
+      'Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image ' +
+      'is decorative or redundant with displayed text and should not be announced by screen readers.'
+    );
+  }
+
+  return <img alt={props.alt} {...props} ref={domRef} />;
+}
+
+const _Image = forwardRef(Image);
+export {_Image as Image};

package/src/ContextualHelp.tsx

@@ -0,0 +1,132 @@
+import {ActionButton} from './ActionButton';
+import {AriaLabelingProps, DOMProps, FocusableRef} from '@react-types/shared';
+import {ContentContext, FooterContext, HeadingContext} from './Content';
+import {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext, useContextProps} from 'react-aria-components';
+import {createContext, forwardRef, ReactNode} from 'react';
+import {dialogInner} from './Dialog';
+import {DialogTrigger, DialogTriggerProps} from './DialogTrigger';
+import {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';
+import HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';
+import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
+import {mergeStyles} from '../style/runtime';
+import {Popover, PopoverProps} from './Popover';
+import {style, size as styleSize} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleProps} from './style-utils' with { type: 'macro' };
+import {useFocusableRef} from '@react-spectrum/utils';
+
+export interface ContextualHelpStyleProps {
+  /**
+   * Indicates whether contents are informative or provides helpful guidance.
+   *
+   * @default 'help'
+   */
+  variant?: 'info' | 'help'
+}
+export interface ContextualHelpProps extends
+  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>,
+  Pick<PopoverProps, 'containerPadding'>,
+  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {
+  /** Contents of the Contextual Help popover. */
+  children?: ReactNode,
+  /**
+   * The size of the ActionButton.
+   *
+   * @default 'XS'
+   */
+  size?: 'XS' | 'S'
+}
+
+const popover = style({
+  fontFamily: 'sans',
+  minWidth: '[218px]',
+  width: '[218px]',
+  padding: 24
+});
+
+export const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, HTMLButtonElement>>({});
+
+function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+  let domRef = useFocusableRef(ref);
+  [props, domRef] = useContextProps(props, domRef, ContextualHelpContext);
+  let {
+    children,
+    defaultOpen,
+    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.
+    size = 'XS',
+    crossOffset,
+    isOpen,
+    offset = 8,
+    onOpenChange,
+    placement = 'bottom start',
+    shouldFlip,
+    UNSAFE_className,
+    UNSAFE_style,
+    variant = 'help'
+  } = props;
+
+  // In a FieldLabel we're getting the context's aria-labeledby, so we need to
+  // manually set the aria-label after useLabels() to keep the order of label
+  // then ContextualHelp variant
+  let labelProps = useLabels(props);
+  // Translate variant
+  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + variant : variant;
+
+  let buttonProps = filterDOMProps(props, {labelable: true});
+
+  return (
+    <DialogTrigger
+      isOpen={isOpen}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}>
+      <ActionButton
+        slot={null}
+        ref={ref}
+        size={size}
+        {...mergeProps(buttonProps, labelProps)}
+        UNSAFE_style={UNSAFE_style}
+        UNSAFE_className={UNSAFE_className}
+        isQuiet>
+        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}
+      </ActionButton>
+      <Popover
+        placement={placement}
+        shouldFlip={shouldFlip}
+        // not working => containerPadding={containerPadding}
+        offset={offset}
+        crossOffset={crossOffset}
+        hideArrow
+        UNSAFE_className={popover}>
+        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none'}))}>
+          <Provider
+            values={[
+              [TextContext, {
+                slots: {
+                  [DEFAULT_SLOT]: {}
+                }
+              }],
+              [HeadingContext, {className: style({
+                font: 'heading-xs',
+                margin: 0,
+                marginBottom: styleSize(8) // This only makes it 10px on mobile and should be 12px
+              })}],
+              [ContentContext, {className: style({
+                font: 'body-sm'
+              })}],
+              [FooterContext, {className: style({
+                font: 'body-sm',
+                marginTop: 16
+              })}]
+            ]}>
+            {children}
+          </Provider>
+        </RACDialog>
+      </Popover>
+    </DialogTrigger>
+  );
+}
+
+/**
+ * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
+ */
+let _ContextualHelp = forwardRef(ContextualHelp);
+export {_ContextualHelp as ContextualHelp};

package/src/DateField.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 {
+  DateField as AriaDateField,
+  DateFieldProps as AriaDateFieldProps,
+  DateInput,
+  DateSegment,
+  DateValue,
+  FieldError,
+  Label,
+  Text
+} from 'react-aria-components';
+import {HelpTextProps} from '@react-types/shared';
+import {ReactNode} from 'react';
+
+
+export interface DateFieldProps<T extends DateValue>
+  extends AriaDateFieldProps<T>, HelpTextProps {
+  label?: ReactNode
+}
+
+export function DateField<T extends DateValue>(
+  {label, description, errorMessage, ...props}: DateFieldProps<T>
+) {
+  return (
+    <AriaDateField {...props}>
+      <Label>{label}</Label>
+      <DateInput>
+        {(segment) => <DateSegment segment={segment} />}
+      </DateInput>
+      {description && <Text slot="description">{description}</Text>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaDateField>
+  );
+}