@atlaskit/drawer 7.12.3 → 7.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/drawer
 
+## 7.13.0
+
+### Minor Changes
+
+- [#116848](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116848)
+  [`9b4398682d67b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b4398682d67b) -
+  Drawer can be configured to enter from any direction
+
+## 7.12.4
+
+### Patch Changes
+
+- [#116209](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116209)
+  [`0aa2af6a28226`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0aa2af6a28226) -
+  Only render escapeManager when open
+
 ## 7.12.3
 
 ### Patch Changes

package/dist/cjs/components/index.js

@@ -29,7 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.12.3";
+var packageVersion = "7.13.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -49,16 +49,16 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
   var createAnalyticsEvent = _ref.createAnalyticsEvent,
     handleClose = _ref.handleClose;
   var onClose = _react.default.useCallback(function (event) {
-    var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
     if (handleClose) {
-      handleClose(event, analyticsEvent);
+      var _analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
+      handleClose(event, _analyticsEvent);
     }
   }, [handleClose, createAnalyticsEvent]);
   (0, _layering.useCloseOnEscapePress)({
     onClose: onClose
   });
   // only create a dummy component for using ths hook in class component
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  return /*#__PURE__*/_react.default.createElement("span", null);
 };
 var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DrawerBase, _Component);
@@ -93,7 +93,7 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         isOpen = _this$props2.isOpen,
         onKeyDown = _this$props2.onKeyDown;
-      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p')) {
+      if (!(0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p')) {
         // when feature flag on, we will use the EscapeCloseManager instead
         if (event.key === 'Escape' && isOpen) {
           _this.handleClose(event, 'escKey');
@@ -154,10 +154,10 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         _this$props3$zIndex = _this$props3.zIndex,
         zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
         label = _this$props3.label,
-        titleId = _this$props3.titleId;
-      return /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
-        isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
-      }, /*#__PURE__*/_react.default.createElement(_portal.default, {
+        titleId = _this$props3.titleId,
+        enterFrom = _this$props3.enterFrom;
+      var shouldHaveLayeringEnabled = (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
+      return /*#__PURE__*/_react.default.createElement(_portal.default, {
         zIndex: zIndex
       }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
         isOpen: isOpen,
@@ -172,6 +172,7 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        enterFrom: enterFrom,
         label: label,
         titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit
@@ -182,10 +183,12 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         isFocusLockEnabled: isFocusLockEnabled,
         shouldReturnFocus: shouldReturnFocus,
         scrollContentLabel: scrollContentLabel
-      }, children, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') && /*#__PURE__*/_react.default.createElement(EscapeCloseManager, {
+      }, shouldHaveLayeringEnabled ? /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
+        isDisabled: false
+      }, children, /*#__PURE__*/_react.default.createElement(EscapeCloseManager, {
         createAnalyticsEvent: this.props.createAnalyticsEvent,
         handleClose: this.handleClose
-      }))));
+      })) : children));
     }
   }]);
   return DrawerBase;

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

@@ -38,7 +38,8 @@ var defaults = {
  */
 var CustomSlideIn = function CustomSlideIn(_ref) {
   var children = _ref.children,
-    onFinish = _ref.onFinish;
+    onFinish = _ref.onFinish,
+    enterFrom = _ref.enterFrom;
   var _useExitingPersistenc = (0, _motion.useExitingPersistence)(),
     isExiting = _useExitingPersistenc.isExiting;
 
@@ -51,8 +52,8 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
   return (0, _react2.jsx)(_motion.SlideIn, {
     animationTimingFunction: _constants.animationTimingFunction,
     duration: duration,
-    enterFrom: "left",
-    exitTo: "left",
+    enterFrom: enterFrom,
+    exitTo: enterFrom,
     fade: "none",
     onFinish: onFinish
   }, children);
@@ -74,7 +75,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     isFocusLockEnabled = _ref2.isFocusLockEnabled,
     width = _ref2.width,
     label = _ref2.label,
-    titleId = _ref2.titleId;
+    titleId = _ref2.titleId,
+    _ref2$enterFrom = _ref2.enterFrom,
+    enterFrom = _ref2$enterFrom === void 0 ? 'left' : _ref2$enterFrom;
   var getOverrides = (0, _utils.createExtender)(defaults, overrides);
   var _getOverrides = getOverrides('Sidebar'),
     Sidebar = _getOverrides.component,
@@ -97,7 +100,8 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
   return (0, _react2.jsx)(_motion.ExitingPersistence, {
     appear: true
   }, isOpen && (0, _react2.jsx)(CustomSlideIn, {
-    onFinish: onFinish
+    onFinish: onFinish,
+    enterFrom: enterFrom
   }, function (_ref3) {
     var className = _ref3.className;
     return (0, _react2.jsx)(_focusLock.default, {

package/dist/cjs/constants.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
+exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.directions = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
 var _curves = require("@atlaskit/motion/curves");
 var transitionDuration = exports.transitionDuration = '0.22s';
 var transitionDurationMs = exports.transitionDurationMs = 220;
 var transitionTimingFunction = exports.transitionTimingFunction = _curves.easeOut;
 var widths = exports.widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+var directions = exports.directions = ['top', 'right', 'bottom', 'left'];
 var animationTimingFunction = exports.animationTimingFunction = function animationTimingFunction() {
   return _curves.easeOut;
 };

package/dist/es2019/components/index.js

@@ -4,13 +4,13 @@ import React, { Component } from 'react';
 import { canUseDOM } from 'exenv';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.12.3";
+const packageVersion = "7.13.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
@@ -29,8 +29,8 @@ const EscapeCloseManager = ({
   handleClose
 }) => {
   const onClose = React.useCallback(event => {
-    const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
     if (handleClose) {
+      const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
       handleClose(event, analyticsEvent);
     }
   }, [handleClose, createAnalyticsEvent]);
@@ -38,7 +38,7 @@ const EscapeCloseManager = ({
     onClose: onClose
   });
   // only create a dummy component for using ths hook in class component
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
+  return /*#__PURE__*/React.createElement("span", null);
 };
 export class DrawerBase extends Component {
   constructor(...args) {
@@ -68,7 +68,7 @@ export class DrawerBase extends Component {
         isOpen,
         onKeyDown
       } = this.props;
-      if (!getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
+      if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
         // when feature flag on, we will use the EscapeCloseManager instead
         if (event.key === 'Escape' && isOpen) {
           this.handleClose(event, 'escKey');
@@ -123,11 +123,11 @@ export class DrawerBase extends Component {
       overrides,
       zIndex = 'unset',
       label,
-      titleId
+      titleId,
+      enterFrom
     } = this.props;
-    return /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
-      isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
-    }, /*#__PURE__*/React.createElement(Portal, {
+    const shouldHaveLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
+    return /*#__PURE__*/React.createElement(Portal, {
       zIndex: zIndex
     }, /*#__PURE__*/React.createElement(Blanket, {
       isOpen: isOpen,
@@ -142,6 +142,7 @@ export class DrawerBase extends Component {
       onCloseComplete: onCloseComplete,
       onOpenComplete: onOpenComplete,
       width: width,
+      enterFrom: enterFrom,
       label: label,
       titleId: titleId,
       shouldUnmountOnExit: shouldUnmountOnExit
@@ -152,10 +153,12 @@ export class DrawerBase extends Component {
       isFocusLockEnabled: isFocusLockEnabled,
       shouldReturnFocus: shouldReturnFocus,
       scrollContentLabel: scrollContentLabel
-    }, children, getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && /*#__PURE__*/React.createElement(EscapeCloseManager, {
+    }, shouldHaveLayeringEnabled ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+      isDisabled: false
+    }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
       createAnalyticsEvent: this.props.createAnalyticsEvent,
       handleClose: this.handleClose
-    }))));
+    })) : children));
   }
 }
 _defineProperty(DrawerBase, "defaultProps", {

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

@@ -31,7 +31,8 @@ const defaults = {
  */
 const CustomSlideIn = ({
   children,
-  onFinish
+  onFinish,
+  enterFrom
 }) => {
   const {
     isExiting
@@ -46,8 +47,8 @@ const CustomSlideIn = ({
   return jsx(SlideIn, {
     animationTimingFunction: animationTimingFunction,
     duration: duration,
-    enterFrom: "left",
-    exitTo: "left",
+    enterFrom: enterFrom,
+    exitTo: enterFrom,
     fade: "none",
     onFinish: onFinish
   }, children);
@@ -68,7 +69,8 @@ const DrawerPrimitive = ({
   isFocusLockEnabled,
   width,
   label,
-  titleId
+  titleId,
+  enterFrom = 'left'
 }) => {
   const getOverrides = createExtender(defaults, overrides);
   const {
@@ -94,7 +96,8 @@ const DrawerPrimitive = ({
   return jsx(ExitingPersistence, {
     appear: true
   }, isOpen && jsx(CustomSlideIn, {
-    onFinish: onFinish
+    onFinish: onFinish,
+    enterFrom: enterFrom
   }, ({
     className
   }) => jsx(FocusLock, {

package/dist/es2019/constants.js

@@ -3,6 +3,7 @@ export const transitionDuration = '0.22s';
 export const transitionDurationMs = 220;
 export const transitionTimingFunction = easeOut;
 export const widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+export const directions = ['top', 'right', 'bottom', 'left'];
 export const animationTimingFunction = () => easeOut;
 export const defaultFocusLockSettings = {
   isFocusLockEnabled: true,

package/dist/esm/components/index.js

@@ -14,13 +14,13 @@ import React, { Component } from 'react';
 import { canUseDOM } from 'exenv';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.12.3";
+var packageVersion = "7.13.0";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -40,16 +40,16 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
   var createAnalyticsEvent = _ref.createAnalyticsEvent,
     handleClose = _ref.handleClose;
   var onClose = React.useCallback(function (event) {
-    var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
     if (handleClose) {
-      handleClose(event, analyticsEvent);
+      var _analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
+      handleClose(event, _analyticsEvent);
     }
   }, [handleClose, createAnalyticsEvent]);
   useCloseOnEscapePress({
     onClose: onClose
   });
   // only create a dummy component for using ths hook in class component
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
+  return /*#__PURE__*/React.createElement("span", null);
 };
 export var DrawerBase = /*#__PURE__*/function (_Component) {
   _inherits(DrawerBase, _Component);
@@ -84,7 +84,7 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         isOpen = _this$props2.isOpen,
         onKeyDown = _this$props2.onKeyDown;
-      if (!getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
+      if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
         // when feature flag on, we will use the EscapeCloseManager instead
         if (event.key === 'Escape' && isOpen) {
           _this.handleClose(event, 'escKey');
@@ -145,10 +145,10 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         _this$props3$zIndex = _this$props3.zIndex,
         zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
         label = _this$props3.label,
-        titleId = _this$props3.titleId;
-      return /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
-        isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
-      }, /*#__PURE__*/React.createElement(Portal, {
+        titleId = _this$props3.titleId,
+        enterFrom = _this$props3.enterFrom;
+      var shouldHaveLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
+      return /*#__PURE__*/React.createElement(Portal, {
         zIndex: zIndex
       }, /*#__PURE__*/React.createElement(Blanket, {
         isOpen: isOpen,
@@ -163,6 +163,7 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        enterFrom: enterFrom,
         label: label,
         titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit
@@ -173,10 +174,12 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         isFocusLockEnabled: isFocusLockEnabled,
         shouldReturnFocus: shouldReturnFocus,
         scrollContentLabel: scrollContentLabel
-      }, children, getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && /*#__PURE__*/React.createElement(EscapeCloseManager, {
+      }, shouldHaveLayeringEnabled ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+        isDisabled: false
+      }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
         createAnalyticsEvent: this.props.createAnalyticsEvent,
         handleClose: this.handleClose
-      }))));
+      })) : children));
     }
   }]);
   return DrawerBase;

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

@@ -34,7 +34,8 @@ var defaults = {
  */
 var CustomSlideIn = function CustomSlideIn(_ref) {
   var children = _ref.children,
-    onFinish = _ref.onFinish;
+    onFinish = _ref.onFinish,
+    enterFrom = _ref.enterFrom;
   var _useExitingPersistenc = useExitingPersistence(),
     isExiting = _useExitingPersistenc.isExiting;
 
@@ -47,8 +48,8 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
   return jsx(SlideIn, {
     animationTimingFunction: animationTimingFunction,
     duration: duration,
-    enterFrom: "left",
-    exitTo: "left",
+    enterFrom: enterFrom,
+    exitTo: enterFrom,
     fade: "none",
     onFinish: onFinish
   }, children);
@@ -70,7 +71,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     isFocusLockEnabled = _ref2.isFocusLockEnabled,
     width = _ref2.width,
     label = _ref2.label,
-    titleId = _ref2.titleId;
+    titleId = _ref2.titleId,
+    _ref2$enterFrom = _ref2.enterFrom,
+    enterFrom = _ref2$enterFrom === void 0 ? 'left' : _ref2$enterFrom;
   var getOverrides = createExtender(defaults, overrides);
   var _getOverrides = getOverrides('Sidebar'),
     Sidebar = _getOverrides.component,
@@ -93,7 +96,8 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
   return jsx(ExitingPersistence, {
     appear: true
   }, isOpen && jsx(CustomSlideIn, {
-    onFinish: onFinish
+    onFinish: onFinish,
+    enterFrom: enterFrom
   }, function (_ref3) {
     var className = _ref3.className;
     return jsx(FocusLock, {

package/dist/esm/constants.js

@@ -3,6 +3,7 @@ export var transitionDuration = '0.22s';
 export var transitionDurationMs = 220;
 export var transitionTimingFunction = easeOut;
 export var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+export var directions = ['top', 'right', 'bottom', 'left'];
 export var animationTimingFunction = function animationTimingFunction() {
   return easeOut;
 };

package/dist/types/components/index.d.ts

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/primitives/index.d.ts

@@ -4,5 +4,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, closeLabel, scrollContentLabel, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
+declare const DrawerPrimitive: ({ children, icon: Icon, closeLabel, scrollContentLabel, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, enterFrom, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;

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

@@ -1,6 +1,7 @@
 import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
 import { type CSSObject } from '@emotion/react';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type Direction } from '@atlaskit/motion';
 export type Widths = {
     extended: {
         width: string;
@@ -44,6 +45,10 @@ export interface BaseProps {
      * Sets the width of the drawer.
      */
     width?: DrawerWidth;
+    /**
+     * Sets the direction the draw enters from. The default is "left".
+     */
+    enterFrom?: Direction;
     /**
      * A callback function that will be called when the drawer has finished its opening transition.
      */

package/dist/types/constants.d.ts

@@ -1,7 +1,9 @@
+import type { Direction } from '@atlaskit/motion';
 import type { DrawerWidth, FocusLockSettings } from './components/types';
 export declare const transitionDuration = "0.22s";
 export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
 export declare const widths: DrawerWidth[];
+export declare const directions: Direction[];
 export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;
 export declare const defaultFocusLockSettings: FocusLockSettings;

package/dist/types-ts4.5/components/index.d.ts

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/primitives/index.d.ts

@@ -4,5 +4,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, closeLabel, scrollContentLabel, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
+declare const DrawerPrimitive: ({ children, icon: Icon, closeLabel, scrollContentLabel, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, enterFrom, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;

package/dist/types-ts4.5/components/types.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
 import { type CSSObject } from '@emotion/react';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type Direction } from '@atlaskit/motion';
 export type Widths = {
     extended: {
         width: string;
@@ -44,6 +45,10 @@ export interface BaseProps {
      * Sets the width of the drawer.
      */
     width?: DrawerWidth;
+    /**
+     * Sets the direction the draw enters from. The default is "left".
+     */
+    enterFrom?: Direction;
     /**
      * A callback function that will be called when the drawer has finished its opening transition.
      */

package/dist/types-ts4.5/constants.d.ts

@@ -1,7 +1,9 @@
+import type { Direction } from '@atlaskit/motion';
 import type { DrawerWidth, FocusLockSettings } from './components/types';
 export declare const transitionDuration = "0.22s";
 export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
 export declare const widths: DrawerWidth[];
+export declare const directions: Direction[];
 export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;
 export declare const defaultFocusLockSettings: FocusLockSettings;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.12.3",
+	"version": "7.13.0",
 	"description": "A drawer is a panel that slides in from the left side of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/blanket": "^13.2.0",
-		"@atlaskit/button": "^18.0.0",
+		"@atlaskit/button": "^18.1.0",
 		"@atlaskit/icon": "^22.5.0",
 		"@atlaskit/layering": "^0.3.0",
 		"@atlaskit/motion": "^1.7.0",