@atlaskit/skeleton 0.5.3 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/skeleton
 
+## 1.0.0
+
+### Major Changes
+
+- [#164612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164612)
+  [`8bac6a32c3cbf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8bac6a32c3cbf) -
+  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/skeleton`, 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).
+
 ## 0.5.3
 
 ### Patch Changes

package/dist/cjs/ui/index.compiled.css

@@ -0,0 +1,7 @@
+._1pglp3kn{animation-timing-function:linear}
+._5sag12o8{animation-duration:1.5s}
+._7hjf1yy8{animation-direction:alternate}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
+._j7hq586c{animation-name:kskr1ph}
+._tip812c5{animation-iteration-count:infinite}
+@keyframes kskr1ph{0%{background-color:var(--_wenvhl)}to{background-color:var(--_1soe2er)}}

package/dist/cjs/ui/index.js

@@ -1,38 +1,24 @@
+/* index.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("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-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
-var shimmer = (0, _constants.skeletonShimmer)();
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var shimmerKeyframes = (0, _react.keyframes)(shimmer.keyframes);
-var skeletonStyles = (0, _react.css)(_objectSpread({}, shimmer.css));
-var activeShimmerStyles = (0, _react.css)({
-  animationName: "".concat(shimmerKeyframes)
-});
-var getKeyframes = function getKeyframes(fromColor, toColor) {
-  return (0, _react.keyframes)({
-    from: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      backgroundColor: fromColor
-    },
-    to: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      backgroundColor: toColor
-    }
-  });
-};
+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 shimmerKeyframes = null;
+var skeletonStyles = null;
+var activeShimmerStyles = null;
 
 /**
  * __Skeleton__
@@ -54,17 +40,22 @@ var Skeleton = function Skeleton(_ref) {
     groupName = _ref.groupName,
     testId = _ref.testId;
   var groupDataAttribute = groupName && "data-".concat(groupName);
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId,
-    css: [skeletonStyles, isShimmering && activeShimmerStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    "data-testid": testId
+  }, groupDataAttribute && (0, _defineProperty2.default)({}, groupDataAttribute, 'true'), {
+    className: (0, _runtime.ax)(["_7hjf1yy8 _5sag12o8 _tip812c5 _1pglp3kn _bfhkn82g", isShimmering && "", isShimmering && "_j7hq586c"]),
+    style: _objectSpread(_objectSpread({}, {
       width: width,
       height: height,
       borderRadius: borderRadius,
       backgroundColor: color,
-      animationName: color && ShimmeringEndColor ? getKeyframes(color, ShimmeringEndColor) : undefined
-    }]
-  }, groupDataAttribute && (0, _defineProperty2.default)({}, groupDataAttribute, 'true')));
+      // Override the keyframes if both colors are provided, otherwise use the CSS variable fallbacks in our keyframes
+      '--ds-skeleton-from-color': color && ShimmeringEndColor ? color : undefined,
+      '--ds-skeleton-to-color': color && ShimmeringEndColor ? ShimmeringEndColor : undefined
+    }), {}, {
+      "--_wenvhl": (0, _runtime.ix)("var(--ds-skeleton-from-color, ".concat("var(--ds-skeleton, #091E420F)", ")")),
+      "--_1soe2er": (0, _runtime.ix)("var(--ds-skeleton-to-color, ".concat("var(--ds-skeleton-subtle, #091E4208)", ")"))
+    })
+  }));
 };
 var _default = exports.default = Skeleton;

package/dist/es2019/ui/index.compiled.css

@@ -0,0 +1,7 @@
+._1pglp3kn{animation-timing-function:linear}
+._5sag12o8{animation-duration:1.5s}
+._7hjf1yy8{animation-direction:alternate}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
+._j7hq1y0p{animation-name:ksxefwj}
+._tip812c5{animation-iteration-count:infinite}
+@keyframes ksxefwj{0%{background-color:var(--ds-skeleton-from-color,var(--ds-skeleton,#091e420f))}to{background-color:var(--ds-skeleton-to-color,var(--ds-skeleton-subtle,#091e4208))}}

package/dist/es2019/ui/index.js

@@ -1,31 +1,11 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx, keyframes } from '@emotion/react';
-import { skeletonShimmer } from '@atlaskit/theme/constants';
-const shimmer = skeletonShimmer();
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-const shimmerKeyframes = keyframes(shimmer.keyframes);
-const skeletonStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  ...shimmer.css
-});
-const activeShimmerStyles = css({
-  animationName: `${shimmerKeyframes}`
-});
-const getKeyframes = (fromColor, toColor) => keyframes({
-  from: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    backgroundColor: fromColor
-  },
-  to: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    backgroundColor: toColor
-  }
-});
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const shimmerKeyframes = null;
+const skeletonStyles = null;
+const activeShimmerStyles = null;
 
 /**
  * __Skeleton__
@@ -46,19 +26,21 @@ const Skeleton = ({
   testId
 }) => {
   const groupDataAttribute = groupName && `data-${groupName}`;
-  return jsx("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     "data-testid": testId,
-    css: [skeletonStyles, isShimmering && activeShimmerStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    {
+    style: {
       width,
       height,
       borderRadius,
       backgroundColor: color,
-      animationName: color && ShimmeringEndColor ? getKeyframes(color, ShimmeringEndColor) : undefined
-    }]
+      // Override the keyframes if both colors are provided, otherwise use the CSS variable fallbacks in our keyframes
+      '--ds-skeleton-from-color': color && ShimmeringEndColor ? color : undefined,
+      '--ds-skeleton-to-color': color && ShimmeringEndColor ? ShimmeringEndColor : undefined
+    }
   }, groupDataAttribute && {
     [groupDataAttribute]: 'true'
+  }, {
+    className: ax(["_7hjf1yy8 _5sag12o8 _tip812c5 _1pglp3kn _bfhkn82g", isShimmering && "", isShimmering && "_j7hq1y0p"])
   }));
 };
 export default Skeleton;

package/dist/esm/ui/index.compiled.css

@@ -0,0 +1,7 @@
+._1pglp3kn{animation-timing-function:linear}
+._5sag12o8{animation-duration:1.5s}
+._7hjf1yy8{animation-direction:alternate}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
+._j7hq586c{animation-name:kskr1ph}
+._tip812c5{animation-iteration-count:infinite}
+@keyframes kskr1ph{0%{background-color:var(--_wenvhl)}to{background-color:var(--_1soe2er)}}

package/dist/esm/ui/index.js

@@ -1,33 +1,14 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./index.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
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx, keyframes } from '@emotion/react';
-import { skeletonShimmer } from '@atlaskit/theme/constants';
-var shimmer = skeletonShimmer();
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var shimmerKeyframes = keyframes(shimmer.keyframes);
-var skeletonStyles = css(_objectSpread({}, shimmer.css));
-var activeShimmerStyles = css({
-  animationName: "".concat(shimmerKeyframes)
-});
-var getKeyframes = function getKeyframes(fromColor, toColor) {
-  return keyframes({
-    from: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      backgroundColor: fromColor
-    },
-    to: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      backgroundColor: toColor
-    }
-  });
-};
+var shimmerKeyframes = null;
+var skeletonStyles = null;
+var activeShimmerStyles = null;
 
 /**
  * __Skeleton__
@@ -49,17 +30,22 @@ var Skeleton = function Skeleton(_ref) {
     groupName = _ref.groupName,
     testId = _ref.testId;
   var groupDataAttribute = groupName && "data-".concat(groupName);
-  return jsx("div", _extends({
-    "data-testid": testId,
-    css: [skeletonStyles, isShimmering && activeShimmerStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-testid": testId
+  }, groupDataAttribute && _defineProperty({}, groupDataAttribute, 'true'), {
+    className: ax(["_7hjf1yy8 _5sag12o8 _tip812c5 _1pglp3kn _bfhkn82g", isShimmering && "", isShimmering && "_j7hq586c"]),
+    style: _objectSpread(_objectSpread({}, {
       width: width,
       height: height,
       borderRadius: borderRadius,
       backgroundColor: color,
-      animationName: color && ShimmeringEndColor ? getKeyframes(color, ShimmeringEndColor) : undefined
-    }]
-  }, groupDataAttribute && _defineProperty({}, groupDataAttribute, 'true')));
+      // Override the keyframes if both colors are provided, otherwise use the CSS variable fallbacks in our keyframes
+      '--ds-skeleton-from-color': color && ShimmeringEndColor ? color : undefined,
+      '--ds-skeleton-to-color': color && ShimmeringEndColor ? ShimmeringEndColor : undefined
+    }), {}, {
+      "--_wenvhl": ix("var(--ds-skeleton-from-color, ".concat("var(--ds-skeleton, #091E420F)", ")")),
+      "--_1soe2er": ix("var(--ds-skeleton-to-color, ".concat("var(--ds-skeleton-subtle, #091E4208)", ")"))
+    })
+  }));
 };
 export default Skeleton;

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 type SkeletonProps = {
     width: string | number;
     height: string | number;
@@ -39,5 +35,5 @@ type SkeletonProps = {
  * - [Examples](https://atlassian.design/components/skeleton/examples)
  * - [Code](https://atlassian.design/components/skeleton/code)
  */
-declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
+declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, testId, }: SkeletonProps) => JSX.Element;
 export default Skeleton;

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 type SkeletonProps = {
     width: string | number;
     height: string | number;
@@ -39,5 +35,5 @@ type SkeletonProps = {
  * - [Examples](https://atlassian.design/components/skeleton/examples)
  * - [Code](https://atlassian.design/components/skeleton/code)
  */
-declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
+declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, testId, }: SkeletonProps) => JSX.Element;
 export default Skeleton;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/skeleton",
-	"version": "0.5.3",
+	"version": "1.0.0",
 	"description": "A skeleton acts as a placeholder for content, usually while the content loads.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,7 +12,9 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
@@ -26,9 +28,9 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/theme": "^14.0.0",
+		"@atlaskit/tokens": "^2.2.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"