@pequity/squirrel 5.4.3 → 5.4.5

package/dist/cjs/chunks/p-dropdown-select.js

@@ -151,6 +151,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     selectedTopShown: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+      type: String,
+      default: "disabled"
     }
   },
   emits: ["update:modelValue", "select"],
@@ -181,6 +188,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const {
       LIST_ITEM_CLASS,
       LIST_ITEM_ACTIVE_CLASS,
+      LIST_ITEM_DISABLED_CLASS,
       selectedItems,
       computedItems,
       computedItemSize,
@@ -192,6 +200,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       getValue,
       getText,
       isSelected,
+      isDisabled,
       setupNavigationSvc,
       destroyNavigationSvc,
       select,
@@ -340,7 +349,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       style: vue.normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
                     }, [
                       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                        class: vue.normalizeClass([vue.unref(LIST_ITEM_CLASS), { [vue.unref(LIST_ITEM_ACTIVE_CLASS)]: vue.unref(isSelected)(vue.unref(getValue)(row.index)) }]),
+                        class: vue.normalizeClass([
+                          vue.unref(LIST_ITEM_CLASS),
+                          {
+                            [vue.unref(LIST_ITEM_ACTIVE_CLASS)]: vue.unref(isSelected)(vue.unref(getValue)(row.index)),
+                            [vue.unref(LIST_ITEM_DISABLED_CLASS)]: vue.unref(isDisabled)(vue.unref(computedItems)[row.index])
+                          }
+                        ]),
                         "p-select-list-option-item": "",
                         style: vue.normalizeStyle(listItemStyle.value),
                         onClick: ($event) => vue.unref(select)($event, vue.unref(getValue)(row.index))

package/dist/cjs/index.js

@@ -452,6 +452,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     focusSearchOnMount: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+      type: String,
+      default: "disabled"
     }
   },
   emits: ["update:modelValue", "select"],
@@ -468,6 +475,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     const {
       LIST_ITEM_CLASS,
       LIST_ITEM_ACTIVE_CLASS,
+      LIST_ITEM_DISABLED_CLASS,
       selectedItems,
       computedItems,
       computedItemSize,
@@ -478,6 +486,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       getValue,
       getText,
       isSelected,
+      isDisabled,
       setupNavigationSvc,
       select,
       onFocus,
@@ -591,7 +600,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
                   style: vue.normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
                 }, [
                   vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                    class: vue.normalizeClass([vue.unref(LIST_ITEM_CLASS), { [vue.unref(LIST_ITEM_ACTIVE_CLASS)]: vue.unref(isSelected)(vue.unref(getValue)(row.index)) }]),
+                    class: vue.normalizeClass([
+                      vue.unref(LIST_ITEM_CLASS),
+                      {
+                        [vue.unref(LIST_ITEM_ACTIVE_CLASS)]: vue.unref(isSelected)(vue.unref(getValue)(row.index)),
+                        [vue.unref(LIST_ITEM_DISABLED_CLASS)]: vue.unref(isDisabled)(vue.unref(computedItems)[row.index])
+                      }
+                    ]),
                     "p-select-list-option-item": "",
                     style: vue.normalizeStyle(listItemStyle.value),
                     onClick: ($event) => vue.unref(select)($event, vue.unref(getValue)(row.index))

package/dist/cjs/usePTableRowVirtualizer.js

@@ -20,10 +20,12 @@ const usePTableRowVirtualizer = (options) => {
   );
   const measureElement = (cmp) => {
     const el = vue.isRef(cmp) ? vue.unref(cmp) : cmp == null ? void 0 : cmp.$el;
-    if (!el) {
-      return;
-    }
-    virtualizer.value.measureElement(el);
+    vue.nextTick(() => {
+      if (!el) {
+        return;
+      }
+      virtualizer.value.measureElement(el);
+    });
     return void 0;
   };
   return { virtualizer, virtualRows, paddingTop, paddingBottom, measureElement };

package/dist/cjs/useSelectList.js

@@ -30,6 +30,7 @@ const nextLoop = (ms) => new Promise((resolve) => setTimeout(resolve, ms || 0));
 const LIST_ITEM_SIZES = { sm: 32, md: 40, lg: 48 };
 const LIST_ITEM_CLASS = "clear-both block w-full cursor-pointer whitespace-nowrap py-1 px-3 text-left text-sm font-medium hover:bg-p-blue-10";
 const LIST_ITEM_ACTIVE_CLASS = "selected";
+const LIST_ITEM_DISABLED_CLASS = "opacity-30 pointer-events-none";
 const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   let navigationSvc = null;
   const internalItems = vue.ref([]);
@@ -151,6 +152,13 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   const isSelected = (val) => {
     return internalValue.value.includes(val);
   };
+  const isDisabled = (val) => {
+    const disabledProp = props.disabledBy;
+    if (val && typeof val === "object" && disabledProp in val) {
+      return val[disabledProp];
+    }
+    return false;
+  };
   const setupNavigationSvc = () => {
     if (navigationSvc) {
       navigationSvc.init();
@@ -231,6 +239,7 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     LIST_ITEM_SIZES,
     LIST_ITEM_CLASS,
     LIST_ITEM_ACTIVE_CLASS,
+    LIST_ITEM_DISABLED_CLASS,
     selectedItems,
     computedItems,
     computedItemSize,
@@ -242,6 +251,7 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     getValue,
     getText,
     isSelected,
+    isDisabled,
     setupNavigationSvc,
     destroyNavigationSvc,
     select,

package/dist/es/chunks/p-dropdown-select.js

@@ -150,6 +150,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     selectedTopShown: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+      type: String,
+      default: "disabled"
     }
   },
   emits: ["update:modelValue", "select"],
@@ -180,6 +187,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const {
       LIST_ITEM_CLASS,
       LIST_ITEM_ACTIVE_CLASS,
+      LIST_ITEM_DISABLED_CLASS,
       selectedItems,
       computedItems,
       computedItemSize,
@@ -191,6 +199,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getValue,
       getText,
       isSelected,
+      isDisabled,
       setupNavigationSvc,
       destroyNavigationSvc,
       select,
@@ -339,7 +348,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       style: normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
                     }, [
                       withDirectives((openBlock(), createElementBlock("div", {
-                        class: normalizeClass([unref(LIST_ITEM_CLASS), { [unref(LIST_ITEM_ACTIVE_CLASS)]: unref(isSelected)(unref(getValue)(row.index)) }]),
+                        class: normalizeClass([
+                          unref(LIST_ITEM_CLASS),
+                          {
+                            [unref(LIST_ITEM_ACTIVE_CLASS)]: unref(isSelected)(unref(getValue)(row.index)),
+                            [unref(LIST_ITEM_DISABLED_CLASS)]: unref(isDisabled)(unref(computedItems)[row.index])
+                          }
+                        ]),
                         "p-select-list-option-item": "",
                         style: normalizeStyle(listItemStyle.value),
                         onClick: ($event) => unref(select)($event, unref(getValue)(row.index))

package/dist/es/index.js

@@ -452,6 +452,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     focusSearchOnMount: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+      type: String,
+      default: "disabled"
     }
   },
   emits: ["update:modelValue", "select"],
@@ -468,6 +475,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const {
       LIST_ITEM_CLASS,
       LIST_ITEM_ACTIVE_CLASS,
+      LIST_ITEM_DISABLED_CLASS,
       selectedItems,
       computedItems,
       computedItemSize,
@@ -478,6 +486,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       getValue,
       getText,
       isSelected,
+      isDisabled,
       setupNavigationSvc,
       select,
       onFocus,
@@ -591,7 +600,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   style: normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
                 }, [
                   withDirectives((openBlock(), createElementBlock("div", {
-                    class: normalizeClass([unref(LIST_ITEM_CLASS), { [unref(LIST_ITEM_ACTIVE_CLASS)]: unref(isSelected)(unref(getValue)(row.index)) }]),
+                    class: normalizeClass([
+                      unref(LIST_ITEM_CLASS),
+                      {
+                        [unref(LIST_ITEM_ACTIVE_CLASS)]: unref(isSelected)(unref(getValue)(row.index)),
+                        [unref(LIST_ITEM_DISABLED_CLASS)]: unref(isDisabled)(unref(computedItems)[row.index])
+                      }
+                    ]),
                     "p-select-list-option-item": "",
                     style: normalizeStyle(listItemStyle.value),
                     onClick: ($event) => unref(select)($event, unref(getValue)(row.index))

package/dist/es/usePTableRowVirtualizer.js

@@ -1,4 +1,4 @@
-import { ref, computed, isRef, unref } from "vue";
+import { ref, computed, isRef, unref, nextTick } from "vue";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 const usePTableRowVirtualizer = (options) => {
   if (!options.value) {
@@ -18,10 +18,12 @@ const usePTableRowVirtualizer = (options) => {
   );
   const measureElement = (cmp) => {
     const el = isRef(cmp) ? unref(cmp) : cmp == null ? void 0 : cmp.$el;
-    if (!el) {
-      return;
-    }
-    virtualizer.value.measureElement(el);
+    nextTick(() => {
+      if (!el) {
+        return;
+      }
+      virtualizer.value.measureElement(el);
+    });
     return void 0;
   };
   return { virtualizer, virtualRows, paddingTop, paddingBottom, measureElement };

package/dist/es/useSelectList.js

@@ -28,6 +28,7 @@ const nextLoop = (ms) => new Promise((resolve) => setTimeout(resolve, ms || 0));
 const LIST_ITEM_SIZES = { sm: 32, md: 40, lg: 48 };
 const LIST_ITEM_CLASS = "clear-both block w-full cursor-pointer whitespace-nowrap py-1 px-3 text-left text-sm font-medium hover:bg-p-blue-10";
 const LIST_ITEM_ACTIVE_CLASS = "selected";
+const LIST_ITEM_DISABLED_CLASS = "opacity-30 pointer-events-none";
 const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   let navigationSvc = null;
   const internalItems = ref([]);
@@ -149,6 +150,13 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   const isSelected = (val) => {
     return internalValue.value.includes(val);
   };
+  const isDisabled = (val) => {
+    const disabledProp = props.disabledBy;
+    if (val && typeof val === "object" && disabledProp in val) {
+      return val[disabledProp];
+    }
+    return false;
+  };
   const setupNavigationSvc = () => {
     if (navigationSvc) {
       navigationSvc.init();
@@ -229,6 +237,7 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     LIST_ITEM_SIZES,
     LIST_ITEM_CLASS,
     LIST_ITEM_ACTIVE_CLASS,
+    LIST_ITEM_DISABLED_CLASS,
     selectedItems,
     computedItems,
     computedItemSize,
@@ -240,6 +249,7 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     getValue,
     getText,
     isSelected,
+    isDisabled,
     setupNavigationSvc,
     destroyNavigationSvc,
     select,

package/dist/squirrel/components/p-dropdown-select/p-dropdown-select.vue.d.ts

@@ -335,6 +335,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -454,6 +461,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -478,6 +492,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     multiple: boolean;
     placeholderSearch: string;
     selectedTopShown: boolean;
+    disabledBy: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/squirrel/components/p-select-list/p-select-list.vue.d.ts

@@ -331,6 +331,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -449,6 +456,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -469,6 +483,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     multiple: boolean;
     placeholderSearch: string;
     selectedTopShown: boolean;
+    disabledBy: string;
     topSectionClass: string;
     closePopperOnSelect: boolean;
     focusSearchOnMount: boolean;

package/dist/squirrel/components/p-select-list/useSelectList.d.ts

@@ -16,6 +16,7 @@ type Props = {
     searchable: boolean;
     multiple: boolean;
     selectedTopShown: boolean;
+    disabledBy: string;
 };
 type InputSearch = Ref<ComponentPublicInstance | null>;
 type VirtualizerRef = Ref<HTMLElement | null>;
@@ -27,6 +28,7 @@ export declare const useSelectList: (props: Props, inputSearch: InputSearch, vir
     };
     LIST_ITEM_CLASS: string;
     LIST_ITEM_ACTIVE_CLASS: string;
+    LIST_ITEM_DISABLED_CLASS: string;
     selectedItems: import("vue").ComputedRef<AnyObject[]>;
     computedItems: import("vue").ComputedRef<AnyObject[]>;
     computedItemSize: import("vue").ComputedRef<number>;
@@ -38,6 +40,7 @@ export declare const useSelectList: (props: Props, inputSearch: InputSearch, vir
     getValue: (index: number) => AnyValue;
     getText: (index: number) => AnyValue;
     isSelected: (val: AnyValue) => boolean;
+    isDisabled: (val: AnyValue) => unknown;
     setupNavigationSvc: () => void;
     destroyNavigationSvc: () => void;
     select: (e: Event, val: AnyValue) => Promise<void>;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.3",
-  "packageManager": "pnpm@9.12.1",
+  "version": "5.4.5",
+  "packageManager": "pnpm@9.12.2",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -53,26 +53,26 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@pequity/eslint-config": "^0.0.13",
-    "@playwright/test": "^1.48.0",
+    "@playwright/test": "^1.48.1",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-actions": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/manager-api": "^8.3.6",
+    "@storybook/test": "^8.3.6",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.5",
-    "@storybook/vue3": "^8.3.5",
-    "@storybook/vue3-vite": "^8.3.5",
+    "@storybook/theming": "^8.3.6",
+    "@storybook/vue3": "^8.3.6",
+    "@storybook/vue3-vite": "^8.3.6",
     "@tanstack/vue-virtual": "3.10.8",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.7.6",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/coverage-v8": "^2.1.3",
     "@vue/compiler-sfc": "3.5.12",
@@ -94,9 +94,9 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
-    "sass": "^1.79.5",
-    "semantic-release": "^24.1.2",
-    "storybook": "^8.3.5",
+    "sass": "^1.80.2",
+    "semantic-release": "^24.1.3",
+    "storybook": "^8.3.6",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.14",
     "typescript": "5.6.3",

package/squirrel/components/p-dropdown-select/p-dropdown-select.spec.js

@@ -533,4 +533,55 @@ describe('PDropdownSelect.vue', () => {
 
     expect(wrapper.vm.$data.selected).toEqual([1, 3]);
   });
+
+  it('disables the item when the disabled item prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    const button = wrapper.find('button');
+
+    await button.trigger('click');
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+
+    cleanup(wrapper);
+  });
+
+  it('disables the item when the disabledBy prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].inactive = true;
+    items[1].inactive = true;
+    items[2].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true, disabledBy: 'inactive' });
+
+    const button = wrapper.find('button');
+
+    await button.trigger('click');
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+
+    cleanup(wrapper);
+  });
 });

package/squirrel/components/p-dropdown-select/p-dropdown-select.vue

@@ -98,7 +98,13 @@
               >
                 <div
                   v-close-popper="!multiple"
-                  :class="[LIST_ITEM_CLASS, { [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)) }]"
+                  :class="[
+                    LIST_ITEM_CLASS,
+                    {
+                      [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)),
+                      [LIST_ITEM_DISABLED_CLASS]: isDisabled(computedItems[row.index]),
+                    },
+                  ]"
                   p-select-list-option-item
                   :style="listItemStyle"
                   @click="select($event, getValue(row.index))"
@@ -297,6 +303,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Specify the key in the object to be used as item disabled prop.
+   */
+  disabledBy: {
+    type: String as PropType<string>,
+    default: 'disabled',
+  },
 });
 
 // Async helpers
@@ -328,6 +341,7 @@ const { labelClasses, selectClasses, errorMsgClasses } = useInputClasses(props);
 const {
   LIST_ITEM_CLASS,
   LIST_ITEM_ACTIVE_CLASS,
+  LIST_ITEM_DISABLED_CLASS,
   selectedItems,
   computedItems,
   computedItemSize,
@@ -339,6 +353,7 @@ const {
   getValue,
   getText,
   isSelected,
+  isDisabled,
   setupNavigationSvc,
   destroyNavigationSvc,
   select,

package/squirrel/components/p-select-list/p-select-list.spec.js

@@ -479,4 +479,47 @@ describe('PSelectList.vue', () => {
 
     cleanup(wrapper);
   });
+
+  it('disables the item when the disabled item prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+
+    cleanup(wrapper);
+  });
+
+  it('disables the item when the disabledBy prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].inactive = true;
+    items[1].inactive = true;
+    items[2].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true, disabledBy: 'inactive' });
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+
+    cleanup(wrapper);
+  });
 });

package/squirrel/components/p-select-list/p-select-list.vue

@@ -71,7 +71,13 @@
           >
             <div
               v-close-popper="closePopperOnSelect && !multiple"
-              :class="[LIST_ITEM_CLASS, { [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)) }]"
+              :class="[
+                LIST_ITEM_CLASS,
+                {
+                  [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)),
+                  [LIST_ITEM_DISABLED_CLASS]: isDisabled(computedItems[row.index]),
+                },
+              ]"
               p-select-list-option-item
               :style="listItemStyle"
               @click="select($event, getValue(row.index))"
@@ -258,6 +264,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * Specify the key in the object to be used as item disabled prop.
+   */
+  disabledBy: {
+    type: String as PropType<string>,
+    default: 'disabled',
+  },
 });
 
 // Data
@@ -273,6 +286,7 @@ const virtualizerRef = ref<HTMLElement | null>(null);
 const {
   LIST_ITEM_CLASS,
   LIST_ITEM_ACTIVE_CLASS,
+  LIST_ITEM_DISABLED_CLASS,
   selectedItems,
   computedItems,
   computedItemSize,
@@ -283,6 +297,7 @@ const {
   getValue,
   getText,
   isSelected,
+  isDisabled,
   setupNavigationSvc,
   select,
   onFocus,

package/squirrel/components/p-select-list/useSelectList.ts

@@ -31,6 +31,7 @@ type Props = {
   searchable: boolean;
   multiple: boolean;
   selectedTopShown: boolean;
+  disabledBy: string;
 };
 
 type InputSearch = Ref<ComponentPublicInstance | null>;
@@ -45,6 +46,7 @@ const LIST_ITEM_SIZES = { sm: 32, md: 40, lg: 48 };
 const LIST_ITEM_CLASS =
   'clear-both block w-full cursor-pointer whitespace-nowrap py-1 px-3 text-left text-sm font-medium hover:bg-p-blue-10';
 const LIST_ITEM_ACTIVE_CLASS = 'selected';
+const LIST_ITEM_DISABLED_CLASS = 'opacity-30 pointer-events-none';
 
 export const useSelectList = (props: Props, inputSearch: InputSearch, virtualizerRef: VirtualizerRef, emit: Emits) => {
   // Data
@@ -207,6 +209,16 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
     return internalValue.value.includes(val);
   };
 
+  const isDisabled = (val: AnyValue) => {
+    const disabledProp = props.disabledBy;
+
+    if (val && typeof val === 'object' && disabledProp in val) {
+      return val[disabledProp];
+    }
+
+    return false;
+  };
+
   const setupNavigationSvc = () => {
     if (navigationSvc) {
       navigationSvc.init();
@@ -311,6 +323,7 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
     LIST_ITEM_SIZES,
     LIST_ITEM_CLASS,
     LIST_ITEM_ACTIVE_CLASS,
+    LIST_ITEM_DISABLED_CLASS,
     selectedItems,
     computedItems,
     computedItemSize,
@@ -322,6 +335,7 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
     getValue,
     getText,
     isSelected,
+    isDisabled,
     setupNavigationSvc,
     destroyNavigationSvc,
     select,

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

@@ -1,4 +1,4 @@
-import { type ComponentPublicInstance, type ComputedRef, type Ref, computed, isRef, ref, unref } from 'vue';
+import { type ComponentPublicInstance, type ComputedRef, type Ref, computed, isRef, nextTick, ref, unref } from 'vue';
 import { useVirtualizer } from '@tanstack/vue-virtual';
 
 type Options = ComputedRef<{
@@ -35,11 +35,13 @@ export const usePTableRowVirtualizer = (options: Options) => {
   const measureElement = (cmp: ComponentPublicInstance | Ref<HTMLElement>) => {
     const el = isRef(cmp) ? unref(cmp) : cmp?.$el;
 
-    if (!el) {
-      return;
-    }
+    nextTick(() => {
+      if (!el) {
+        return;
+      }
 
-    virtualizer.value.measureElement(el);
+      virtualizer.value.measureElement(el);
+    });
 
     return undefined;
   };