@atlaskit/modal-dialog 12.0.2

package/dist/esm/modal-footer.js

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

package/dist/esm/modal-header.js

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

package/dist/esm/modal-title.js

@@ -0,0 +1,93 @@
+/** @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';
+var fontSize = 20;
+var lineHeight = 1;
+var adjustedLineHeight = 1.2;
+var titleStyles = css({
+  display: 'flex',
+  minWidth: 0,
+  margin: 0,
+  alignItems: 'center',
+  fontSize: "".concat(fontSize, "px"),
+  fontStyle: 'inherit',
+  fontWeight: 500,
+  letterSpacing: "-0.008em",
+  lineHeight: lineHeight
+});
+var 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'
+});
+var iconStyles = css({
+  marginRight: "".concat(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. */
+
+var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
+var truncatedTextStyles = css({
+  marginTop: "".concat(lineHeightOffset / 2, "px"),
+  marginBottom: "".concat(lineHeightOffset / 2, "px"),
+  lineHeight: adjustedLineHeight,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var truncatedTextIconStyles = css({
+  marginBottom: "".concat(lineHeightOffset / 2, "px"),
+  lineHeight: 1.2
+});
+
+var TitleIcon = function TitleIcon(_ref) {
+  var appearance = _ref.appearance,
+      isMultiline = _ref.isMultiline;
+  var Icon = appearance === 'danger' ? ErrorIcon : WarningIcon;
+  return jsx("span", {
+    css: [iconStyles, !isMultiline && truncatedTextIconStyles]
+  }, jsx(Icon, {
+    label: "".concat(appearance, " icon"),
+    primaryColor: iconColor[appearance]
+  }));
+};
+
+var ModalTitle = function ModalTitle(props) {
+  var appearance = props.appearance,
+      children = props.children,
+      _props$isMultiline = props.isMultiline,
+      isMultiline = _props$isMultiline === void 0 ? true : _props$isMultiline,
+      userDefinedTestId = props.testId;
+
+  var _useModal = useModal(),
+      titleId = _useModal.titleId,
+      modalTestId = _useModal.testId;
+
+  var testId = userDefinedTestId || modalTestId && "".concat(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 && "".concat(testId, "-text")
+  }, children));
+};
+
+export default ModalTitle;

package/dist/esm/modal-transition.js

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

package/dist/esm/modal-wrapper.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+/** @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';
+var fillScreenStyles = css({
+  width: '100vw',
+  height: '100vh',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  overflowY: 'auto',
+  WebkitOverflowScrolling: 'touch'
+});
+
+var ModalWrapper = function ModalWrapper(props) {
+  var _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+      _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
+      shouldCloseOnEscapePress = _props$shouldCloseOnE === void 0 ? true : _props$shouldCloseOnE,
+      _props$shouldCloseOnO = props.shouldCloseOnOverlayClick,
+      shouldCloseOnOverlayClick = _props$shouldCloseOnO === void 0 ? true : _props$shouldCloseOnO,
+      _props$shouldScrollIn = props.shouldScrollInViewport,
+      shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
+      stackIndexOverride = props.stackIndex,
+      _props$onClose = props.onClose,
+      onClose = _props$onClose === void 0 ? noop : _props$onClose,
+      _props$onStackChange = props.onStackChange,
+      onStackChange = _props$onStackChange === void 0 ? noop : _props$onStackChange,
+      isBlanketHidden = props.isBlanketHidden,
+      testId = props.testId,
+      modalDialogProps = _objectWithoutProperties(props, ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"]);
+
+  var calculatedStackIndex = useModalStack({
+    onStackChange: onStackChange
+  });
+  var stackIndex = stackIndexOverride || calculatedStackIndex;
+  var isForeground = stackIndex === 0; // When a user supplies a ref to focus we skip auto focus via react-focus-lock
+
+  var autoFocusLock = typeof autoFocus === 'boolean' ? autoFocus : false;
+  var onCloseHandler = usePlatformLeafEventHandler({
+    fn: onClose,
+    action: 'closed',
+    componentName: 'modalDialog',
+    packageName: "@atlaskit/modal-dialog",
+    packageVersion: "12.0.2"
+  });
+  var onBlanketClicked = useCallback(function (e) {
+    if (shouldCloseOnOverlayClick) {
+      onCloseHandler(e);
+    }
+  }, [shouldCloseOnOverlayClick, onCloseHandler]);
+  usePreventProgrammaticScroll();
+  useCloseOnEscapePress({
+    onClose: onCloseHandler,
+    isDisabled: !shouldCloseOnEscapePress || !isForeground
+  });
+  var modalDialogWithBlanket = jsx(Blanket, {
+    isTinted: !isBlanketHidden,
+    onBlanketClicked: onBlanketClicked,
+    testId: testId && "".concat(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, function (fadeInProps) {
+    return 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/esm/types.js

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

package/dist/esm/version.json

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

package/dist/types/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useModal: () => import("./internal/context").ModalAttributes;

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+export { default } from './modal-wrapper';
+export { default as ModalTransition } from './modal-transition';
+export type { KeyboardOrMouseEvent, Appearance, ModalAttributes, ModalDialogProps, ModalHeaderProps, ModalTitleProps, ModalBodyProps, ModalFooterProps, OnCloseHandler, OnCloseCompleteHandler, OnOpenCompleteHandler, OnStackChangeHandler, } from './types';
+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/types/internal/components/modal-dialog.d.ts

@@ -0,0 +1,3 @@
+import type { ModalDialogProps } from '../../types';
+declare const ModalDialog: (props: ModalDialogProps) => JSX.Element;
+export default ModalDialog;

package/dist/types/internal/components/positioner.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+interface PositionerProps {
+    children?: ReactNode;
+    stackIndex: number;
+    shouldScrollInViewport: boolean;
+    testId?: string;
+}
+declare const Positioner: (props: PositionerProps) => JSX.Element;
+export default Positioner;

package/dist/types/internal/components/scroll-container.d.ts

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import React from 'react';
+interface ScrollContainerProps {
+    /**
+     * Children of the body within modal dialog.
+     */
+    children: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * A container that shows top and bottom keylines when the
+ * content overflows into the scrollable element.
+ */
+declare const ScrollContainer: React.ForwardRefExoticComponent<ScrollContainerProps & React.RefAttributes<HTMLElement | null>>;
+export default ScrollContainer;

package/dist/types/internal/constants.d.ts

@@ -0,0 +1,25 @@
+import type { Appearance } from '../types';
+export declare type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
+interface Width {
+    values: string[];
+    widths: {
+        [index in WidthNames]: number;
+    };
+    defaultValue: string;
+}
+export declare const width: Width;
+export declare const gutter = 60;
+export declare const borderRadius: number;
+export declare const verticalOffset: number;
+export declare const padding: number;
+export declare const footerItemGap: number;
+export declare const titleIconMargin: number;
+export declare const keylineHeight = 2;
+export declare const keylineColor = "#EBECF0";
+export declare const textColor: string;
+export declare const focusOutlineColor = "#172B4D";
+declare type IconColor = {
+    [key in Appearance]: string;
+};
+export declare const iconColor: IconColor;
+export {};

package/dist/types/internal/context.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ModalDialogProps, OnCloseHandler } from '../types';
+export declare type ModalAttributes = {
+    /**
+     * Test id passed to the modal dialog.
+     */
+    testId?: ModalDialogProps['testId'];
+    /**
+     * Id referenced by the modal dialog's `aria-labelledby` attribute.
+     * This id should be assigned to the modal title element.
+     */
+    titleId: string;
+    /**
+     * Callback function called when the modal dialog is requesting to be closed,
+     * wrapped in modal dialog's analytic event context.
+     */
+    onClose?: OnCloseHandler;
+};
+export declare const ModalContext: import("react").Context<ModalAttributes | null>;
+export declare const ScrollContext: import("react").Context<boolean | null>;

package/dist/types/internal/hooks/use-modal-stack.d.ts

@@ -0,0 +1,13 @@
+interface ModalStackOpts {
+    /**
+     * Fired when the modal dialog stack has changed.
+     */
+    onStackChange: (newStackIndex: number) => void;
+}
+/**
+ * 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, }: ModalStackOpts): number;
+export {};

package/dist/types/internal/hooks/use-on-motion-finish.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+import type { Transition } from '@atlaskit/motion/types';
+import { ModalDialogProps } from '../../types';
+export default function useOnMotionFinish({ onOpenComplete, onCloseComplete, }: Pick<ModalDialogProps, 'onOpenComplete' | 'onCloseComplete'>): [RefObject<HTMLElement>, (state: Transition) => void];

package/dist/types/internal/hooks/use-prevent-programmatic-scroll.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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(): number;

package/dist/types/internal/hooks/use-scroll.d.ts

@@ -0,0 +1 @@
+export default function useScroll(): boolean;

package/dist/types/internal/utils.d.ts

@@ -0,0 +1,3 @@
+import { ModalDialogProps } from '../types';
+export declare const dialogWidth: (input?: ModalDialogProps['width']) => string;
+export declare const dialogHeight: (input?: ModalDialogProps['height']) => string;

package/dist/types/modal-body.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import React from 'react';
+export interface ModalBodyProps {
+    /**
+     * Children of modal dialog footer.
+     */
+    children: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
+export default ModalBody;

package/dist/types/modal-footer.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface ModalFooterProps {
+    /**
+     * Children of modal dialog footer.
+     */
+    children?: ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+declare const ModalFooter: (props: ModalFooterProps) => JSX.Element;
+export default ModalFooter;