@atlaskit/drawer 7.8.0 → 7.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/drawer
 
+## 7.10.0
+
+### Minor Changes
+
+-   [#103863](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103863)
+    [`919672b42f27`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/919672b42f27) -
+    Update close button to use IconButton from `@atlaskit/button/new`. Some minor visual changes are
+    expected.
+
+## 7.9.0
+
+### Minor Changes
+
+-   [#102398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102398)
+    [`872ce80f5ef9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/872ce80f5ef9) -
+    Add support for React 18.
+
 ## 7.8.0
 
 ### Minor Changes

package/dist/cjs/components/index.js

@@ -27,7 +27,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.8.0";
+var packageVersion = "7.10.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({

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

@@ -5,9 +5,11 @@ 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("react");
 var _react2 = require("@emotion/react");
+var _new = require("@atlaskit/button/new");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 var _motion = require("@atlaskit/motion");
 var _constants = require("../../constants");
@@ -15,7 +17,6 @@ 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"];
@@ -105,15 +106,18 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       drawerRef: drawerRef,
       label: label,
       titleId: titleId
-    }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_iconButton.default, {
+    }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_new.IconButton, {
       onClick: onClose,
-      testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-    }, Icon ? (0, _react2.jsx)(Icon, {
-      size: "large",
-      label: closeLabel
-    }) : (0, _react2.jsx)(_arrowLeft.default, {
-      label: closeLabel
-    }))), (0, _react2.jsx)(Content, contentOverrides, children)));
+      testId: testId && 'DrawerPrimitiveSidebarCloseButton',
+      icon: Icon ? function (iconProps) {
+        return (0, _react2.jsx)(Icon, (0, _extends2.default)({}, iconProps, {
+          size: "large"
+        }));
+      } : _arrowLeft.default,
+      label: closeLabel,
+      shape: "circle",
+      appearance: "subtle"
+    })), (0, _react2.jsx)(Content, contentOverrides, children)));
   }));
 };
 

package/dist/es2019/components/index.js

@@ -8,7 +8,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.8.0";
+const packageVersion = "7.10.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',

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

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
 import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
 import { animationTimingFunction, transitionDurationMs } from '../../constants';
@@ -9,7 +11,6 @@ import { createExtender } from '../utils';
 import ContentOverrides from './content';
 import DrawerWrapper from './drawer-wrapper';
 import FocusLock from './focus-lock';
-import IconButton from './icon-button';
 import SidebarOverrides from './sidebar';
 
 // Misc.
@@ -103,13 +104,14 @@ const DrawerPrimitive = ({
     titleId: titleId
   }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
     onClick: onClose,
-    testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-  }, Icon ? jsx(Icon, {
-    size: "large",
-    label: closeLabel
-  }) : jsx(ArrowLeft, {
-    label: closeLabel
-  }))), jsx(Content, contentOverrides, children)))));
+    testId: testId && 'DrawerPrimitiveSidebarCloseButton',
+    icon: Icon ? iconProps => jsx(Icon, _extends({}, iconProps, {
+      size: "large"
+    })) : ArrowLeft,
+    label: closeLabel,
+    shape: "circle",
+    appearance: "subtle"
+  })), jsx(Content, contentOverrides, children)))));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/index.js

@@ -18,7 +18,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.8.0";
+var packageVersion = "7.10.0";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["component"],
   _excluded2 = ["component"];
@@ -5,6 +6,7 @@ var _excluded = ["component"],
 
 import { useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
 import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
 import { animationTimingFunction, transitionDurationMs } from '../../constants';
@@ -12,7 +14,6 @@ import { createExtender } from '../utils';
 import ContentOverrides from './content';
 import DrawerWrapper from './drawer-wrapper';
 import FocusLock from './focus-lock';
-import IconButton from './icon-button';
 import SidebarOverrides from './sidebar';
 
 // Misc.
@@ -102,13 +103,16 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       titleId: titleId
     }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
       onClick: onClose,
-      testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-    }, Icon ? jsx(Icon, {
-      size: "large",
-      label: closeLabel
-    }) : jsx(ArrowLeft, {
-      label: closeLabel
-    }))), jsx(Content, contentOverrides, children)));
+      testId: testId && 'DrawerPrimitiveSidebarCloseButton',
+      icon: Icon ? function (iconProps) {
+        return jsx(Icon, _extends({}, iconProps, {
+          size: "large"
+        }));
+      } : ArrowLeft,
+      label: closeLabel,
+      shape: "circle",
+      appearance: "subtle"
+    })), jsx(Content, contentOverrides, children)));
   }));
 };
 

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DrawerProps, DrawerWidth } from './types';
+import { type DrawerProps, type DrawerWidth } from './types';
 export declare class DrawerBase extends Component<DrawerProps, {
     renderPortal: boolean;
 }> {

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react';
-import { ContentProps } from '../types';
+import { type CSSObject, jsx } from '@emotion/react';
+import { type ContentProps } from '../types';
 declare const _default: {
     component: ({ cssFn, ...props }: ContentProps) => jsx.JSX.Element;
     cssFn: () => CSSObject;

package/dist/types/components/primitives/drawer-wrapper.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { ReactElement, Ref } from 'react';
-import { DrawerPrimitiveProps, Widths } from '../types';
+import { type ReactElement, type Ref } from 'react';
+import { type DrawerPrimitiveProps, type Widths } from '../types';
 export declare const wrapperWidth: Widths;
 interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
     /**

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

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

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { FC } from 'react';
-import { CSSObject } from '@emotion/react';
-import { SidebarProps } from '../types';
+import { type FC } from 'react';
+import { type CSSObject } from '@emotion/react';
+import { type SidebarProps } from '../types';
 declare const _default: {
     component: FC<SidebarProps>;
     cssFn: () => CSSObject;

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DrawerProps, DrawerWidth } from './types';
+import { type DrawerProps, type DrawerWidth } from './types';
 export declare class DrawerBase extends Component<DrawerProps, {
     renderPortal: boolean;
 }> {

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react';
-import { ContentProps } from '../types';
+import { type CSSObject, jsx } from '@emotion/react';
+import { type ContentProps } from '../types';
 declare const _default: {
     component: ({ cssFn, ...props }: ContentProps) => jsx.JSX.Element;
     cssFn: () => CSSObject;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { ReactElement, Ref } from 'react';
-import { DrawerPrimitiveProps, Widths } from '../types';
+import { type ReactElement, type Ref } from 'react';
+import { type DrawerPrimitiveProps, type Widths } from '../types';
 export declare const wrapperWidth: Widths;
 interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
     /**

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

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

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { FC } from 'react';
-import { CSSObject } from '@emotion/react';
-import { SidebarProps } from '../types';
+import { type FC } from 'react';
+import { type CSSObject } from '@emotion/react';
+import { type SidebarProps } from '../types';
 declare const _default: {
     component: FC<SidebarProps>;
     cssFn: () => CSSObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.8.0",
+  "version": "7.10.0",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,16 +36,18 @@
     "website": {
       "name": "Drawer",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/blanket": "^13.1.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/motion": "^1.5.0",
-    "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/button": "^17.17.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/motion": "^1.6.0",
+    "@atlaskit/portal": "^4.5.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^3.0.0",
@@ -56,7 +58,7 @@
     "use-callback-ref": "^1.2.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",

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

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
-
-var iconButtonStyles = (0, _react.css)({
-  padding: "var(--ds-space-100, 8px)",
-  backgroundColor: 'inherit',
-  border: 'none',
-  borderRadius: "var(--ds-space-1000, 80px)",
-  color: 'inherit',
-  cursor: 'pointer',
-  lineHeight: "var(--ds-font-lineHeight-100, 1)",
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
-  }
-});
-var IconButton = function IconButton(_ref) {
-  var children = _ref.children,
-    onClick = _ref.onClick,
-    testId = _ref.testId;
-  return (0, _react.jsx)("button", {
-    type: "button",
-    css: iconButtonStyles,
-    onClick: onClick,
-    "data-testid": testId
-  }, children);
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = exports.default = IconButton;

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

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

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

@@ -1,33 +0,0 @@
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
-import { B50, N30A } from '@atlaskit/theme/colors';
-var iconButtonStyles = css({
-  padding: "var(--ds-space-100, 8px)",
-  backgroundColor: 'inherit',
-  border: 'none',
-  borderRadius: "var(--ds-space-1000, 80px)",
-  color: 'inherit',
-  cursor: 'pointer',
-  lineHeight: "var(--ds-font-lineHeight-100, 1)",
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")")
-  }
-});
-var IconButton = function IconButton(_ref) {
-  var children = _ref.children,
-    onClick = _ref.onClick,
-    testId = _ref.testId;
-  return jsx("button", {
-    type: "button",
-    css: iconButtonStyles,
-    onClick: onClick,
-    "data-testid": testId
-  }, children);
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export default IconButton;

package/dist/types/components/primitives/icon-button.d.ts

@@ -1,9 +0,0 @@
-/** @jsx jsx */
-import { FC, MouseEventHandler, ReactNode } from 'react';
-interface IconButtonProps {
-    testId?: string;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    children: ReactNode;
-}
-declare const IconButton: FC<IconButtonProps>;
-export default IconButton;

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

@@ -1,9 +0,0 @@
-/** @jsx jsx */
-import { FC, MouseEventHandler, ReactNode } from 'react';
-interface IconButtonProps {
-    testId?: string;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    children: ReactNode;
-}
-declare const IconButton: FC<IconButtonProps>;
-export default IconButton;