@atlaskit/pagination 14.10.0 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/pagination
 
+## 15.0.0
+
+### Major Changes
+
+- [#174375](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174375)
+  [`4a3e12575f8ef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4a3e12575f8ef) -
+  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/pagination`, 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).
+
+## 14.10.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.10.0
 
 ### Minor Changes

package/dist/cjs/internal/components/render-ellipsis.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1txw{display:flex}
+._kqswh2mm{position:relative}

package/dist/cjs/internal/components/render-ellipsis.js

@@ -1,3 +1,4 @@
+/* render-ellipsis.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,25 +6,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = renderEllipsis;
+require("./render-ellipsis.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var containerStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  position: 'relative'
-});
+var styles = {
+  container: "_1e0c1txw _kqswh2mm"
+};
 function renderEllipsis(_ref) {
   var key = _ref.key,
     testId = _ref.testId,
     from = _ref.from,
     to = _ref.to;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "li",
     testId: testId,
     key: key,
-    xcss: containerStyles,
+    xcss: styles.container,
     paddingInline: "space.100"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     testId: testId && "".concat(testId, "-text")
   }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, "Skipped pages from ", from, " to ", to), "\u2026"));
 }

package/dist/cjs/pagination.compiled.css

@@ -0,0 +1,4 @@
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/cjs/pagination.js

@@ -1,3 +1,4 @@
+/* pagination.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./pagination.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -14,7 +17,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
 var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _navigator = _interopRequireDefault(require("./internal/components/navigator"));
 var _page = _interopRequireDefault(require("./internal/components/page"));
 var _renderEllipsis = _interopRequireDefault(require("./internal/components/render-ellipsis"));
@@ -24,27 +27,22 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
+var styles = {
+  paginationMenu: "_1yt4ze3t _18s8ze3t",
+  paginationMenuItem: "_1pfhze3t",
+  navigatorIconWrapper: "_18zr12x7"
+};
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.10.0"
+  packageVersion: "15.0.0"
 };
-var paginationMenuStyles = (0, _primitives.xcss)({
-  padding: 'space.0',
-  margin: 'space.0'
-});
-var paginationMenuItemStyles = (0, _primitives.xcss)({
-  marginBlockStart: 'space.0'
-});
-var navigatorIconWrapperStyles = (0, _primitives.xcss)({
-  paddingInline: 'space.075'
-});
 function NavigatorIcon(_ref) {
   var chevronDirection = _ref.chevronDirection;
   var Chevron = chevronDirection === 'left' ? _chevronLeftChevronLeftLarge.default : _chevronRightChevronRightLarge.default;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
-    xcss: navigatorIconWrapperStyles
+    xcss: styles.navigatorIconWrapper
   }, /*#__PURE__*/_react.default.createElement(Chevron, {
     label: "",
     LEGACY_margin: "0 ".concat("var(--ds-space-negative-075, -6px)"),
@@ -103,9 +101,9 @@ function InnerPagination(_ref2, ref) {
     var selectedPage = pages[selectedIndexValue];
     var pageIndexLabel = "".concat(pageLabel, " ").concat(getPageLabel ? getPageLabel(page, currPageIndex) : page);
     var isCurrentPage = page === selectedPage;
-    return /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
       as: "li",
-      xcss: paginationMenuItemStyles,
+      xcss: styles.paginationMenuItem,
       key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex)
     }, /*#__PURE__*/_react.default.createElement(_page.default, {
       component: components.Page,
@@ -126,13 +124,13 @@ function InnerPagination(_ref2, ref) {
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    _react.default.createElement(_primitives.Box, {
+    _react.default.createElement(_compiled.Box, {
       testId: testId,
       style: style,
       ref: ref,
       "aria-label": label,
       as: "nav"
-    }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
       space: "space.0",
       alignBlock: "center"
     }, /*#__PURE__*/_react.default.createElement(_navigator.default, {
@@ -150,11 +148,11 @@ function InnerPagination(_ref2, ref) {
       }),
       "aria-label": previousLabel,
       testId: testId && "".concat(testId, "--left-navigator")
-    }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    }), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
       space: "space.0",
       alignBlock: "baseline",
       as: "ul",
-      xcss: paginationMenuStyles
+      xcss: styles.paginationMenu
     }, (0, _collapseRange.default)(pages, selectedIndexValue, {
       max: max,
       ellipsis: renderEllipsis,

package/dist/es2019/internal/components/render-ellipsis.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1txw{display:flex}
+._kqswh2mm{position:relative}

package/dist/es2019/internal/components/render-ellipsis.js

@@ -1,10 +1,12 @@
+/* render-ellipsis.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./render-ellipsis.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, Text, xcss } from '@atlaskit/primitives';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-const containerStyles = xcss({
-  display: 'flex',
-  position: 'relative'
-});
+const styles = {
+  container: "_1e0c1txw _kqswh2mm"
+};
 export default function renderEllipsis({
   key,
   testId,
@@ -15,7 +17,7 @@ export default function renderEllipsis({
     as: "li",
     testId: testId,
     key: key,
-    xcss: containerStyles,
+    xcss: styles.container,
     paddingInline: "space.100"
   }, /*#__PURE__*/React.createElement(Text, {
     testId: testId && `${testId}-text`

package/dist/es2019/pagination.compiled.css

@@ -0,0 +1,4 @@
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/es2019/pagination.js

@@ -1,37 +1,35 @@
+/* pagination.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./pagination.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, memo } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Navigator from './internal/components/navigator';
 import PageComponent from './internal/components/page';
 import renderDefaultEllipsis from './internal/components/render-ellipsis';
 import { emptyObject } from './internal/constants';
 import collapseRange from './internal/utils/collapse-range';
+const styles = {
+  paginationMenu: "_1yt4ze3t _18s8ze3t",
+  paginationMenuItem: "_1pfhze3t",
+  navigatorIconWrapper: "_18zr12x7"
+};
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.10.0"
+  packageVersion: "15.0.0"
 };
-const paginationMenuStyles = xcss({
-  padding: 'space.0',
-  margin: 'space.0'
-});
-const paginationMenuItemStyles = xcss({
-  marginBlockStart: 'space.0'
-});
-const navigatorIconWrapperStyles = xcss({
-  paddingInline: 'space.075'
-});
 function NavigatorIcon({
   chevronDirection
 }) {
   const Chevron = chevronDirection === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: navigatorIconWrapperStyles
+    xcss: styles.navigatorIconWrapper
   }, /*#__PURE__*/React.createElement(Chevron, {
     label: "",
     LEGACY_margin: `0 ${"var(--ds-space-negative-075, -6px)"}`,
@@ -81,7 +79,7 @@ function InnerPagination({
     const isCurrentPage = page === selectedPage;
     return /*#__PURE__*/React.createElement(Inline, {
       as: "li",
-      xcss: paginationMenuItemStyles,
+      xcss: styles.paginationMenuItem,
       key: `page-${getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex}`
     }, /*#__PURE__*/React.createElement(PageComponent, {
       component: components.Page,
@@ -126,7 +124,7 @@ function InnerPagination({
       space: "space.0",
       alignBlock: "baseline",
       as: "ul",
-      xcss: paginationMenuStyles
+      xcss: styles.paginationMenu
     }, collapseRange(pages, selectedIndexValue, {
       max: max,
       ellipsis: renderEllipsis,

package/dist/esm/internal/components/render-ellipsis.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1txw{display:flex}
+._kqswh2mm{position:relative}

package/dist/esm/internal/components/render-ellipsis.js

@@ -1,10 +1,12 @@
+/* render-ellipsis.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./render-ellipsis.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, Text, xcss } from '@atlaskit/primitives';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-var containerStyles = xcss({
-  display: 'flex',
-  position: 'relative'
-});
+var styles = {
+  container: "_1e0c1txw _kqswh2mm"
+};
 export default function renderEllipsis(_ref) {
   var key = _ref.key,
     testId = _ref.testId,
@@ -14,7 +16,7 @@ export default function renderEllipsis(_ref) {
     as: "li",
     testId: testId,
     key: key,
-    xcss: containerStyles,
+    xcss: styles.container,
     paddingInline: "space.100"
   }, /*#__PURE__*/React.createElement(Text, {
     testId: testId && "".concat(testId, "-text")

package/dist/esm/pagination.compiled.css

@@ -0,0 +1,4 @@
+._18s8ze3t{margin:var(--ds-space-0,0)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/esm/pagination.js

@@ -1,5 +1,8 @@
+/* pagination.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./pagination.compiled.css";
+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; }
 import React, { forwardRef, memo } from 'react';
@@ -8,33 +11,28 @@ import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Navigator from './internal/components/navigator';
 import PageComponent from './internal/components/page';
 import renderDefaultEllipsis from './internal/components/render-ellipsis';
 import { emptyObject } from './internal/constants';
 import collapseRange from './internal/utils/collapse-range';
+var styles = {
+  paginationMenu: "_1yt4ze3t _18s8ze3t",
+  paginationMenuItem: "_1pfhze3t",
+  navigatorIconWrapper: "_18zr12x7"
+};
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.10.0"
+  packageVersion: "15.0.0"
 };
-var paginationMenuStyles = xcss({
-  padding: 'space.0',
-  margin: 'space.0'
-});
-var paginationMenuItemStyles = xcss({
-  marginBlockStart: 'space.0'
-});
-var navigatorIconWrapperStyles = xcss({
-  paddingInline: 'space.075'
-});
 function NavigatorIcon(_ref) {
   var chevronDirection = _ref.chevronDirection;
   var Chevron = chevronDirection === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: navigatorIconWrapperStyles
+    xcss: styles.navigatorIconWrapper
   }, /*#__PURE__*/React.createElement(Chevron, {
     label: "",
     LEGACY_margin: "0 ".concat("var(--ds-space-negative-075, -6px)"),
@@ -95,7 +93,7 @@ function InnerPagination(_ref2, ref) {
     var isCurrentPage = page === selectedPage;
     return /*#__PURE__*/React.createElement(Inline, {
       as: "li",
-      xcss: paginationMenuItemStyles,
+      xcss: styles.paginationMenuItem,
       key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex)
     }, /*#__PURE__*/React.createElement(PageComponent, {
       component: components.Page,
@@ -144,7 +142,7 @@ function InnerPagination(_ref2, ref) {
       space: "space.0",
       alignBlock: "baseline",
       as: "ul",
-      xcss: paginationMenuStyles
+      xcss: styles.paginationMenu
     }, collapseRange(pages, selectedIndexValue, {
       max: max,
       ellipsis: renderEllipsis,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.10.0",
+	"version": "15.0.0",
 	"description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,13 +38,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/icon": "^22.26.0",
-		"@atlaskit/primitives": "^13.2.0",
-		"@atlaskit/tokens": "^2.3.0",
+		"@atlaskit/css": "^0.7.0",
+		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/primitives": "^13.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"memoize-one": "^6.0.0"