@atlaskit/drawer 7.6.1 → 7.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/drawer
 
+## 7.6.3
+
+### Patch Changes
+
+- [#41729](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41729) [`04235acacd6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04235acacd6) - Enrol package to push model in Jira
+
+## 7.6.2
+
+### Patch Changes
+
+- [#41065](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41065) [`e96b5be2269`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e96b5be2269) - [ux] This release removes the feature flag behind which Drawer got improves for accessibility. Now it is a modal dialog, preventing users to focus elements beyond it's content. Focus is set to first element of Drawer content on opening. On closing focus is returned to triggering element. Additionally introduced props adding/referencing accessible name.
+
 ## 7.6.1
 
 ### Patch 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() { 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; } } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.6.1";
+var packageVersion = "7.6.3";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({

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

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperWidth = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _useCallbackRef = require("use-callback-ref");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
@@ -38,10 +36,8 @@ var wrapperStyles = (0, _react2.css)((_css = {
   height: '100vh',
   position: 'fixed',
   zIndex: 500,
-  top: 0,
-  left: 0,
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")")
-}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, "overflow", 'hidden'), _css));
+}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, "insetBlockStart", 0), (0, _defineProperty2.default)(_css, "insetInlineStart", 0), (0, _defineProperty2.default)(_css, "overflow", 'hidden'), _css));
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
  */
@@ -70,18 +66,16 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
   }, [scrollRef]);
   var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
   (0, _usePreventProgrammaticScroll.default)();
-  var modalDialogAttributes = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
-    'aria-modal': true,
-    role: 'dialog',
-    'aria-label': label,
-    'aria-labelledby': titleId
-  };
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)("div", {
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
-    ref: ref
-  }, modalDialogAttributes), children);
+    ref: ref,
+    "aria-modal": true,
+    role: "dialog",
+    "aria-label": label,
+    "aria-labelledby": titleId
+  }, children);
 });
 var _default = exports.default = DrawerWrapper;

package/dist/cjs/constants.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
 var _curves = require("@atlaskit/motion/curves");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var transitionDuration = exports.transitionDuration = '0.22s';
 var transitionDurationMs = exports.transitionDurationMs = 220;
 var transitionTimingFunction = exports.transitionTimingFunction = _curves.easeOut;
@@ -16,5 +15,5 @@ var animationTimingFunction = exports.animationTimingFunction = function animati
 var defaultFocusLockSettings = exports.defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
+  autoFocusFirstElem: true
 };

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.6.1";
+const packageVersion = "7.6.3";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',

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

@@ -1,9 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
@@ -29,10 +27,10 @@ const wrapperStyles = css({
   height: '100vh',
   position: 'fixed',
   zIndex: 500,
-  top: 0,
-  left: 0,
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
+  insetBlockStart: 0,
+  insetInlineStart: 0,
   overflow: 'hidden'
 });
 /**
@@ -63,18 +61,16 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   }, [scrollRef]);
   const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  const modalDialogAttributes = getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
-    'aria-modal': true,
-    role: 'dialog',
-    'aria-label': label,
-    'aria-labelledby': titleId
-  };
-  return jsx("div", _extends({
+  return jsx("div", {
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
-    ref: ref
-  }, modalDialogAttributes), children);
+    ref: ref,
+    "aria-modal": true,
+    role: "dialog",
+    "aria-label": label,
+    "aria-labelledby": titleId
+  }, children);
 });
 export default DrawerWrapper;

package/dist/es2019/constants.js

@@ -1,5 +1,4 @@
 import { easeOut } from '@atlaskit/motion/curves';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const transitionDuration = '0.22s';
 export const transitionDurationMs = 220;
 export const transitionTimingFunction = easeOut;
@@ -8,5 +7,5 @@ export const animationTimingFunction = () => easeOut;
 export const defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
+  autoFocusFirstElem: true
 };

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.6.1";
+var packageVersion = "7.6.3";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({

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

@@ -1,11 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css;
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
@@ -31,10 +29,8 @@ var wrapperStyles = css((_css = {
   height: '100vh',
   position: 'fixed',
   zIndex: 500,
-  top: 0,
-  left: 0,
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")")
-}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, "overflow", 'hidden'), _css));
+}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, "insetBlockStart", 0), _defineProperty(_css, "insetInlineStart", 0), _defineProperty(_css, "overflow", 'hidden'), _css));
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
  */
@@ -63,18 +59,16 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   }, [scrollRef]);
   var ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  var modalDialogAttributes = getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
-    'aria-modal': true,
-    role: 'dialog',
-    'aria-label': label,
-    'aria-labelledby': titleId
-  };
-  return jsx("div", _extends({
+  return jsx("div", {
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
-    ref: ref
-  }, modalDialogAttributes), children);
+    ref: ref,
+    "aria-modal": true,
+    role: "dialog",
+    "aria-label": label,
+    "aria-labelledby": titleId
+  }, children);
 });
 export default DrawerWrapper;

package/dist/esm/constants.js

@@ -1,5 +1,4 @@
 import { easeOut } from '@atlaskit/motion/curves';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var transitionDuration = '0.22s';
 export var transitionDurationMs = 220;
 export var transitionTimingFunction = easeOut;
@@ -10,5 +9,5 @@ export var animationTimingFunction = function animationTimingFunction() {
 export var defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
+  autoFocusFirstElem: true
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.6.1",
+  "version": "7.6.3",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,6 +27,9 @@
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "continuous",
+    "productPushConsumption": [
+      "jira"
+    ],
     "website": {
       "name": "Drawer",
       "category": "Components"
@@ -37,10 +40,9 @@
     "@atlaskit/blanket": "^12.4.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.5.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -62,9 +64,9 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
+    "@types/exenv": "^1.2.0",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
@@ -93,10 +95,5 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
-  "platform-feature-flags": {
-    "platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc": {
-      "type": "boolean"
-    }
-  }
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }