@heartlandone/vega 2.84.0 → 2.85.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-dynamic-popover-renderer.js

@@ -25,7 +25,6 @@ import { TablePopoverBaseRenderer } from './table-popover-base-renderer';
 export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   constructor(colors, renderContext) {
     super(renderContext);
-    this.tableColorSchema = [];
     this.popoverCloseType = 'none'; // 'save' | 'cancel' | 'change' | 'none'
     this.tablePropertiesHandlerMap = {
       save: new TablePropertiesSaveEventHandler(),
@@ -53,7 +52,7 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.tablePropertiesHandlerMap[eventKey].handle(extensionContext, this.currentTableBlock, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -73,7 +72,7 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.cellPropertiesHandlerMap[eventKey].handle(extensionContext, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -125,55 +124,58 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
     await this.popoverRef.hide();
   }
   /**
-   * Renders a vega-popover whose target and content are provided dynamically by callers.
+   * Re-targets the shared popovers to the given table.
    *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {() => HTMLElement} getTableRef - Current table DOM reference
-   * @param {RTETableBlock} renderData - Current table block being rendered.
-   * @returns {VegaRTERenderResult} The rendered popover host.
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
    */
-  render(h, getTableRef, renderData) {
+  reTarget(tableBlock, getTableRef) {
     this.getTableRef = getTableRef;
-    this.currentTableBlock = renderData;
-    return h('vega-popover', {
-      trigger: 'click',
-      isScreenPosition: true,
-      class: 'rte-table-dynamic-popover',
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (popover) => {
-        this.popoverRef = popover;
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
-          const extensionContext = this.getTableExtensionContext();
-          if (this.popoverCloseType === 'change' && extensionContext) {
-            extensionContext.flushValue(extensionContext.host.value);
-          }
-        });
-      },
-    }, [
-      h('div', {
-        slot: 'popover',
-        class: 'rte-table-dynamic-popover-content',
-      }, [
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.tablePropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: TableSettingType.TABLE,
-          onVegaCancel: this.handleTablePropertiesUpdate,
-          onVegaChange: this.handleTablePropertiesUpdate,
-          onVegaSave: this.handleTablePropertiesUpdate,
-        }),
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.cellPropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: TableSettingType.CELL,
-          onVegaCancel: this.handleCellPropertiesUpdate,
-          onVegaChange: this.handleCellPropertiesUpdate,
-          onVegaSave: this.handleCellPropertiesUpdate,
-        }),
-      ]),
-    ]);
+    this.currentTableBlock = tableBlock;
+  }
+  /**
+   * Builds the popover DOM and appends it to the given container.
+   *
+   * @returns {Nullable<HTMLElement>} The constructed popover element.
+   */
+  render() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-dynamic-popover';
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+        const extensionContext = this.getTableExtensionContext();
+        if (this.popoverCloseType === 'change' && extensionContext) {
+          extensionContext.flushValue(extensionContext.host.value);
+        }
+      });
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      slotDiv.className = 'rte-table-dynamic-popover-content';
+      const tablePropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      tablePropsForm.colors = this.tableColorSchema;
+      tablePropsForm.type = TableSettingType.TABLE;
+      tablePropsForm.setAttribute('type', TableSettingType.TABLE);
+      tablePropsForm.addEventListener('vegaCancel', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaChange', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaSave', this.handleTablePropertiesUpdate);
+      const cellPropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      cellPropsForm.colors = this.tableColorSchema;
+      cellPropsForm.type = TableSettingType.CELL;
+      cellPropsForm.setAttribute('type', TableSettingType.CELL);
+      cellPropsForm.addEventListener('vegaCancel', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaChange', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaSave', this.handleCellPropertiesUpdate);
+      slotDiv.appendChild(tablePropsForm);
+      slotDiv.appendChild(cellPropsForm);
+      popover.appendChild(slotDiv);
+      this.popoverRef = popover;
+      this.tablePropertiesFormRef = tablePropsForm;
+      this.cellPropertiesFormRef = cellPropsForm;
+      return popover;
+    }
   }
   /**
    * Updates the visibility of the pre-rendered content blocks based on type.
@@ -183,13 +185,13 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   updateContent(type) {
     this.popoverCloseType = 'none';
     const extensionContext = this.getTableExtensionContext();
-    if (this.tablePropertiesFormRef && type === 'TABLE') {
+    if (type === 'TABLE') {
       this.tablePropertiesFormRef.classList.remove('vega-hidden');
       this.cellPropertiesFormRef.classList.add('vega-hidden');
       this.tablePropertiesFormRef.defaultValue =
         TablePropertiesEventHandler.generateTablePropertiesForm(this.currentTableBlock);
     }
-    else if (this.cellPropertiesFormRef && type === 'CELL') {
+    else if (type === 'CELL') {
       this.cellPropertiesFormRef.classList.remove('vega-hidden');
       this.tablePropertiesFormRef.classList.add('vega-hidden');
       if (extensionContext) {

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-renderer.js

@@ -1,13 +1,11 @@
 import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
 import styles from '../table-block-styles.css';
 import { DeleteTableBlockAction } from '../actions/delete-table-block-action';
-import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
 import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annotation';
-import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
 import changeManager from '../../../../../helpers/change-manager/change-manager';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRTEExtensionTableCellsSelectionAnchor } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { RTETableColorManager } from '../utils/table-color-manager';
+import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
 /**
  * Renderer for the RTETableBlock.
  */
@@ -16,12 +14,9 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @inheritDoc
    */
   doRender(h, renderData, rteContext) {
-    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer(rteContext);
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors(), rteContext);
     let tableRef;
     const table = this.renderTable(h, renderData, (ref) => (tableRef = ref));
-    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, () => tableRef, tableDynamicPopoverRenderer);
-    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef, renderData);
+    this.renderTableToolbar(rteContext);
     const tableAnnotation = renderData.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.TABLE);
     const children = rteContext.editable
       ? [
@@ -32,17 +27,23 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
             this.handleTableRemove(renderData, tableRef);
           },
           // eslint-disable-next-line jsdoc/require-jsdoc
-          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          onClick: (event) => {
+            if (this.tableToolbar) {
+              this.tableToolbar.handleTableClick(event, renderData, () => tableRef);
+            }
+          },
           // eslint-disable-next-line jsdoc/require-jsdoc
           onMouseLeave: () => {
-            tableSettingPopoverRenderer.syncSelectedCells();
+            if (this.tableToolbar) {
+              this.tableToolbar.syncSelectedCells();
+            }
           },
         }, [
           // Add an extra div as slot container, to make sure the cursor can move to before/end of the table.
           h('div', {
             contentEditable: true,
             ref: this.useRef(renderData),
-          }, [table, tableSettingPopover, tableDynamicPopover]),
+          }, [table]),
         ]),
       ]
       : [table];
@@ -64,6 +65,12 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     result.childrenContainerGetter = () => table;
     return result;
   }
+  /**
+   * Destroys the table toolbar popover.
+   */
+  destroy() {
+    this.destroyTableToolbar();
+  }
   /**
    * @inheritDoc
    */
@@ -113,4 +120,27 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
       }
     }
   }
+  /**
+   * Renders the table setting popover toolbar if the context is editable.
+   *
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   */
+  renderTableToolbar(rteContext) {
+    if (!rteContext.editable) {
+      this.destroyTableToolbar();
+      return;
+    }
+    if (!this.tableToolbar) {
+      this.tableToolbar = new TableSettingPopoverRenderer(rteContext);
+      this.tableToolbar.render();
+    }
+  }
+  /**
+   * Destroys the table setting popover toolbar if it exists.
+   */
+  destroyTableToolbar() {
+    var _a;
+    (_a = this.tableToolbar) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.tableToolbar = null;
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-setting-popover-renderer.js

@@ -6,16 +6,19 @@ import { RowOperationEventHandler } from '../setting-event-handlers/row-operatio
 import { CaptionOperationEventHandler } from '../setting-event-handlers/caption-operation';
 import { ColumnOperationEventHandler } from '../setting-event-handlers/column-operation';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaPopoverShow } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
 import { MergeCellsOperationEventHandler } from '../setting-event-handlers/merge-cells-operation';
 import { SplitCellOperationEventHandler } from '../setting-event-handlers/split-cell-operation';
 import { TablePopoverBaseRenderer } from './table-popover-base-renderer';
+import { RTETableColorManager } from '../utils/table-color-manager';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
 /**
- * Centralizes the popover rendering and interaction logic for table settings.
+ * Shared popover renderer for table settings.
  */
 export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
-  constructor() {
-    super(...arguments);
+  constructor(renderContext) {
+    super(renderContext);
     this.settingHandlers = [
       new RowOperationEventHandler(),
       new CaptionOperationEventHandler(),
@@ -24,38 +27,38 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       new SplitCellOperationEventHandler(),
     ];
     /**
-     * Show table setting popover when table is clicked.
-     * Only the popover belonging to the nearest table will be shown,
-     * which avoids outer tables showing their popover when an inner (nested) table is clicked.
+     * Re-targets and shows the table setting popover for the clicked table.
      *
-     * @param {MouseEvent} event - The MouseEvent that triggered the table action
-     * @param {HTMLElement} trigger - The element that can triggered the popover open.
+     * @param {MouseEvent} event - The MouseEvent that triggered the click.
+     * @param {RTETableBlock} tableBlock - The clicked table's block data.
+     * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
      */
-    this.handleTableClick = (event, trigger) => {
+    this.handleTableClick = (event, tableBlock, getTableRef) => {
       const target = event.target;
       const ownTrigger = target.closest('table');
-      if (trigger !== ownTrigger) {
-        void this.popoverRef.hide();
-        void this.tableDynamicPopover.hide();
+      if (ownTrigger !== getTableRef()) {
         return;
       }
+      // Prevent the click from bubbling to ancestor tables. When this is a nested
+      // table click, the ancestor table still has the popover's stale click
+      // listener attached (from when it was the popover's target), which would
+      // toggle the popover off immediately after we show it.
+      event.stopPropagation();
+      this.reTarget(tableBlock, getTableRef);
       void this.tableDynamicPopover.hide();
-      if (!this.popoverShow) {
-        remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
-        void this.popoverRef.show();
-      }
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
+      void this.popoverRef.show(true);
     };
     /**
      * Sync the selected cells from the table selection to the table setting component.
      */
     this.syncSelectedCells = () => {
       if (this.tableSettingRef) {
-        const selectedCells = this.getTableSelectedCells();
-        this.tableSettingRef.selectedCells = selectedCells;
+        this.tableSettingRef.selectedCells = this.getTableSelectedCells();
       }
     };
     /**
-     * Receive setting menu click events.
+     * Handles setting menu click events.
      *
      * @param {CustomEvent<Array<string>>} event - The custom event emitted from the setting menu.
      */
@@ -63,7 +66,7 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
       if (handler) {
         const extensionContext = this.getTableExtensionContext();
-        extensionContext && handler.execute(event.detail, extensionContext, this.tableData);
+        extensionContext && handler.execute(event.detail, extensionContext, this.tableBlock);
         if (event.detail[0] === TableSettingType.CAPTION) {
           this.updateTableSettingCaption();
         }
@@ -78,59 +81,69 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
      */
     this.handleTableSettingPopoverShow = () => {
       this.syncSelectedCells();
-      this.popoverShow = true;
     };
+    this.tableDynamicPopover = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors(), renderContext);
   }
   /**
-   * Render the popover host and inject the table-setting component with refs wired up.
-   *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {RTETableBlock} renderData - The table block to render.
-   * @param {() => HTMLElement} getTableRef - Current table DOM reference
-   * @param {TableDynamicPopoverRenderer} tableDynamicPopover - Renderer used to show
-   *  the secondary table popover (for example, table-properties-specific settings).
-   * @returns {VegaRTERenderResult} The rendered popover structure.
+   * Destroys the dynamic popover renderer and removes the container from the DOM.
    */
-  render(h, renderData, getTableRef, tableDynamicPopover) {
-    this.tableData = renderData;
-    this.tableDynamicPopover = tableDynamicPopover;
-    return h('vega-popover', {
-      trigger: 'click',
-      isScreenPosition: true,
-      class: 'rte-table-setting-popover',
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (popover) => {
-        this.popoverRef = popover;
-        if (this.popoverRef) {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => (this.popoverShow = false));
-        }
-      },
-    }, [
-      h('div', { slot: 'popover' }, [
-        h('vega-rich-text-table-setting', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (ref) => {
-            this.tableSettingRef = ref;
-            if (ref) {
-              ref.target = getTableRef();
-            }
-          },
-          selectedCells: this.getTableSelectedCells(),
-          onVegaClick: this.handleSettingMenuClick,
-        }),
-      ]),
-    ]);
+  destroy() {
+    this.tableDynamicPopover.destroy();
+    if (this.popoverContainer) {
+      this.popoverContainer.remove();
+    }
+  }
+  /**
+   * Builds the popover DOM and appends it to the RTE host. Idempotent: subsequent calls are no-ops.
+   */
+  render() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument && this.renderContext) {
+      this.popoverContainer = safeDocument.createElement('div');
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.renderContext.host.appendChild(this.popoverContainer);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const tableCellPopover = this.tableDynamicPopover.render();
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-setting-popover';
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      const tableSetting = safeDocument.createElement('vega-rich-text-table-setting');
+      tableSetting.addEventListener('vegaClick', this.handleSettingMenuClick);
+      slotDiv.appendChild(tableSetting);
+      popover.appendChild(slotDiv);
+      this.popoverContainer.appendChild(popover);
+      this.popoverContainer.appendChild(tableCellPopover);
+      this.popoverRef = popover;
+      this.tableSettingRef = tableSetting;
+    }
   }
   /**
-   * Updates the table setting component caption state to match the given table data.
+   * Updates the table setting component caption state to match the current table data.
    */
   updateTableSettingCaption() {
-    const hasCaption = this.tableData.hasCaption();
+    const hasCaption = this.tableBlock.hasCaption();
     if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
       this.tableSettingRef.hasCaption = hasCaption;
     }
   }
+  /**
+   * Re-targets the shared popovers to the given table.
+   *
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
+   */
+  reTarget(tableBlock, getTableRef) {
+    if (this.tableSettingRef) {
+      this.tableBlock = tableBlock;
+      this.tableSettingRef.target = getTableRef();
+      this.tableSettingRef.selectedCells = this.getTableSelectedCells();
+      this.tableDynamicPopover.reTarget(tableBlock, getTableRef);
+    }
+  }
   /**
    * Collects and returns the currently selected table cells.
    *

package/dist/collection/components/vega-rich-text-editor/extensions/table/table-extension.js

@@ -138,6 +138,7 @@ export class VegaRTETableExtension extends VegaRTEExtension {
    * @inheritDoc
    */
   destroyExtension() {
+    this.tableBlockRenderer.destroy();
     this.tableSelection.destroy();
   }
 }

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-expand-row-controller.js

@@ -26,7 +26,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.toggleExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
     };
     /**
      * Open expandable row by rowKey
@@ -34,7 +34,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.openExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, true);
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, true);
     };
     /**
      * Close expanded row by rowKey
@@ -42,13 +42,22 @@ export class VegaTableExpandRowController extends VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.closeExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, false);
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, false);
     };
     /**
      * Close all expanded row
      */
     this.closeAllExpandRow = () => {
-      this.rowExpandable && this.handleCloseAllExpandRow();
+      this.hasExpandableRow && this.handleCloseAllExpandRow();
+    };
+    /**
+     * Whether the row is expandable
+     *
+     * @param {VegaTableDataSourceItem} row - The row data
+     * @returns {boolean} Return true if the row is expandable
+     */
+    this.isExpandableRow = (row) => {
+      return this.expandableRows.includes(this.vegaTableDataSourceController.getRecordKey(row));
     };
     /**
      * Whether the row is expandable
@@ -159,6 +168,12 @@ export class VegaTableExpandRowController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
     remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
   }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    this.setExpandableRows();
+  }
   /**
    * Component lifecycle - componentDidLoad
    */
@@ -169,8 +184,16 @@ export class VegaTableExpandRowController extends VegaSlimmer {
    * The callback to handle [watchRowExpandable]{@link VegaTable.watchRowExpandable}
    */
   watchRowExpandable() {
+    this.setExpandableRows();
     this.handleCloseAllExpandRow();
   }
+  /**
+   * Set the expandable rows based on the rowExpandable prop
+   */
+  watchCurrentData() {
+    this.setExpandableRows();
+    this.clearUnusedExpandRowSlot();
+  }
   /**
    * Initializes row expand observer
    */
@@ -201,6 +224,52 @@ export class VegaTableExpandRowController extends VegaSlimmer {
     return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
       this.host === findParent(input['host'], 'vega-table'));
   }
+  /**
+   * Sets expandable rows and hasExpandableRow based on rowExpandable and currentData
+   */
+  setExpandableRows() {
+    if (typeof this.rowExpandable === 'boolean') {
+      this.expandableRows = this.rowExpandable
+        ? this.currentData.map((item) => this.vegaTableDataSourceController.getRecordKey(item))
+        : [];
+      this.hasExpandableRow = this.rowExpandable;
+    }
+    else if (typeof this.rowExpandable === 'function') {
+      const result = [];
+      this.currentData.forEach((item) => {
+        const rowKey = this.vegaTableDataSourceController.getRecordKey(item);
+        if (this.rowExpandable(rowKey)) {
+          result.push(rowKey);
+        }
+      });
+      this.expandableRows = result;
+      this.hasExpandableRow = result.length > 0;
+    }
+    else {
+      this.expandableRows = [];
+      this.hasExpandableRow = false;
+    }
+  }
+  /**
+   * Whether the row is expandable by rowKey
+   *
+   * @param {string} rowKey - The row key of the row
+   * @returns {boolean} Return true if the row is expandable
+   */
+  isRowExpandable(rowKey) {
+    return this.expandableRows.includes(rowKey);
+  }
+  /**
+   * Clear the expand row slot which is not expandable anymore to avoid confusion,
+   *    this can be triggered by the change of rowExpandable or currentData
+   */
+  clearUnusedExpandRowSlot() {
+    this.expandedRowKeySet.toArray().forEach((rowKey) => {
+      if (!this.isRowExpandable(rowKey)) {
+        this.expandedRowKeySet.delete(rowKey);
+      }
+    });
+  }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
 __decorate([
@@ -209,9 +278,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "expandableRows", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "hasExpandableRow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "currentData", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
@@ -224,6 +302,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableExpandRowController.prototype, "componentWillLoad", null);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
@@ -242,3 +323,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
+__decorate([
+  MapToComponentMethod('watchCurrentData')
+], VegaTableExpandRowController.prototype, "watchCurrentData", null);