@atlaskit/blanket 13.3.4 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/blanket
 
+## 14.0.0
+
+### Major Changes
+
+- [#176786](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176786)
+  [`30a4108a8fe56`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/30a4108a8fe56) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/blanket`, you will need to ensure that your bundler is configured
+  to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+## 13.3.5
+
+### Patch Changes
+
+- [#165531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165531)
+  [`57f451bda8919`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f451bda8919) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
 ## 13.3.4
 
 ### Patch Changes

package/dist/cjs/blanket.compiled.css

@@ -0,0 +1,8 @@
+
+._1r04idpf{inset:0}._18m91wug{overflow-y:auto}
+._1pbybfng{z-index:500}
+._bfhk18uv{background-color:initial}
+._bfhk705f{background-color:var(--_10avjlk)}
+._kqsw1n9t{position:fixed}
+._lcxv1wug{pointer-events:auto}
+._lcxvglyw{pointer-events:none}

package/dist/cjs/blanket.js

@@ -1,43 +1,35 @@
+/* blanket.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./blanket.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/blanket";
-var packageVersion = "13.3.4";
+var packageVersion = "14.0.0";
 var analyticsAttributes = {
   componentName: 'blanket',
   packageName: packageName,
   packageVersion: packageVersion
 };
-var baseStyles = (0, _react2.css)({
-  position: 'fixed',
-  zIndex: _constants.layers.blanket(),
-  inset: 0,
-  backgroundColor: "var(--ds-blanket, ".concat(_colors.N100A, ")"),
-  overflowY: 'auto',
-  pointerEvents: 'initial'
-});
-var shouldAllowClickThroughStyles = (0, _react2.css)({
-  pointerEvents: 'none'
-});
-var invisibleStyles = (0, _react2.css)({
-  backgroundColor: 'transparent'
-});
+var baseStyles = null;
+var shouldAllowClickThroughStyles = null;
+var invisibleStyles = null;
 
 /**
  * __Blanket__
@@ -69,23 +61,17 @@ var Blanket = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)
   var onMouseDown = (0, _react.useCallback)(function (e) {
     mouseDownTarget.current = e.target;
   }, []);
-  return (
-    /**
-     * It is not normally acceptable to add click and key handlers to non-interactive
-     * elements as this is an accessibility anti-pattern. However, because this
-     * instance is to enable light dismiss functionality instead of creating an
-     * inaccessible custom element, we can add role="presentation" so that there
-     * are no negative impacts to assistive technologies.
-     */
-    (0, _react2.jsx)("div", {
-      role: "presentation",
-      css: [baseStyles, shouldAllowClickThrough && shouldAllowClickThroughStyles, !isTinted && invisibleStyles],
-      onClick: onClick,
-      onMouseDown: onMouseDown,
-      "data-testid": testId,
-      ref: ref
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    "data-testid": testId,
+    ref: ref,
+    className: (0, _runtime.ax)(["_kqsw1n9t _1pbybfng _1r04idpf _bfhk705f _18m91wug _lcxv1wug", shouldAllowClickThrough && "_lcxvglyw", !isTinted && "_bfhk18uv"]),
+    style: {
+      "--_10avjlk": (0, _runtime.ix)("var(--ds-blanket, ".concat(_colors.N100A, ")"))
+    }
+  }, children);
 }));
 Blanket.displayName = 'Blanket';
 var _default = exports.default = Blanket;

package/dist/es2019/blanket.compiled.css

@@ -0,0 +1,8 @@
+
+._1r04idpf{inset:0}._18m91wug{overflow-y:auto}
+._1pbybfng{z-index:500}
+._bfhk10ak{background-color:var(--ds-blanket,rgba(9,30,66,.54))}
+._bfhk18uv{background-color:initial}
+._kqsw1n9t{position:fixed}
+._lcxv1wug{pointer-events:auto}
+._lcxvglyw{pointer-events:none}

package/dist/es2019/blanket.js

@@ -1,36 +1,22 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* blanket.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./blanket.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { N100A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 const packageName = "@atlaskit/blanket";
-const packageVersion = "13.3.4";
+const packageVersion = "14.0.0";
 const analyticsAttributes = {
   componentName: 'blanket',
   packageName,
   packageVersion
 };
-const baseStyles = css({
-  position: 'fixed',
-  zIndex: layers.blanket(),
-  inset: 0,
-  backgroundColor: `var(--ds-blanket, ${N100A})`,
-  overflowY: 'auto',
-  pointerEvents: 'initial'
-});
-const shouldAllowClickThroughStyles = css({
-  pointerEvents: 'none'
-});
-const invisibleStyles = css({
-  backgroundColor: 'transparent'
-});
+const baseStyles = null;
+const shouldAllowClickThroughStyles = null;
+const invisibleStyles = null;
 
 /**
  * __Blanket__
@@ -59,23 +45,14 @@ const Blanket = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Blanket({
   const onMouseDown = useCallback(e => {
     mouseDownTarget.current = e.target;
   }, []);
-  return (
-    /**
-     * It is not normally acceptable to add click and key handlers to non-interactive
-     * elements as this is an accessibility anti-pattern. However, because this
-     * instance is to enable light dismiss functionality instead of creating an
-     * inaccessible custom element, we can add role="presentation" so that there
-     * are no negative impacts to assistive technologies.
-     */
-    jsx("div", {
-      role: "presentation",
-      css: [baseStyles, shouldAllowClickThrough && shouldAllowClickThroughStyles, !isTinted && invisibleStyles],
-      onClick: onClick,
-      onMouseDown: onMouseDown,
-      "data-testid": testId,
-      ref: ref
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    "data-testid": testId,
+    ref: ref,
+    className: ax(["_kqsw1n9t _1pbybfng _1r04idpf _bfhk10ak _18m91wug _lcxv1wug", shouldAllowClickThrough && "_lcxvglyw", !isTinted && "_bfhk18uv"])
+  }, children);
 }));
 Blanket.displayName = 'Blanket';
 export default Blanket;

package/dist/esm/blanket.compiled.css

@@ -0,0 +1,8 @@
+
+._1r04idpf{inset:0}._18m91wug{overflow-y:auto}
+._1pbybfng{z-index:500}
+._bfhk18uv{background-color:initial}
+._bfhk705f{background-color:var(--_10avjlk)}
+._kqsw1n9t{position:fixed}
+._lcxv1wug{pointer-events:auto}
+._lcxvglyw{pointer-events:none}

package/dist/esm/blanket.js

@@ -1,39 +1,25 @@
+/* blanket.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./blanket.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { forwardRef, memo, useCallback, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { N100A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 var packageName = "@atlaskit/blanket";
-var packageVersion = "13.3.4";
+var packageVersion = "14.0.0";
 var analyticsAttributes = {
   componentName: 'blanket',
   packageName: packageName,
   packageVersion: packageVersion
 };
-var baseStyles = css({
-  position: 'fixed',
-  zIndex: layers.blanket(),
-  inset: 0,
-  backgroundColor: "var(--ds-blanket, ".concat(N100A, ")"),
-  overflowY: 'auto',
-  pointerEvents: 'initial'
-});
-var shouldAllowClickThroughStyles = css({
-  pointerEvents: 'none'
-});
-var invisibleStyles = css({
-  backgroundColor: 'transparent'
-});
+var baseStyles = null;
+var shouldAllowClickThroughStyles = null;
+var invisibleStyles = null;
 
 /**
  * __Blanket__
@@ -65,23 +51,17 @@ var Blanket = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Blanket(_ref,
   var onMouseDown = useCallback(function (e) {
     mouseDownTarget.current = e.target;
   }, []);
-  return (
-    /**
-     * It is not normally acceptable to add click and key handlers to non-interactive
-     * elements as this is an accessibility anti-pattern. However, because this
-     * instance is to enable light dismiss functionality instead of creating an
-     * inaccessible custom element, we can add role="presentation" so that there
-     * are no negative impacts to assistive technologies.
-     */
-    jsx("div", {
-      role: "presentation",
-      css: [baseStyles, shouldAllowClickThrough && shouldAllowClickThroughStyles, !isTinted && invisibleStyles],
-      onClick: onClick,
-      onMouseDown: onMouseDown,
-      "data-testid": testId,
-      ref: ref
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    "data-testid": testId,
+    ref: ref,
+    className: ax(["_kqsw1n9t _1pbybfng _1r04idpf _bfhk705f _18m91wug _lcxv1wug", shouldAllowClickThrough && "_lcxvglyw", !isTinted && "_bfhk18uv"]),
+    style: {
+      "--_10avjlk": ix("var(--ds-blanket, ".concat(N100A, ")"))
+    }
+  }, children);
 }));
 Blanket.displayName = 'Blanket';
 export default Blanket;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/blanket",
-	"version": "13.3.4",
+	"version": "14.0.0",
 	"description": "A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,7 +20,9 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"homepage": "https://atlassian.design/components/blanket",
 	"atlassian": {
@@ -28,7 +30,7 @@
 		"runReact18": true,
 		"website": {
 			"name": "Blanket",
-			"category": "Components"
+			"category": "Overlays and layering"
 		}
 	},
 	"af:exports": {
@@ -36,13 +38,14 @@
 		"./types": "./src/entry-points/types.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/css": "^0.7.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -50,9 +53,9 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
-		"@atlaskit/layering": "^0.6.0",
+		"@atlaskit/layering": "^1.0.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/toggle": "^13.4.0",
+		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^12.1.5",
@@ -60,7 +63,7 @@
 		"jscodeshift": "^0.13.0",
 		"react-dom": "^16.8.0",
 		"react-lorem-component": "^0.13.0",
-		"storybook-addon-performance": "^0.16.0",
+		"storybook-addon-performance": "^0.17.3",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},

package/types/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/types.js",
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/types.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {