@atlaskit/modal-dialog 12.0.2

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

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

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

@@ -0,0 +1,39 @@
+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() {
+  const [scrollTopOffset, setScrollTopOffset] = useState(0);
+  useLayoutEffect(() => {
+    setScrollTopOffset(getScrollDistance());
+  }, []);
+  const onWindowScroll = useCallback(() => {
+    if (getScrollDistance() !== scrollTopOffset) {
+      window.scrollTo(window.pageXOffset, scrollTopOffset);
+    }
+  }, [scrollTopOffset]);
+  useWindowEvent('scroll', onWindowScroll);
+  return scrollTopOffset;
+}

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

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ScrollContext } from '../context';
+export default function useScroll() {
+  const 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/es2019/internal/utils.js

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

package/dist/es2019/modal-body.js

@@ -0,0 +1,50 @@
+/** @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';
+const 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. */
+
+const bodyScrollStyles = css({
+  padding: `${keylineHeight}px ${padding}px`
+});
+/**
+ * Keylines will not be shown if scrolling in viewport so we do
+ * not account for them in this case. */
+
+const viewportScrollStyles = css({
+  padding: `0px ${padding}px`
+});
+
+const ModalBody = props => {
+  const {
+    children,
+    testId: userDefinedTestId
+  } = props;
+  const {
+    testId: modalTestId
+  } = useModal();
+  const shouldScrollInViewport = useScroll();
+  const testId = userDefinedTestId || modalTestId && `${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;

package/dist/es2019/modal-footer.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useModal } from './hooks';
+import { footerItemGap, keylineHeight, padding } from './internal/constants';
+const footerStyles = css({
+  display: 'flex',
+  padding,
+  paddingTop: `${padding - keylineHeight}px`,
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: `${footerItemGap}px`
+});
+
+const ModalFooter = props => {
+  const {
+    children,
+    testId: userDefinedTestId
+  } = props;
+  const {
+    testId: modalTestId
+  } = useModal();
+  const testId = userDefinedTestId || modalTestId && `${modalTestId}--footer`;
+  return jsx("div", {
+    css: footerStyles,
+    "data-testid": testId
+  }, children);
+};
+
+export default ModalFooter;

package/dist/es2019/modal-header.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { useModal } from './hooks';
+import { keylineHeight, padding } from './internal/constants';
+const headerStyles = css({
+  display: 'flex',
+  padding: padding,
+  paddingBottom: `${padding - keylineHeight}px`,
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+const ModalHeader = props => {
+  const {
+    children,
+    testId: userDefinedTestId
+  } = props;
+  const {
+    testId: modalTestId
+  } = useModal();
+  const testId = userDefinedTestId || modalTestId && `${modalTestId}--header`;
+  return jsx("div", {
+    css: headerStyles,
+    "data-testid": testId
+  }, children);
+};
+
+export default ModalHeader;

package/dist/es2019/modal-title.js

@@ -0,0 +1,94 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { useModal } from './hooks';
+import { iconColor, titleIconMargin } from './internal/constants';
+const fontSize = 20;
+const lineHeight = 1;
+const adjustedLineHeight = 1.2;
+const titleStyles = css({
+  display: 'flex',
+  minWidth: 0,
+  margin: 0,
+  alignItems: 'center',
+  fontSize: `${fontSize}px`,
+  fontStyle: 'inherit',
+  fontWeight: 500,
+  letterSpacing: `-0.008em`,
+  lineHeight: lineHeight
+});
+const textStyles = css({
+  minWidth: 0,
+
+  /**
+   * This ensures that the element fills the whole header space
+   * and its content does not overflow (since flex items don't
+   * shrink past its content size by default). */
+  flex: '1 1 auto',
+  wordWrap: 'break-word'
+});
+const iconStyles = css({
+  marginRight: `${titleIconMargin}px`,
+
+  /* Keeps the size of the icon the same, in case the text element grows in width. */
+  flex: '0 0 auto'
+});
+/**
+ * When the title is truncated (not multi-line), we adjust the
+ * line height to avoid cropping the descenders. This removes
+ * the extra spacing that we get from that adjustment. */
+
+const lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
+const truncatedTextStyles = css({
+  marginTop: `${lineHeightOffset / 2}px`,
+  marginBottom: `${lineHeightOffset / 2}px`,
+  lineHeight: adjustedLineHeight,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const truncatedTextIconStyles = css({
+  marginBottom: `${lineHeightOffset / 2}px`,
+  lineHeight: 1.2
+});
+
+const TitleIcon = ({
+  appearance,
+  isMultiline
+}) => {
+  const Icon = appearance === 'danger' ? ErrorIcon : WarningIcon;
+  return jsx("span", {
+    css: [iconStyles, !isMultiline && truncatedTextIconStyles]
+  }, jsx(Icon, {
+    label: `${appearance} icon`,
+    primaryColor: iconColor[appearance]
+  }));
+};
+
+const ModalTitle = props => {
+  const {
+    appearance,
+    children,
+    isMultiline = true,
+    testId: userDefinedTestId
+  } = props;
+  const {
+    titleId,
+    testId: modalTestId
+  } = useModal();
+  const testId = userDefinedTestId || modalTestId && `${modalTestId}--title`;
+  return jsx("h1", {
+    css: titleStyles,
+    "data-testid": testId
+  }, appearance && jsx(TitleIcon, {
+    appearance: appearance,
+    isMultiline: isMultiline
+  }), jsx("span", {
+    id: titleId,
+    css: [textStyles, !isMultiline && truncatedTextStyles],
+    "data-testid": testId && `${testId}-text`
+  }, children));
+};
+
+export default ModalTitle;

package/dist/es2019/modal-transition.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
+
+const ModalTransition = props => {
+  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, props.children);
+};
+
+export default ModalTransition;

package/dist/es2019/modal-wrapper.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { useCallback } from 'react';
+import { css, jsx } from '@emotion/core';
+import FocusLock from 'react-focus-lock';
+import ScrollLock, { TouchScrollable } from 'react-scrolllock';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import Blanket from '@atlaskit/blanket';
+import noop from '@atlaskit/ds-lib/noop';
+import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
+import FadeIn from '@atlaskit/motion/fade-in';
+import Portal from '@atlaskit/portal';
+import { layers } from '@atlaskit/theme/constants';
+import ModalDialog from './internal/components/modal-dialog';
+import useModalStack from './internal/hooks/use-modal-stack';
+import usePreventProgrammaticScroll from './internal/hooks/use-prevent-programmatic-scroll';
+const fillScreenStyles = css({
+  width: '100vw',
+  height: '100vh',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  overflowY: 'auto',
+  WebkitOverflowScrolling: 'touch'
+});
+
+const ModalWrapper = props => {
+  const {
+    autoFocus = true,
+    shouldCloseOnEscapePress = true,
+    shouldCloseOnOverlayClick = true,
+    shouldScrollInViewport = false,
+    stackIndex: stackIndexOverride,
+    onClose = noop,
+    onStackChange = noop,
+    isBlanketHidden,
+    testId,
+    ...modalDialogProps
+  } = props;
+  const calculatedStackIndex = useModalStack({
+    onStackChange
+  });
+  const stackIndex = stackIndexOverride || calculatedStackIndex;
+  const isForeground = stackIndex === 0; // When a user supplies a ref to focus we skip auto focus via react-focus-lock
+
+  const autoFocusLock = typeof autoFocus === 'boolean' ? autoFocus : false;
+  const onCloseHandler = usePlatformLeafEventHandler({
+    fn: onClose,
+    action: 'closed',
+    componentName: 'modalDialog',
+    packageName: "@atlaskit/modal-dialog",
+    packageVersion: "12.0.2"
+  });
+  const onBlanketClicked = useCallback(e => {
+    if (shouldCloseOnOverlayClick) {
+      onCloseHandler(e);
+    }
+  }, [shouldCloseOnOverlayClick, onCloseHandler]);
+  usePreventProgrammaticScroll();
+  useCloseOnEscapePress({
+    onClose: onCloseHandler,
+    isDisabled: !shouldCloseOnEscapePress || !isForeground
+  });
+  const modalDialogWithBlanket = jsx(Blanket, {
+    isTinted: !isBlanketHidden,
+    onBlanketClicked: onBlanketClicked,
+    testId: testId && `${testId}--blanket`
+  }, jsx(ModalDialog, _extends({
+    testId: testId,
+    autoFocus: autoFocus,
+    stackIndex: stackIndex,
+    onClose: onCloseHandler,
+    shouldScrollInViewport: shouldScrollInViewport
+  }, modalDialogProps)));
+  return jsx(Portal, {
+    zIndex: layers.modal()
+  }, jsx(FadeIn, null, fadeInProps => jsx("div", _extends({}, fadeInProps, {
+    css: fillScreenStyles,
+    "aria-hidden": !isForeground
+  }), jsx(FocusLock, {
+    autoFocus: autoFocusLock,
+    disabled: !isForeground,
+    returnFocus: true
+  }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))));
+};
+
+export default ModalWrapper;

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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

package/dist/esm/hooks.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ModalContext } from './internal/context';
+export var useModal = function useModal() {
+  var 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/esm/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/esm/internal/components/modal-dialog.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _typeof from "@babel/runtime/helpers/typeof";
+
+/** @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';
+var 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: borderRadius,
+    boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(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'
+  }
+});
+var 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)'
+  }
+});
+var bodyScrollStyles = css({
+  '@media (min-width: 480px)': {
+    height: 'var(--modal-dialog-height)',
+    maxHeight: 'inherit'
+  }
+});
+
+var ModalDialog = function ModalDialog(props) {
+  var _props$width = props.width,
+      width = _props$width === void 0 ? 'medium' : _props$width,
+      _props$shouldScrollIn = props.shouldScrollInViewport,
+      shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
+      autoFocus = props.autoFocus,
+      stackIndex = props.stackIndex,
+      onClose = props.onClose,
+      onCloseComplete = props.onCloseComplete,
+      onOpenComplete = props.onOpenComplete,
+      height = props.height,
+      children = props.children,
+      testId = props.testId;
+  var id = useUID();
+  var titleId = "modal-dialog-title-".concat(id);
+  useAutoFocus(_typeof(autoFocus) === 'object' ? autoFocus : undefined, // When a user supplies  a ref to focus we enable this hook
+  _typeof(autoFocus) === 'object');
+
+  var _useOnMotionFinish = useOnMotionFinish({
+    onOpenComplete: onOpenComplete,
+    onCloseComplete: onCloseComplete
+  }),
+      _useOnMotionFinish2 = _slicedToArray(_useOnMotionFinish, 2),
+      motionRef = _useOnMotionFinish2[0],
+      onMotionFinish = _useOnMotionFinish2[1];
+
+  var modalDialogContext = useMemo(function () {
+    return {
+      testId: testId,
+      titleId: titleId,
+      onClose: 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
+  }, function (bottomFadeInProps) {
+    return 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;