@atlaskit/editor-plugin-expand 1.4.2 → 1.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.4.3
+
+### Patch Changes
+
+- [#92468](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92468) [`515df766c29c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/515df766c29c) - [ux] [ED-23066] Re-render expand toggle icon when the class name is updated so that the aria-expanded attribute gets updated to match.
+
 ## 1.4.2
 
 ### Patch Changes

package/dist/cjs/singlePlayerExpand/node-views/index.js

@@ -21,7 +21,8 @@ var _commands = require("../commands");
 var _NodeView = require("../ui/NodeView");
 var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
-    var _this = this;
+    var _this = this,
+      _expandedState$get;
     var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
     var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
     (0, _classCallCheck2.default)(this, ExpandNodeView);
@@ -82,7 +83,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
         return;
       }
       if (target === _this.input) {
@@ -175,7 +176,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(state, dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
       }
     });
     (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
@@ -334,10 +335,10 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.icon = this.dom.querySelector(".".concat(_styles.expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
-    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, this.intl);
     if (!_expand.expandedState.has(this.node)) {
       _expand.expandedState.set(this.node, false);
     }
+    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, (_expandedState$get = _expand.expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -400,11 +401,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       return false;
     }
   }, {
-    key: "updateExpandClassName",
-    value: function updateExpandClassName() {
+    key: "updateExpandToggleIcon",
+    value: function updateExpandToggleIcon() {
       var expanded = _expand.expandedState.get(this.node) ? _expand.expandedState.get(this.node) : false;
       if (this.dom && expanded !== undefined) {
+        var _expandedState$get2;
         this.dom.className = (0, _NodeView.buildExpandClassName)(this.node.type.name, expanded);
+        // Re-render the icon to update the aria-expanded attribute
+        (0, _NodeView.renderIcon)(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = _expand.expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
       }
     }
   }, {

package/dist/cjs/singlePlayerExpand/ui/NodeView.js

@@ -48,14 +48,10 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
     'class': _styles.expandClassNames.content
   }, 0]];
 };
-var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
+var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {
   if (!icon) {
     return;
   }
-  var expanded = node ? _expand.expandedState.get(node) : true;
-  if (expanded === undefined) {
-    expanded = false;
-  }
   _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
     intl: intl,
     allowInteractiveExpand: allowInteractiveExpand,

package/dist/es2019/singlePlayerExpand/node-views/index.js

@@ -11,6 +11,7 @@ import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExp
 import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export class ExpandNodeView {
   constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
+    var _expandedState$get;
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
@@ -69,7 +70,7 @@ export class ExpandNodeView {
           pos,
           node: this.node
         })(this.view.state, this.view.dispatch);
-        this.updateExpandClassName();
+        this.updateExpandToggleIcon();
         return;
       }
       if (target === this.input) {
@@ -167,7 +168,7 @@ export class ExpandNodeView {
           pos,
           node: this.node
         })(state, dispatch);
-        this.updateExpandClassName();
+        this.updateExpandToggleIcon();
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -336,10 +337,10 @@ export class ExpandNodeView {
     this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
-    renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
+    renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -394,10 +395,13 @@ export class ExpandNodeView {
     }
     return false;
   }
-  updateExpandClassName() {
+  updateExpandToggleIcon() {
     const expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
     if (this.dom && expanded !== undefined) {
+      var _expandedState$get2;
       this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+      // Re-render the icon to update the aria-expanded attribute
+      renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
     }
   }
   destroy() {

package/dist/es2019/singlePlayerExpand/ui/NodeView.js

@@ -41,14 +41,10 @@ export const toDOM = (node, __livePage, intl) => {
     'class': expandClassNames.content
   }, 0]];
 };
-export const renderIcon = (icon, allowInteractiveExpand, intl, node) => {
+export const renderIcon = (icon, allowInteractiveExpand, expanded, intl) => {
   if (!icon) {
     return;
   }
-  let expanded = node ? expandedState.get(node) : true;
-  if (expanded === undefined) {
-    expanded = false;
-  }
   ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
     intl: intl,
     allowInteractiveExpand: allowInteractiveExpand,

package/dist/esm/singlePlayerExpand/node-views/index.js

@@ -13,7 +13,8 @@ import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExp
 import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export var ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
-    var _this = this;
+    var _this = this,
+      _expandedState$get;
     var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
     var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
     _classCallCheck(this, ExpandNodeView);
@@ -74,7 +75,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
         return;
       }
       if (target === _this.input) {
@@ -167,7 +168,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(state, dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", function (event) {
@@ -326,10 +327,10 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.icon = this.dom.querySelector(".".concat(expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
-    renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
+    renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -392,11 +393,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       return false;
     }
   }, {
-    key: "updateExpandClassName",
-    value: function updateExpandClassName() {
+    key: "updateExpandToggleIcon",
+    value: function updateExpandToggleIcon() {
       var expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
       if (this.dom && expanded !== undefined) {
+        var _expandedState$get2;
         this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+        // Re-render the icon to update the aria-expanded attribute
+        renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
       }
     }
   }, {

package/dist/esm/singlePlayerExpand/ui/NodeView.js

@@ -41,14 +41,10 @@ export var toDOM = function toDOM(node, __livePage, intl) {
     'class': expandClassNames.content
   }, 0]];
 };
-export var renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
+export var renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {
   if (!icon) {
     return;
   }
-  var expanded = node ? expandedState.get(node) : true;
-  if (expanded === undefined) {
-    expanded = false;
-  }
   ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
     intl: intl,
     allowInteractiveExpand: allowInteractiveExpand,

package/dist/types/singlePlayerExpand/node-views/index.d.ts

@@ -44,7 +44,7 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
-    updateExpandClassName(): void;
+    updateExpandToggleIcon(): void;
     destroy(): void;
 }
 export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {

package/dist/types/singlePlayerExpand/ui/NodeView.d.ts

@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
-export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, intl?: IntlShape, node?: PmNode) => void;
+export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;

package/dist/types-ts4.5/singlePlayerExpand/node-views/index.d.ts

@@ -44,7 +44,7 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
-    updateExpandClassName(): void;
+    updateExpandToggleIcon(): void;
     destroy(): void;
 }
 export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {

package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts

@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
-export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, intl?: IntlShape, node?: PmNode) => void;
+export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-expand",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Expand plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.9.0",
     "@atlaskit/button": "^17.12.0",
-    "@atlaskit/editor-common": "^78.29.0",
+    "@atlaskit/editor-common": "^78.30.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-selection": "^1.1.0",