@atlaskit/drawer 7.4.4 → 7.4.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/drawer
 
+## 7.4.5
+
+### Patch Changes
+
+- [`021eea6cdc6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/021eea6cdc6) - Remove unnecessary styles. There is no expected behaviour change for consumers.
+
 ## 7.4.4
 
 ### Patch Changes

package/dist/cjs/components/blanket.js

@@ -13,25 +13,17 @@ var _react2 = require("@emotion/react");
 
 var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
 
-var _motion = require("@atlaskit/motion");
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 
-var _constants = require("@atlaskit/theme/constants");
+var _motion = require("@atlaskit/motion");
 
-var _constants2 = require("../constants");
+var _constants = require("../constants");
 
 /** @jsx jsx */
 
-/**
- * The FadeIn opacity transition creates a new stacking context so we need ensure layering is the same as @atlaskit/blanket
- */
-var stackingStyles = (0, _react2.css)({
-  position: 'relative',
-  zIndex: _constants.layers.blanket()
-});
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
-
 var Blanket = function Blanket(_ref) {
   var isOpen = _ref.isOpen,
       onBlanketClicked = _ref.onBlanketClicked,
@@ -46,19 +38,19 @@ var Blanket = function Blanket(_ref) {
    * The fade out animation uses half the passed duration so it evens out.
    */
   , {
-    duration: _constants2.transitionDurationMs * 2
+    duration: _constants.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: _constants2.animationTimingFunction
+    animationTimingFunction: _constants.animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return (0, _react2.jsx)("div", {
-      className: className,
-      css: stackingStyles
+    return (0, _react2.jsx)(_box.default, {
+      position: "relative",
+      className: className
     }, (0, _react2.jsx)(_blanket.default, {
       isTinted: true,
       onBlanketClicked: onBlanketClicked,

package/dist/cjs/components/index.js

@@ -50,7 +50,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.4.4";
+var packageVersion = "7.4.5";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {

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

@@ -36,7 +36,7 @@ var Content = function Content(_ref) {
      * guide suggested as it made more sense as a transformer of the current styles rather than
      * a complete override with no chance of partially changing styles.
      */
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
     (0, _react.jsx)("div", (0, _extends2.default)({
       css: (0, _react.css)(cssFn(defaultStyles))
     }, props))

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

@@ -5,7 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widths = exports.default = void 0;
+exports.wrapperWidth = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = require("react");
 
@@ -13,31 +15,39 @@ var _react2 = require("@emotion/react");
 
 var _useCallbackRef = require("use-callback-ref");
 
-var _colors = require("@atlaskit/theme/colors");
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
 
-/** @jsx jsx */
-var widths = {
-  full: '100vw',
-  extended: '95vw',
-  narrow: 45 * (0, _constants.gridSize)(),
-  medium: 60 * (0, _constants.gridSize)(),
-  wide: 75 * (0, _constants.gridSize)()
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var wrapperWidth = {
+  full: {
+    width: '100vw'
+  },
+  extended: {
+    width: '95vw'
+  },
+  narrow: {
+    width: 45 * (0, _constants.gridSize)()
+  },
+  medium: {
+    width: 60 * (0, _constants.gridSize)()
+  },
+  wide: {
+    width: 75 * (0, _constants.gridSize)()
+  }
 };
-exports.widths = widths;
-var wrapperStyles = (0, _react2.css)({
-  display: 'flex',
-  height: '100vh',
-  position: 'fixed',
-  zIndex: _constants.layers.blanket() + 1,
+exports.wrapperWidth = wrapperWidth;
+var wrapperStyles = {
   top: 0,
   left: 0,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  overflow: 'hidden'
-});
+  height: '100vh'
+};
 
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
@@ -45,7 +55,8 @@ var wrapperStyles = (0, _react2.css)({
 var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRef) {
   var children = _ref.children,
       className = _ref.className,
-      width = _ref.width,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'narrow' : _ref$width,
       testId = _ref.testId,
       drawerRef = _ref.drawerRef;
 
@@ -66,13 +77,15 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
   }, [scrollRef]);
   var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
   (0, _usePreventProgrammaticScroll.default)();
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_box.default, {
+    display: "flex",
+    position: "fixed",
+    backgroundColor: "elevation.surface.overlay",
+    overflow: "hidden",
+    layer: "blanket",
+    UNSAFE_style: _objectSpread(_objectSpread({}, wrapperStyles), wrapperWidth[width]),
     className: className,
-    css: wrapperStyles,
-    style: {
-      width: widths[width !== null && width !== void 0 ? width : 'narrow']
-    },
-    "data-testid": testId,
+    testId: testId,
     ref: ref
   }, children);
 });

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

@@ -9,33 +9,20 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
-
 /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
 var iconButtonStyles = (0, _react.css)({
-  display: 'flex',
-  width: 5 * gridSize,
-  height: 5 * gridSize,
-  // TODO Delete this comment after verifying spacing token -> previous value `2 * gridSize`
-  marginBottom: "var(--ds-scale-200, 16px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  padding: "var(--ds-scale-0, 0px)",
-  alignItems: 'center',
-  justifyContent: 'center',
-  background: 0,
-  border: 0,
-  borderRadius: '50%',
+  padding: "var(--ds-scale-100, 8px)",
+  backgroundColor: 'inherit',
+  border: 'none',
+  borderRadius: "var(--ds-scale-1000, 80px)",
   color: 'inherit',
   cursor: 'pointer',
-  fontSize: 'inherit',
-  lineHeight: 1,
+  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, ")"),
-    outline: 0
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
   }
 });
 
@@ -43,12 +30,14 @@ 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);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react.jsx)("button", {
+      type: "button",
+      css: iconButtonStyles,
+      onClick: onClick,
+      "data-testid": testId
+    }, children)
+  );
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 
 

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

@@ -38,7 +38,7 @@ var sidebarCSS = function sidebarCSS() {
 var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: (0, _react.css)(cssFn(defaultStyle))
   }, props));

package/dist/cjs/version.json

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

package/dist/es2019/components/blanket.js

@@ -1,22 +1,14 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
+import Box from '@atlaskit/ds-explorations/box';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { layers } from '@atlaskit/theme/constants';
 import { animationTimingFunction, transitionDurationMs } from '../constants';
 
-/**
- * The FadeIn opacity transition creates a new stacking context so we need ensure layering is the same as @atlaskit/blanket
- */
-const stackingStyles = css({
-  position: 'relative',
-  zIndex: layers.blanket()
-});
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
-
 const Blanket = ({
   isOpen,
   onBlanketClicked,
@@ -42,9 +34,9 @@ const Blanket = ({
     animationTimingFunction: animationTimingFunction
   }, ({
     className
-  }) => jsx("div", {
-    className: className,
-    css: stackingStyles
+  }) => jsx(Box, {
+    position: "relative",
+    className: className
   }, jsx(AkBlanket, {
     isTinted: true,
     onBlanketClicked: onBlanketClicked,

package/dist/es2019/components/index.js

@@ -9,7 +9,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.4.4";
+const packageVersion = "7.4.5";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({

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

@@ -21,7 +21,7 @@ const Content = ({
  * guide suggested as it made more sense as a transformer of the current styles rather than
  * a complete override with no chance of partially changing styles.
  */
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
 jsx("div", _extends({
   css: css(cssFn(defaultStyles))
 }, props));

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

@@ -1,27 +1,32 @@
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
-import { N0 } from '@atlaskit/theme/colors';
-import { gridSize, layers } from '@atlaskit/theme/constants';
+import Box from '@atlaskit/ds-explorations/box';
+import { gridSize } from '@atlaskit/theme/constants';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
-export const widths = {
-  full: '100vw',
-  extended: '95vw',
-  narrow: 45 * gridSize(),
-  medium: 60 * gridSize(),
-  wide: 75 * gridSize()
+export const wrapperWidth = {
+  full: {
+    width: '100vw'
+  },
+  extended: {
+    width: '95vw'
+  },
+  narrow: {
+    width: 45 * gridSize()
+  },
+  medium: {
+    width: 60 * gridSize()
+  },
+  wide: {
+    width: 75 * gridSize()
+  }
 };
-const wrapperStyles = css({
-  display: 'flex',
-  height: '100vh',
-  position: 'fixed',
-  zIndex: layers.blanket() + 1,
+const wrapperStyles = {
   top: 0,
   left: 0,
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  overflow: 'hidden'
-});
+  height: '100vh'
+};
 
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
@@ -29,7 +34,7 @@ const wrapperStyles = css({
 const DrawerWrapper = /*#__PURE__*/forwardRef(({
   children,
   className,
-  width,
+  width = 'narrow',
   testId,
   drawerRef
 }, scrollRef) => {
@@ -50,13 +55,17 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   }, [scrollRef]);
   const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx("div", {
-    className: className,
-    css: wrapperStyles,
-    style: {
-      width: widths[width !== null && width !== void 0 ? width : 'narrow']
+  return jsx(Box, {
+    display: "flex",
+    position: "fixed",
+    backgroundColor: "elevation.surface.overlay",
+    overflow: "hidden",
+    layer: "blanket",
+    UNSAFE_style: { ...wrapperStyles,
+      ...wrapperWidth[width]
     },
-    "data-testid": testId,
+    className: className,
+    testId: testId,
     ref: ref
   }, children);
 });

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

@@ -1,31 +1,19 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { B50, N30A } from '@atlaskit/theme/colors';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
 const iconButtonStyles = css({
-  display: 'flex',
-  width: 5 * gridSize,
-  height: 5 * gridSize,
-  // TODO Delete this comment after verifying spacing token -> previous value `2 * gridSize`
-  marginBottom: "var(--ds-scale-200, 16px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  padding: "var(--ds-scale-0, 0px)",
-  alignItems: 'center',
-  justifyContent: 'center',
-  background: 0,
-  border: 0,
-  borderRadius: '50%',
+  padding: "var(--ds-scale-100, 8px)",
+  backgroundColor: 'inherit',
+  border: 'none',
+  borderRadius: "var(--ds-scale-1000, 80px)",
   color: 'inherit',
   cursor: 'pointer',
-  fontSize: 'inherit',
-  lineHeight: 1,
+  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})`,
-    outline: 0
+    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`
   }
 });
 
@@ -33,7 +21,8 @@ const IconButton = ({
   children,
   onClick,
   testId
-}) => jsx("button", {
+}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+jsx("button", {
   type: "button",
   css: iconButtonStyles,
   onClick: onClick,

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

@@ -23,7 +23,7 @@ const Sidebar = ({
   cssFn,
   ...props
 }) => {
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
   return jsx("div", _extends({
     css: css(cssFn(defaultStyle))
   }, props));

package/dist/es2019/version.json

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

package/dist/esm/components/blanket.js

@@ -1,22 +1,14 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
+import Box from '@atlaskit/ds-explorations/box';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { layers } from '@atlaskit/theme/constants';
 import { animationTimingFunction, transitionDurationMs } from '../constants';
 
-/**
- * The FadeIn opacity transition creates a new stacking context so we need ensure layering is the same as @atlaskit/blanket
- */
-var stackingStyles = css({
-  position: 'relative',
-  zIndex: layers.blanket()
-});
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
-
 var Blanket = function Blanket(_ref) {
   var isOpen = _ref.isOpen,
       onBlanketClicked = _ref.onBlanketClicked,
@@ -41,9 +33,9 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return jsx("div", {
-      className: className,
-      css: stackingStyles
+    return jsx(Box, {
+      position: "relative",
+      className: className
     }, jsx(AkBlanket, {
       isTinted: true,
       onBlanketClicked: onBlanketClicked,

package/dist/esm/components/index.js

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

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

@@ -26,7 +26,7 @@ var Content = function Content(_ref) {
      * guide suggested as it made more sense as a transformer of the current styles rather than
      * a complete override with no chance of partially changing styles.
      */
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
     jsx("div", _extends({
       css: css(cssFn(defaultStyles))
     }, props))

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

@@ -1,27 +1,38 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
-import { N0 } from '@atlaskit/theme/colors';
-import { gridSize, layers } from '@atlaskit/theme/constants';
+import Box from '@atlaskit/ds-explorations/box';
+import { gridSize } from '@atlaskit/theme/constants';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
-export var widths = {
-  full: '100vw',
-  extended: '95vw',
-  narrow: 45 * gridSize(),
-  medium: 60 * gridSize(),
-  wide: 75 * gridSize()
+export var wrapperWidth = {
+  full: {
+    width: '100vw'
+  },
+  extended: {
+    width: '95vw'
+  },
+  narrow: {
+    width: 45 * gridSize()
+  },
+  medium: {
+    width: 60 * gridSize()
+  },
+  wide: {
+    width: 75 * gridSize()
+  }
 };
-var wrapperStyles = css({
-  display: 'flex',
-  height: '100vh',
-  position: 'fixed',
-  zIndex: layers.blanket() + 1,
+var wrapperStyles = {
   top: 0,
   left: 0,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  overflow: 'hidden'
-});
+  height: '100vh'
+};
 
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
@@ -29,7 +40,8 @@ var wrapperStyles = css({
 var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   var children = _ref.children,
       className = _ref.className,
-      width = _ref.width,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'narrow' : _ref$width,
       testId = _ref.testId,
       drawerRef = _ref.drawerRef;
 
@@ -50,13 +62,15 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   }, [scrollRef]);
   var ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx("div", {
+  return jsx(Box, {
+    display: "flex",
+    position: "fixed",
+    backgroundColor: "elevation.surface.overlay",
+    overflow: "hidden",
+    layer: "blanket",
+    UNSAFE_style: _objectSpread(_objectSpread({}, wrapperStyles), wrapperWidth[width]),
     className: className,
-    css: wrapperStyles,
-    style: {
-      width: widths[width !== null && width !== void 0 ? width : 'narrow']
-    },
-    "data-testid": testId,
+    testId: testId,
     ref: ref
   }, children);
 });

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

@@ -1,31 +1,19 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { B50, N30A } from '@atlaskit/theme/colors';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-var gridSize = getGridSize();
 var iconButtonStyles = css({
-  display: 'flex',
-  width: 5 * gridSize,
-  height: 5 * gridSize,
-  // TODO Delete this comment after verifying spacing token -> previous value `2 * gridSize`
-  marginBottom: "var(--ds-scale-200, 16px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  padding: "var(--ds-scale-0, 0px)",
-  alignItems: 'center',
-  justifyContent: 'center',
-  background: 0,
-  border: 0,
-  borderRadius: '50%',
+  padding: "var(--ds-scale-100, 8px)",
+  backgroundColor: 'inherit',
+  border: 'none',
+  borderRadius: "var(--ds-scale-1000, 80px)",
   color: 'inherit',
   cursor: 'pointer',
-  fontSize: 'inherit',
-  lineHeight: 1,
+  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, ")"),
-    outline: 0
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")")
   }
 });
 
@@ -33,12 +21,14 @@ 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);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("button", {
+      type: "button",
+      css: iconButtonStyles,
+      onClick: onClick,
+      "data-testid": testId
+    }, children)
+  );
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 
 

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

@@ -27,7 +27,7 @@ var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @repo/internal/react/use-primitives
   return jsx("div", _extends({
     css: css(cssFn(defaultStyle))
   }, props));

package/dist/esm/version.json

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

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>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & 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>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "zIndex"> & 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 | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "analyticsContext" | "zIndex" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactElement, Ref } from 'react';
 import { DrawerPrimitiveProps, Widths } from '../types';
-export declare const widths: Widths;
+export declare const wrapperWidth: Widths;
 interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
     /**
      * This must have two children explicitly as we target the second child as the Content.

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

@@ -2,11 +2,21 @@ import { ComponentType, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import { CSSObject } from '@emotion/react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export declare type Widths = {
-    extended: string;
-    full: string;
-    medium: number;
-    narrow: number;
-    wide: number;
+    extended: {
+        width: string;
+    };
+    full: {
+        width: string;
+    };
+    medium: {
+        width: number;
+    };
+    narrow: {
+        width: number;
+    };
+    wide: {
+        width: number;
+    };
 };
 export declare type DrawerWidth = 'extended' | 'full' | 'medium' | 'narrow' | 'wide';
 export interface BaseProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.4.4",
+  "version": "7.4.5",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,6 +28,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/blanket": "^12.3.0",
+    "@atlaskit/ds-explorations": "^1.6.3",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.0.0",
@@ -81,7 +82,10 @@
         "static",
         "emotion"
       ],
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "ui-components": [
+        "primitives"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/drawer"