@atlaskit/blanket - npm Package Compare versions

Comparing version 13.3.5 to 14.0.0

CHANGELOG.md

 # @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
@@ -4,0 +20,0 @@

dist/cjs/blanket.js

@@ -0,4 +1,6 @@
+/* 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", {
@@ -8,5 +10,7 @@ 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");
@@ -16,9 +20,8 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 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.5";
+var packageVersion = "14.0.0";
 var analyticsAttributes = {
@@ -29,16 +32,5 @@ componentName: 'blanket',
 };
-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;
 
@@ -75,21 +67,15 @@ /**
   }, []);
-  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;

dist/es2019/blanket.js

@@ -1,9 +0,6 @@
-/**
- * @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';
@@ -14,3 +11,3 @@ import noop from '@atlaskit/ds-lib/noop';
 const packageName = "@atlaskit/blanket";
-const packageVersion = "13.3.5";
+const packageVersion = "14.0.0";
 const analyticsAttributes = {
@@ -21,16 +18,5 @@ componentName: 'blanket',
 };
-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;
 
@@ -64,21 +50,12 @@ /**
   }, []);
-  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;

dist/esm/blanket.js

@@ -0,12 +1,9 @@
+/* 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';
@@ -17,3 +14,3 @@ import noop from '@atlaskit/ds-lib/noop';
 var packageName = "@atlaskit/blanket";
-var packageVersion = "13.3.5";
+var packageVersion = "14.0.0";
 var analyticsAttributes = {
@@ -24,16 +21,5 @@ componentName: 'blanket',
 };
-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;
 
@@ -70,21 +56,15 @@ /**
   }, []);
-  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.json

 {
 	"name": "@atlaskit/blanket",
-	"version": "13.3.5",
+	"version": "14.0.0",
 	"description": "A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.",
@@ -33,3 +33,3 @@ "publishConfig": {
 			"name": "Blanket",
-			"category": "Components"
+			"category": "Overlays and layering"
 		}
@@ -42,9 +42,10 @@ },
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/css": "^0.7.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
@@ -57,5 +58,5 @@ "peerDependencies": {
 		"@af/integration-testing": "*",
-		"@atlaskit/layering": "^0.8.0",
+		"@atlaskit/layering": "^1.0.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/toggle": "^13.4.0",
+		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
@@ -62,0 +63,0 @@ "@testing-library/dom": "^10.1.0",

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66702

increased by1.61%

Number of package files

38

increased by8.57%

Worsened metrics

Dependency count

9

increased by12.5%

Lines of code

603

decreased by-5.63%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@atlaskit/css@^0.7.0

• + Added@compiled/react@^0.18.1

• + Added@atlaskit/css@0.7.5(transitive)

• + Added@compiled/react@0.18.2(transitive)

• - Removed@emotion/react@^11.7.1

• - Removed@babel/helper-module-imports@7.25.9(transitive)

• - Removed@emotion/babel-plugin@11.13.5(transitive)

• - Removed@emotion/cache@11.14.0(transitive)

• - Removed@emotion/hash@0.9.2(transitive)

• - Removed@emotion/memoize@0.9.0(transitive)

• - Removed@emotion/react@11.14.0(transitive)

• - Removed@emotion/serialize@1.3.3(transitive)

• - Removed@emotion/sheet@1.4.0(transitive)

• - Removed@emotion/unitless@0.10.0(transitive)

• - Removed@emotion/use-insertion-effect-with-fallbacks@1.2.0(transitive)

• - Removed@emotion/utils@1.4.2(transitive)

• - Removed@emotion/weak-memoize@0.4.0(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedbabel-plugin-macros@3.1.0(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@7.1.0(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@4.0.0(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedimport-fresh@3.3.1(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.16.1(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedresolve@1.22.10(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedstylis@4.2.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedyaml@1.10.2(transitive)

• Updated@atlaskit/analytics-next@^10.2.0

• Updated@atlaskit/ds-lib@^3.3.0

• Updated@atlaskit/tokens@^2.4.0