react-aria-components 0.0.4 → 1.0.0-alpha.2

package/src/useDragAndDrop.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright 2022 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 {
+  DropIndicatorProps as AriaDropIndicatorProps,
+  DraggableCollectionOptions,
+  DraggableItemProps,
+  DraggableItemResult,
+  DragItem,
+  DragPreview,
+  DropIndicatorAria,
+  DroppableCollectionOptions,
+  DroppableCollectionResult,
+  DroppableItemOptions,
+  DroppableItemResult,
+  DropTarget,
+  DropTargetDelegate,
+  ListDropTargetDelegate,
+  useDraggableCollection,
+  useDraggableItem,
+  useDropIndicator,
+  useDroppableCollection,
+  useDroppableItem
+} from 'react-aria';
+import {DraggableCollectionProps, DroppableCollectionProps} from '@react-types/shared';
+import {
+  DraggableCollectionState,
+  DraggableCollectionStateOptions,
+  DroppableCollectionState,
+  DroppableCollectionStateOptions,
+  useDraggableCollectionState,
+  useDroppableCollectionState
+} from 'react-stately';
+import React, {createContext, ForwardedRef, forwardRef, Key, ReactNode, RefObject, useContext, useMemo} from 'react';
+import {RenderProps} from './utils';
+
+interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {}
+
+interface DragHooks {
+  useDraggableCollectionState?: (props: DraggableCollectionStateOpts) => DraggableCollectionState,
+  useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement>) => void,
+  useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult,
+  DragPreview?: typeof DragPreview,
+  renderDragPreview?: (items: DragItem[]) => JSX.Element
+}
+
+interface DropHooks {
+  useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState,
+  useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableCollectionResult,
+  useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableItemResult,
+  useDropIndicator?: (props: AriaDropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DropIndicatorAria,
+  renderDropIndicator?: (target: DropTarget) => JSX.Element,
+  dropTargetDelegate?: DropTargetDelegate,
+  ListDropTargetDelegate: typeof ListDropTargetDelegate
+}
+
+export type DragAndDropHooks = DragHooks & DropHooks;
+
+export interface DragAndDrop {
+  /** Drag and drop hooks for the collection element.  */
+  dragAndDropHooks: DragAndDropHooks
+}
+
+export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'preview' | 'getItems'>, DroppableCollectionProps {
+  /**
+   * A function that returns the items being dragged. If not specified, we assume that the collection is not draggable.
+   * @default () => []
+   */
+  getItems?: (keys: Set<Key>) => DragItem[],
+  /**
+   * A function that renders a drag preview, which is shown under the user's cursor while dragging.
+   * By default, a copy of the dragged element is rendered.
+   */
+  renderDragPreview?: (items: DragItem[]) => JSX.Element,
+  /**
+   * A function that renders a drop indicator element between two items in a collection.
+   * This should render a `<DropIndicator>` element. If this function is not provided, a
+   * default DropIndicator is provided.
+   */
+  renderDropIndicator?: (target: DropTarget) => JSX.Element,
+  /** A custom delegate object that provides drop targets for pointer coordinates within the collection. */
+  dropTargetDelegate?: DropTargetDelegate
+}
+
+/**
+ * Provides the hooks required to enable drag and drop behavior for a drag and drop compatible collection component.
+ */
+export function useDragAndDrop(options: DragAndDropOptions): DragAndDrop {
+  let dragAndDropHooks = useMemo(() => {
+    let {
+      onDrop,
+      onInsert,
+      onItemDrop,
+      onReorder,
+      onRootDrop,
+      getItems,
+      renderDragPreview,
+      renderDropIndicator,
+      dropTargetDelegate
+     } = options;
+
+    let isDraggable = !!getItems;
+    let isDroppable = !!(onDrop || onInsert || onItemDrop || onReorder || onRootDrop);
+
+    let hooks = {} as DragHooks & DropHooks;
+    if (isDraggable) {
+      hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOpts) {
+        return useDraggableCollectionState({...props, ...options} as DraggableCollectionStateOptions);
+      };
+      hooks.useDraggableCollection = useDraggableCollection;
+      hooks.useDraggableItem = useDraggableItem;
+      hooks.DragPreview = DragPreview;
+      hooks.renderDragPreview = renderDragPreview;
+    }
+
+    if (isDroppable) {
+      hooks.useDroppableCollectionState = function useDroppableCollectionStateOverride(props: DroppableCollectionStateOptions) {
+        return useDroppableCollectionState({...props, ...options});
+      },
+      hooks.useDroppableItem = useDroppableItem;
+      hooks.useDroppableCollection = function useDroppableCollectionOverride(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) {
+        return useDroppableCollection({...props, ...options}, state, ref);
+      };
+      hooks.useDropIndicator = useDropIndicator;
+      hooks.renderDropIndicator = renderDropIndicator;
+      hooks.dropTargetDelegate = dropTargetDelegate;
+      hooks.ListDropTargetDelegate = ListDropTargetDelegate;
+    }
+
+    return hooks;
+  }, [options]);
+
+  return {
+    dragAndDropHooks
+  };
+}
+
+export const DropIndicatorContext = createContext<DropIndicatorContextValue | null>(null);
+
+export interface DropIndicatorRenderProps {
+  /**
+   * Whether the drop indicator is currently the active drop target.
+   * @selector [data-drop-target]
+   */
+  isDropTarget: boolean
+}
+
+export interface DropIndicatorProps extends AriaDropIndicatorProps, RenderProps<DropIndicatorRenderProps> {}
+
+interface DropIndicatorContextValue {
+  render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode
+}
+
+function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
+  let {render} = useContext(DropIndicatorContext)!;
+  return <>{render(props, ref)}</>;
+}
+
+/**
+ * A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted.
+ */
+const _DropIndicator = forwardRef(DropIndicator);
+export {_DropIndicator as DropIndicator};

package/src/utils.tsx

@@ -0,0 +1,235 @@
+/*
+ * Copyright 2022 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 {AriaLabelingProps, DOMProps as SharedDOMProps} from '@react-types/shared';
+import {filterDOMProps, mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
+import React, {createContext, CSSProperties, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react';
+
+// Override forwardRef types so generics work.
+declare function forwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
+export type forwardRefType = typeof forwardRef;
+
+export const slotCallbackSymbol = Symbol('callback');
+export const defaultSlot = Symbol('default');
+
+interface SlottedValue<T> {
+  slots?: Record<string | symbol, T>,
+  [slotCallbackSymbol]?: (value: T) => void
+}
+
+export type ContextValue<T extends SlotProps, E extends Element> = SlottedValue<WithRef<T, E>> | WithRef<T, E> | null | undefined;
+
+type ProviderValue<T> = [React.Context<T>, T];
+type ProviderValues<A, B, C, D, E, F, G, H> =
+  | [ProviderValue<A>]
+  | [ProviderValue<A>, ProviderValue<B>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>];
+
+interface ProviderProps<A, B, C, D, E, F, G, H> {
+  values: ProviderValues<A, B, C, D, E, F, G, H>,
+  children: React.ReactNode
+}
+
+export function Provider<A, B, C, D, E, F, G, H>({values, children}: ProviderProps<A, B, C, D, E, F, G, H>): JSX.Element {
+  for (let [Context, value] of values) {
+    // @ts-ignore
+    children = <Context.Provider value={value}>{children}</Context.Provider>;
+  }
+
+  return children as JSX.Element;
+}
+
+export interface StyleProps {
+  /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+  className?: string,
+  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/Element/style) for the element. */
+  style?: CSSProperties
+}
+
+export interface DOMProps extends StyleProps {
+  /** The children of the component. */
+  children?: ReactNode
+}
+
+export interface StyleRenderProps<T> {
+  /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
+  className?: string | ((values: T) => string),
+  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/Element/style) for the element. A function may be provided to compute the style based on component state. */
+  style?: CSSProperties | ((values: T) => CSSProperties)
+}
+
+export interface RenderProps<T> extends StyleRenderProps<T> {
+  /** The children of the component. A function may be provided to alter the children based on component state. */
+  children?: ReactNode | ((values: T) => ReactNode)
+}
+
+interface RenderPropsHookOptions<T> extends RenderProps<T>, SharedDOMProps, AriaLabelingProps {
+  values: T,
+  defaultChildren?: ReactNode,
+  defaultClassName?: string
+}
+
+export function useRenderProps<T>({className, style, children, defaultClassName, defaultChildren, values, ...otherProps}: RenderPropsHookOptions<T>) {
+  if (typeof className === 'function') {
+    className = className(values);
+  }
+
+  if (typeof style === 'function') {
+    style = style(values);
+  }
+
+  if (typeof children === 'function') {
+    children = children(values);
+  } else if (children == null) {
+    children = defaultChildren;
+  }
+
+  delete otherProps.id;
+  return {
+    ...filterDOMProps(otherProps),
+    className: className ?? defaultClassName,
+    style,
+    children
+  };
+}
+
+export type WithRef<T, E> = T & {ref?: React.ForwardedRef<E>};
+export interface SlotProps {
+  /** A slot name for the component. Slots allow the component to receive props from a parent component. */
+  slot?: string
+}
+
+export function useContextProps<T, U, E extends Element>(props: T & SlotProps, ref: React.ForwardedRef<E>, context: React.Context<ContextValue<U, E>>): [T, React.RefObject<E>] {
+  let ctx = useContext(context) || {};
+  if ('slots' in ctx && ctx.slots) {
+    if (!props.slot && !ctx.slots[defaultSlot]) {
+      throw new Error('A slot prop is required');
+    }
+    let slot = props.slot || defaultSlot;
+    if (!ctx.slots[slot]) {
+      // @ts-ignore
+      throw new Error(`Invalid slot "${props.slot}". Valid slot names are ` + new Intl.ListFormat().format(Object.keys(ctx.slots).map(p => `"${p}"`)) + '.');
+    }
+    ctx = ctx.slots[slot];
+  }
+  // @ts-ignore - TS says "Type 'unique symbol' cannot be used as an index type." but not sure why.
+  let {ref: contextRef, [slotCallbackSymbol]: callback, ...contextProps} = ctx;
+  let mergedRef = useObjectRef(mergeRefs(ref, contextRef));
+  let mergedProps = mergeProps(contextProps, props) as unknown as T;
+
+  // A parent component might need the props from a child, so call slot callback if needed.
+  useEffect(() => {
+    if (callback) {
+      callback(props);
+    }
+  }, [callback, props]);
+
+  return [mergedProps, mergedRef];
+}
+
+export function useSlot(): [RefCallback<Element>, boolean] {
+  // Assume we do have the slot in the initial render.
+  let [hasSlot, setHasSlot] = useState(true);
+  let hasRun = useRef(false);
+
+  // A callback ref which will run when the slotted element mounts.
+  // This should happen before the useLayoutEffect below.
+  let ref = useCallback(el => {
+    hasRun.current = true;
+    setHasSlot(!!el);
+  }, []);
+
+  // If the callback hasn't been called, then reset to false.
+  useLayoutEffect(() => {
+    if (!hasRun.current) {
+      setHasSlot(false);
+    }
+  }, []);
+
+  return [ref, hasSlot];
+}
+
+export function useEnterAnimation(ref: RefObject<HTMLElement>, isReady: boolean = true) {
+  let [isEntering, setEntering] = useState(true);
+  useAnimation(ref, isEntering && isReady, useCallback(() => setEntering(false), []));
+  return isEntering && isReady;
+}
+
+export function useExitAnimation(ref: RefObject<HTMLElement>, isOpen: boolean) {
+  // State to trigger a re-render after animation is complete, which causes the element to be removed from the DOM.
+  // Ref to track the state we're in, so we don't immediately reset isExiting to true after the animation.
+  let [isExiting, setExiting] = useState(false);
+  let exitState = useRef('idle');
+
+  // If isOpen becomes false, set isExiting to true.
+  if (!isOpen && ref.current && exitState.current === 'idle') {
+    isExiting = true;
+    setExiting(true);
+    exitState.current = 'exiting';
+  }
+
+  // If we exited, and the element has been removed, reset exit state to idle.
+  if (!ref.current && exitState.current === 'exited') {
+    exitState.current = 'idle';
+  }
+
+  useAnimation(
+    ref,
+    isExiting,
+    useCallback(() => {
+      exitState.current = 'exited';
+      setExiting(false);
+    }, [])
+  );
+
+  return isExiting;
+}
+
+function useAnimation(ref: RefObject<HTMLElement>, isActive: boolean, onEnd: () => void) {
+  let prevAnimation = useRef<string | null>(null);
+  if (isActive && ref.current) {
+    prevAnimation.current = window.getComputedStyle(ref.current).animation;
+  }
+
+  useLayoutEffect(() => {
+    if (isActive && ref.current) {
+      // Make sure there's actually an animation, and it wasn't there before we triggered the update.
+      let computedStyle = window.getComputedStyle(ref.current);
+      if (computedStyle.animationName !== 'none' && computedStyle.animation !== prevAnimation.current) {
+        let onAnimationEnd = (e: AnimationEvent) => {
+          if (e.target === ref.current) {
+            element.removeEventListener('animationend', onAnimationEnd);
+            onEnd();
+          }
+        };
+
+        let element = ref.current;
+        element.addEventListener('animationend', onAnimationEnd);
+        return () => {
+          element.removeEventListener('animationend', onAnimationEnd);
+        };
+      } else {
+        onEnd();
+      }
+    }
+  }, [ref, isActive, onEnd]);
+}
+
+export const HiddenContext = createContext<boolean>(false);

package/.babelrc

@@ -1,17 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "targets": {
-        "browsers": [
-          "IE 11",
-          "last 5 Chrome versions",
-          "last 5 Firefox versions",
-          "last 5 Safari versions",
-          "last 5 Edge versions"
-        ]
-      },
-      "useBuiltins": true
-    }],
-    "react"
-  ]
-}

package/.eslintrc

@@ -1,12 +0,0 @@
-{
-  "extends": "airbnb",
-  "rules": {
-    "import/extensions": "off",
-    "no-prototype-builtins": "off",
-    "object-curly-newline": "off",
-    "prefer-destructuring": "off",
-    "react/destructuring-assignment": "off",
-    "react/jsx-filename-extension": "off",
-    "react/jsx-one-expression-per-line": "off"
-  }
-}

package/src/accordion/accordion.css

@@ -1,4 +0,0 @@
-.container {
-  border: 1px solid LightGrey;
-  border-radius: 3px;
-}

package/src/accordion/accordion.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './accordion.css';
-
-export default function Accordion({ children, className }) {
-  return (
-    <div className={className}>
-      {children}
-    </div>
-  );
-}
-
-Accordion.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
-Accordion.defaultProps = {
-  className: styles.container,
-};

package/src/accordion/index.js

@@ -1,2 +0,0 @@
-export { default as Accordion } from './accordion.js';
-export { default as Section } from './section.js';

package/src/accordion/section.css

@@ -1,21 +0,0 @@
-.container {
-  border-top: 1px solid LightGrey;
-}
-
-.heading {
-  margin: 0;
-}
-
-.panel {
-  border-top: 1px solid LightGrey;
-  padding: 1em 1.5em;
-}
-
-.trigger {
-  background: none;
-  border: 0;
-  font-size: 1rem;
-  padding: 1em 1.5em;
-  text-align: left;
-  width: 100%
-}

package/src/accordion/section.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import uniqueId from '../utils/unique-id.js';
-import styles from './section.css';
-
-const headings = {
-  1: 'h1',
-  2: 'h2',
-  3: 'h3',
-  4: 'h4',
-  5: 'h5',
-  6: 'h6',
-};
-
-export default class Section extends React.Component {
-  constructor() {
-    super();
-    this.accessibleId = uniqueId();
-  }
-
-  render() {
-    const {
-      cannotClose,
-      children,
-      cssContainer,
-      cssHeading,
-      cssPanel,
-      cssTrigger,
-      headingLevel,
-      onClick,
-      open,
-      title,
-    } = this.props;
-    const titleVal = typeof title === 'function' ? title({ open }) : title;
-    const Heading = headings[headingLevel];
-
-    if (!headings.hasOwnProperty(headingLevel)) {
-      throw new Error('Accordion must have a headingLevel between 1 and 6');
-    }
-
-    return (
-      <div className={cssContainer}>
-        <Heading className={cssHeading}>
-          <button
-            aria-controls={this.accessibleId}
-            aria-disabled={cannotClose}
-            aria-expanded={open}
-            className={cssTrigger}
-            type="button"
-            onClick={onClick}
-          >
-            {titleVal}
-          </button>
-        </Heading>
-        <div className={open ? cssPanel : undefined} id={this.accessibleId}>
-          {open && children}
-        </div>
-      </div>
-    );
-  }
-}
-
-Section.propTypes = {
-  cannotClose: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  cssContainer: PropTypes.string,
-  cssHeading: PropTypes.string,
-  cssPanel: PropTypes.string,
-  cssTrigger: PropTypes.string,
-  headingLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
-  onClick: PropTypes.func,
-  open: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-};
-
-Section.defaultProps = {
-  cannotClose: undefined,
-  cssContainer: styles.container,
-  cssHeading: styles.heading,
-  cssPanel: styles.panel,
-  cssTrigger: styles.trigger,
-  onClick: undefined,
-  open: false,
-  title: undefined,
-};

package/src/examples/accordion-example.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import Example from './example.js';
-import { Accordion, Section } from '../accordion';
-
-function CustomTitle({ open, title }) { // eslint-disable-line react/prop-types
-  return (
-    <React.Fragment>
-      <span>{title}</span>
-      <span style={{ float: 'right' }}>{open ? '-' : '+'}</span>
-    </React.Fragment>
-  );
-}
-
-export default class AccordionExample extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      first: false,
-      second: false,
-      third: false,
-    };
-  }
-
-  handleClick(which) {
-    return () => {
-      this.setState(state => ({
-        first: false,
-        second: false,
-        third: false,
-        [which]: !state[which],
-      }));
-    };
-  }
-
-  render() {
-    return (
-      <Example title="Accordion">
-        <Accordion>
-          <Section
-            headingLevel={3}
-            onClick={this.handleClick('first')}
-            open={this.state.first}
-            title={({ open }) => <CustomTitle open={open} title="First" />}
-          >
-            <span>
-              A
-            </span>
-          </Section>
-          <Section
-            headingLevel={3}
-            onClick={this.handleClick('second')}
-            open={this.state.second}
-            title={({ open }) => <CustomTitle open={open} title="Second" />}
-          >
-            <span>
-              B
-            </span>
-          </Section>
-          <Section
-            headingLevel={3}
-            onClick={this.handleClick('third')}
-            open={this.state.third}
-            title={({ open }) => <CustomTitle open={open} title="Third" />}
-          >
-            <span>
-              C
-            </span>
-          </Section>
-        </Accordion>
-      </Example>
-    );
-  }
-}

package/src/examples/example.js

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function Example(props) {
-  return (
-    <section>
-      <header>
-        <h2>
-          {props.title}
-        </h2>
-      </header>
-      {props.children}
-      <hr />
-    </section>
-  );
-}
-
-Example.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.node.isRequired,
-};