@planningcenter/react-beautiful-dnd 13.2.0

package/src/view/use-hidden-text-element/use-hidden-text-element.js

@@ -0,0 +1,60 @@
+// @flow
+import { useEffect } from 'react';
+import { useMemo } from 'use-memo-one';
+import type { ContextId, ElementId } from '../../types';
+import getBodyElement from '../get-body-element';
+import useUniqueId from '../use-unique-id';
+
+type GetIdArgs = {|
+  contextId: ContextId,
+  uniqueId: string,
+|};
+
+export function getElementId({ contextId, uniqueId }: GetIdArgs): ElementId {
+  return `rbd-hidden-text-${contextId}-${uniqueId}`;
+}
+
+type Args = {|
+  contextId: ContextId,
+  text: string,
+|};
+
+export default function useHiddenTextElement({
+  contextId,
+  text,
+}: Args): ElementId {
+  const uniqueId: string = useUniqueId('hidden-text', { separator: '-' });
+  const id: ElementId = useMemo(() => getElementId({ contextId, uniqueId }), [
+    uniqueId,
+    contextId,
+  ]);
+
+  useEffect(
+    function mount() {
+      const el: HTMLElement = document.createElement('div');
+
+      // identifier
+      el.id = id;
+
+      // add the description text
+      el.textContent = text;
+
+      // Using `display: none` prevent screen readers from reading this element in the document flow
+      el.style.display = 'none';
+
+      // Add to body
+      getBodyElement().appendChild(el);
+
+      return function unmount() {
+        // checking if element exists as the body might have been changed by things like 'turbolinks'
+        const body: HTMLBodyElement = getBodyElement();
+        if (body.contains(el)) {
+          body.removeChild(el);
+        }
+      };
+    },
+    [id, text],
+  );
+
+  return id;
+}

package/src/view/use-isomorphic-layout-effect.js

@@ -0,0 +1,18 @@
+// @flow
+// eslint-disable-next-line no-restricted-imports
+import { useLayoutEffect, useEffect } from 'react';
+
+// https://github.com/reduxjs/react-redux/blob/v7-beta/src/components/connectAdvanced.js#L35
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect in the browser. We need useLayoutEffect because we want
+// `connect` to perform sync updates to a ref to save the latest props after
+// a render is actually committed to the DOM.
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+    ? useLayoutEffect
+    : useEffect;
+
+export default useIsomorphicLayoutEffect;

package/src/view/use-previous-ref.js

@@ -0,0 +1,14 @@
+// @flow
+import { useRef, useEffect } from 'react';
+
+export default function usePrevious<T>(current: T): {| current: T |} {
+  const ref = useRef<T>(current);
+
+  // will be updated on the next render
+  useEffect(() => {
+    ref.current = current;
+  });
+
+  // return the existing current (pre render)
+  return ref;
+}

package/src/view/use-required-context.js

@@ -0,0 +1,9 @@
+// @flow
+import { useContext, type Context as ContextType } from 'react';
+import { invariant } from '../invariant';
+
+export default function useRequiredContext<T>(Context: ContextType<?T>): T {
+  const result: ?T = useContext(Context);
+  invariant(result, 'Could not find required context');
+  return result;
+}

package/src/view/use-sensor-marshal/closest.js

@@ -0,0 +1,50 @@
+// @flow
+import { find } from '../../native-with-fallback';
+
+const supportedMatchesName: string = ((): string => {
+  const base: string = 'matches';
+
+  // Server side rendering
+  if (typeof document === 'undefined') {
+    return base;
+  }
+
+  // See https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+  const candidates: string[] = [
+    base,
+    'msMatchesSelector',
+    'webkitMatchesSelector',
+  ];
+
+  const value: ?string = find(
+    candidates,
+    (name: string): boolean => name in Element.prototype,
+  );
+
+  return value || base;
+})();
+
+function closestPonyfill(el: ?Element, selector: string) {
+  if (el == null) {
+    return null;
+  }
+
+  // Element.prototype.matches is supported in ie11 with a different name
+  // https://caniuse.com/#feat=matchesselector
+  // $FlowFixMe - dynamic property
+  if (el[supportedMatchesName](selector)) {
+    return el;
+  }
+
+  // recursively look up the tree
+  return closestPonyfill(el.parentElement, selector);
+}
+
+export default function closest(el: Element, selector: string): ?Element {
+  // Using native closest for maximum speed where we can
+  if (el.closest) {
+    return el.closest(selector);
+  }
+  // ie11: damn you!
+  return closestPonyfill(el, selector);
+}

package/src/view/use-sensor-marshal/find-closest-draggable-id-from-event.js

@@ -0,0 +1,50 @@
+// @flow
+import type { ContextId, DraggableId } from '../../types';
+import * as attributes from '../data-attributes';
+import isElement from '../is-type-of-element/is-element';
+import isHtmlElement from '../is-type-of-element/is-html-element';
+import closest from './closest';
+import { warning } from '../../dev-warning';
+
+function getSelector(contextId: ContextId): string {
+  return `[${attributes.dragHandle.contextId}="${contextId}"]`;
+}
+
+function findClosestDragHandleFromEvent(
+  contextId: ContextId,
+  event: Event,
+): ?HTMLElement {
+  const target: ?EventTarget = event.target;
+
+  if (!isElement(target)) {
+    warning('event.target must be a Element');
+    return null;
+  }
+
+  const selector: string = getSelector(contextId);
+  const handle: ?Element = closest(target, selector);
+
+  if (!handle) {
+    return null;
+  }
+
+  if (!isHtmlElement(handle)) {
+    warning('drag handle must be a HTMLElement');
+    return null;
+  }
+
+  return handle;
+}
+
+export default function tryGetClosestDraggableIdFromEvent(
+  contextId: ContextId,
+  event: Event,
+): ?DraggableId {
+  const handle: ?HTMLElement = findClosestDragHandleFromEvent(contextId, event);
+
+  if (!handle) {
+    return null;
+  }
+
+  return handle.getAttribute(attributes.dragHandle.draggableId);
+}

package/src/view/use-sensor-marshal/index.js

@@ -0,0 +1,5 @@
+// @flow
+export { default } from './use-sensor-marshal';
+export { default as useMouseSensor } from './sensors/use-mouse-sensor';
+export { default as useTouchSensor } from './sensors/use-touch-sensor';
+export { default as useKeyboardSensor } from './sensors/use-keyboard-sensor';

package/src/view/use-sensor-marshal/is-event-in-interactive-element.js

@@ -0,0 +1,66 @@
+// @flow
+import isHtmlElement from '../is-type-of-element/is-html-element';
+
+export type TagNameMap = {
+  [tagName: string]: true,
+};
+
+export const interactiveTagNames: TagNameMap = {
+  input: true,
+  button: true,
+  textarea: true,
+  select: true,
+  option: true,
+  optgroup: true,
+  video: true,
+  audio: true,
+};
+
+function isAnInteractiveElement(parent: Element, current: ?Element) {
+  if (current == null) {
+    return false;
+  }
+
+  // Most interactive elements cannot have children. However, some can such as 'button'.
+  // See 'Permitted content' on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+  // Rather than having two different functions we can consolidate our checks into this single
+  // function to keep things simple.
+  // There is no harm checking if the parent has an interactive tag name even if it cannot have
+  // any children. We need to perform this loop anyway to check for the contenteditable attribute
+  const hasAnInteractiveTag: boolean = Boolean(
+    interactiveTagNames[current.tagName.toLowerCase()],
+  );
+
+  if (hasAnInteractiveTag) {
+    return true;
+  }
+
+  // contenteditable="true" or contenteditable="" are valid ways
+  // of creating a contenteditable container
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
+  const attribute: ?string = current.getAttribute('contenteditable');
+  if (attribute === 'true' || attribute === '') {
+    return true;
+  }
+
+  // nothing more can be done and no results found
+  if (current === parent) {
+    return false;
+  }
+
+  // recursion to check parent
+  return isAnInteractiveElement(parent, current.parentElement);
+}
+
+export default function isEventInInteractiveElement(
+  draggable: Element,
+  event: Event,
+): boolean {
+  const target: EventTarget = event.target;
+
+  if (!isHtmlElement(target)) {
+    return false;
+  }
+
+  return isAnInteractiveElement(draggable, target);
+}

package/src/view/use-sensor-marshal/lock.js

@@ -0,0 +1,48 @@
+// @flow
+import { invariant } from '../../invariant';
+
+export type Lock = {|
+  abandon: () => void,
+|};
+
+export type LockAPI = {|
+  isClaimed: () => boolean,
+  isActive: (lock: Lock) => boolean,
+  claim: (abandon: () => void) => Lock,
+  release: () => void,
+  tryAbandon: () => void,
+|};
+
+export default function create(): LockAPI {
+  let lock: ?Lock = null;
+
+  function isClaimed(): boolean {
+    return Boolean(lock);
+  }
+
+  function isActive(value: Lock): boolean {
+    return value === lock;
+  }
+
+  function claim(abandon: () => void): Lock {
+    invariant(!lock, 'Cannot claim lock as it is already claimed');
+    const newLock: Lock = { abandon };
+    // update singleton
+    lock = newLock;
+    // return lock
+    return newLock;
+  }
+  function release() {
+    invariant(lock, 'Cannot release lock when there is no lock');
+    lock = null;
+  }
+
+  function tryAbandon() {
+    if (lock) {
+      lock.abandon();
+      release();
+    }
+  }
+
+  return { isClaimed, isActive, claim, release, tryAbandon };
+}

package/src/view/use-sensor-marshal/sensors/use-keyboard-sensor.js

@@ -0,0 +1,243 @@
+// @flow
+import { useRef } from 'react';
+import { useMemo, useCallback } from 'use-memo-one';
+import { invariant } from '../../../invariant';
+import type {
+  SensorAPI,
+  PreDragActions,
+  SnapDragActions,
+  DraggableId,
+} from '../../../types';
+import type {
+  EventBinding,
+  EventOptions,
+} from '../../event-bindings/event-types';
+import * as keyCodes from '../../key-codes';
+import bindEvents from '../../event-bindings/bind-events';
+import preventStandardKeyEvents from './util/prevent-standard-key-events';
+import supportedPageVisibilityEventName from './util/supported-page-visibility-event-name';
+import useLayoutEffect from '../../use-isomorphic-layout-effect';
+
+function noop() {}
+
+type KeyMap = {
+  [key: number]: true,
+};
+
+const scrollJumpKeys: KeyMap = {
+  [keyCodes.pageDown]: true,
+  [keyCodes.pageUp]: true,
+  [keyCodes.home]: true,
+  [keyCodes.end]: true,
+};
+
+function getDraggingBindings(
+  actions: SnapDragActions,
+  stop: () => void,
+): EventBinding[] {
+  function cancel() {
+    stop();
+    actions.cancel();
+  }
+
+  function drop() {
+    stop();
+    actions.drop();
+  }
+
+  return [
+    {
+      eventName: 'keydown',
+      fn: (event: KeyboardEvent) => {
+        if (event.keyCode === keyCodes.escape) {
+          event.preventDefault();
+          cancel();
+          return;
+        }
+
+        // Dropping
+        if (event.keyCode === keyCodes.space) {
+          // need to stop parent Draggable's thinking this is a lift
+          event.preventDefault();
+          drop();
+          return;
+        }
+
+        // Movement
+
+        if (event.keyCode === keyCodes.arrowDown) {
+          event.preventDefault();
+          actions.moveDown();
+          return;
+        }
+
+        if (event.keyCode === keyCodes.arrowUp) {
+          event.preventDefault();
+          actions.moveUp();
+          return;
+        }
+
+        if (event.keyCode === keyCodes.arrowRight) {
+          event.preventDefault();
+          actions.moveRight();
+          return;
+        }
+
+        if (event.keyCode === keyCodes.arrowLeft) {
+          event.preventDefault();
+          actions.moveLeft();
+          return;
+        }
+
+        // preventing scroll jumping at this time
+        if (scrollJumpKeys[event.keyCode]) {
+          event.preventDefault();
+          return;
+        }
+
+        preventStandardKeyEvents(event);
+      },
+    },
+    // any mouse actions kills a drag
+    {
+      eventName: 'mousedown',
+      fn: cancel,
+    },
+    {
+      eventName: 'mouseup',
+      fn: cancel,
+    },
+    {
+      eventName: 'click',
+      fn: cancel,
+    },
+    {
+      eventName: 'touchstart',
+      fn: cancel,
+    },
+    // resizing the browser kills a drag
+    {
+      eventName: 'resize',
+      fn: cancel,
+    },
+    // kill if the user is using the mouse wheel
+    // We are not supporting wheel / trackpad scrolling with keyboard dragging
+    {
+      eventName: 'wheel',
+      fn: cancel,
+      // chrome says it is a violation for this to not be passive
+      // it is fine for it to be passive as we just cancel as soon as we get
+      // any event
+      options: { passive: true },
+    },
+    // Cancel on page visibility change
+    {
+      eventName: supportedPageVisibilityEventName,
+      fn: cancel,
+    },
+  ];
+}
+
+export default function useKeyboardSensor(api: SensorAPI) {
+  const unbindEventsRef = useRef<() => void>(noop);
+
+  const startCaptureBinding: EventBinding = useMemo(
+    () => ({
+      eventName: 'keydown',
+      fn: function onKeyDown(event: KeyboardEvent) {
+        // Event already used
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        // Need to start drag with a spacebar press
+        if (event.keyCode !== keyCodes.space) {
+          return;
+        }
+
+        const draggableId: ?DraggableId = api.findClosestDraggableId(event);
+
+        if (!draggableId) {
+          return;
+        }
+
+        const preDrag: ?PreDragActions = api.tryGetLock(
+          draggableId,
+          // abort function not defined yet
+          // eslint-disable-next-line no-use-before-define
+          stop,
+          { sourceEvent: event },
+        );
+
+        // Cannot start capturing at this time
+        if (!preDrag) {
+          return;
+        }
+
+        // we are consuming the event
+        event.preventDefault();
+        let isCapturing: boolean = true;
+
+        // There is no pending period for a keyboard drag
+        // We can lift immediately
+        const actions: SnapDragActions = preDrag.snapLift();
+
+        // unbind this listener
+        unbindEventsRef.current();
+
+        // setup our function to end everything
+        function stop() {
+          invariant(
+            isCapturing,
+            'Cannot stop capturing a keyboard drag when not capturing',
+          );
+          isCapturing = false;
+
+          // unbind dragging bindings
+          unbindEventsRef.current();
+          // start listening for capture again
+          // eslint-disable-next-line no-use-before-define
+          listenForCapture();
+        }
+
+        // bind dragging listeners
+        unbindEventsRef.current = bindEvents(
+          window,
+          getDraggingBindings(actions, stop),
+          { capture: true, passive: false },
+        );
+      },
+    }),
+    // not including startPendingDrag as it is not defined initially
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [api],
+  );
+
+  const listenForCapture = useCallback(
+    function tryStartCapture() {
+      const options: EventOptions = {
+        passive: false,
+        capture: true,
+      };
+
+      unbindEventsRef.current = bindEvents(
+        window,
+        [startCaptureBinding],
+        options,
+      );
+    },
+    [startCaptureBinding],
+  );
+
+  useLayoutEffect(
+    function mount() {
+      listenForCapture();
+
+      // kill any pending window events when unmounting
+      return function unmount() {
+        unbindEventsRef.current();
+      };
+    },
+    [listenForCapture],
+  );
+}