@atlaskit/drawer 9.2.6 → 9.3.0

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

@@ -11,13 +11,14 @@ var _react2 = require("@emotion/react");
 var _useCallbackRef = require("use-callback-ref");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
-var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
-var _css;
+var _usePreventProgrammaticScroll = _interopRequireDefault(require("../../hooks/use-prevent-programmatic-scroll"));
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var wrapperWidth = exports.wrapperWidth = {
   full: {
     width: '100vw'
@@ -35,13 +36,13 @@ var wrapperWidth = exports.wrapperWidth = {
     width: 600
   }
 };
-var wrapperStyles = (0, _react2.css)((_css = {
+var wrapperStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   display: 'flex',
   height: '100vh',
   position: 'fixed',
   zIndex: 500,
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")")
-}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, "insetBlockStart", 0), (0, _defineProperty2.default)(_css, "insetInlineStart", 0), (0, _defineProperty2.default)(_css, "overflow", 'hidden'), _css));
+}, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), "insetBlockStart", 0), "insetInlineStart", 0), "overflow", 'hidden'));
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
  */

package/dist/cjs/context.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnClose = exports.useEnsureIsInsideDrawer = exports.OnCloseContext = exports.EnsureIsInsideDrawerContext = void 0;
+var _react = require("react");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+/**
+ * Context used to share the `onClose` prop value with sub-components.
+ */
+var OnCloseContext = exports.OnCloseContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useOnClose = exports.useOnClose = function useOnClose() {
+  return (0, _react.useContext)(OnCloseContext);
+};
+
+/**
+ * Used to ensure Drawer sub-components are used within a Drawer component,
+ * and provide a useful error message if not.
+ */
+var EnsureIsInsideDrawerContext = exports.EnsureIsInsideDrawerContext = /*#__PURE__*/(0, _react.createContext)(false);
+var useEnsureIsInsideDrawer = exports.useEnsureIsInsideDrawer = function useEnsureIsInsideDrawer() {
+  var context = (0, _react.useContext)(EnsureIsInsideDrawerContext);
+  (0, _tinyInvariant.default)(context, 'Drawer sub-components must be used within a Drawer component.');
+};

package/dist/cjs/entry-points/compiled.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _drawer.Drawer;
+  }
+});
+Object.defineProperty(exports, "DrawerCloseButton", {
+  enumerable: true,
+  get: function get() {
+    return _drawerCloseButton.DrawerCloseButton;
+  }
+});
+Object.defineProperty(exports, "DrawerContent", {
+  enumerable: true,
+  get: function get() {
+    return _drawerContent.DrawerContent;
+  }
+});
+Object.defineProperty(exports, "DrawerSidebar", {
+  enumerable: true,
+  get: function get() {
+    return _drawerSidebar.DrawerSidebar;
+  }
+});
+var _drawer = require("../compiled/drawer");
+var _drawerContent = require("../compiled/drawer-panel/drawer-content");
+var _drawerSidebar = require("../compiled/drawer-panel/drawer-sidebar");
+var _drawerCloseButton = require("../compiled/drawer-panel/drawer-close-button");

package/dist/es2019/compiled/blanket.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

package/dist/es2019/compiled/blanket.js

@@ -0,0 +1,47 @@
+/* blanket.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./blanket.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import AkBlanket from '@atlaskit/blanket';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { animationTimingFunction, transitionDurationMs } from '../constants';
+const styles = {
+  blanket: "_kqswh2mm"
+};
+
+/**
+ * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
+ */
+const Blanket = ({
+  isOpen,
+  onBlanketClicked,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, isOpen && /*#__PURE__*/React.createElement(FadeIn
+  /**
+   * We double the duration because the fade in keyframes have
+   * `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.
+     * TODO: figure out how we want to handle this...
+     */
+    // @ts-ignore
+    ,
+    animationTimingFunction: animationTimingFunction
+  }, ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.blanket, className])
+  }, /*#__PURE__*/React.createElement(AkBlanket, {
+    isTinted: true,
+    onBlanketClicked: onBlanketClicked,
+    testId: testId && testId
+  }))));
+};
+export default Blanket;

package/dist/es2019/compiled/constants.js

@@ -0,0 +1,4 @@
+import { easeOut } from '@atlaskit/motion/curves';
+export const transitionDuration = '0.22s';
+export const transitionDurationMs = 220;
+export const animationTimingFunction = () => easeOut;

package/dist/es2019/compiled/drawer-panel/drawer-close-button.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { IconButton } from '@atlaskit/button/new';
+import ArrowLeft from '@atlaskit/icon/core/migration/arrow-left';
+import ArrowLeftOld from '@atlaskit/icon/glyph/arrow-left';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useEnsureIsInsideDrawer, useOnClose } from '../../context';
+/**
+ * __Drawer close button
+ *
+ * A button that closes the drawer.
+ */
+export const DrawerCloseButton = ({
+  icon: Icon,
+  label = 'Close drawer',
+  testId = 'DrawerCloseButton'
+}) => {
+  useEnsureIsInsideDrawer();
+  const onClose = useOnClose();
+  return /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onClose,
+    testId: testId,
+    icon: Icon ? iconProps => /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+      size: "large"
+    }, fg('platform-visual-refresh-icon-ads-migration') ? {
+      LEGACY_size: 'large'
+    } : {})) : fg('platform-visual-refresh-icon-ads-migration') ? ArrowLeft :
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    ArrowLeftOld,
+    label: label,
+    shape: "circle",
+    appearance: "subtle"
+  });
+};

package/dist/es2019/compiled/drawer-panel/drawer-content.compiled.css

@@ -0,0 +1,6 @@
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._1o9zkb7n{flex-shrink:1}
+._1reo1wug{overflow-x:auto}
+._i0dlf1ug{flex-basis:0%}

package/dist/es2019/compiled/drawer-panel/drawer-content.js

@@ -0,0 +1,59 @@
+/* drawer-content.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./drawer-content.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import ScrollLock from 'react-scrolllock';
+import { mergeRefs } from 'use-callback-ref';
+import { useEnsureIsInsideDrawer } from '../../context';
+import usePreventProgrammaticScroll from '../../hooks/use-prevent-programmatic-scroll';
+const styles = {
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug _19pk1ejb"
+};
+const DrawerContentBase = /*#__PURE__*/forwardRef(({
+  children,
+  scrollContentLabel = 'Scrollable content',
+  xcss
+}, scrollableRef) => {
+  const [showContentFocus, setContentFocus] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const setLazyContentFocus = () => {
+      const target = ref.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([styles.default, xcss]),
+    ref: mergeRefs([ref, scrollableRef])
+    // tabindex is allowed here so that keyboard users can scroll content
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    "aria-label": showContentFocus ? scrollContentLabel : undefined,
+    "data-testid": "drawer-contents"
+  }, children);
+});
+
+/**
+ * __Drawer content__
+ *
+ * The main content section of the drawer panel.
+ */
+export const DrawerContent = ({
+  children,
+  scrollContentLabel,
+  xcss
+}) => {
+  useEnsureIsInsideDrawer();
+  usePreventProgrammaticScroll();
+  return /*#__PURE__*/React.createElement(ScrollLock, null, /*#__PURE__*/React.createElement(DrawerContentBase, {
+    scrollContentLabel: scrollContentLabel
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
+  }, children));
+};

package/dist/es2019/compiled/drawer-panel/drawer-panel.compiled.css

@@ -0,0 +1,15 @@
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._1bsb1gwv{width:360px}
+._1bsb1mwr{width:95vw}
+._1bsb1ogm{width:600px}
+._1bsb1y37{width:5in}
+._1bsbauwl{width:100vw}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._1pbybfng{z-index:500}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1reo15vq{overflow-x:hidden}
+._4t3i1kxc{height:100vh}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqsw1n9t{position:fixed}

package/dist/es2019/compiled/drawer-panel/drawer-panel.js

@@ -0,0 +1,102 @@
+/* drawer-panel.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./drawer-panel.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useRef } from 'react';
+import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
+import { animationTimingFunction, transitionDurationMs } from '../../constants';
+import { EnsureIsInsideDrawerContext, OnCloseContext } from '../../context';
+import FocusLock from './focus-lock';
+const styles = {
+  root: "_1reo15vq _18m915vq _1e0c1txw _4t3i1kxc _kqsw1n9t _1pbybfng _bfhk1bhr _1q1l1bhr _152tze3t _1e02ze3t",
+  full: "_1bsbauwl",
+  extended: "_1bsb1mwr",
+  narrow: "_1bsb1gwv",
+  medium: "_1bsb1y37",
+  wide: "_1bsb1ogm"
+};
+
+/**
+ * This wrapper is used to specify separate durations for enter and exit.
+ */
+const CustomSlideIn = ({
+  children,
+  onFinish,
+  enterFrom
+}) => {
+  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 /*#__PURE__*/React.createElement(SlideIn, {
+    animationTimingFunction: animationTimingFunction,
+    duration: duration,
+    enterFrom: enterFrom,
+    exitTo: enterFrom,
+    fade: "none",
+    onFinish: onFinish
+  }, children);
+};
+
+/**
+ * __Drawer panel__
+ */
+export const DrawerPanel = ({
+  children,
+  onClose,
+  onCloseComplete,
+  onOpenComplete,
+  testId,
+  isOpen,
+  shouldReturnFocus,
+  autoFocusFirstElem,
+  isFocusLockEnabled,
+  width = 'narrow',
+  label,
+  titleId,
+  enterFrom = 'left'
+}) => {
+  /**
+   * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
+   */
+  const drawerRef = useRef(null);
+  const onFinish = useCallback(state => {
+    if (state === 'entering') {
+      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(drawerRef.current);
+    } else if (state === 'exiting') {
+      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(drawerRef.current);
+    }
+  }, [onCloseComplete, onOpenComplete]);
+  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, isOpen && /*#__PURE__*/React.createElement(CustomSlideIn, {
+    onFinish: onFinish,
+    enterFrom: enterFrom
+  }, ({
+    className
+  }) => /*#__PURE__*/React.createElement(FocusLock, {
+    autoFocusFirstElem: autoFocusFirstElem,
+    isFocusLockEnabled: isFocusLockEnabled,
+    shouldReturnFocus: shouldReturnFocus
+  }, /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax([styles.root, styles[width], className]),
+    "data-testid": testId,
+    ref: drawerRef,
+    "aria-modal": true,
+    role: "dialog",
+    "aria-label": label,
+    "aria-labelledby": titleId
+  }, /*#__PURE__*/React.createElement(EnsureIsInsideDrawerContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
+    value: onClose
+  }, children))))));
+};

package/dist/es2019/compiled/drawer-panel/drawer-sidebar.compiled.css

@@ -0,0 +1,10 @@
+._1bsbxncg{width:var(--ds-space-800,4pc)}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/compiled/drawer-panel/drawer-sidebar.js

@@ -0,0 +1,25 @@
+/* drawer-sidebar.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./drawer-sidebar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEnsureIsInsideDrawer } from '../../context';
+const styles = {
+  default: "_4cvr1h6o _vchhusvi _syaz1gjq _1e0c1txw _1o9zidpf _2lx21bp4 _4t3i1kxc _n3tdpxbi _ca0q1ejb _1bsbxncg"
+};
+
+/**
+ * __Drawer sidebar__
+ *
+ * The sidebar of the drawer panel.
+ */
+export const DrawerSidebar = ({
+  children,
+  xcss
+}) => {
+  useEnsureIsInsideDrawer();
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([styles.default, xcss]),
+    "data-testid": "drawer-sidebar"
+  }, children);
+};

package/dist/es2019/compiled/drawer-panel/focus-lock.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactFocusLock from 'react-focus-lock';
+/**
+ * __Focus lock__
+ *
+ * Thin wrapper around react-focus-lock.
+ */
+const FocusLock = ({
+  isFocusLockEnabled = true,
+  autoFocusFirstElem = true,
+  shouldReturnFocus = true,
+  children
+}) => {
+  const getFocusTarget = () => {
+    if (typeof shouldReturnFocus === 'boolean') {
+      return shouldReturnFocus;
+    }
+    return false;
+  };
+  const onDeactivation = () => {
+    if (typeof shouldReturnFocus !== 'boolean') {
+      window.setTimeout(() => {
+        var _shouldReturnFocus$cu;
+        shouldReturnFocus === null || shouldReturnFocus === void 0 ? void 0 : (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 ? void 0 : _shouldReturnFocus$cu.focus();
+      }, 0);
+    }
+  };
+  return /*#__PURE__*/React.createElement(ReactFocusLock, {
+    disabled: !isFocusLockEnabled,
+    autoFocus: autoFocusFirstElem,
+    returnFocus: getFocusTarget(),
+    onDeactivation: onDeactivation
+  }, children);
+};
+export default FocusLock;

package/dist/es2019/compiled/drawer.js

@@ -0,0 +1,118 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+import React, { useCallback, useEffect } from 'react';
+import { canUseDOM } from 'exenv';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { Layering, useCloseOnEscapePress } from '@atlaskit/layering';
+import Portal from '@atlaskit/portal';
+import Blanket from './blanket';
+import { DrawerPanel } from './drawer-panel/drawer-panel';
+// escape close manager for layering
+const EscapeCloseManager = ({
+  onClose
+}) => {
+  // wrap so that we can cast the event to a React.KeyboardEvent
+  const handleClose = useCallback(evt => {
+    onClose && onClose(evt);
+  }, [onClose]);
+  useCloseOnEscapePress({
+    onClose: handleClose
+  });
+  return /*#__PURE__*/React.createElement("span", null);
+};
+
+/**
+ * __Drawer__
+ *
+ * A drawer is a panel that slides in from the left side of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/drawer/examples)
+ * - [Code](https://atlassian.design/components/drawer/code)
+ * - [Usage](https://atlassian.design/components/drawer/usage)
+ */
+export const Drawer = ({
+  width = 'narrow',
+  isOpen,
+  isFocusLockEnabled = true,
+  shouldReturnFocus = true,
+  autoFocusFirstElem = true,
+  onKeyDown,
+  testId,
+  children,
+  onClose,
+  onCloseComplete,
+  onOpenComplete,
+  zIndex = 'unset',
+  label,
+  titleId,
+  enterFrom
+}) => {
+  const handleClose = usePlatformLeafEventHandler({
+    fn: (evt, analyticsEvent) => onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent),
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "9.3.0",
+    analyticsData: {
+      trigger: 'escKey'
+    }
+  });
+  const handleKeyDown = useCallback(evt => {
+    onKeyDown && onKeyDown(evt);
+  }, [onKeyDown]);
+  useEffect(() => {
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, isOpen]);
+  const handleBlanketClick = usePlatformLeafEventHandler({
+    fn: (evt, analyticsEvent) => onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent),
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "9.3.0",
+    analyticsData: {
+      trigger: 'blanket'
+    }
+  });
+  const handleBackButtonClick = usePlatformLeafEventHandler({
+    fn: (evt, analyticsEvent) => onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent),
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "9.3.0",
+    analyticsData: {
+      trigger: 'backButton'
+    }
+  });
+  const body = canUseDOM ? document.querySelector('body') : undefined;
+  if (!body) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: zIndex
+  }, /*#__PURE__*/React.createElement(Blanket, {
+    isOpen: isOpen,
+    onBlanketClicked: handleBlanketClick,
+    testId: testId && `${testId}--blanket`
+  }), /*#__PURE__*/React.createElement(DrawerPanel, {
+    testId: testId,
+    isOpen: isOpen,
+    onClose: handleBackButtonClick,
+    onCloseComplete: onCloseComplete,
+    onOpenComplete: onOpenComplete,
+    width: width,
+    enterFrom: enterFrom,
+    label: label,
+    titleId: titleId,
+    autoFocusFirstElem: autoFocusFirstElem,
+    isFocusLockEnabled: isFocusLockEnabled,
+    shouldReturnFocus: shouldReturnFocus
+  }, isOpen ? /*#__PURE__*/React.createElement(Layering, {
+    isDisabled: false
+  }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
+    onClose: handleClose
+  })) : children));
+};

package/dist/es2019/compiled/types.js

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

package/dist/es2019/components/index.js

@@ -57,7 +57,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.2.6",
+    packageVersion: "9.3.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -78,7 +78,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.2.6",
+    packageVersion: "9.3.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -88,7 +88,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.2.6",
+    packageVersion: "9.3.0",
     analyticsData: {
       trigger: 'backButton'
     }

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

@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
 import { N0 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
-import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
+import usePreventProgrammaticScroll from '../../hooks/use-prevent-programmatic-scroll';
 export const wrapperWidth = {
   full: {
     width: '100vw'

package/dist/es2019/context.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+/**
+ * Context used to share the `onClose` prop value with sub-components.
+ */
+export const OnCloseContext = /*#__PURE__*/createContext(undefined);
+export const useOnClose = () => useContext(OnCloseContext);
+
+/**
+ * Used to ensure Drawer sub-components are used within a Drawer component,
+ * and provide a useful error message if not.
+ */
+export const EnsureIsInsideDrawerContext = /*#__PURE__*/createContext(false);
+export const useEnsureIsInsideDrawer = () => {
+  const context = useContext(EnsureIsInsideDrawerContext);
+  invariant(context, 'Drawer sub-components must be used within a Drawer component.');
+};

package/dist/es2019/entry-points/compiled.js

@@ -0,0 +1,4 @@
+export { Drawer } from '../compiled/drawer';
+export { DrawerContent } from '../compiled/drawer-panel/drawer-content';
+export { DrawerSidebar } from '../compiled/drawer-panel/drawer-sidebar';
+export { DrawerCloseButton } from '../compiled/drawer-panel/drawer-close-button';

package/dist/esm/compiled/blanket.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}