@atlaskit/renderer 133.17.0 → 133.17.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 133.17.1
+
+### Patch Changes
+
+- [`dbd6aad00148d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dbd6aad00148d) -
+  Animate collapsible heading toggle icons
+- Updated dependencies
+
 ## 133.17.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/heading.compiled.css

@@ -1,3 +1,4 @@
+._l8kuuqm3 svg{transition:var(--_1vzp3at)}._12hn14w8 svg{transform:rotate(90deg)}
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
@@ -9,4 +10,5 @@
 ._lcxvglyw{pointer-events:none}
 ._tzy4idpf{opacity:0}
 @media (hover:none){._tza3kb7n{opacity:1}._12yg1wug{pointer-events:auto}}
-@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (prefers-reduced-motion:reduce){._wxvuglyw svg{transition:none}}

package/dist/cjs/react/nodes/heading.js

@@ -13,7 +13,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _new = require("@atlaskit/button/new");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -44,13 +44,8 @@ function hasRightAlignmentMark(marks) {
 var wrapperStyles = null;
 var collapsibleHeadingWrapperStyles = null;
 var collapsibleHeadingButtonStyles = null;
+var collapsibleHeadingButtonExpandedStyles = null;
 var collapsibleHeadingButtonHiddenStyles = null;
-var ChevronDownSmallIcon = function ChevronDownSmallIcon() {
-  return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-    label: "",
-    size: "small"
-  });
-};
 var ChevronRightSmallIcon = function ChevronRightSmallIcon() {
   return /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
     label: "",
@@ -120,11 +115,14 @@ function CollapsibleHeadingButton(_ref3) {
     return setIsFocused(true);
   }, []);
   return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+    className: (0, _runtime.ax)(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n _l8kuuqm3 _wxvuglyw", !isCollapsed && "_12hn14w8", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"]),
+    style: {
+      "--_1vzp3at": (0, _runtime.ix)("transform 0.2s ".concat(_constants.akEditorSwoopCubicBezier))
+    }
   }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     appearance: "subtle",
     spacing: "compact",
-    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    icon: ChevronRightSmallIcon,
     label: intl.formatMessage(isCollapsed ? _messages.collapsibleHeadingMessages.expandSection : _messages.collapsibleHeadingMessages.collapseSection),
     "aria-expanded": !isCollapsed,
     isTooltipDisabled: false,

package/dist/cjs/ui/Renderer/index.js

@@ -73,7 +73,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "133.16.7";
+var packageVersion = "133.17.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/heading.compiled.css

@@ -1,3 +1,4 @@
+._l8ku180e svg{transition:transform .2s cubic-bezier(.15,1,.3,1)}._12hn14w8 svg{transform:rotate(90deg)}
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
@@ -9,4 +10,5 @@
 ._lcxvglyw{pointer-events:none}
 ._tzy4idpf{opacity:0}
 @media (hover:none){._tza3kb7n{opacity:1}._12yg1wug{pointer-events:auto}}
-@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (prefers-reduced-motion:reduce){._wxvuglyw svg{transition:none}}

package/dist/es2019/react/nodes/heading.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
-import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles/constants';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
@@ -32,11 +32,8 @@ function hasRightAlignmentMark(marks) {
 const wrapperStyles = null;
 const collapsibleHeadingWrapperStyles = null;
 const collapsibleHeadingButtonStyles = null;
+const collapsibleHeadingButtonExpandedStyles = null;
 const collapsibleHeadingButtonHiddenStyles = null;
-const ChevronDownSmallIcon = () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
-  label: "",
-  size: "small"
-});
 const ChevronRightSmallIcon = () => /*#__PURE__*/React.createElement(ChevronRightIcon, {
   label: "",
   size: "small"
@@ -98,11 +95,11 @@ function CollapsibleHeadingButton({
   const handleBlur = React.useCallback(() => setIsFocused(false), []);
   const handleKeyDown = React.useCallback(() => setIsFocused(true), []);
   return /*#__PURE__*/React.createElement("span", {
-    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n _l8ku180e _wxvuglyw", !isCollapsed && "_12hn14w8", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     spacing: "compact",
-    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    icon: ChevronRightSmallIcon,
     label: intl.formatMessage(isCollapsed ? collapsibleHeadingMessages.expandSection : collapsibleHeadingMessages.collapseSection),
     "aria-expanded": !isCollapsed,
     isTooltipDisabled: false,

package/dist/es2019/ui/Renderer/index.js

@@ -59,7 +59,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "133.16.7";
+const packageVersion = "133.17.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/heading.compiled.css

@@ -1,3 +1,4 @@
+._l8kuuqm3 svg{transition:var(--_1vzp3at)}._12hn14w8 svg{transform:rotate(90deg)}
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
@@ -9,4 +10,5 @@
 ._lcxvglyw{pointer-events:none}
 ._tzy4idpf{opacity:0}
 @media (hover:none){._tza3kb7n{opacity:1}._12yg1wug{pointer-events:auto}}
-@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}
+@media (prefers-reduced-motion:reduce){._wxvuglyw svg{transition:none}}

package/dist/esm/react/nodes/heading.js

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
-import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles/constants';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
@@ -37,13 +37,8 @@ function hasRightAlignmentMark(marks) {
 var wrapperStyles = null;
 var collapsibleHeadingWrapperStyles = null;
 var collapsibleHeadingButtonStyles = null;
+var collapsibleHeadingButtonExpandedStyles = null;
 var collapsibleHeadingButtonHiddenStyles = null;
-var ChevronDownSmallIcon = function ChevronDownSmallIcon() {
-  return /*#__PURE__*/React.createElement(ChevronDownIcon, {
-    label: "",
-    size: "small"
-  });
-};
 var ChevronRightSmallIcon = function ChevronRightSmallIcon() {
   return /*#__PURE__*/React.createElement(ChevronRightIcon, {
     label: "",
@@ -113,11 +108,14 @@ function CollapsibleHeadingButton(_ref3) {
     return setIsFocused(true);
   }, []);
   return /*#__PURE__*/React.createElement("span", {
-    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n _l8kuuqm3 _wxvuglyw", !isCollapsed && "_12hn14w8", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"]),
+    style: {
+      "--_1vzp3at": ix("transform 0.2s ".concat(akEditorSwoopCubicBezier))
+    }
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     spacing: "compact",
-    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    icon: ChevronRightSmallIcon,
     label: intl.formatMessage(isCollapsed ? collapsibleHeadingMessages.expandSection : collapsibleHeadingMessages.collapseSection),
     "aria-expanded": !isCollapsed,
     isTooltipDisabled: false,

package/dist/esm/ui/Renderer/index.js

@@ -64,7 +64,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "133.16.7";
+var packageVersion = "133.17.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.17.0",
+	"version": "133.17.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -212,9 +212,6 @@
 		"platform_editor_numbered_column_in_include": {
 			"type": "boolean"
 		},
-		"jfp-magma-ssr-iv-editor-media": {
-			"type": "boolean"
-		},
 		"jfp-magma-ssr-iv-editor-links": {
 			"type": "boolean"
 		},