@atlaskit/drawer 7.4.7 → 7.4.8

package/dist/cjs/components/primitives/index.js

@@ -1,61 +1,46 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
-
 var _motion = require("@atlaskit/motion");
-
 var _constants = require("../../constants");
-
 var _utils = require("../utils");
-
 var _content = _interopRequireDefault(require("./content"));
-
 var _drawerWrapper = _interopRequireDefault(require("./drawer-wrapper"));
-
 var _focusLock = _interopRequireDefault(require("./focus-lock"));
-
 var _iconButton = _interopRequireDefault(require("./icon-button"));
-
 var _sidebar = _interopRequireDefault(require("./sidebar"));
-
 var _excluded = ["component"],
-    _excluded2 = ["component"];
+  _excluded2 = ["component"];
 // Misc.
 // ------------------------------
+
 var defaults = {
   Sidebar: _sidebar.default,
   Content: _content.default
 };
+
 /**
  * This wrapper is used to specify separate durations for enter and exit.
  */
-
 var CustomSlideIn = function CustomSlideIn(_ref) {
   var children = _ref.children,
-      onFinish = _ref.onFinish;
-
+    onFinish = _ref.onFinish;
   var _useExitingPersistenc = (0, _motion.useExitingPersistence)(),
-      isExiting = _useExitingPersistenc.isExiting;
+    isExiting = _useExitingPersistenc.isExiting;
+
   /**
    * The actual duration should be the same for both enter and exit,
    * but motion halves the passed duration for exit animations,
    * so we double it when exiting.
    */
-
-
   var duration = isExiting ? _constants.transitionDurationMs * 2 : _constants.transitionDurationMs;
   return (0, _react2.jsx)(_motion.SlideIn, {
     animationTimingFunction: _constants.animationTimingFunction,
@@ -66,34 +51,30 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
     onFinish: onFinish
   }, children);
 };
-
 var DrawerPrimitive = function DrawerPrimitive(_ref2) {
   var children = _ref2.children,
-      Icon = _ref2.icon,
-      onClose = _ref2.onClose,
-      onCloseComplete = _ref2.onCloseComplete,
-      onOpenComplete = _ref2.onOpenComplete,
-      overrides = _ref2.overrides,
-      testId = _ref2.testId,
-      isOpen = _ref2.in,
-      shouldReturnFocus = _ref2.shouldReturnFocus,
-      autoFocusFirstElem = _ref2.autoFocusFirstElem,
-      isFocusLockEnabled = _ref2.isFocusLockEnabled,
-      width = _ref2.width;
+    Icon = _ref2.icon,
+    onClose = _ref2.onClose,
+    onCloseComplete = _ref2.onCloseComplete,
+    onOpenComplete = _ref2.onOpenComplete,
+    overrides = _ref2.overrides,
+    testId = _ref2.testId,
+    isOpen = _ref2.in,
+    shouldReturnFocus = _ref2.shouldReturnFocus,
+    autoFocusFirstElem = _ref2.autoFocusFirstElem,
+    isFocusLockEnabled = _ref2.isFocusLockEnabled,
+    width = _ref2.width;
   var getOverrides = (0, _utils.createExtender)(defaults, overrides);
-
   var _getOverrides = getOverrides('Sidebar'),
-      Sidebar = _getOverrides.component,
-      sideBarOverrides = (0, _objectWithoutProperties2.default)(_getOverrides, _excluded);
-
+    Sidebar = _getOverrides.component,
+    sideBarOverrides = (0, _objectWithoutProperties2.default)(_getOverrides, _excluded);
   var _getOverrides2 = getOverrides('Content'),
-      Content = _getOverrides2.component,
-      contentOverrides = (0, _objectWithoutProperties2.default)(_getOverrides2, _excluded2);
+    Content = _getOverrides2.component,
+    contentOverrides = (0, _objectWithoutProperties2.default)(_getOverrides2, _excluded2);
+
   /**
    * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
    */
-
-
   var drawerRef = (0, _react.useRef)(null);
   var onFinish = (0, _react.useCallback)(function (state) {
     if (state === 'entering') {
@@ -126,8 +107,8 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       label: "Close drawer"
     }))), (0, _react2.jsx)(Content, contentOverrides, children)));
   }));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = DrawerPrimitive;
 exports.default = _default;

package/dist/cjs/components/primitives/sidebar.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _excluded = ["cssFn"];
 var defaultStyle = {
   alignItems: 'center',
@@ -30,20 +23,17 @@ var defaultStyle = {
   paddingTop: 3 * (0, _constants.gridSize)(),
   width: 8 * (0, _constants.gridSize)()
 };
-
 var sidebarCSS = function sidebarCSS() {
   return defaultStyle;
 };
-
 var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: (0, _react.css)(cssFn(defaultStyle))
   }, props));
 };
-
 var _default = {
   component: Sidebar,
   cssFn: sidebarCSS

package/dist/cjs/components/utils.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createExtender = void 0;
-
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
 /**
@@ -12,36 +11,29 @@ exports.createExtender = void 0;
  */
 var createExtender = function createExtender(defaults) {
   var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Object.create(Object.prototype);
-
   if (!defaults) {
     throw new Error('a default set of overrides *must* be passed in as the first argument');
   }
-
   return function getOverrides(key) {
     var _defaults$key = defaults[key],
-        defaultCssFn = _defaults$key.cssFn,
-        defaultComponent = _defaults$key.component;
-
+      defaultCssFn = _defaults$key.cssFn,
+      defaultComponent = _defaults$key.component;
     if (!overrides[key]) {
       return {
         cssFn: defaultCssFn,
         component: defaultComponent
       };
     }
-
     var _overrides$key = overrides[key],
-        customCssFn = _overrides$key.cssFn,
-        customComponent = _overrides$key.component;
-
+      customCssFn = _overrides$key.cssFn,
+      customComponent = _overrides$key.component;
     var composedCssFn = function composedCssFn(state) {
       return customCssFn(defaultCssFn(state), state);
     };
-
     return {
       cssFn: customCssFn ? composedCssFn : defaultCssFn,
       component: customComponent || defaultComponent
     };
   };
 };
-
 exports.createExtender = createExtender;

package/dist/cjs/constants.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
-
 var _curves = require("@atlaskit/motion/curves");
-
 var transitionDuration = '0.22s';
 exports.transitionDuration = transitionDuration;
 var transitionDurationMs = 220;
@@ -15,11 +13,9 @@ var transitionTimingFunction = _curves.easeOut;
 exports.transitionTimingFunction = transitionTimingFunction;
 var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
 exports.widths = widths;
-
 var animationTimingFunction = function animationTimingFunction() {
   return _curves.easeOut;
 };
-
 exports.animationTimingFunction = animationTimingFunction;
 var defaultFocusLockSettings = {
   isFocusLockEnabled: true,

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _components.default;
   }
 });
-
 var _components = _interopRequireDefault(require("./components"));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.4.7",
+	"version": "7.4.8",
 	"sideEffects": false
 }

package/dist/es2019/components/blanket.js

@@ -5,7 +5,6 @@ import AkBlanket from '@atlaskit/blanket';
 import Box from '@atlaskit/ds-explorations/box';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { animationTimingFunction, transitionDurationMs } from '../constants';
-
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
@@ -22,8 +21,7 @@ const Blanket = ({
    * `opacity: 1` at `50%`.
    *
    * The fade out animation uses half the passed duration so it evens out.
-   */
-  , {
+   */, {
     duration: transitionDurationMs * 2
     /**
      * We don't expose this on `FadeIn` but it does get passed down.
@@ -43,5 +41,4 @@ const Blanket = ({
     testId: testId && testId
   }))));
 };
-
 export default Blanket;

package/dist/es2019/components/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 import React, { Component } from 'react';
 import { canUseDOM } from 'exenv';
@@ -9,9 +8,8 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.4.7";
+const packageVersion = "7.4.8";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
   actionSubject: 'drawer',
@@ -22,72 +20,57 @@ const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEve
     trigger
   }
 })(createAnalyticsEvent);
-
 export class DrawerBase extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       renderPortal: false
     });
-
     _defineProperty(this, "body", canUseDOM ? document.querySelector('body') : undefined);
-
     _defineProperty(this, "handleBlanketClick", event => {
       this.handleClose(event, 'blanket');
     });
-
     _defineProperty(this, "handleBackButtonClick", event => {
       this.handleClose(event, 'backButton');
     });
-
     _defineProperty(this, "handleClose", (event, trigger) => {
       const {
         createAnalyticsEvent,
         onClose
       } = this.props;
       const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
-
       if (onClose) {
         onClose(event, analyticsEvent);
       }
     });
-
     _defineProperty(this, "handleKeyDown", event => {
       const {
         isOpen,
         onKeyDown
       } = this.props;
-
       if (event.key === 'Escape' && isOpen) {
         this.handleClose(event, 'escKey');
       }
-
       if (onKeyDown) {
         onKeyDown(event);
       }
     });
   }
-
   componentDidMount() {
     const {
       isOpen
     } = this.props;
-
     if (isOpen) {
       window.addEventListener('keydown', this.handleKeyDown);
     }
   }
-
   componentWillUnmount() {
     window.removeEventListener('keydown', this.handleKeyDown);
   }
-
   componentDidUpdate(prevProps) {
     const {
       isOpen
     } = this.props;
-
     if (isOpen !== prevProps.isOpen) {
       if (isOpen) {
         window.addEventListener('keydown', this.handleKeyDown);
@@ -96,12 +79,10 @@ export class DrawerBase extends Component {
       }
     }
   }
-
   render() {
     if (!this.body) {
       return null;
     }
-
     const {
       testId,
       isOpen,
@@ -131,7 +112,8 @@ export class DrawerBase extends Component {
       onCloseComplete: onCloseComplete,
       onOpenComplete: onOpenComplete,
       width: width,
-      shouldUnmountOnExit: shouldUnmountOnExit // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      shouldUnmountOnExit: shouldUnmountOnExit
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
       ,
       overrides: overrides,
       autoFocusFirstElem: autoFocusFirstElem,
@@ -139,14 +121,11 @@ export class DrawerBase extends Component {
       shouldReturnFocus: shouldReturnFocus
     }, children));
   }
-
 }
-
 _defineProperty(DrawerBase, "defaultProps", {
   width: 'narrow',
   ...defaultFocusLockSettings
 });
-
 export default withAnalyticsContext({
   componentName: 'drawer',
   packageName,

package/dist/es2019/components/primitives/content.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 const defaultStyles = {
@@ -8,9 +8,7 @@ const defaultStyles = {
   overflow: 'auto',
   marginTop: 3 * gridSize()
 };
-
 const contentCSS = () => defaultStyles;
-
 const Content = ({
   cssFn,
   ...props
@@ -21,11 +19,11 @@ const Content = ({
  * guide suggested as it made more sense as a transformer of the current styles rather than
  * a complete override with no chance of partially changing styles.
  */
+
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
 jsx("div", _extends({
   css: css(cssFn(defaultStyles))
 }, props));
-
 export default {
   component: Content,
   cssFn: contentCSS

package/dist/es2019/components/primitives/drawer-wrapper.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { forwardRef, useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
@@ -27,7 +28,6 @@ const wrapperStyles = {
   left: 0,
   height: '100vh'
 };
-
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
  */
@@ -48,7 +48,6 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
    */
   const assignSecondChildRef = useCallback(node => {
     var _node$children;
-
     if (node !== null && node !== void 0 && (_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length && typeof scrollRef === 'function') {
       scrollRef(node.children[node.children.length - 1]);
     }
@@ -61,7 +60,8 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
     backgroundColor: "elevation.surface.overlay",
     overflow: "hidden",
     layer: "blanket",
-    UNSAFE_style: { ...wrapperStyles,
+    UNSAFE_style: {
+      ...wrapperStyles,
       ...wrapperWidth[width]
     },
     className: className,

package/dist/es2019/components/primitives/focus-lock.js

@@ -12,20 +12,16 @@ export default class FocusLock extends Component {
       isFocusLockEnabled,
       autoFocusFirstElem
     } = this.props;
-
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(typeof autoFocusFirstElem === 'boolean', '@atlaskit/drawer: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
     }
-
     if (typeof autoFocusFirstElem === 'function' && isFocusLockEnabled) {
       const elem = autoFocusFirstElem();
-
       if (elem && elem.focus) {
         elem.focus();
       }
     }
   }
-
   render() {
     const {
       isFocusLockEnabled,
@@ -39,8 +35,7 @@ export default class FocusLock extends Component {
       returnFocus: shouldReturnFocus
     }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
   }
-
 }
-
-_defineProperty(FocusLock, "defaultProps", { ...defaultFocusLockSettings
+_defineProperty(FocusLock, "defaultProps", {
+  ...defaultFocusLockSettings
 });

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
+
 /**
  * Returns how far the body is scrolled from the top of the viewport.
  *
@@ -12,12 +13,11 @@ import { bind } from 'bind-event-listener';
  *
  * 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 programmatic scrolling of the viewport with `scrollIntoView`.
  * Should be used in conjunction with a scroll lock to prevent a user from scrolling.
@@ -26,8 +26,6 @@ function getScrollDistance() {
  *
  * @returns scroll top offset of the viewport
  */
-
-
 export default function usePreventProgrammaticScroll() {
   const [scrollTopOffset, setScrollTopOffset] = useState(0);
   useLayoutEffect(() => {

package/dist/es2019/components/primitives/icon-button.js

@@ -1,11 +1,12 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { B50, N30A } from '@atlaskit/theme/colors';
 const iconButtonStyles = css({
-  padding: "var(--ds-scale-100, 8px)",
+  padding: "var(--ds-space-100, 8px)",
   backgroundColor: 'inherit',
   border: 'none',
-  borderRadius: "var(--ds-scale-1000, 80px)",
+  borderRadius: "var(--ds-space-1000, 80px)",
   color: 'inherit',
   cursor: 'pointer',
   lineHeight: "var(--ds-font-lineHeight-100, 1)",
@@ -16,18 +17,18 @@ const iconButtonStyles = css({
     backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`
   }
 });
-
 const IconButton = ({
   children,
   onClick,
   testId
-}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+}) =>
+// eslint-disable-next-line @repo/internal/react/use-primitives
 jsx("button", {
   type: "button",
   css: iconButtonStyles,
   onClick: onClick,
   "data-testid": testId
-}, children); // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+}, children);
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default IconButton;

package/dist/es2019/components/primitives/index.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
@@ -9,17 +10,19 @@ import ContentOverrides from './content';
 import DrawerWrapper from './drawer-wrapper';
 import FocusLock from './focus-lock';
 import IconButton from './icon-button';
-import SidebarOverrides from './sidebar'; // Misc.
+import SidebarOverrides from './sidebar';
+
+// Misc.
 // ------------------------------
 
 const defaults = {
   Sidebar: SidebarOverrides,
   Content: ContentOverrides
 };
+
 /**
  * This wrapper is used to specify separate durations for enter and exit.
  */
-
 const CustomSlideIn = ({
   children,
   onFinish
@@ -27,12 +30,12 @@ const CustomSlideIn = ({
   const {
     isExiting
   } = useExitingPersistence();
+
   /**
    * The actual duration should be the same for both enter and exit,
    * but motion halves the passed duration for exit animations,
    * so we double it when exiting.
    */
-
   const duration = isExiting ? transitionDurationMs * 2 : transitionDurationMs;
   return jsx(SlideIn, {
     animationTimingFunction: animationTimingFunction,
@@ -43,7 +46,6 @@ const CustomSlideIn = ({
     onFinish: onFinish
   }, children);
 };
-
 const DrawerPrimitive = ({
   children,
   icon: Icon,
@@ -67,10 +69,10 @@ const DrawerPrimitive = ({
     component: Content,
     ...contentOverrides
   } = getOverrides('Content');
+
   /**
    * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
    */
-
   const drawerRef = useRef(null);
   const onFinish = useCallback(state => {
     if (state === 'entering') {
@@ -102,7 +104,7 @@ const DrawerPrimitive = ({
   }) : jsx(ArrowLeft, {
     label: "Close drawer"
   }))), jsx(Content, contentOverrides, children)))));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default DrawerPrimitive;

package/dist/es2019/components/primitives/sidebar.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -16,9 +16,7 @@ const defaultStyle = {
   paddingTop: 3 * gridSize(),
   width: 8 * gridSize()
 };
-
 const sidebarCSS = () => defaultStyle;
-
 const Sidebar = ({
   cssFn,
   ...props
@@ -28,7 +26,6 @@ const Sidebar = ({
     css: css(cssFn(defaultStyle))
   }, props));
 };
-
 export default {
   component: Sidebar,
   cssFn: sidebarCSS