@pequity/squirrel 8.4.5 → 8.5.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.4.5",
-  "packageManager": "pnpm@10.13.1",
+  "version": "8.5.0",
+  "packageManager": "pnpm@10.15.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -13,6 +13,7 @@
     "lint": "eslint \"**/*.{vue,ts,js}\"",
     "lint-fix": "eslint --fix \"**/*.{vue,ts,js}\"",
     "test:unit": "vitest --project=unit",
+    "test:unit-nowatch": "vitest run --project=unit",
     "test:unit-coverage": "vitest run --project=unit --coverage && make-coverage-badge",
     "typecheck": "vue-tsc --noEmit",
     "storybook": "storybook dev -p 6006",
@@ -49,57 +50,58 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@pequity/eslint-config": "^2.0.2",
-    "@playwright/test": "^1.54.1",
+    "@pequity/eslint-config": "^2.0.3",
+    "@playwright/test": "^1.55.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^9.0.18",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/addon-links": "^9.0.18",
-    "@storybook/addon-vitest": "^9.0.18",
-    "@storybook/vue3-vite": "^9.0.18",
+    "@storybook/addon-a11y": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-links": "^9.1.4",
+    "@storybook/addon-vitest": "^9.1.4",
+    "@storybook/vue3-vite": "^9.1.4",
     "@tanstack/vue-virtual": "3.13.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.1.0",
+    "@types/node": "^24.3.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "@vue/compiler-sfc": "3.5.18",
+    "@vue/compiler-sfc": "3.5.21",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.32.0",
-    "eslint-plugin-storybook": "^9.0.18",
+    "eslint": "^9.34.0",
+    "eslint-plugin-storybook": "^9.1.4",
     "floating-vue": "5.2.2",
     "glob": "^11.0.3",
     "husky": "^9.1.7",
     "iconify-icon": "^3.0.0",
     "jsdom": "^26.1.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.1.6",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "playwright": "^1.54.1",
+    "playwright": "^1.55.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.89.2",
+    "sass": "^1.92.0",
     "semantic-release": "^24.2.7",
-    "storybook": "^9.0.18",
+    "storybook": "^9.1.4",
     "svgo": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
-    "vite": "^7.0.6",
+    "vite": "^7.1.4",
     "vitest": "^3.2.4",
-    "vue": "3.5.18",
+    "vue": "3.5.21",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "3.0.4"
+    "vue-tsc": "3.0.6"
   },
   "dependencies": {
-    "tailwind-variants": "^1.0.0"
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.0"
   }
 }

package/squirrel/components/p-alert/p-alert.spec.js

@@ -3,10 +3,10 @@ import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PAlert.vue', () => {
   it.each([
-    ['info', ['bg-info', 'text-on-info'], 'streamline:information-circle-solid'],
-    ['warning', ['bg-warning', 'text-on-warning'], 'streamline:warning-triangle-solid'],
-    ['error', ['bg-error', 'text-on-error'], 'streamline:warning-octagon-solid'],
-    ['success', ['bg-success', 'text-on-success'], 'streamline:check-square-solid'],
+    ['info', ['bg-info', 'text-on-info'], 'material-symbols:info-outline'],
+    ['warning', ['bg-warning', 'text-on-warning'], 'warning'],
+    ['error', ['bg-error', 'text-on-error'], 'cancel-circle'],
+    ['success', ['bg-success', 'text-on-success'], 'ok-circle'],
   ])('renders an alert of type %s', async (type, classes, iconName) => {
     const wrapper = createWrapperFor(PAlert, { props: { type }, global: { stubs: { PIcon: true } } });
 

package/squirrel/components/p-alert/p-alert.stories.js

@@ -5,6 +5,13 @@ export default {
   title: 'Components/PAlert',
   component: PAlert,
   tags: ['autodocs'],
+  render: (args) => ({
+    components: { PAlert },
+    setup() {
+      return { args };
+    },
+    template: `<PAlert v-bind="args">${args.default}</PAlert>`,
+  }),
   argTypes: {
     type: {
       control: { type: 'select' },
@@ -22,16 +29,10 @@ export default {
 };
 
 export const Info = {
-  render: (args) => ({
-    components: { PAlert },
-    setup() {
-      return { args };
-    },
-    template: `<PAlert v-bind="args">${args.default}</PAlert>`,
-  }),
   args: {
     type: 'info',
-    default: 'Lorem ipsum dolor sit amet',
+    default:
+      'Your account has been updated with the latest security features.<br />Two-factor authentication is now enabled for enhanced protection.',
   },
 };
 
@@ -39,28 +40,33 @@ Info.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const alertDiv = await canvas.getByRole('alert');
 
-  await expect(alertDiv.innerText).toBe('Lorem ipsum dolor sit amet');
-  await expect(alertDiv).toHaveClass('p-4 rounded text-xs font-semibold bg-info text-on-info');
+  await expect(alertDiv.innerText).toBe(
+    'Your account has been updated with the latest security features.\nTwo-factor authentication is now enabled for enhanced protection.'
+  );
+  await expect(alertDiv).toHaveClass('p-4 rounded-lg text-xs font-semibold bg-info text-on-info');
   await expect(alertDiv).toHaveStyle('background-color: #e4edfa');
 };
 
 export const Success = {
   args: {
-    ...Info.args,
     type: 'success',
+    default:
+      'Your profile has been successfully updated and changes are now live.<br />Other team members can now see your updated information.',
   },
 };
 
 export const Warning = {
   args: {
-    ...Info.args,
     type: 'warning',
+    default:
+      'You have unsaved changes that will be lost if you navigate away from this page.<br />Make sure to save your work before continuing.',
   },
 };
 
 export const Error = {
   args: {
-    ...Info.args,
     type: 'error',
+    default:
+      'Failed to save changes. Please check your internet connection and try again.<br />If the problem persists, contact support at help@pequity.com.',
   },
 };

package/squirrel/components/p-alert/p-alert.vue

@@ -1,11 +1,9 @@
 <template>
-  <div :class="['rounded p-4 text-xs font-semibold', ALERT_TYPES[props.type].classes]" role="alert">
-    <div class="flex">
-      <div class="pr-2">
-        <slot name="icon">
-          <PIcon :icon="ALERT_TYPES[props.type].icon" width="16" class="-mb-0.5" inline />
-        </slot>
-      </div>
+  <div :class="['rounded-lg p-4 text-xs font-semibold', ALERT_TYPES[props.type].classes]" role="alert">
+    <div class="flex items-center gap-4">
+      <slot name="icon">
+        <PIcon :icon="ALERT_TYPES[props.type].icon" width="20" />
+      </slot>
       <div>
         <slot></slot>
       </div>
@@ -18,10 +16,10 @@ import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { type PropType } from 'vue';
 
 const ALERT_TYPES = {
-  info: { classes: `bg-info text-on-info`, icon: 'streamline:information-circle-solid' },
-  warning: { classes: `bg-warning text-on-warning`, icon: 'streamline:warning-triangle-solid' },
-  error: { classes: `bg-error text-on-error`, icon: 'streamline:warning-octagon-solid' },
-  success: { classes: `bg-success text-on-success`, icon: 'streamline:check-square-solid' },
+  info: { classes: `bg-info text-on-info`, icon: 'material-symbols:info-outline' },
+  warning: { classes: `bg-warning text-on-warning`, icon: 'warning' },
+  error: { classes: `bg-error text-on-error`, icon: 'cancel-circle' },
+  success: { classes: `bg-success text-on-success`, icon: 'ok-circle' },
 };
 </script>
 

package/squirrel/components/p-icon/p-icon.types.ts

@@ -35,6 +35,7 @@ export const P_ICON_ALIASES = {
   info: 'streamline:information-circle',
   help: 'ph:question',
   search: 'streamline:magnifying-glass-solid',
+  warning: 'ri:error-warning-line',
 } as const;
 
 export type PIconAlias = keyof typeof P_ICON_ALIASES;

package/squirrel/components/p-modal/p-modal-basic.spec.js

@@ -1,5 +1,5 @@
 import PModal from '@squirrel/components/p-modal/p-modal.vue';
-import { waitRAF } from '@tests/vitest.helpers';
+import { waitNT, waitRAF } from '@tests/vitest.helpers';
 import { mount } from '@vue/test-utils';
 
 const createWrapperContainer = (componentArgs) => {
@@ -85,18 +85,44 @@ describe('Modal basic functionality', () => {
     await wrapper.setData({ showModal: true });
 
     expect(wrapper.find('[data-pm-id]').classes()).toEqual(
-      'pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl'.split(' ')
+      'pm relative flex flex-col rounded-2xl cursor-default bg-surface shadow-xl pb-6'.split(' ')
     );
 
     wrapper.unmount();
   });
 
+  it('sets the correct base modal class when modal-wrapper slot is used', async () => {
+    const wrapper = mount(PModal, {
+      attachTo: document.body,
+      global: {
+        stubs: {
+          transition: true,
+          teleport: true,
+        },
+      },
+      props: {
+        modelValue: true,
+      },
+      slots: {
+        'modal-wrapper': '<div>Modal content goes here...</div>',
+      },
+    });
+
+    await waitNT(wrapper.vm);
+
+    const modalContent = wrapper.find('[data-pm-id]');
+
+    expect(modalContent.classes()).not.toContain('pb-6');
+
+    wrapper.unmount();
+  });
+
   it('passes the modalBaseClass prop to the modal', async () => {
     const wrapper = createWrapperContainer({ modalBaseClass: 'custom-class' });
 
     await wrapper.setData({ showModal: true });
 
-    expect(wrapper.find('[data-pm-id]').classes()).toEqual(['custom-class']);
+    expect(wrapper.find('[data-pm-id]').classes()).toEqual(['custom-class', 'pb-6']);
 
     wrapper.unmount();
   });

package/squirrel/components/p-modal/p-modal.vue

@@ -29,40 +29,47 @@
         @click="overlayClick($event)"
         @keydown="keydown($event)"
       >
-        <div ref="pm" :data-pm-id="id" :class="[modalBaseClass, modalClass]" :style="modalStyle">
-          <slot name="title-wrapper">
-            <div class="flex pb-4 pl-8 pr-4 pt-4">
-              <h3 v-if="title" :id="`${id}-title`" class="mr-auto pt-4 text-xl font-semibold">
-                {{ title }}
-              </h3>
-              <div class="ml-auto">
-                <PCloseBtn
-                  :disabled="disabled"
-                  :class="{ invisible: !enableClose }"
-                  :aria-label="closeLabel"
-                  @click.prevent="close"
-                />
+        <div
+          ref="pm"
+          :data-pm-id="id"
+          :class="[modalBaseClass, modalClass, { 'pb-6': !$slots['modal-wrapper'] }]"
+          :style="modalStyle"
+        >
+          <slot name="modal-wrapper">
+            <slot name="title-wrapper">
+              <div class="flex pb-4 pl-8 pr-4 pt-4">
+                <h3 v-if="title" :id="`${id}-title`" class="mr-auto pt-4 text-xl font-semibold">
+                  {{ title }}
+                </h3>
+                <div class="ml-auto">
+                  <PCloseBtn
+                    :disabled="disabled"
+                    :class="{ invisible: !enableClose }"
+                    :aria-label="closeLabel"
+                    @click.prevent="close"
+                  />
+                </div>
               </div>
+            </slot>
+            <div v-if="errorMsg" class="mb-4 px-8">
+              <PAlert type="error">{{ errorMsg }}</PAlert>
             </div>
-          </slot>
-          <div v-if="errorMsg" class="mb-4 px-8">
-            <PAlert type="error">{{ errorMsg }}</PAlert>
-          </div>
-          <slot name="content-wrapper">
-            <div
-              :id="`${id}-content`"
-              :class="[
-                'relative grow overflow-y-auto overflow-x-hidden px-8',
-                { 'pointer-events-none opacity-50': disabled },
-              ]"
-            >
-              <slot></slot>
-            </div>
-          </slot>
-          <slot name="footer-wrapper">
-            <div v-if="$slots.footer" class="px-8 pt-6">
-              <slot name="footer"></slot>
-            </div>
+            <slot name="content-wrapper">
+              <div
+                :id="`${id}-content`"
+                :class="[
+                  'relative grow overflow-y-auto overflow-x-hidden px-8',
+                  { 'pointer-events-none opacity-50': disabled },
+                ]"
+              >
+                <slot></slot>
+              </div>
+            </slot>
+            <slot name="footer-wrapper">
+              <div v-if="$slots.footer" class="px-8 pt-6">
+                <slot name="footer"></slot>
+              </div>
+            </slot>
           </slot>
         </div>
       </div>
@@ -106,6 +113,10 @@ defineSlots<{
    * Default content slot for the modal body.
    */
   default?: () => unknown;
+  /**
+   * Custom modal wrapper content.
+   */
+  'modal-wrapper'?: () => unknown;
   /**
    * Custom title wrapper content.
    */
@@ -209,7 +220,7 @@ const props = defineProps({
    */
   modalBaseClass: {
     type: [String, Object, Array] as PropType<StyleValue>,
-    default: 'pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl',
+    default: 'pm relative flex flex-col rounded-2xl cursor-default bg-surface shadow-xl',
   },
   /**
    * Additional CSS classes for the modal content.

package/squirrel/components/p-table/p-table.spec.js

@@ -354,6 +354,57 @@ describe('PTable.vue', () => {
     expect(wrapper.findAll('tbody div')[2].text()).toBe('true');
   });
 
+  it('renders correctly with column resizing enabled', async () => {
+    const cols = cloneDeep(columns);
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols, colsResizable: true },
+      global: {
+        stubs: {
+          PTableHeaderCell: { template: `<div class="header-cell-stub">{{ text }}</div>`, props: { text: '' } },
+        },
+      },
+    });
+
+    // Should have resize handles for middle columns (not first, not last when isLastColFixed)
+    const resizeHandles = wrapper.findAll('[data-resize-handle]');
+    expect(resizeHandles.length).toBe(cols.length - 1); // All columns except first
+
+    // Should have extra th for column resizing when not isLastColFixed
+    const extraTh = wrapper.find('thead th:last-child');
+    expect(extraTh.classes()).toContain('min-w-[80px]');
+    expect(extraTh.classes()).toContain('bg-gradient-to-r');
+  });
+
+  it('renders correctly with subheader', async () => {
+    const cols = cloneDeep(columns);
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols, subheader: true, isFirstColFixed: true, isLastColFixed: true },
+      slots: {
+        'subheader-cell-first-column': `<div class="subheader-content">Subheader 1</div>`,
+        'subheader-cell-third-column': `<div class="subheader-content">Subheader 3</div>`,
+      },
+      global: {
+        stubs: {
+          PTableHeaderCell: { template: `<div class="header-cell-stub">{{ text }}</div>`, props: { text: '' } },
+        },
+      },
+    });
+
+    // Check subheader divs exist
+    const subheaderDivs = wrapper.findAll('.subheader-content');
+    expect(subheaderDivs.length).toBe(2);
+    expect(subheaderDivs[0].text()).toBe('Subheader 1');
+    expect(subheaderDivs[1].text()).toBe('Subheader 3');
+
+    // Check subheader classes include th-shadow for fixed columns
+    cols.forEach((col, i) => {
+      const subheaderDiv = wrapper.find(`th[data-col-id="${col.id}"] > div:last-child`);
+      if (i === 0 || i === cols.length - 1) {
+        expect(subheaderDiv.classes()).toContain('th-shadow');
+      }
+    });
+  });
+
   it('shows additional rows when the virtualizer padding options are set', async () => {
     const cols = cloneDeep(columns);
     const wrapper = createWrapperFor(PTable, {
@@ -374,19 +425,4 @@ describe('PTable.vue', () => {
     expect(wrapper.find('table tbody tr:last-child > td').attributes().style).toEqual('height: 100px;');
     expect(wrapper.find('table tbody tr:last-child').classes()).toEqual([]);
   });
-
-  it('sets th refs correctly', async () => {
-    const cols = cloneDeep(columns);
-    const wrapper = createWrapperFor(PTable, { props: { cols } });
-
-    const thsRefs = wrapper.vm.ths;
-
-    expect(thsRefs.length).toBe(3);
-    thsRefs.forEach((thRef, i) => {
-      const thClasses = [...thRef.classList];
-
-      expect(thClasses).toContain(cols[i].thAttrs.class);
-      expect(thRef instanceof HTMLTableCellElement).toBe(true);
-    });
-  });
 });

package/squirrel/components/p-table/p-table.types.ts

@@ -26,3 +26,5 @@ export const isLastColFixedInjectionKey = Symbol('isLastColFixed');
 export const isColsResizableInjectionKey = Symbol('isColsResizable');
 
 export const MIN_WIDTH_COL_RESIZE = 80;
+
+export const HEADER_CELL_ONE_LINE_HEIGHT = 20;

package/squirrel/components/p-table/p-table.vue

@@ -21,7 +21,7 @@
       ]"
       v-on="colsResizable ? { mousemove: colResize } : {}"
     >
-      <thead>
+      <thead ref="theadRef">
         <tr>
           <th
             v-for="(col, i) in props.cols"
@@ -33,7 +33,7 @@
             class="bg-surface"
           >
             <div :class="thDivClasses(i)" :style="bgColorStyle(col)">
-              <div class="flex">
+              <div :class="['flex', { 'h-10': hasWrap }]">
                 <slot :name="`prepend-header-cell-${kebabCase(col.name)}`" :col="col" />
                 <PTableHeaderCell
                   :text="col.title"
@@ -48,7 +48,7 @@
               </div>
               <div
                 v-if="colsResizable && i !== 0 && !(i === cols.length - 1 && isLastColFixed)"
-                class="absolute bottom-2 right-0 z-110 h-5 w-2 cursor-col-resize after:absolute after:bottom-0 after:z-110 after:block after:h-full after:w-2 after:cursor-col-resize after:border-r-2 after:border-dashed after:border-p-gray-30"
+                class="absolute right-0 top-1/2 z-110 h-5 w-2 -translate-y-1/2 cursor-col-resize after:absolute after:bottom-0 after:z-110 after:block after:h-full after:w-2 after:cursor-col-resize after:border-r-2 after:border-dashed after:border-p-gray-30"
                 :class="i === cols.length - 1 ? 'after:right-0.5' : 'after:right-0'"
                 data-resize-handle
                 @mousedown="colResizeStart($event, i)"
@@ -108,10 +108,11 @@ import {
   type TableCol,
 } from '@squirrel/components/p-table/p-table.types';
 import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
+import { usePTableHeaderWrap } from '@squirrel/components/p-table/usePTableHeaderWrap';
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
 import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import { kebabCase } from 'lodash-es';
-import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, provide, ref, useTemplateRef, watch } from 'vue';
 
 type Props = {
   /**
@@ -209,6 +210,7 @@ provide(
 
 // Data
 const scrollWrapper = ref<HTMLElement | null>(null);
+const theadRef = useTemplateRef('theadRef');
 const ths = ref<HTMLElement[]>([]);
 const {
   isColResizing,
@@ -222,6 +224,7 @@ const {
   enabled: computed(() => props.colsResizable),
   ths,
 });
+const { hasWrap } = usePTableHeaderWrap(theadRef);
 const tbodyElement = ref<HTMLElement | null>(null);
 
 // Methods

package/squirrel/components/p-table/usePTableHeaderWrap.spec.js

@@ -0,0 +1,118 @@
+import { HEADER_CELL_ONE_LINE_HEIGHT } from '@squirrel/components/p-table/p-table.types';
+import { usePTableHeaderWrap } from '@squirrel/components/p-table/usePTableHeaderWrap';
+import { waitNT } from '@tests/vitest.helpers';
+import { mount } from '@vue/test-utils';
+import { defineComponent, useTemplateRef } from 'vue';
+
+// Mock ResizeObserver to capture the composable's callback
+let composableResizeCallback;
+const mockResizeObserver = vi.fn((callback) => {
+  composableResizeCallback = callback;
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
+
+const createWrapper = (refName = 'theadRef') => {
+  const TestComponent = defineComponent({
+    setup() {
+      const theadRef = useTemplateRef('theadRef');
+      const { hasWrap } = usePTableHeaderWrap(theadRef);
+
+      return {
+        theadRef,
+        hasWrap,
+      };
+    },
+    template: `
+      <table>
+        <thead ref="${refName}" :data-has-wrap="hasWrap">
+          <tr>
+            <th>
+              <div data-p-table-header-text class="div-to-resize">Short</div>
+            </th>
+            <th>
+              <span data-p-table-header-text>Very Long Header That Could Potentially Wrap To Multiple Lines</span>
+            </th>
+          </tr>
+        </thead>
+      </table>
+    `,
+  });
+
+  return mount(TestComponent, {
+    attachTo: document.body,
+  });
+};
+
+describe('usePTableHeaderWrap', () => {
+  const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
+  const originalGlobalResizeObserver = globalThis.ResizeObserver;
+
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: HEADER_CELL_ONE_LINE_HEIGHT,
+    });
+    globalThis.ResizeObserver = mockResizeObserver;
+  });
+
+  afterAll(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
+    globalThis.ResizeObserver = originalGlobalResizeObserver;
+  });
+
+  beforeEach(() => {
+    mockResizeObserver.mockClear();
+    composableResizeCallback = null;
+  });
+
+  it('should have hasWrap false when all divs are single line height', async () => {
+    const wrapper = createWrapper();
+
+    // Trigger the composable's ResizeObserver callback
+    if (composableResizeCallback) {
+      composableResizeCallback();
+      await waitNT(wrapper.vm);
+    }
+
+    expect(wrapper.find('thead').attributes()['data-has-wrap']).toBe('false');
+
+    wrapper.unmount();
+  });
+
+  it('should have hasWrap true when one div is double line height', async () => {
+    // Override offsetHeight for the "div-to-resize" element
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get() {
+        if (this.classList.contains('div-to-resize')) {
+          return HEADER_CELL_ONE_LINE_HEIGHT * 2;
+        }
+        return HEADER_CELL_ONE_LINE_HEIGHT;
+      },
+    });
+
+    const wrapper = createWrapper();
+
+    // Trigger the composable's ResizeObserver callback
+    if (composableResizeCallback) {
+      composableResizeCallback();
+      await waitNT(wrapper.vm);
+    }
+
+    expect(wrapper.find('thead').attributes()['data-has-wrap']).toBe('true');
+
+    wrapper.unmount();
+  });
+
+  it('should handle null theadRef gracefully', () => {
+    const wrapper = createWrapper('nullRef');
+
+    expect(wrapper.find('thead').attributes()['data-has-wrap']).toBe('false');
+
+    wrapper.unmount();
+  });
+});