@react-spectrum/s2 0.2.1-nightly.4979

package/src/Switch.tsx

@@ -0,0 +1,187 @@
+/*
+ * 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 {
+  Switch as AriaSwitch,
+  SwitchProps as AriaSwitchProps,
+  SwitchRenderProps
+} from 'react-aria-components';
+import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {CenterBaseline} from './CenterBaseline';
+import {FocusableRef} from '@react-types/shared';
+import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {FormContext, useFormProps} from './Form';
+import {forwardRef, ReactNode, useContext, useRef} from 'react';
+import {pressScale} from './pressScale';
+import {useFocusableRef} from '@react-spectrum/utils';
+
+interface SwitchStyleProps {
+  /**
+   * The size of the Switch.
+   *
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * Whether the Switch should be displayed with an emphasized style.
+   */
+  isEmphasized?: boolean
+}
+
+interface RenderProps extends SwitchRenderProps, SwitchStyleProps {}
+
+export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {
+  children?: ReactNode
+}
+
+const wrapper = style({
+  display: 'flex',
+  columnGap: 'text-to-control',
+  alignItems: 'baseline',
+  width: 'fit',
+  font: 'control',
+  transition: 'colors',
+  color: {
+    default: 'neutral',
+    isDisabled: {
+      default: 'disabled',
+      forcedColors: 'GrayText'
+    }
+  },
+  gridColumnStart: {
+    isInForm: 'field'
+  },
+  disableTapHighlight: true
+}, getAllowedOverrides());
+
+const track = style<RenderProps>({
+  ...focusRing(),
+  borderRadius: 'full',
+  '--trackWidth': {
+    type: 'width',
+    value: fontRelative(26)
+  },
+  '--trackHeight': {
+    type: 'height',
+    value: 'control-sm'
+  },
+  width: '--trackWidth',
+  height: '--trackHeight',
+  boxSizing: 'border-box',
+  borderWidth: 2,
+  borderStyle: 'solid',
+  transition: 'default',
+  forcedColorAdjust: 'none',
+  borderColor: {
+    default: baseColor('gray-800'),
+    forcedColors: 'ButtonBorder',
+    isDisabled: {
+      default: 'gray-400',
+      forcedColors: 'GrayText'
+    },
+    isSelected: 'transparent'
+  },
+  backgroundColor: {
+    default: 'gray-25',
+    isSelected: {
+      default: 'neutral',
+      isEmphasized: baseColor('accent-900'),
+      forcedColors: 'Highlight',
+      isDisabled: {
+        default: 'gray-400',
+        forcedColors: 'GrayText'
+      }
+    }
+  }
+});
+
+const handle = style<RenderProps>({
+  height: 'full',
+  aspectRatio: 'square',
+  borderRadius: 'full',
+  backgroundColor: {
+    default: 'neutral',
+    isDisabled: {
+      default: 'gray-400',
+      forcedColors: 'GrayText'
+    },
+    isSelected: 'gray-25'
+  },
+  transition: 'default'
+});
+
+// Use an inline style to calculate the transform so we can combine it with the press scale.
+const transformStyle = ({isSelected}: SwitchRenderProps) => ({
+  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.
+  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,
+  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the
+  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide
+  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve
+  // the desired effect. Given the following formula:
+  //
+  //   scale = perspective / (perspective - translateZ)
+  //
+  // and desired scale factors (accounting for the 2px border on each side of the track):
+  //
+  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)
+  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)
+  //
+  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:
+  //
+  //    defaultPerspective = trackHeight - 8px
+  //    selectedPerspective = 2 * (trackHeight - 6px)
+  transform: isSelected
+    // The selected state also translates the X position to the end of the track (minus the borders).
+    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'
+    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
+});
+
+function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+  let {children, UNSAFE_className = '', UNSAFE_style} = props;
+  let domRef = useFocusableRef(ref);
+  let handleRef = useRef(null);
+  let isInForm = !!useContext(FormContext);
+  props = useFormProps(props);
+  return (
+    <AriaSwitch
+      {...props}
+      ref={domRef}
+      style={UNSAFE_style}
+      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
+      {renderProps => (
+        <>
+          <CenterBaseline>
+            <div
+              className={track({
+                ...renderProps,
+                size: props.size || 'M',
+                isEmphasized: props.isEmphasized
+              })}>
+              <div
+                ref={handleRef}
+                style={pressScale(handleRef, transformStyle)(renderProps)}
+                className={handle(renderProps)} />
+            </div>
+          </CenterBaseline>
+          {children}
+        </>
+      )}
+    </AriaSwitch>
+  );
+}
+
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+let _Switch = /*#__PURE__*/ forwardRef(Switch);
+export {_Switch as Switch};

package/src/Table.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 {
+  Column as AriaColumn,
+  Row as AriaRow,
+  Table as AriaTable,
+  TableHeader as AriaTableHeader,
+  Button,
+  Cell,
+  Collection,
+  ColumnProps,
+  RowProps,
+  TableHeaderProps,
+  TableProps,
+  useTableOptions
+} from 'react-aria-components';
+
+import {Checkbox} from './Checkbox';
+
+
+export function Table(props: TableProps) {
+  return <AriaTable {...props} />;
+}
+
+export function Column(props: ColumnProps) {
+  return (
+    <AriaColumn {...props}>
+      {({allowsSorting, sortDirection}) => (
+        <>
+          {props.children}
+          {allowsSorting && (
+            <span aria-hidden="true" className="sort-indicator">
+              {sortDirection === 'ascending' ? '▲' : '▼'}
+            </span>
+          )}
+        </>
+      )}
+    </AriaColumn>
+  );
+}
+
+export function TableHeader<T extends object>(
+  {columns, children}: TableHeaderProps<T>
+) {
+  let {selectionBehavior, selectionMode, allowsDragging} = useTableOptions();
+
+  return (
+    <AriaTableHeader>
+      {/* Add extra columns for drag and drop and selection. */}
+      {allowsDragging && <AriaColumn />}
+      {selectionBehavior === 'toggle' && (
+        <AriaColumn>
+          {selectionMode === 'multiple' && <Checkbox slot="selection" />}
+        </AriaColumn>
+      )}
+      <Collection items={columns}>
+        {children}
+      </Collection>
+    </AriaTableHeader>
+  );
+}
+
+export function Row<T extends object>(
+  {id, columns, children, ...otherProps}: RowProps<T>
+) {
+  let {selectionBehavior, allowsDragging} = useTableOptions();
+
+  return (
+    <AriaRow id={id} {...otherProps}>
+      {allowsDragging && (
+        <Cell>
+          <Button slot="drag">≡</Button>
+        </Cell>
+      )}
+      {selectionBehavior === 'toggle' && (
+        <Cell>
+          <Checkbox slot="selection" />
+        </Cell>
+      )}
+      <Collection items={columns}>
+        {children}
+      </Collection>
+    </AriaRow>
+  );
+}

package/src/Tabs.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 {Tabs as RACTabs, TabsProps} from 'react-aria-components';
+
+
+export function Tabs(props: TabsProps) {
+  return <RACTabs {...props} />;
+}

package/src/TagGroup.tsx

@@ -0,0 +1,314 @@
+/*
+ * 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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
+import {
+  Tag as AriaTag,
+  TagGroup as AriaTagGroup,
+  TagGroupProps as AriaTagGroupProps,
+  TagProps as AriaTagProps,
+  composeRenderProps,
+  Provider,
+  TextContext as RACTextContext,
+  TagList,
+  TagListProps
+} from 'react-aria-components';
+import {AvatarContext} from './Avatar';
+import {CenterBaseline, centerBaseline} from './CenterBaseline';
+import {ClearButton} from './ClearButton';
+import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import {DOMRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {field, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {FieldLabel} from './Field';
+import {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
+import {FormContext, useFormProps} from './Form';
+import {forwardRefType} from './types';
+import {IconContext} from './Icon';
+import {ImageContext, Text, TextContext} from './Content';
+import {pressScale} from './pressScale';
+import {useDOMRef} from '@react-spectrum/utils';
+
+// Get types from RSP and extend those?
+export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {
+  /** The children of the tag. */
+  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'> {
+  /** A description for the tag group. */
+  description?: ReactNode,
+  /**
+   * The size of the tag group.
+   *
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L',
+  /** Whether the tags are displayed in an emphasized style. */
+  isEmphasized?: boolean,
+  /** Provides content to display when there are no items in the tag group. */
+  renderEmptyState?: () => ReactNode,
+  /** Whether the tags are displayed in a error state. */
+  isInvalid?: boolean,
+  /** An error message for the field. */
+  errorMessage?: ReactNode
+}
+
+const TagGroupContext = createContext<TagGroupProps<any>>({});
+
+const helpTextStyles = style({
+  gridArea: 'helptext',
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: 'text-to-visual',
+  font: 'control',
+  color: {
+    default: 'neutral-subdued',
+    isInvalid: 'negative'
+  },
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  },
+  contain: 'inline-size',
+  paddingTop: '--field-gap',
+  cursor: 'text'
+});
+
+function TagGroup<T extends object>(
+  {
+    label,
+    description,
+    items,
+    labelPosition = 'top',
+    labelAlign = 'start',
+    children,
+    renderEmptyState,
+    isEmphasized,
+    isInvalid,
+    errorMessage,
+    UNSAFE_className = '',
+    UNSAFE_style,
+    ...props
+  }: TagGroupProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
+  let formContext = useContext(FormContext);
+  props = useFormProps(props);
+  let {size = 'M'} = props;
+  let domRef = useDOMRef(ref);
+
+  let helpText: ReactNode = null;
+  if (!isInvalid && description) {
+    helpText =  (
+      <Text
+        slot="description"
+        className={helpTextStyles({size: props.size || 'M'})}>
+        {description}
+      </Text>
+    );
+  } else if (isInvalid) {
+    helpText = (
+      <div
+        className={helpTextStyles({size: props.size || 'M', isInvalid})}>
+        <CenterBaseline>
+          <AlertIcon />
+        </CenterBaseline>
+        <Text slot="errorMessage">
+          {errorMessage}
+        </Text>
+      </div>
+    );
+  }
+
+  // TODO collapse behavior, need a custom collection render so we can limit the number of children
+  // but this isn't possible yet
+  return (
+    <AriaTagGroup
+      {...props}
+      ref={domRef}
+      style={UNSAFE_style}
+      className={UNSAFE_className + style(field(), getAllowedOverrides())({
+        size: props.size,
+        labelPosition: labelPosition,
+        isInForm: !!formContext
+      }, props.styles)}>
+      <FieldLabel
+        size={size}
+        labelPosition={labelPosition}
+        labelAlign={labelAlign}
+        contextualHelp={props.contextualHelp}>
+        {label}
+      </FieldLabel>
+      <div
+        className={style({
+          gridArea: 'input',
+          display: 'flex',
+          flexWrap: 'wrap',
+          minWidth: 'full',
+          // TODO: what should this gap be?
+          gap: 16
+        })}>
+        <FormContext.Provider value={{...formContext, size}}>
+          <Provider
+            values={[
+              [RACTextContext, undefined],
+              [TagGroupContext, {size, isEmphasized}]
+            ]}>
+            <TagList
+              items={items}
+              renderEmptyState={renderEmptyState}
+              className={({isEmpty}) => style({
+                marginX: {
+                  default: -4, // use negative number when theme TS is ready
+                  isEmpty: 0
+                },
+                display: 'flex',
+                minWidth: 'full',
+                flexWrap: 'wrap',
+                font: 'ui'
+              })({isEmpty})}>
+              {children}
+            </TagList>
+          </Provider>
+        </FormContext.Provider>
+      </div>
+      {helpText}
+    </AriaTagGroup>
+  );
+}
+
+/** 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};
+
+const tagStyles = style({
+  ...focusRing(),
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  font: 'control',
+  height: 'control',
+  transition: 'default',
+  minWidth: 0,
+  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3
+  backgroundColor: {
+    default: 'gray-100',
+    isHovered: {
+      default: 'gray-200'
+    },
+    isFocusVisible: {
+      default: 'gray-200'
+    },
+    isSelected: {
+      default: 'neutral',
+      isEmphasized: {
+        default: 'accent'
+      }
+    },
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonFace',
+      isSelected: 'Highlight'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isSelected: {
+      default: 'gray-25',
+      isEmphasized: 'white'
+    },
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonText',
+      isSelected: 'HighlightText',
+      isDisabled: 'GrayText'
+    }
+  },
+  borderStyle: 'none',
+  paddingStart: {
+    default: 'edge-to-text'
+  },
+  paddingEnd: {
+    default: 'edge-to-text',
+    allowsRemoving: 0
+  },
+  paddingY: 0,
+  margin: 4,
+  borderRadius: 'control',
+  cursor: {
+    default: 'default',
+    isLink: 'pointer'
+  },
+  '--iconMargin': {
+    type: 'marginTop',
+    value: {
+      default: fontRelative(-2)
+    }
+  },
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+
+export function Tag({children, ...props}: TagProps) {
+  let textValue = typeof children === 'string' ? children : undefined;
+  let {size = 'M', isEmphasized} = useContext(TagGroupContext);
+
+  let ref = useRef(null);
+  let isLink = props.href != null;
+  return (
+    <AriaTag
+      textValue={textValue}
+      {...props}
+      ref={ref}
+      style={pressScale(ref)}
+      className={renderProps => tagStyles({...renderProps, size, isEmphasized, isLink})} >
+      {composeRenderProps(children, (children, {allowsRemoving, isDisabled}) => (
+        <>
+          <div
+            className={style({
+              display: 'flex',
+              minWidth: 0,
+              alignItems: 'center',
+              gap: 'text-to-visual',
+              forcedColorAdjust: 'none',
+              backgroundColor: 'transparent'
+            })}>
+            <Provider
+              values={[
+                [TextContext, {className: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
+                [IconContext, {
+                  render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+                  styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+                }],
+                [AvatarContext, {
+                  styles: style({size: fontRelative(20), flexShrink: 0, order: 0})
+                }],
+                [ImageContext, {
+                  className: style({size: fontRelative(20), flexShrink: 0, order: 0, aspectRatio: 'square', objectFit: 'contain'})
+                }]
+              ]}>
+              {typeof children === 'string' ? <Text>{children}</Text> : children}
+            </Provider>
+          </div>
+          {allowsRemoving && (
+            <ClearButton
+              slot="remove"
+              size={size}
+              isDisabled={isDisabled} />
+          )}
+        </>
+      ))}
+    </AriaTag>
+  );
+}