fix: cv-data-table expandable rows not reactive

src/components/CvDataTable/CvDataTable.vue

@@ -132,7 +132,7 @@
             <thead>
               <tr>
                 <th
-                  v-if="hasExpandables"
+                  v-if="hasExpandingRows"
                   :class="`${carbonPrefix}--table-expand`"
                   :data-previous-value="
                     dataExpandAll ? 'collapsed' : 'expanded'
@@ -181,7 +181,7 @@
               </tr>
             </thead>
 
-            <component :is="hasExpandables ? Empty : 'tbody'">
+            <component :is="hasExpandingRows ? Empty : 'tbody'">
               <slot name="data">
                 <cv-data-table-row
                   v-for="(row, rowIndex) in data"
@@ -246,8 +246,10 @@ import {
   unref,
   useSlots,
   watch,
+  provide,
 } from 'vue';
 import { props as propsCvId, useCvId } from '../../use/cvId';
+//TODO: Remove this store and replace with provide/inject
 import store from './cvDataTableStore';
 import Empty from '../CvEmpty/_CvEmpty.vue';
 
@@ -316,6 +318,8 @@ const props = defineProps({
    * can be sorted
    */
   sortable: { type: Boolean, default: false },
+  /** Table will have expandable rows */
+  expandable: { type: Boolean, default: false },
   title: { type: String, default: undefined },
   /**
    * An array containing a list of columns
@@ -375,14 +379,32 @@ watch(() => props.rowsSelected, updateRowsSelected);
 const searchContainer = ref(null);
 const magnifier = ref(null);
 const search = ref(null);
+
+/** @type {Ref<Set<String>>} */
+const expandingRowIds = ref(new Set());
+const hasExpandingRows = computed(() => {
+  return expandingRowIds.value.size > 0;
+});
+provide('expanding-row-ids', expandingRowIds);
+provide('has-expanding-rows', hasExpandingRows);
+onMounted(() => {
+  if (props.expandable) expandingRowIds.value.add('table-expand-row');
+});
+watch(
+  () => props.expandable,
+  () => {
+    if (props.expandable) expandingRowIds.value.add('table-expand-row');
+    else expandingRowIds.value.delete('table-expand-row');
+  }
+);
+
 onMounted(() => {
   if (searchContainer.value) {
     magnifier.value?.addEventListener('blur', checkSearchFocus);
     search.value?.addEventListener('blur', checkSearchFocus);
   }
   if (props.initialSearchValue) clearSearchVisible.value = true;
   updateRowsSelected();
-  store.setSomeExpandingRows(uid);
 });
 
 onUnmounted(() => {
@@ -428,6 +450,7 @@ const isSortable = computed(() => {
   // is any column sortable
   return props.sortable || store.someSortableHeadings(uid.value);
 });
+
 function isColSortable(c) {
   const col = unref(c);
   // is specific column or all sortable
@@ -439,10 +462,6 @@ const hasTableHeader = computed(() => {
   return props.title || isHelper.value;
 });
 
-const hasExpandables = computed(() => {
-  return store.someExpandingRows(uid);
-});
-
 const hasOverflowMenu = computed(() => {
   return (
     props.overflowMenu === true ||

src/components/CvDataTable/CvDataTableRow.vue

@@ -53,6 +53,7 @@ import {
   useAttrs,
   useSlots,
   watch,
+  inject,
 } from 'vue';
 import store from './cvDataTableStore';
 import { getBus } from '../../global/component-utils/event-bus';
@@ -63,7 +64,16 @@ const props = defineProps({
 });
 const cvId = useCvId(props, true);
 
+/** @type {Ref<Set<String>>} */
+const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
 const dataExpandable = ref(false);
+watch(dataExpandable, () => {
+  if (dataExpandable.value) expandingRowIds.value?.add(cvId.value);
+  else expandingRowIds.value?.delete(cvId.value);
+});
+const dataSomeExpandingRows = computed(() => {
+  return expandingRowIds.value?.size > 0;
+});
 
 const attrs = useAttrs();
 const slots = useSlots();
@@ -118,9 +128,7 @@ watch(
     });
   }
 );
-const dataSomeExpandingRows = computed(() => {
-  return store.someExpandingRows(parent);
-});
+
 function onExpandedChange(val) {
   const row = store.findRow(parent, cvId);
   store.updateRow(parent, {

src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -21,7 +21,6 @@
       >
         <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
       </button>
-      <div v-else>{{ expandingRow }}</div>
     </td>
     <td
       v-if="hasBatchActions"
@@ -66,7 +65,15 @@ import CvCheckbox from '../CvCheckbox';
 import CvOverflowMenu from '../CvOverflowMenu';
 import CvOverflowMenuItem from '../CvOverflowMenu/CvOverflowMenuItem.vue';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import { computed, onMounted, onUpdated, ref, useSlots, watch } from 'vue';
+import {
+  computed,
+  onMounted,
+  onUpdated,
+  ref,
+  useSlots,
+  watch,
+  inject,
+} from 'vue';
 import store from './cvDataTableStore';
 import { getBus } from '../../global/component-utils/event-bus';
 
@@ -82,8 +89,10 @@ const props = defineProps({
   rowId: { type: String, default: undefined },
 });
 
+/** @type {Ref<UnwrapRef<Set<>>>} */
+const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
 const dataSomeExpandingRows = computed(() => {
-  return store.someExpandingRows(parent);
+  return expandingRowIds.value.size > 0;
 });
 
 const overflowMenuButtons = computed(() => {

src/components/CvDataTable/cvDataTableStore.js

@@ -1,3 +1,4 @@
+//TODO: Remove this store and replace with provide/inject
 import { reactive, unref } from 'vue';
 let loggerEnabled = false;
 try {

src/components/CvDatePicker/__tests__/CvDatePicker.spec.js

@@ -12,6 +12,9 @@ describe('CvDatePicker', () => {
       attrs: {
         onchange: handler,
       },
+      props: {
+        dateLabel: 'XYZ-ABC-Label',
+      },
     });
 
     const datepicker = await result.findByRole('datepicker');
@@ -46,6 +49,7 @@ describe('CvDatePicker', () => {
     const result = render(CvDatePicker, {
       props: {
         kind: 'single',
+        dateLabel: 'XYZ-ABC-Label',
       },
       attrs: {
         onchange: handler,
@@ -77,6 +81,28 @@ describe('CvDatePicker', () => {
       now.toLocaleDateString('en')
     );
     expect(handler).toHaveBeenCalled();
+
+    // Verify label state
+    result.getByLabelText('XYZ-ABC-Label');
+    const carbonContainer = result.container.querySelector(
+      '.bx--date-picker-container'
+    );
+    expect(
+      carbonContainer.classList.contains('bx--date-picker-container')
+    ).toBeTruthy();
+    expect(
+      carbonContainer.classList.contains('bx--date-picker--nolabel')
+    ).toBeFalsy();
+
+    await result.rerender({ dateLabel: '' });
+    expect(
+      carbonContainer.classList.contains('bx--date-picker--nolabel')
+    ).toBeTruthy();
+
+    await result.rerender({ dateLabel: undefined });
+    expect(
+      carbonContainer.classList.contains('bx--date-picker--nolabel')
+    ).toBeFalsy();
   });
 
   it('CvDatePicker - test range with datepicker', async () => {