@atlaskit/modal-dialog 12.0.2

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/modal-dialog",
+	"version": "12.0.2",
+	"sideEffects": false
+}

package/dist/es2019/hooks.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ModalContext } from './internal/context';
+export const useModal = () => {
+  const modalContext = useContext(ModalContext);
+
+  if (modalContext == null) {
+    throw Error('@atlaskit/modal-dialog: Modal context unavailable – this component needs to be a child of ModalDialog.');
+  }
+
+  return modalContext;
+};

package/dist/es2019/index.js

@@ -0,0 +1,7 @@
+export { default } from './modal-wrapper';
+export { default as ModalTransition } from './modal-transition';
+export { default as ModalHeader } from './modal-header';
+export { default as ModalTitle } from './modal-title';
+export { default as ModalBody } from './modal-body';
+export { default as ModalFooter } from './modal-footer';
+export { useModal } from './hooks';

package/dist/es2019/internal/components/modal-dialog.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { css, jsx } from '@emotion/core';
+import { useUID } from 'react-uid';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import FadeIn from '@atlaskit/motion/fade-in';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { borderRadius, textColor } from '../constants';
+import { ModalContext, ScrollContext } from '../context';
+import useOnMotionFinish from '../hooks/use-on-motion-finish';
+import { dialogHeight, dialogWidth } from '../utils';
+import Positioner from './positioner';
+const dialogStyles = css({
+  display: 'flex',
+  width: '100%',
+  maxWidth: '100vw',
+  height: '100%',
+  minHeight: 0,
+  maxHeight: '100vh',
+  flex: '1 1 auto',
+  flexDirection: 'column',
+  backgroundColor: N0,
+  color: textColor,
+  pointerEvents: 'auto',
+  '@media (min-width: 480px)': {
+    width: 'var(--modal-dialog-width)',
+    maxWidth: 'inherit',
+    marginRight: 'inherit',
+    marginLeft: 'inherit',
+    borderRadius,
+    boxShadow: `0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`
+  },
+
+  /**
+   * This is to support scrolling if the modal's children are wrapped in
+   * a form.
+   */
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > form:only-child': {
+    display: 'inherit',
+    maxHeight: 'inherit',
+    flexDirection: 'inherit'
+  }
+});
+const viewportScrollStyles = css({
+  /**
+   * This ensures that the element fills the viewport on mobile
+   * while also allowing it to overflow if its height is larger than
+   * the viewport.
+   */
+  minHeight: '100vh',
+  maxHeight: 'none',
+  '@media (min-width: 480px)': {
+    minHeight: 'var(--modal-dialog-height)'
+  }
+});
+const bodyScrollStyles = css({
+  '@media (min-width: 480px)': {
+    height: 'var(--modal-dialog-height)',
+    maxHeight: 'inherit'
+  }
+});
+
+const ModalDialog = props => {
+  const {
+    width = 'medium',
+    shouldScrollInViewport = false,
+    autoFocus,
+    stackIndex,
+    onClose,
+    onCloseComplete,
+    onOpenComplete,
+    height,
+    children,
+    testId
+  } = props;
+  const id = useUID();
+  const titleId = `modal-dialog-title-${id}`;
+  useAutoFocus(typeof autoFocus === 'object' ? autoFocus : undefined, // When a user supplies  a ref to focus we enable this hook
+  typeof autoFocus === 'object');
+  const [motionRef, onMotionFinish] = useOnMotionFinish({
+    onOpenComplete,
+    onCloseComplete
+  });
+  const modalDialogContext = useMemo(() => ({
+    testId,
+    titleId,
+    onClose
+  }), [testId, titleId, onClose]);
+  return jsx(Positioner, {
+    stackIndex: stackIndex,
+    shouldScrollInViewport: shouldScrollInViewport,
+    testId: testId
+  }, jsx(ModalContext.Provider, {
+    value: modalDialogContext
+  }, jsx(ScrollContext.Provider, {
+    value: shouldScrollInViewport
+  }, jsx(FadeIn, {
+    entranceDirection: "bottom",
+    onFinish: onMotionFinish
+  }, bottomFadeInProps => jsx("section", _extends({}, bottomFadeInProps, {
+    ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
+    style: {
+      '--modal-dialog-width': dialogWidth(width),
+      '--modal-dialog-height': dialogHeight(height)
+    },
+    css: [dialogStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
+    role: "dialog",
+    "aria-labelledby": titleId,
+    "data-testid": testId,
+    "data-modal-stack": stackIndex,
+    tabIndex: -1,
+    "aria-modal": true
+  }), children)))));
+};
+
+export default ModalDialog;

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

@@ -0,0 +1,78 @@
+/** @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';
+const maxWidthDimensions = `calc(100vw - ${gutter * 2}px)`;
+const maxHeightDimensions = `calc(100vh - ${gutter * 2 - 1}px)`;
+const positionerStyles = css({
+  width: '100%',
+  maxWidth: '100%',
+  height: '100%',
+  position: 'fixed',
+  zIndex: layers.modal(),
+  top: 0,
+  left: 0
+});
+const viewportScrollStyles = css({
+  width: 'max-content',
+  height: 'auto',
+  position: 'relative',
+  '@media (min-width: 480px)': {
+    margin: `${gutter}px auto`
+  }
+});
+const bodyScrollStyles = css({
+  '@media (min-width: 480px)': {
+    width: 'max-content',
+    maxWidth: maxWidthDimensions,
+    maxHeight: maxHeightDimensions,
+    marginRight: 'auto',
+    marginLeft: 'auto',
+    position: 'absolute',
+    top: `${gutter}px`,
+    right: 0,
+    left: 0,
+    pointerEvents: 'none'
+  }
+});
+const stackTransitionStyles = css({
+  transitionDuration: `${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'
+  }
+});
+const stackTransformStyles = css({
+  transform: 'translateY(var(--modal-dialog-translate-y))'
+});
+const stackIdleStyles = css({
+  transform: 'none'
+});
+
+const Positioner = props => {
+  const {
+    children,
+    stackIndex,
+    shouldScrollInViewport,
+    testId
+  } = props;
+  return jsx("div", {
+    style: {
+      '--modal-dialog-translate-y': `${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 && `${testId}--positioner`
+  }, children);
+};
+
+export default Positioner;

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

@@ -0,0 +1,97 @@
+/** @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';
+const 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'
+  }
+});
+const topKeylineStyles = css({
+  borderTop: `${keylineHeight}px solid ${keylineColor}`
+});
+const bottomKeylineStyles = css({
+  borderBottom: `${keylineHeight}px solid ${keylineColor}`
+});
+
+/**
+ * A container that shows top and bottom keylines when the
+ * content overflows into the scrollable element.
+ */
+const ScrollContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    testId,
+    children
+  } = props;
+  const [hasSiblings, setSiblings] = useStateRef({
+    previous: false,
+    next: false
+  });
+  const [showContentFocus, setContentFocus] = useState(false);
+  const [showTopKeyline, setTopKeyline] = useState(false);
+  const [showBottomKeyline, setBottomKeyline] = useState(false);
+  const scrollableRef = useRef(null);
+  const setLazySiblings = useLazyCallback(setSiblings);
+  const setLazyContentFocus = useLazyCallback(rafSchedule(() => {
+    const target = scrollableRef.current;
+    target && setContentFocus(target.scrollHeight > target.clientHeight);
+  }));
+  const setLazyKeylines = useLazyCallback(rafSchedule(() => {
+    const target = scrollableRef.current;
+
+    if (target) {
+      const scrollableDistance = target.scrollHeight - target.clientHeight;
+
+      if (hasSiblings.current.previous) {
+        setTopKeyline(target.scrollTop > keylineHeight);
+      }
+
+      if (hasSiblings.current.next) {
+        setBottomKeyline(target.scrollTop <= scrollableDistance - keylineHeight);
+      }
+    }
+  }));
+  useEffect(() => {
+    const 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 () => {
+      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 && `${testId}--scrollable`,
+    ref: mergeRefs([ref, scrollableRef]),
+    css: [baseStyles, showTopKeyline && topKeylineStyles, showBottomKeyline && bottomKeylineStyles]
+  }, children));
+});
+ScrollContainer.displayName = 'ScrollContainer';
+export default ScrollContainer;

package/dist/es2019/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 const width = {
+  values: ['small', 'medium', 'large', 'x-large'],
+  widths: {
+    small: 400,
+    medium: 600,
+    large: 800,
+    'x-large': 968
+  },
+  defaultValue: 'medium'
+};
+export const gutter = 60;
+const gridSize = getGridSize();
+export const borderRadius = getBorderRadius();
+export const verticalOffset = gridSize * 2;
+export const padding = gridSize * 3;
+export const footerItemGap = gridSize;
+export const titleIconMargin = gridSize;
+export const keylineHeight = 2;
+export const keylineColor = N30;
+export const textColor = getTextColor();
+export const focusOutlineColor = N800;
+export const iconColor = {
+  danger: R400,
+  warning: Y400
+};

package/dist/es2019/internal/context.js

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

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

@@ -0,0 +1,85 @@
+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.
+ */
+
+const 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({
+  onStackChange
+}) {
+  const {
+    isExiting
+  } = useExitingPersistence();
+  const [stackIndexRef, setStackIndex] = useStateRef(0);
+  const currentStackIndex = stackIndexRef.current;
+  const 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.
+
+  const updateStack = useLazyCallback(() => {
+    const 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(() => {
+    const 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(cb => cb());
+  }, [updateStack, isExiting]);
+  useEffect(() => () => {
+    // Final cleanup just in case this modal dialog did not have a wrapping modal transition.
+    const currentStackIndex = modalStackRegister.indexOf(updateStack);
+
+    if (currentStackIndex !== -1) {
+      modalStackRegister.splice(currentStackIndex, 1);
+      modalStackRegister.forEach(cb => cb());
+    }
+  }, [updateStack]);
+  useEffect(() => {
+    if (previousStackIndex === undefined) {
+      // Initial case that we don't need to notify about.
+      return;
+    }
+
+    if (previousStackIndex !== currentStackIndex) {
+      onStackChange(currentStackIndex);
+    }
+  }, [onStackChange, previousStackIndex, currentStackIndex]);
+  return currentStackIndex;
+}