@react-spectrum/s2 0.2.1-nightly.4979

package/src/TextField.tsx

@@ -0,0 +1,210 @@
+/*
+ * 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 {
+  TextArea as AriaTextArea,
+  TextField as AriaTextField,
+  TextFieldProps as AriaTextFieldProps,
+  composeRenderProps,
+  InputContext,
+  TextAreaContext,
+  useSlottedContext
+} from 'react-aria-components';
+import {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createFocusableRef} from '@react-spectrum/utils';
+import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
+import {FormContext, useFormProps} from './Form';
+import {forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';
+import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {mergeRefs} from '@react-aria/utils';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleString} from '../style/types';
+import {TextFieldRef} from '@react-types/textfield';
+
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+  /**
+   * The size of the text field.
+   *
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL'
+}
+
+function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
+  return (
+    <_TextFieldBase
+      {...props}
+      ref={ref}>
+      <Input />
+    </_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'> {}
+
+function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef>) {
+  return (
+    <_TextFieldBase
+      {...props}
+      ref={ref}
+      fieldGroupCss={style({
+        alignItems: 'baseline',
+        height: 'auto'
+      })}>
+      <TextAreaInput />
+    </_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>) {
+  let inputRef = useRef<HTMLInputElement>(null);
+  let domRef = useRef<HTMLDivElement>(null);
+  let formContext = useContext(FormContext);
+  props = useFormProps(props);
+  let {
+    label,
+    description,
+    errorMessage,
+    necessityIndicator,
+    labelPosition = 'top',
+    labelAlign = 'start',
+    fieldGroupCss,
+    UNSAFE_style,
+    UNSAFE_className = '',
+    ...textFieldProps
+  } = props;
+
+  // Expose imperative interface for ref
+  useImperativeHandle(ref, () => ({
+    ...createFocusableRef(domRef, inputRef),
+    select() {
+      if (inputRef.current) {
+        inputRef.current.select();
+      }
+    },
+    getInputElement() {
+      return inputRef.current;
+    }
+  }));
+
+  return (
+    <AriaTextField
+      {...textFieldProps}
+      ref={domRef}
+      style={UNSAFE_style}
+      className={UNSAFE_className + style(field(), getAllowedOverrides())({
+        size: props.size,
+        labelPosition,
+        isInForm: !!formContext
+      }, props.styles)}>
+      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>
+        <FieldLabel
+          isDisabled={isDisabled}
+          isRequired={props.isRequired}
+          size={props.size}
+          labelPosition={labelPosition}
+          labelAlign={labelAlign}
+          necessityIndicator={necessityIndicator}
+          contextualHelp={props.contextualHelp}>
+          {label}
+        </FieldLabel>
+        {/* TODO: set GroupContext in RAC TextField */}
+        <FieldGroup role="presentation" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>
+          <InputContext.Consumer>
+            {ctx => (
+              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
+                {children}
+              </InputContext.Provider>
+            )}
+          </InputContext.Consumer>
+          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
+        </FieldGroup>
+        <HelpText
+          size={props.size}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          description={description}>
+          {errorMessage}
+        </HelpText>
+      </>))}
+    </AriaTextField>
+  );
+}
+
+let _TextFieldBase = forwardRef(TextFieldBase);
+
+function TextAreaInput() {
+  // Force re-render when value changes so we update the height.
+  useSlottedContext(TextAreaContext) ?? {};
+  let onHeightChange = (input: HTMLTextAreaElement) => {
+    // TODO: only do this if an explicit height is not given?
+    if (input) {
+      let prevAlignment = input.style.alignSelf;
+      let prevOverflow = input.style.overflow;
+      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
+      // The measure/applied height is also incorrect/reset if we turn on and off
+      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
+      let isFirefox = 'MozAppearance' in input.style;
+      if (!isFirefox) {
+        input.style.overflow = 'hidden';
+      }
+      input.style.alignSelf = 'start';
+      input.style.height = 'auto';
+      // offsetHeight - clientHeight accounts for the border/padding.
+      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+      input.style.overflow = prevOverflow;
+      input.style.alignSelf = prevAlignment;
+    }
+  };
+
+  return (
+    <AriaTextArea
+      ref={onHeightChange}
+      // Workaround for baseline alignment bug in Safari.
+      // https://bugs.webkit.org/show_bug.cgi?id=142968
+      placeholder=" "
+      className={style({
+        paddingX: 0,
+        paddingY: centerPadding(),
+        minHeight: 'control',
+        boxSizing: 'border-box',
+        backgroundColor: 'transparent',
+        color: '[inherit]',
+        fontFamily: '[inherit]',
+        fontSize: '[inherit]',
+        fontWeight: '[inherit]',
+        lineHeight: '[inherit]',
+        flexGrow: 1,
+        minWidth: 0,
+        outlineStyle: 'none',
+        borderStyle: 'none',
+        resize: 'none',
+        overflowX: 'hidden'
+      })} />
+  );
+}

package/src/TimeField.tsx

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

package/src/ToggleButton.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 {ActionButtonStyleProps, btnStyles} from './ActionButton';
+import {centerBaseline} from './CenterBaseline';
+import {FocusableRef} from '@react-types/shared';
+import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {forwardRef, ReactNode} from 'react';
+import {IconContext} from './Icon';
+import {pressScale} from './pressScale';
+import {Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components';
+import {StyleProps} from './style-utils';
+import {Text, TextContext} from './Content';
+import {useFocusableRef} from '@react-spectrum/utils';
+
+export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
+  /** The content to display in the button. */
+  children?: ReactNode,
+  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
+  isEmphasized?: boolean
+}
+
+function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  let domRef = useFocusableRef(ref);
+  return (
+    <RACToggleButton
+      {...props}
+      ref={domRef}
+      style={pressScale(domRef, props.UNSAFE_style)}
+      className={renderProps => (props.UNSAFE_className || '') + btnStyles({
+        ...renderProps,
+        staticColor: props.staticColor,
+        size: props.size,
+        isQuiet: props.isQuiet,
+        isEmphasized: props.isEmphasized
+      }, props.styles)}>
+      <Provider
+        values={[
+          [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+          [IconContext, {
+            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+          }]
+        ]}>
+        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+      </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/Toolbar.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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 {Toolbar as RACToolbar, ToolbarProps} from 'react-aria-components';
+
+
+export function Toolbar(props: ToolbarProps) {
+  return <RACToolbar {...props} />;
+}

package/src/Tooltip.tsx

@@ -0,0 +1,239 @@
+/*
+ * 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 {
+  Tooltip as AriaTooltip,
+  TooltipProps as AriaTooltipProps,
+  TooltipTrigger as AriaTooltipTrigger,
+  TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,
+  OverlayArrow,
+  TooltipRenderProps,
+  useLocale
+} from 'react-aria-components';
+import {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {ColorScheme} from '@react-types/provider';
+import {ColorSchemeContext} from './Provider';
+import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {keyframes} from '../style/style-macro' with {type: 'macro'};
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {useDOMRef} from '@react-spectrum/utils';
+
+export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {
+  /** The content of the tooltip. */
+  children?: ReactNode,
+  /**
+   * The placement of the element with respect to its anchor element.
+   *
+   * @default 'top'
+   */
+  placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'
+}
+
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {
+  /** The content of the tooltip. */
+  children?: ReactNode
+}
+
+const slide = keyframes(`
+  from {
+    transform: translate(var(--originX), var(--originY));
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+`);
+
+const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({
+  ...colorScheme(),
+  justifyContent: 'center',
+  alignItems: 'center',
+  maxWidth: 160,
+  minHeight: 24,
+  boxSizing: 'border-box',
+  font: 'ui-sm',
+  color: {
+    default: 'gray-25',
+    forcedColors: 'ButtonText'
+  },
+  borderWidth: {
+    forcedColors: 1
+  },
+  borderStyle: {
+    forcedColors: 'solid'
+  },
+  borderColor: {
+    forcedColors: 'transparent'
+  },
+  backgroundColor: 'neutral',
+  borderRadius: 'control',
+  paddingX: 'edge-to-text',
+  paddingY: centerPadding(),
+  margin: 8,
+  animation: {
+    isEntering: slide,
+    isExiting: slide
+  },
+  animationDuration: {
+    isEntering: 200,
+    isExiting: 200
+  },
+  animationDirection: {
+    isEntering: 'normal',
+    isExiting: 'reverse'
+  },
+  animationTimingFunction: {
+    isExiting: 'in'
+  },
+  '--originX': {
+    type: 'marginTop',
+    value: {
+      placement: {
+        top: 0,
+        bottom: 0,
+        left: 4,
+        right: -4
+      }
+    }
+  },
+  '--originY': {
+    type: 'marginTop',
+    value: {
+      placement: {
+        top: 4,
+        bottom: -4,
+        left: 0,
+        right: -0
+      }
+    }
+  }
+});
+
+const arrowStyles = style<TooltipRenderProps>({
+  display: 'block',
+  fill: 'gray-800',
+  rotate: {
+    placement: {
+      top: 0,
+      bottom: '180deg',
+      left: '-90deg',
+      right: '90deg'
+    }
+  },
+  translateX: {
+    placement: {
+      left: '[-25%]',
+      right: '[25%]'
+    }
+  }
+});
+
+let InternalTooltipTriggerContext = createContext<TooltipTriggerProps>({});
+
+function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
+  let {children, UNSAFE_style, UNSAFE_className = ''} = props;
+  let domRef = useDOMRef(ref);
+  let {
+    containerPadding,
+    crossOffset,
+    offset,
+    placement = 'top',
+    shouldFlip
+  } = useContext(InternalTooltipTriggerContext);
+  let colorScheme = useContext(ColorSchemeContext);
+  let {locale, direction} = useLocale();
+
+  // TODO: should we pass through lang and dir props in RAC?
+  let tooltipRef = useCallback((el: HTMLDivElement) => {
+    (domRef as MutableRefObject<HTMLDivElement>).current = el;
+    if (el) {
+      el.lang = locale;
+      el.dir = direction;
+    }
+  }, [locale, direction, domRef]);
+
+  return (
+    <AriaTooltip
+      {...props}
+      containerPadding={containerPadding}
+      crossOffset={crossOffset}
+      offset={offset}
+      placement={placement}
+      shouldFlip={shouldFlip}
+      ref={tooltipRef}
+      style={UNSAFE_style}
+      className={renderProps => UNSAFE_className + tooltip({...renderProps, colorScheme})}>
+      {renderProps => (
+        <>
+          <OverlayArrow>
+            <svg className={arrowStyles(renderProps)} xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z" />
+            </svg>
+          </OverlayArrow>
+          {children}
+        </>
+      )}
+    </AriaTooltip>
+  );
+}
+
+function TooltipTrigger(props: TooltipTriggerProps) {
+  let {
+    containerPadding,
+    crossOffset,
+    offset,
+    placement,
+    shouldFlip,
+    ...triggerProps
+  } = props;
+
+  return (
+    <AriaTooltipTrigger {...triggerProps}>
+      <InternalTooltipTriggerContext.Provider
+        value={{
+          containerPadding: containerPadding,
+          crossOffset: crossOffset,
+          offset: offset,
+          placement: placement,
+          shouldFlip: shouldFlip
+        }}>
+        {props.children}
+      </InternalTooltipTriggerContext.Provider>
+    </AriaTooltipTrigger>
+  );
+}
+
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+let _TooltipTrigger = forwardRef(TooltipTrigger);
+export {_TooltipTrigger as TooltipTrigger};
+
+
+/**
+ * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ */
+let _Tooltip = forwardRef(Tooltip);
+export {_Tooltip as Tooltip};
+
+
+// This is purely so that storybook generates the types for both Menu and MenuTrigger
+interface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function CombinedTooltip(props: ICombined) {
+  return <div />;
+}

package/src/bar-utils.ts

@@ -0,0 +1,65 @@
+/*
+ * 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 {centerPadding} from './style-utils' with {type: 'macro'};
+
+export const bar = () => ({
+  position: 'relative',
+  display: 'grid',
+  gridTemplateColumns: '1fr auto',
+  gridTemplateAreas: [
+    'label value',
+    'bar bar'
+  ],
+  isolation: 'isolate',
+  minWidth: 48, // progress-bar-minimum-width
+  maxWidth: '[768px]', // progress-bar-maximum-width
+  minHeight: 'control',
+  '--field-gap': {
+    type: 'rowGap',
+    value: centerPadding()
+  },
+  columnGap: 12 // spacing-200
+} as const);
+
+export const track = () => ({
+  gridArea: 'bar',
+  overflow: 'hidden',
+  marginTop: 4,
+  borderRadius: 'full',
+  backgroundColor: {
+    default: 'gray-300',
+    staticColor: {
+      white: {
+        default: 'transparent-white-100'
+      },
+      // TODO: Is there a black static color in S2?
+      black: {
+        default: 'transparent-black-400'
+      }
+    },
+    forcedColors: 'ButtonFace'
+  },
+  outlineWidth: {
+    default: 0,
+    forcedColors: 1
+  },
+  outlineStyle: {
+    default: 'none',
+    forcedColors: 'solid'
+  },
+  outlineColor: {
+    default: 'transparent',
+    forcedColors: 'ButtonText'
+  },
+  zIndex: 1 // to fix a weird webkit bug with rounded corners and masking
+} as const);

package/src/fix-types.d.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+declare module 'abortcontroller-polyfill/dist/cjs-ponyfill' {
+  type AbortSignal = any;
+}
+
+declare module '@parcel/feature-flags' {
+  type FeatureFlags = any;
+}