@react-aria/interactions 3.0.0-nightly-641446f65-240905

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@react-aria/interactions",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/ssr": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.22.2"
+}

package/src/DOMPropsContext.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2020 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 {DOMAttributes, RefObject} from '@react-types/shared';
+import {mergeProps, useSyncRef} from '@react-aria/utils';
+import React, {MutableRefObject, useContext} from 'react';
+
+interface DOMPropsResponderProps extends DOMAttributes {
+  ref?: RefObject<Element | null>
+}
+
+interface IDOMPropsResponderContext extends DOMAttributes {
+  register(): void,
+  ref?: MutableRefObject<Element | null>
+}
+
+export const DOMPropsResponderContext = React.createContext<IDOMPropsResponderContext | null>(null);
+
+export function useDOMPropsResponderContext(props: DOMPropsResponderProps): DOMPropsResponderProps {
+  // Consume context from <DOMPropsResponder> and merge with props.
+  let context = useContext(DOMPropsResponderContext);
+  if (context) {
+    let {register, ...contextProps} = context;
+    props = mergeProps(contextProps, props);
+    register();
+  }
+  useSyncRef(context, props.ref);
+
+  return props;
+}

package/src/DOMPropsResponder.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2020 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 {DOMPropsResponderContext} from './DOMPropsContext';
+import {HoverProps} from './useHover';
+import React, {ForwardedRef, ReactNode, useEffect, useRef} from 'react';
+import {useObjectRef} from '@react-aria/utils';
+
+interface DOMPropsResponderProps extends HoverProps {
+  children: ReactNode
+}
+
+export const DOMPropsResponder = React.forwardRef(({children, ...props}: DOMPropsResponderProps, ref: ForwardedRef<Element>) => {
+  let isRegistered = useRef(false);
+  let objRef = useObjectRef(ref);
+  let context = {
+    ...props,
+    ref: objRef,
+    register() {
+      isRegistered.current = true;
+    }
+  };
+
+  // TODO: Think of a more generic message when this replaces the PressResponder as well
+  useEffect(() => {
+    if (!isRegistered.current) {
+      console.warn(
+        'A DOMPropsResponder was ultilized without a hoverable DOM node.'
+      );
+    }
+  }, []);
+
+  return (
+    <DOMPropsResponderContext.Provider value={context}>
+      {children}
+    </DOMPropsResponderContext.Provider>
+  );
+});

package/src/PressResponder.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2020 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 {FocusableElement} from '@react-types/shared';
+import {mergeProps, useObjectRef, useSyncRef} from '@react-aria/utils';
+import {PressProps} from './usePress';
+import {PressResponderContext} from './context';
+import React, {ForwardedRef, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+
+interface PressResponderProps extends PressProps {
+  children: ReactNode
+}
+
+export const PressResponder = React.forwardRef(({children, ...props}: PressResponderProps, ref: ForwardedRef<FocusableElement>) => {
+  let isRegistered = useRef(false);
+  let prevContext = useContext(PressResponderContext);
+  ref = useObjectRef(ref || prevContext?.ref);
+  let context = mergeProps(prevContext || {}, {
+    ...props,
+    ref,
+    register() {
+      isRegistered.current = true;
+      if (prevContext) {
+        prevContext.register();
+      }
+    }
+  });
+
+  useSyncRef(prevContext, ref);
+
+  useEffect(() => {
+    if (!isRegistered.current) {
+      console.warn(
+        'A PressResponder was rendered without a pressable child. ' +
+        'Either call the usePress hook, or wrap your DOM node with <Pressable> component.'
+      );
+      isRegistered.current = true; // only warn once in strict mode.
+    }
+  }, []);
+
+  return (
+    <PressResponderContext.Provider value={context}>
+      {children}
+    </PressResponderContext.Provider>
+  );
+});
+
+export function ClearPressResponder({children}: {children: ReactNode}) {
+  let context = useMemo(() => ({register: () => {}}), []);
+  return (
+    <PressResponderContext.Provider value={context}>
+      {children}
+    </PressResponderContext.Provider>
+  );
+}

package/src/Pressable.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2020 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 {DOMAttributes} from '@react-types/shared';
+import {mergeProps, useObjectRef} from '@react-aria/utils';
+import {PressProps, usePress} from './usePress';
+import React, {ForwardedRef, ReactElement} from 'react';
+
+interface PressableProps extends PressProps {
+  children: ReactElement<DOMAttributes, string>
+}
+
+export const Pressable = React.forwardRef(({children, ...props}: PressableProps, ref: ForwardedRef<HTMLElement>) => {
+  ref = useObjectRef(ref);
+  let {pressProps} = usePress({...props, ref});
+  let child = React.Children.only(children);
+  return React.cloneElement(
+    child,
+    // @ts-ignore
+    {ref, ...mergeProps(child.props, pressProps)}
+  );
+});

package/src/context.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 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 {FocusableElement} from '@react-types/shared';
+import {PressProps} from './usePress';
+import React, {MutableRefObject} from 'react';
+
+interface IPressResponderContext extends PressProps {
+  register(): void,
+  ref?: MutableRefObject<FocusableElement>
+}
+
+export const PressResponderContext = React.createContext<IPressResponderContext>({register: () => {}});
+PressResponderContext.displayName = 'PressResponderContext';

package/src/createEventHandler.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 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 {BaseEvent} from '@react-types/shared';
+import {SyntheticEvent} from 'react';
+
+/**
+ * This function wraps a React event handler to make stopPropagation the default, and support continuePropagation instead.
+ */
+export function createEventHandler<T extends SyntheticEvent>(handler?: (e: BaseEvent<T>) => void): ((e: T) => void) | undefined {
+  if (!handler) {
+    return undefined;
+  }
+
+  let shouldStopPropagation = true;
+  return (e: T) => {
+    let event: BaseEvent<T> = {
+      ...e,
+      preventDefault() {
+        e.preventDefault();
+      },
+      isDefaultPrevented() {
+        return e.isDefaultPrevented();
+      },
+      stopPropagation() {
+        console.error('stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.');
+      },
+      continuePropagation() {
+        shouldStopPropagation = false;
+      }
+    };
+
+    handler(event);
+
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
+  };
+}

package/src/index.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2020 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.
+ */
+
+export {Pressable} from './Pressable';
+export {PressResponder, ClearPressResponder} from './PressResponder';
+export {useFocus} from './useFocus';
+export {
+  isFocusVisible,
+  getInteractionModality,
+  setInteractionModality,
+  addWindowFocusTracking,
+  useInteractionModality,
+  useFocusVisible,
+  useFocusVisibleListener
+} from './useFocusVisible';
+export {useFocusWithin} from './useFocusWithin';
+export {useHover} from './useHover';
+export {useInteractOutside} from './useInteractOutside';
+export {useKeyboard} from './useKeyboard';
+export {useMove} from './useMove';
+export {usePress} from './usePress';
+export {useScrollWheel} from './useScrollWheel';
+export {useLongPress} from './useLongPress';
+
+export type {FocusProps, FocusResult} from './useFocus';
+export type {FocusVisibleHandler, FocusVisibleProps, FocusVisibleResult, Modality} from './useFocusVisible';
+export type {FocusWithinProps, FocusWithinResult} from './useFocusWithin';
+export type {HoverProps, HoverResult} from './useHover';
+export type {InteractOutsideProps} from './useInteractOutside';
+export type {KeyboardProps, KeyboardResult} from './useKeyboard';
+export type {PressProps, PressHookProps, PressResult} from './usePress';
+export type {PressEvent, PressEvents, MoveStartEvent, MoveMoveEvent, MoveEndEvent, MoveEvents, HoverEvent, HoverEvents, FocusEvents, KeyboardEvents} from '@react-types/shared';
+export type {MoveResult} from './useMove';
+export type {LongPressProps, LongPressResult} from './useLongPress';
+export type {ScrollWheelProps} from './useScrollWheel';

package/src/textSelection.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2020 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 {getOwnerDocument, isIOS, runAfterTransition} from '@react-aria/utils';
+
+// Safari on iOS starts selecting text on long press. The only way to avoid this, it seems,
+// is to add user-select: none to the entire page. Adding it to the pressable element prevents
+// that element from being selected, but nearby elements may still receive selection. We add
+// user-select: none on touch start, and remove it again on touch end to prevent this.
+// This must be implemented using global state to avoid race conditions between multiple elements.
+
+// There are three possible states due to the delay before removing user-select: none after
+// pointer up. The 'default' state always transitions to the 'disabled' state, which transitions
+// to 'restoring'. The 'restoring' state can either transition back to 'disabled' or 'default'.
+
+// For non-iOS devices, we apply user-select: none to the pressed element instead to avoid possible
+// performance issues that arise from applying and removing user-select: none to the entire page
+// (see https://github.com/adobe/react-spectrum/issues/1609).
+type State = 'default' | 'disabled' | 'restoring';
+
+// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
+// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
+let state: State = 'default';
+let savedUserSelect = '';
+let modifiedElementMap = new WeakMap<Element, string>();
+
+export function disableTextSelection(target?: Element) {
+  if (isIOS()) {
+    if (state === 'default') {
+      // eslint-disable-next-line no-restricted-globals
+      const documentObject = getOwnerDocument(target);
+      savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
+      documentObject.documentElement.style.webkitUserSelect = 'none';
+    }
+
+    state = 'disabled';
+  } else if (target instanceof HTMLElement || target instanceof SVGElement) {
+    // If not iOS, store the target's original user-select and change to user-select: none
+    // Ignore state since it doesn't apply for non iOS
+    modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = 'none';
+  }
+}
+
+export function restoreTextSelection(target?: Element) {
+  if (isIOS()) {
+    // If the state is already default, there's nothing to do.
+    // If it is restoring, then there's no need to queue a second restore.
+    if (state !== 'disabled') {
+      return;
+    }
+
+    state = 'restoring';
+
+    // There appears to be a delay on iOS where selection still might occur
+    // after pointer up, so wait a bit before removing user-select.
+    setTimeout(() => {
+      // Wait for any CSS transitions to complete so we don't recompute style
+      // for the whole page in the middle of the animation and cause jank.
+      runAfterTransition(() => {
+        // Avoid race conditions
+        if (state === 'restoring') {
+          // eslint-disable-next-line no-restricted-globals
+          const documentObject = getOwnerDocument(target);
+          if (documentObject.documentElement.style.webkitUserSelect === 'none') {
+            documentObject.documentElement.style.webkitUserSelect = savedUserSelect || '';
+          }
+
+          savedUserSelect = '';
+          state = 'default';
+        }
+      });
+    }, 300);
+  } else if (target instanceof HTMLElement || target instanceof SVGElement) {
+    // If not iOS, restore the target's original user-select if any
+    // Ignore state since it doesn't apply for non iOS
+    if (target && modifiedElementMap.has(target)) {
+      let targetOldUserSelect = modifiedElementMap.get(target) as string;
+
+      if (target.style.userSelect === 'none') {
+        target.style.userSelect = targetOldUserSelect;
+      }
+
+      if (target.getAttribute('style') === '') {
+        target.removeAttribute('style');
+      }
+      modifiedElementMap.delete(target);
+    }
+  }
+}

package/src/useDOMPropsResponder.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 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 {RefObject} from '@react-types/shared';
+import {useDOMPropsResponderContext} from './DOMPropsContext';
+
+export function useDOMPropsResponder(domRef: RefObject<Element | null>) {
+
+  let domProps = useDOMPropsResponderContext({ref: domRef}) || {};
+
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {register, isDisabled, onPress, ...partialDomProps} = domProps;
+
+  return {
+    contextProps: partialDomProps
+  };
+}

package/src/useFocus.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2020 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.
+ */
+
+// Portions of the code in this file are based on code from react.
+// Original licensing for the following can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+
+import {DOMAttributes, FocusableElement, FocusEvents} from '@react-types/shared';
+import {FocusEvent, useCallback} from 'react';
+import {getOwnerDocument} from '@react-aria/utils';
+import {useSyntheticBlurEvent} from './utils';
+
+export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
+  /** Whether the focus events should be disabled. */
+  isDisabled?: boolean
+}
+
+export interface FocusResult<Target = FocusableElement> {
+  /** Props to spread onto the target element. */
+  focusProps: DOMAttributes<Target>
+}
+
+/**
+ * Handles focus events for the immediate target.
+ * Focus events on child elements will be ignored.
+ */
+export function useFocus<Target extends FocusableElement = FocusableElement>(props: FocusProps<Target>): FocusResult<Target> {
+  let {
+    isDisabled,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    onFocusChange
+  } = props;
+
+  const onBlur: FocusProps<Target>['onBlur'] = useCallback((e: FocusEvent<Target>) => {
+    if (e.target === e.currentTarget) {
+      if (onBlurProp) {
+        onBlurProp(e);
+      }
+
+      if (onFocusChange) {
+        onFocusChange(false);
+      }
+
+      return true;
+    }
+  }, [onBlurProp, onFocusChange]);
+
+
+  const onSyntheticFocus = useSyntheticBlurEvent<Target>(onBlur);
+
+  const onFocus: FocusProps<Target>['onFocus'] = useCallback((e: FocusEvent<Target>) => {
+    // Double check that document.activeElement actually matches e.target in case a previously chained
+    // focus handler already moved focus somewhere else.
+
+    const ownerDocument = getOwnerDocument(e.target);
+
+    if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
+      if (onFocusProp) {
+        onFocusProp(e);
+      }
+
+      if (onFocusChange) {
+        onFocusChange(true);
+      }
+
+      onSyntheticFocus(e);
+    }
+  }, [onFocusChange, onFocusProp, onSyntheticFocus]);
+
+  return {
+    focusProps: {
+      onFocus: (!isDisabled && (onFocusProp || onFocusChange || onBlurProp)) ? onFocus : undefined,
+      onBlur: (!isDisabled && (onBlurProp || onFocusChange)) ? onBlur : undefined
+    }
+  };
+}