@atlaskit/modal-dialog 12.6.6 → 12.6.8

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/modal-dialog
 
+## 12.6.8
+
+### Patch Changes
+
+- [`d6f63fa1abc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f63fa1abc) - Adds support for surface detection when using design tokens. Enabling children to be styled with the Modal’s surface color when using the `utility.elevation.surface.current` design token.
+- Updated dependencies
+
+## 12.6.7
+
+### Patch Changes
+
+- [`d2b6377be3d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2b6377be3d) - Add some basic JSDoc for internal components, add tokens.
+
 ## 12.6.6
 
 ### Patch Changes

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

@@ -18,6 +18,7 @@ var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
+var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _context = require("../context");
 var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
@@ -36,9 +37,8 @@ var dialogStyles = (0, _react2.css)((_css = {
   flex: '0 1 auto',
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  color: _constants.textColor,
-  pointerEvents: 'auto'
-}, (0, _defineProperty2.default)(_css, _primitives.media.above.xs, {
+  color: _constants.textColor
+}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, "pointerEvents", 'auto'), (0, _defineProperty2.default)(_css, _primitives.media.above.xs, {
   width: 'var(--modal-dialog-width)',
   maxWidth: 'inherit',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/cjs/internal/context.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ScrollContext = exports.ModalContext = void 0;
 var _react = require("react");
 /* eslint-disable @repo/internal/react/require-jsdoc */
-
 var ModalContext = /*#__PURE__*/(0, _react.createContext)(null);
 exports.ModalContext = ModalContext;
 var ScrollContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useOnMotionFinish;
 var _react = require("react");
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+/**
+ * This will run the respective passed in callback functions when modal is
+ * opened or closed.
+ */
 function useOnMotionFinish(_ref) {
   var onOpenComplete = _ref.onOpenComplete,
     onCloseComplete = _ref.onCloseComplete;

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = useScroll;
 var _react = require("react");
 var _context = require("../context");
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+/**
+ * This returns whether or not scrolling is allowed based on the existing
+ * scrolling context.
+ */
 function useScroll() {
   var shouldScrollInViewport = (0, _react.useContext)(_context.ScrollContext);
   if (shouldScrollInViewport == null) {

package/dist/cjs/modal-wrapper.js

@@ -29,10 +29,8 @@ var fillScreenStyles = (0, _react2.css)({
   width: '100vw',
   height: '100vh',
   position: 'fixed',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: 0,
+  top: "var(--ds-space-0, 0)",
+  left: "var(--ds-space-0, 0)",
   overflowY: 'auto',
   WebkitOverflowScrolling: 'touch'
 });
@@ -86,7 +84,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.6"
+    packageVersion: "12.6.8"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

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

@@ -9,6 +9,7 @@ import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -26,6 +27,7 @@ const dialogStyles = css({
   flexDirection: 'column',
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   color: textColor,
+  [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
   pointerEvents: 'auto',
   [media.above.xs]: {
     width: 'var(--modal-dialog-width)',

package/dist/es2019/internal/context.js

@@ -1,4 +1,4 @@
-/* eslint-disable @repo/internal/react/require-jsdoc */
 import { createContext } from 'react';
+/* eslint-disable @repo/internal/react/require-jsdoc */
 export const ModalContext = /*#__PURE__*/createContext(null);
 export const ScrollContext = /*#__PURE__*/createContext(null);

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

@@ -1,5 +1,8 @@
 import { useCallback, useRef } from 'react';
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+/**
+ * This will run the respective passed in callback functions when modal is
+ * opened or closed.
+ */
 export default function useOnMotionFinish({
   onOpenComplete,
   onCloseComplete

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

@@ -1,7 +1,10 @@
 import { useContext } from 'react';
 import { ScrollContext } from '../context';
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+/**
+ * This returns whether or not scrolling is allowed based on the existing
+ * scrolling context.
+ */
 export default function useScroll() {
   const shouldScrollInViewport = useContext(ScrollContext);
   if (shouldScrollInViewport == null) {

package/dist/es2019/modal-wrapper.js

@@ -19,10 +19,8 @@ const fillScreenStyles = css({
   width: '100vw',
   height: '100vh',
   position: 'fixed',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: 0,
+  top: "var(--ds-space-0, 0)",
+  left: "var(--ds-space-0, 0)",
   overflowY: 'auto',
   WebkitOverflowScrolling: 'touch'
 });
@@ -72,7 +70,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.6"
+    packageVersion: "12.6.8"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

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

@@ -13,6 +13,7 @@ import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -29,9 +30,8 @@ var dialogStyles = css((_css = {
   flex: '0 1 auto',
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  color: textColor,
-  pointerEvents: 'auto'
-}, _defineProperty(_css, media.above.xs, {
+  color: textColor
+}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, "pointerEvents", 'auto'), _defineProperty(_css, media.above.xs, {
   width: 'var(--modal-dialog-width)',
   maxWidth: 'inherit',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/esm/internal/context.js

@@ -1,4 +1,4 @@
-/* eslint-disable @repo/internal/react/require-jsdoc */
 import { createContext } from 'react';
+/* eslint-disable @repo/internal/react/require-jsdoc */
 export var ModalContext = /*#__PURE__*/createContext(null);
 export var ScrollContext = /*#__PURE__*/createContext(null);

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

@@ -1,5 +1,8 @@
 import { useCallback, useRef } from 'react';
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+/**
+ * This will run the respective passed in callback functions when modal is
+ * opened or closed.
+ */
 export default function useOnMotionFinish(_ref) {
   var onOpenComplete = _ref.onOpenComplete,
     onCloseComplete = _ref.onCloseComplete;

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

@@ -1,7 +1,10 @@
 import { useContext } from 'react';
 import { ScrollContext } from '../context';
 
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+/**
+ * This returns whether or not scrolling is allowed based on the existing
+ * scrolling context.
+ */
 export default function useScroll() {
   var shouldScrollInViewport = useContext(ScrollContext);
   if (shouldScrollInViewport == null) {

package/dist/esm/modal-wrapper.js

@@ -19,10 +19,8 @@ var fillScreenStyles = css({
   width: '100vw',
   height: '100vh',
   position: 'fixed',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: 0,
+  top: "var(--ds-space-0, 0)",
+  left: "var(--ds-space-0, 0)",
   overflowY: 'auto',
   WebkitOverflowScrolling: 'touch'
 });
@@ -76,7 +74,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.6"
+    packageVersion: "12.6.8"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

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

@@ -1,6 +1,10 @@
 import { RefObject } from 'react';
 import type { Transition } from '@atlaskit/motion/types';
 import { ModalDialogProps } from '../../types';
+/**
+ * This will run the respective passed in callback functions when modal is
+ * opened or closed.
+ */
 export default function useOnMotionFinish({ onOpenComplete, onCloseComplete, }: Pick<ModalDialogProps, 'onOpenComplete' | 'onCloseComplete'>): [
     RefObject<HTMLElement>,
     (state: Transition) => void

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

@@ -1 +1,5 @@
+/**
+ * This returns whether or not scrolling is allowed based on the existing
+ * scrolling context.
+ */
 export default function useScroll(): boolean;

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

@@ -1,6 +1,10 @@
 import { RefObject } from 'react';
 import type { Transition } from '@atlaskit/motion/types';
 import { ModalDialogProps } from '../../types';
+/**
+ * This will run the respective passed in callback functions when modal is
+ * opened or closed.
+ */
 export default function useOnMotionFinish({ onOpenComplete, onCloseComplete, }: Pick<ModalDialogProps, 'onOpenComplete' | 'onCloseComplete'>): [
     RefObject<HTMLElement>,
     (state: Transition) => void

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

@@ -1 +1,5 @@
+/**
+ * This returns whether or not scrolling is allowed based on the existing
+ * scrolling context.
+ */
 export default function useScroll(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.6.6",
+  "version": "12.6.8",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.16.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",

package/tmp/api-report-tmp.d.ts

@@ -1,113 +0,0 @@
-## API Report File for "@atlaskit/modal-dialog"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { ExitingPersistenceProps } from '@atlaskit/motion/exiting-persistence';
-import { jsx } from '@emotion/react';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-import { RefObject } from 'react';
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-export type Appearance = 'danger' | 'warning';
-
-// @public (undocumented)
-export type KeyboardOrMouseEvent = KeyboardEvent | React_2.KeyboardEvent<any> | React_2.MouseEvent<any>;
-
-// @public (undocumented)
-export type ModalAttributes = {
-    testId?: ModalDialogProps['testId'];
-    titleId: string;
-    onClose?: OnCloseHandler;
-};
-
-// @public
-export const ModalBody: (props: ModalBodyProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalBodyProps {
-    children: React_2.ReactNode;
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface ModalDialogProps {
-    autoFocus?: RefObject<HTMLElement | null | undefined> | boolean;
-    children?: React_2.ReactNode;
-    height?: number | string;
-    isBlanketHidden?: boolean;
-    label?: string;
-    onClose?: OnCloseHandler;
-    onCloseComplete?: OnCloseCompleteHandler;
-    onOpenComplete?: OnOpenCompleteHandler;
-    onStackChange?: OnStackChangeHandler;
-    shouldCloseOnEscapePress?: boolean;
-    shouldCloseOnOverlayClick?: boolean;
-    shouldScrollInViewport?: boolean;
-    stackIndex?: number;
-    testId?: string;
-    width?: WidthNames | number | string;
-}
-
-// @public
-export const ModalFooter: (props: ModalFooterProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalFooterProps {
-    children?: ReactNode;
-    testId?: string;
-}
-
-// @public
-export const ModalHeader: (props: ModalHeaderProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalHeaderProps {
-    children?: React_2.ReactNode;
-    testId?: string;
-}
-
-// @public
-export const ModalTitle: (props: ModalTitleProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalTitleProps {
-    appearance?: Appearance;
-    children?: ReactNode;
-    isMultiline?: boolean;
-    testId?: string;
-}
-
-// @public
-export const ModalTransition: (props: Pick<ExitingPersistenceProps, 'children'>) => JSX.Element;
-
-// @public
-const ModalWrapper: (props: ModalDialogProps) => jsx.JSX.Element;
-export default ModalWrapper;
-
-// @public (undocumented)
-export type OnCloseCompleteHandler = (element: HTMLElement) => void;
-
-// @public (undocumented)
-export type OnCloseHandler = (e: KeyboardOrMouseEvent, analyticEvent: UIAnalyticsEvent) => void;
-
-// @public (undocumented)
-export type OnOpenCompleteHandler = (node: HTMLElement, isAppearing: boolean) => void;
-
-// @public (undocumented)
-export type OnStackChangeHandler = (stackIndex: number) => void;
-
-// @public (undocumented)
-export const useModal: () => ModalAttributes;
-
-// @public (undocumented)
-type WidthNames = 'large' | 'medium' | 'small' | 'x-large';
-
-// (No @packageDocumentation comment for this package)
-
-```