@atlaskit/drawer 7.12.4 → 7.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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.4";
+var packageVersion = "7.13.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -154,7 +154,8 @@ 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;
+        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
@@ -171,6 +172,7 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        enterFrom: enterFrom,
         label: label,
         titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit

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

@@ -10,7 +10,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.12.4";
+const packageVersion = "7.13.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
@@ -123,7 +123,8 @@ export class DrawerBase extends Component {
       overrides,
       zIndex = 'unset',
       label,
-      titleId
+      titleId,
+      enterFrom
     } = this.props;
     const shouldHaveLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
     return /*#__PURE__*/React.createElement(Portal, {
@@ -141,6 +142,7 @@ export class DrawerBase extends Component {
       onCloseComplete: onCloseComplete,
       onOpenComplete: onOpenComplete,
       width: width,
+      enterFrom: enterFrom,
       label: label,
       titleId: titleId,
       shouldUnmountOnExit: shouldUnmountOnExit

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

@@ -20,7 +20,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.12.4";
+var packageVersion = "7.13.0";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -145,7 +145,8 @@ 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;
+        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
@@ -162,6 +163,7 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        enterFrom: enterFrom,
         label: label,
         titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit

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.4",
+	"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",