@atlaskit/modal-dialog 12.0.2

package/dist/esm/internal/components/positioner.js

@@ -0,0 +1,76 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { easeInOut } from '@atlaskit/motion/curves';
+import { mediumDurationMs } from '@atlaskit/motion/durations';
+import { layers } from '@atlaskit/theme/constants';
+import { gutter, verticalOffset } from '../constants';
+var maxWidthDimensions = "calc(100vw - ".concat(gutter * 2, "px)");
+var maxHeightDimensions = "calc(100vh - ".concat(gutter * 2 - 1, "px)");
+var positionerStyles = css({
+  width: '100%',
+  maxWidth: '100%',
+  height: '100%',
+  position: 'fixed',
+  zIndex: layers.modal(),
+  top: 0,
+  left: 0
+});
+var viewportScrollStyles = css({
+  width: 'max-content',
+  height: 'auto',
+  position: 'relative',
+  '@media (min-width: 480px)': {
+    margin: "".concat(gutter, "px auto")
+  }
+});
+var bodyScrollStyles = css({
+  '@media (min-width: 480px)': {
+    width: 'max-content',
+    maxWidth: maxWidthDimensions,
+    maxHeight: maxHeightDimensions,
+    marginRight: 'auto',
+    marginLeft: 'auto',
+    position: 'absolute',
+    top: "".concat(gutter, "px"),
+    right: 0,
+    left: 0,
+    pointerEvents: 'none'
+  }
+});
+var stackTransitionStyles = css({
+  transitionDuration: "".concat(mediumDurationMs, "ms"),
+  transitionProperty: 'transform',
+  transitionTimingFunction: easeInOut,
+
+  /** Duplicated from @atlaskit/motion/accessibility
+   * because @repo/internal/styles/consistent-style-ordering
+   * doesn't work well with object spreading. */
+  '@media (prefers-reduced-motion: reduce)': {
+    animation: 'none',
+    transition: 'none'
+  }
+});
+var stackTransformStyles = css({
+  transform: 'translateY(var(--modal-dialog-translate-y))'
+});
+var stackIdleStyles = css({
+  transform: 'none'
+});
+
+var Positioner = function Positioner(props) {
+  var children = props.children,
+      stackIndex = props.stackIndex,
+      shouldScrollInViewport = props.shouldScrollInViewport,
+      testId = props.testId;
+  return jsx("div", {
+    style: {
+      '--modal-dialog-translate-y': "".concat(stackIndex * (verticalOffset / 2), "px")
+    },
+    css: [positionerStyles, stackTransitionStyles,
+    /* We only want to apply transform on modals shifting to the back of the stack. */
+    stackIndex > 0 ? stackTransformStyles : stackIdleStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
+    "data-testid": testId && "".concat(testId, "--positioner")
+  }, children);
+};
+
+export default Positioner;

package/dist/esm/internal/components/scroll-container.js

@@ -0,0 +1,114 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import rafSchedule from 'raf-schd';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
+import useStateRef from '@atlaskit/ds-lib/use-state-ref';
+import FocusRing from '@atlaskit/focus-ring';
+import { keylineColor, keylineHeight } from '../constants';
+var baseStyles = css({
+  /**
+   * We need to inherit flex styles from its parent here
+   * in case they're set because we're essentially being a proxy container
+   * between the original flex parent and its children (the modal body).
+   */
+  display: 'inherit',
+  margin: 0,
+  flex: 'inherit',
+  flexDirection: 'inherit',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  '@media (min-width: 480px)': {
+    height: 'unset',
+    overflowY: 'auto'
+  }
+});
+var topKeylineStyles = css({
+  borderTop: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+});
+var bottomKeylineStyles = css({
+  borderBottom: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+});
+
+/**
+ * A container that shows top and bottom keylines when the
+ * content overflows into the scrollable element.
+ */
+var ScrollContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var testId = props.testId,
+      children = props.children;
+
+  var _useStateRef = useStateRef({
+    previous: false,
+    next: false
+  }),
+      _useStateRef2 = _slicedToArray(_useStateRef, 2),
+      hasSiblings = _useStateRef2[0],
+      setSiblings = _useStateRef2[1];
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showContentFocus = _useState2[0],
+      setContentFocus = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showTopKeyline = _useState4[0],
+      setTopKeyline = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showBottomKeyline = _useState6[0],
+      setBottomKeyline = _useState6[1];
+
+  var scrollableRef = useRef(null);
+  var setLazySiblings = useLazyCallback(setSiblings);
+  var setLazyContentFocus = useLazyCallback(rafSchedule(function () {
+    var target = scrollableRef.current;
+    target && setContentFocus(target.scrollHeight > target.clientHeight);
+  }));
+  var setLazyKeylines = useLazyCallback(rafSchedule(function () {
+    var target = scrollableRef.current;
+
+    if (target) {
+      var scrollableDistance = target.scrollHeight - target.clientHeight;
+
+      if (hasSiblings.current.previous) {
+        setTopKeyline(target.scrollTop > keylineHeight);
+      }
+
+      if (hasSiblings.current.next) {
+        setBottomKeyline(target.scrollTop <= scrollableDistance - keylineHeight);
+      }
+    }
+  }));
+  useEffect(function () {
+    var target = scrollableRef.current;
+    window.addEventListener('resize', setLazyKeylines, false);
+    target === null || target === void 0 ? void 0 : target.addEventListener('scroll', setLazyKeylines, false);
+    setLazyContentFocus();
+    setLazyKeylines();
+    setLazySiblings({
+      previous: Boolean(target === null || target === void 0 ? void 0 : target.previousElementSibling),
+      next: Boolean(target === null || target === void 0 ? void 0 : target.nextElementSibling)
+    });
+    return function () {
+      window.removeEventListener('resize', setLazyKeylines, false);
+      target === null || target === void 0 ? void 0 : target.removeEventListener('scroll', setLazyKeylines, false);
+    };
+  }, [setLazyContentFocus, setLazyKeylines, setLazySiblings]);
+  return jsx(FocusRing, {
+    isInset: true
+  }, jsx("div", {
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: showContentFocus ? 0 : undefined,
+    "data-testid": testId && "".concat(testId, "--scrollable"),
+    ref: mergeRefs([ref, scrollableRef]),
+    css: [baseStyles, showTopKeyline && topKeylineStyles, showBottomKeyline && bottomKeylineStyles]
+  }, children));
+});
+ScrollContainer.displayName = 'ScrollContainer';
+export default ScrollContainer;

package/dist/esm/internal/constants.js

@@ -0,0 +1,27 @@
+import { text as getTextColor, N30, N800, R400, Y400 } from '@atlaskit/theme/colors';
+import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+export var width = {
+  values: ['small', 'medium', 'large', 'x-large'],
+  widths: {
+    small: 400,
+    medium: 600,
+    large: 800,
+    'x-large': 968
+  },
+  defaultValue: 'medium'
+};
+export var gutter = 60;
+var gridSize = getGridSize();
+export var borderRadius = getBorderRadius();
+export var verticalOffset = gridSize * 2;
+export var padding = gridSize * 3;
+export var footerItemGap = gridSize;
+export var titleIconMargin = gridSize;
+export var keylineHeight = 2;
+export var keylineColor = N30;
+export var textColor = getTextColor();
+export var focusOutlineColor = N800;
+export var iconColor = {
+  danger: R400,
+  warning: Y400
+};

package/dist/esm/internal/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export var ModalContext = /*#__PURE__*/createContext(null);
+export var ScrollContext = /*#__PURE__*/createContext(null);

package/dist/esm/internal/hooks/use-modal-stack.js

@@ -0,0 +1,96 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect } from 'react';
+import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import useStateRef from '@atlaskit/ds-lib/use-state-ref';
+import { useExitingPersistence } from '@atlaskit/motion/exiting-persistence';
+/**
+ *  ________________________________________________
+ * | MAJOR VERSIONS WILL NOT KNOW ABOUT EACH OTHER! |
+ *  ------------------------------------------------
+ *
+ * An array which holds references to all currently open modal dialogs.
+ * This will only work for modal dialogs of the same major version,
+ * as the reference will be different between them.
+ *
+ * E.g. V11 won't know about any from V12.
+ */
+
+var modalStackRegister = [];
+
+/**
+ * Returns the position of the calling modal dialog in the modal dialog stack.
+ * Stack index of `0` is the highest position in the stack,
+ * with every higher number being behind in the stack.
+ */
+export default function useModalStack(_ref) {
+  var onStackChange = _ref.onStackChange;
+
+  var _useExitingPersistenc = useExitingPersistence(),
+      isExiting = _useExitingPersistenc.isExiting;
+
+  var _useStateRef = useStateRef(0),
+      _useStateRef2 = _slicedToArray(_useStateRef, 2),
+      stackIndexRef = _useStateRef2[0],
+      setStackIndex = _useStateRef2[1];
+
+  var currentStackIndex = stackIndexRef.current;
+  var previousStackIndex = usePreviousValue(stackIndexRef.current); // We want to ensure this function **never changes** during the lifecycle of this component.
+  // This is why it's assigned to a ref and not in a useMemo/useCallback.
+
+  var updateStack = useLazyCallback(function () {
+    var newStackIndex = modalStackRegister.indexOf(updateStack); // We access the stack index ref instead of state because this closure will always only
+    // have the initial state and not any of the later values.
+
+    if (stackIndexRef.current !== newStackIndex) {
+      setStackIndex(newStackIndex);
+      stackIndexRef.current = newStackIndex;
+    }
+  });
+  useEffect(function () {
+    var currentStackIndex = modalStackRegister.indexOf(updateStack);
+
+    if (!isExiting && currentStackIndex === -1) {
+      // We are opening the modal dialog.
+      // Add ourselves to the modal stack register!
+      modalStackRegister.unshift(updateStack);
+    }
+
+    if (isExiting && currentStackIndex !== -1) {
+      // We are closing the modal dialog using a wrapping modal transition component.
+      // Remove ourselves from the modal stack register!
+      // NOTE: Modal dialogs that don't have a wrapping modal transition component won't flow through here!
+      // For that scenario we cleanup when the component unmounts.
+      modalStackRegister.splice(currentStackIndex, 1);
+    } // Fire all registered modal dialogs to update their position in the stack.
+
+
+    modalStackRegister.forEach(function (cb) {
+      return cb();
+    });
+  }, [updateStack, isExiting]);
+  useEffect(function () {
+    return function () {
+      // Final cleanup just in case this modal dialog did not have a wrapping modal transition.
+      var currentStackIndex = modalStackRegister.indexOf(updateStack);
+
+      if (currentStackIndex !== -1) {
+        modalStackRegister.splice(currentStackIndex, 1);
+        modalStackRegister.forEach(function (cb) {
+          return cb();
+        });
+      }
+    };
+  }, [updateStack]);
+  useEffect(function () {
+    if (previousStackIndex === undefined) {
+      // Initial case that we don't need to notify about.
+      return;
+    }
+
+    if (previousStackIndex !== currentStackIndex) {
+      onStackChange(currentStackIndex);
+    }
+  }, [onStackChange, previousStackIndex, currentStackIndex]);
+  return currentStackIndex;
+}

package/dist/esm/internal/hooks/use-on-motion-finish.js

@@ -0,0 +1,16 @@
+import { useCallback, useRef } from 'react';
+export default function useOnMotionFinish(_ref) {
+  var onOpenComplete = _ref.onOpenComplete,
+      onCloseComplete = _ref.onCloseComplete;
+  var motionRef = useRef(null);
+  var onMotionFinish = useCallback(function (state) {
+    if (state === 'entering' && onOpenComplete) {
+      onOpenComplete(motionRef.current, true);
+    }
+
+    if (state === 'exiting' && onCloseComplete) {
+      onCloseComplete(motionRef.current);
+    }
+  }, [onOpenComplete, onCloseComplete]);
+  return [motionRef, onMotionFinish];
+}

package/dist/esm/internal/hooks/use-prevent-programmatic-scroll.js

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useLayoutEffect, useState } from 'react';
+import useWindowEvent from '@atlaskit/ds-lib/use-window-event';
+/**
+ * Returns how far the body is scrolled from the top of the viewport.
+ *
+ *   ____
+ * ||____|| <-- overflow
+ *  |    |  <-- viewport
+ *  |____|
+ *
+ * Scroll distance is the height of overflow outside the viewport.
+ */
+
+function getScrollDistance() {
+  var _document$documentEle, _document$body;
+
+  return window.pageYOffset || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.scrollTop) || ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.scrollTop) || 0;
+}
+/**
+ * Prevents programatic scrolling of the viewport with `scrollIntoView`.
+ * Should be used in conjunction with a scroll lock to prevent a user from scrolling.
+ *
+ * @returns scroll top offset of the viewport
+ */
+
+
+export default function usePreventProgrammaticScroll() {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      scrollTopOffset = _useState2[0],
+      setScrollTopOffset = _useState2[1];
+
+  useLayoutEffect(function () {
+    setScrollTopOffset(getScrollDistance());
+  }, []);
+  var onWindowScroll = useCallback(function () {
+    if (getScrollDistance() !== scrollTopOffset) {
+      window.scrollTo(window.pageXOffset, scrollTopOffset);
+    }
+  }, [scrollTopOffset]);
+  useWindowEvent('scroll', onWindowScroll);
+  return scrollTopOffset;
+}

package/dist/esm/internal/hooks/use-scroll.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ScrollContext } from '../context';
+export default function useScroll() {
+  var shouldScrollInViewport = useContext(ScrollContext);
+
+  if (shouldScrollInViewport == null) {
+    throw Error('@atlaskit/modal-dialog: Scroll context unavailable – this component needs to be a child of ModalDialog.');
+  }
+
+  return shouldScrollInViewport;
+}

package/dist/esm/internal/utils.js

@@ -0,0 +1,22 @@
+import { width } from './constants';
+export var dialogWidth = function dialogWidth(input) {
+  if (!input) {
+    return 'auto';
+  }
+
+  var isWidthName = width.values.indexOf(input.toString()) !== -1;
+  var widthName = isWidthName && input;
+
+  if (widthName) {
+    return "".concat(width.widths[widthName], "px");
+  }
+
+  return typeof input === 'number' ? "".concat(input, "px") : input;
+};
+export var dialogHeight = function dialogHeight(input) {
+  if (!input) {
+    return 'auto';
+  }
+
+  return typeof input === 'number' ? "".concat(input, "px") : input;
+};

package/dist/esm/modal-body.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { TouchScrollable } from 'react-scrolllock';
+import { useModal } from './hooks';
+import ScrollContainer from './internal/components/scroll-container';
+import { keylineHeight, padding } from './internal/constants';
+import useScroll from './internal/hooks/use-scroll';
+var bodyStyles = css({
+  /* This ensures the body fills the whole space between header and footer. */
+  flex: '1 1 auto'
+});
+/**
+ * Adding the padding here avoids cropping the keyline on its sides.
+ * The combined vertical spacing is maintained by subtracting the
+ * keyline height from header and footer. */
+
+var bodyScrollStyles = css({
+  padding: "".concat(keylineHeight, "px ").concat(padding, "px")
+});
+/**
+ * Keylines will not be shown if scrolling in viewport so we do
+ * not account for them in this case. */
+
+var viewportScrollStyles = css({
+  padding: "0px ".concat(padding, "px")
+});
+
+var ModalBody = function ModalBody(props) {
+  var children = props.children,
+      userDefinedTestId = props.testId;
+
+  var _useModal = useModal(),
+      modalTestId = _useModal.testId;
+
+  var shouldScrollInViewport = useScroll();
+  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
+  return shouldScrollInViewport ? jsx("div", {
+    css: [bodyStyles, viewportScrollStyles],
+    "data-testid": testId
+  }, children) : jsx(TouchScrollable, null, jsx(ScrollContainer, {
+    testId: userDefinedTestId || modalTestId
+  }, jsx("div", {
+    css: [bodyStyles, bodyScrollStyles],
+    "data-testid": testId
+  }, children)));
+};
+
+export default ModalBody;