@pequity/squirrel 6.0.1 → 6.0.2

package/dist/cjs/p-dropdown.js

@@ -1,6 +1,5 @@
 "use strict";
 const listKeyboardNavigation = require("./listKeyboardNavigation.js");
-const floatingVue = require("floating-vue");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const ESCAPE_KEY = "Escape";
@@ -13,9 +12,6 @@ const nextFrame = () => {
 };
 const _sfc_main = vue.defineComponent({
   name: "PDropdown",
-  components: {
-    Dropdown: floatingVue.Dropdown
-  },
   inheritAttrs: false,
   props: {
     /**
@@ -110,8 +106,8 @@ const _sfc_main = vue.defineComponent({
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Dropdown = vue.resolveComponent("Dropdown");
-  return vue.openBlock(), vue.createBlock(_component_Dropdown, vue.mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
+  const _component_VDropdown = vue.resolveComponent("VDropdown");
+  return vue.openBlock(), vue.createBlock(_component_VDropdown, vue.mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
     onShow: _ctx.onShow,
     onHide: _ctx.destroy
   }), vue.createSlots({ _: 2 }, [

package/dist/cjs/useSelectList.js

@@ -39,6 +39,9 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   const selectedItems = vue.computed(() => {
     return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
   });
+  const deselectedItems = vue.computed(() => {
+    return internalItems.value.filter((item) => !internalValue.value.includes(item[props.itemValue]));
+  });
   const computedItems = vue.computed(() => {
     return lodashEs.cloneDeep(internalItems.value).filter((item) => {
       return String(item[props.itemText]).toLocaleLowerCase().includes(String(search.value).toLocaleLowerCase());
@@ -205,17 +208,21 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     return internalItems.value.indexOf(selectedItems.value[0]);
   };
   const selectAll = () => {
-    if (!props.multiple) {
-      return;
-    }
+    if (!props.multiple) return;
     const selectedItems2 = internalValue.value;
+    const deselectedDisabledItemsValues = deselectedItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
     const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
-    const toEmit = lodashEs.uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const uniqueItems = lodashEs.uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const toEmit = lodashEs.difference(uniqueItems, deselectedDisabledItemsValues);
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
+    if (!props.multiple) return;
     search.value = "";
-    emit("update:modelValue", []);
+    const disabledItemsValues = internalItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
+    const selectedItemsValues = internalValue.value;
+    const selectedDisabledItems = lodashEs.intersection(disabledItemsValues, selectedItemsValues);
+    emit("update:modelValue", toArrOfObjIfNeeded(selectedDisabledItems));
   };
   vue.watch(
     () => props.items,

package/dist/es/p-dropdown.js

@@ -1,5 +1,4 @@
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
-import { Dropdown } from "floating-vue";
 import { defineComponent, resolveComponent, openBlock, createBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const ESCAPE_KEY = "Escape";
@@ -12,9 +11,6 @@ const nextFrame = () => {
 };
 const _sfc_main = defineComponent({
   name: "PDropdown",
-  components: {
-    Dropdown
-  },
   inheritAttrs: false,
   props: {
     /**
@@ -109,8 +105,8 @@ const _sfc_main = defineComponent({
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Dropdown = resolveComponent("Dropdown");
-  return openBlock(), createBlock(_component_Dropdown, mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
+  const _component_VDropdown = resolveComponent("VDropdown");
+  return openBlock(), createBlock(_component_VDropdown, mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
     onShow: _ctx.onShow,
     onHide: _ctx.destroy
   }), createSlots({ _: 2 }, [

package/dist/es/useSelectList.js

@@ -2,7 +2,7 @@ import { isObject } from "./object.js";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { toString } from "./string.js";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { cloneDeep, uniqBy } from "lodash-es";
+import { cloneDeep, uniqBy, difference, intersection } from "lodash-es";
 import { ref, computed, watch, onUnmounted, nextTick } from "vue";
 const createInternalItems = (items) => {
   let arr = Array.isArray(items) ? items.slice() : [];
@@ -37,6 +37,9 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   const selectedItems = computed(() => {
     return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
   });
+  const deselectedItems = computed(() => {
+    return internalItems.value.filter((item) => !internalValue.value.includes(item[props.itemValue]));
+  });
   const computedItems = computed(() => {
     return cloneDeep(internalItems.value).filter((item) => {
       return String(item[props.itemText]).toLocaleLowerCase().includes(String(search.value).toLocaleLowerCase());
@@ -203,17 +206,21 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     return internalItems.value.indexOf(selectedItems.value[0]);
   };
   const selectAll = () => {
-    if (!props.multiple) {
-      return;
-    }
+    if (!props.multiple) return;
     const selectedItems2 = internalValue.value;
+    const deselectedDisabledItemsValues = deselectedItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
     const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
-    const toEmit = uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const uniqueItems = uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const toEmit = difference(uniqueItems, deselectedDisabledItemsValues);
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
+    if (!props.multiple) return;
     search.value = "";
-    emit("update:modelValue", []);
+    const disabledItemsValues = internalItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
+    const selectedItemsValues = internalValue.value;
+    const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
+    emit("update:modelValue", toArrOfObjIfNeeded(selectedDisabledItems));
   };
   watch(
     () => props.items,

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

@@ -27,14 +27,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {
     defaultAttrs: {
-        triggers: "click"[];
-        autoHide: true;
+        triggers: string[];
+        autoHide: boolean;
         theme: string;
         popperClass: string;
-        placement: "bottom-start";
+        placement: string;
         distance: number;
         delay: number;
-        handleResize: true;
+        handleResize: boolean;
     };
     navigationSvc: ListKeyboardNavigationInstance | null;
     prevReference: HTMLElement | null;
@@ -73,403 +73,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     enableArrowNavigation: boolean;
     enableCloseOnEsc: boolean;
     triggerStyle: Record<string, any>;
-}, {}, {
-    Dropdown: import("vue").DefineComponent<{
-        theme: {
-            type: StringConstructor;
-            default: any;
-        };
-        referenceNode: {
-            type: import("vue").PropType<() => Element>;
-            default: any;
-        };
-        shown: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showGroup: {
-            type: StringConstructor;
-            default: any;
-        };
-        ariaId: {
-            default: any;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        positioningDisabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        placement: {
-            type: import("vue").PropType<import("floating-vue/dist/util/popper.js").Placement>;
-            default: any;
-        };
-        delay: {
-            type: import("vue").PropType<string | number | {
-                show: number;
-                hide: number;
-            }>;
-            default: any;
-        };
-        distance: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        skidding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        triggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]>;
-            default: any;
-        };
-        showTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        hideTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]>;
-            default: any;
-        };
-        popperShowTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperHideTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        container: {
-            type: any[];
-            default: any;
-        };
-        boundary: {
-            type: any[];
-            default: any;
-        };
-        strategy: {
-            type: import("vue").PropType<"absolute" | "fixed">;
-            default: any;
-        };
-        autoHide: {
-            type: import("vue").PropType<boolean | ((event: Event) => boolean)>;
-            default: any;
-        };
-        handleResize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        instantMove: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        eagerMount: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        popperClass: {
-            type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-            default: any;
-        };
-        computeTransformOrigin: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoMinSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoSize: {
-            type: import("vue").PropType<boolean | "min" | "max">;
-            default: any;
-        };
-        autoMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoBoundaryMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        preventOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        overflowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        flip: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shift: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shiftCrossAxis: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        noAutoFocus: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        disposeTimeout: {
-            type: NumberConstructor;
-            default: any;
-        };
-    }, unknown, unknown, {
-        finalTheme(): string;
-    }, {
-        getTargetNodes(): unknown[];
-    }, {
-        computed: {
-            themeClass(): string[];
-        };
-    } | {
-        methods: {
-            show(...args: any[]): any;
-            hide(...args: any[]): any;
-            dispose(...args: any[]): any;
-            onResize(...args: any[]): any;
-        };
-    }, import("vue").ComponentOptionsMixin, {
-        show: () => true;
-        hide: () => true;
-        'update:shown': (shown: boolean) => true;
-        'apply-show': () => true;
-        'apply-hide': () => true;
-        'close-group': () => true;
-        'close-directive': () => true;
-        'auto-hide': () => true;
-        resize: () => true;
-    }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        theme: {
-            type: StringConstructor;
-            default: any;
-        };
-        referenceNode: {
-            type: import("vue").PropType<() => Element>;
-            default: any;
-        };
-        shown: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showGroup: {
-            type: StringConstructor;
-            default: any;
-        };
-        ariaId: {
-            default: any;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        positioningDisabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        placement: {
-            type: import("vue").PropType<import("floating-vue").Placement>;
-            default: any;
-        };
-        delay: {
-            type: import("vue").PropType<string | number | {
-                show: number;
-                hide: number;
-            }>;
-            default: any;
-        };
-        distance: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        skidding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        triggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[]>;
-            default: any;
-        };
-        showTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        hideTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[]>;
-            default: any;
-        };
-        popperShowTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperHideTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        container: {
-            type: any[];
-            default: any;
-        };
-        boundary: {
-            type: any[];
-            default: any;
-        };
-        strategy: {
-            type: import("vue").PropType<"absolute" | "fixed">;
-            default: any;
-        };
-        autoHide: {
-            type: import("vue").PropType<boolean | ((event: Event) => boolean)>;
-            default: any;
-        };
-        handleResize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        instantMove: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        eagerMount: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        popperClass: {
-            type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-            default: any;
-        };
-        computeTransformOrigin: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoMinSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoSize: {
-            type: import("vue").PropType<boolean | "min" | "max">;
-            default: any;
-        };
-        autoMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoBoundaryMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        preventOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        overflowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        flip: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shift: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shiftCrossAxis: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        noAutoFocus: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        disposeTimeout: {
-            type: NumberConstructor;
-            default: any;
-        };
-    }>> & {
-        onResize?: () => any;
-        onShow?: () => any;
-        onHide?: () => any;
-        "onUpdate:shown"?: (shown: boolean) => any;
-        "onApply-show"?: () => any;
-        "onApply-hide"?: () => any;
-        "onClose-group"?: () => any;
-        "onClose-directive"?: () => any;
-        "onAuto-hide"?: () => any;
-    }, {
-        placement: import("floating-vue").Placement;
-        strategy: "absolute" | "fixed";
-        disabled: boolean;
-        positioningDisabled: boolean;
-        delay: string | number | {
-            show: number;
-            hide: number;
-        };
-        distance: string | number;
-        skidding: string | number;
-        triggers: import("floating-vue").TriggerEvent[];
-        showTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        hideTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        popperTriggers: import("floating-vue").TriggerEvent[];
-        popperShowTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        popperHideTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        container: any;
-        boundary: any;
-        autoHide: boolean | ((event: Event) => boolean);
-        handleResize: boolean;
-        instantMove: boolean;
-        eagerMount: boolean;
-        popperClass: string | unknown[] | Record<string, any>;
-        computeTransformOrigin: boolean;
-        autoMinSize: boolean;
-        autoSize: boolean | "min" | "max";
-        autoMaxSize: boolean;
-        autoBoundaryMaxSize: boolean;
-        preventOverflow: boolean;
-        overflowPadding: string | number;
-        arrowPadding: string | number;
-        arrowOverflow: boolean;
-        flip: boolean;
-        shift: boolean;
-        shiftCrossAxis: boolean;
-        noAutoFocus: boolean;
-        disposeTimeout: number;
-        shown: boolean;
-        theme: string;
-        referenceNode: () => Element;
-        showGroup: string;
-        ariaId: any;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "packageManager": "pnpm@9.15.0",
   "type": "module",
   "scripts": {
@@ -47,7 +47,7 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.6.0",
+    "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@pequity/eslint-config": "^1.0.3",
     "@playwright/test": "^1.49.1",
@@ -65,7 +65,7 @@
     "@storybook/theming": "^8.4.7",
     "@storybook/vue3": "^8.4.7",
     "@storybook/vue3-vite": "^8.4.7",
-    "@tanstack/vue-virtual": "3.11.1",
+    "@tanstack/vue-virtual": "3.11.2",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.10.2",
@@ -76,7 +76,7 @@
     "@vuepic/vue-datepicker": "10.0.0",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-storybook": "^0.11.1",
     "floating-vue": "5.2.2",
     "glob": "^11.0.0",
@@ -91,7 +91,7 @@
     "prettier-plugin-tailwindcss": "^0.6.9",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.82.0",
+    "sass": "^1.83.0",
     "semantic-release": "^24.2.0",
     "storybook": "^8.4.7",
     "svgo": "^3.3.2",

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

@@ -1,9 +1,9 @@
 <template>
-  <Dropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
+  <VDropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
     <template v-for="(_, slot) in $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
-  </Dropdown>
+  </VDropdown>
 </template>
 
 <script lang="ts">
@@ -88,11 +88,8 @@ import {
   type ListKeyboardNavigationInstance,
   setupListKeyboardNavigation,
 } from '@squirrel/utils/listKeyboardNavigation';
-import { Dropdown } from 'floating-vue';
 import { defineComponent } from 'vue';
 
-type DropdownProps = InstanceType<typeof Dropdown>['$props'];
-
 type VPopper = {
   $refs: {
     popperContent: {
@@ -125,9 +122,6 @@ const nextFrame = () => {
 
 export default defineComponent({
   name: 'PDropdown',
-  components: {
-    Dropdown,
-  },
   inheritAttrs: false,
   props: {
     /**
@@ -167,7 +161,7 @@ export default defineComponent({
         distance: 4,
         delay: 0,
         handleResize: true,
-      } satisfies DropdownProps,
+      },
       navigationSvc: null as ListKeyboardNavigationInstance | null,
       prevReference: null as HTMLElement | null,
     };

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

@@ -197,6 +197,27 @@ describe('PDropdownSelect.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not select disabled items when "Select All" is clicked', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    await wrapper.find('button').trigger('click');
+
+    await wrapper.findByText('Select all').trigger('click');
+
+    const selectedItemsOptions = wrapper.findAll('[p-select-list-option-item]');
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(selectedItemsOptions.length - 2);
+    expect(wrapper.vm.$data.selected.length).toBe(items.length - 2);
+
+    cleanup(wrapper);
+  });
+
   it('clears all values', async () => {
     const wrapper = createWrapper({ selected: [] }, { multiple: true });
 
@@ -213,6 +234,26 @@ describe('PDropdownSelect.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not clear disabled items', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [1, 2], items }, { multiple: true });
+
+    await wrapper.find('button').trigger('click');
+
+    await wrapper.findByText('Clear all').trigger('click');
+
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(2);
+    expect(wrapper.vm.$data.selected).toEqual([1, 2]);
+
+    cleanup(wrapper);
+  });
+
   it('displays the selected items on top', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 
@@ -532,6 +573,8 @@ describe('PDropdownSelect.vue', () => {
     });
 
     expect(wrapper.vm.$data.selected).toEqual([1, 3]);
+
+    cleanup(wrapper);
   });
 
   it('disables the item when the disabled item prop is set', async () => {
@@ -555,6 +598,7 @@ describe('PDropdownSelect.vue', () => {
         expect(item.classes()).not.toContain('pointer-events-none');
       }
     });
+
     cleanup(wrapper);
   });
 
@@ -580,13 +624,14 @@ describe('PDropdownSelect.vue', () => {
         expect(item.classes()).not.toContain('pointer-events-none');
       }
     });
+
     cleanup(wrapper);
   });
 
   it('renders clear button when clearable is true and a value is selected', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 
-    const wrapper = createWrapper({ selected: 17 }, { clearable: true });
+    const wrapper = createWrapper({ selected: [17] }, { multiple: true, clearable: true });
 
     const clearButton = wrapper.find('button[aria-label="Clear selection"]');
     expect(clearButton.exists()).toBe(true);
@@ -618,6 +663,7 @@ describe('PDropdownSelect.vue', () => {
 
     await clearButton.trigger('click');
     expect(wrapper.vm.$data.selected).toEqual([]);
+
     cleanup(wrapper);
   });
 });

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

@@ -183,6 +183,25 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not select disabled items when "Select All" is clicked', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    await wrapper.findByText('Select all').trigger('click');
+
+    const selectedItemsOptions = wrapper.findAll('[p-select-list-option-item]');
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(selectedItemsOptions.length - 2);
+    expect(wrapper.vm.$data.selected.length).toBe(items.length - 2);
+
+    cleanup(wrapper);
+  });
+
   it('clears all values', async () => {
     const wrapper = createWrapper({ selected: [] }, { multiple: true });
 
@@ -198,6 +217,24 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not clear disabled items', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [1, 2], items }, { multiple: true });
+
+    await wrapper.findByText('Clear all').trigger('click');
+
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(2);
+    expect(wrapper.vm.$data.selected).toEqual([1, 2]);
+
+    cleanup(wrapper);
+  });
+
   it('displays the selected items on top', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 
@@ -448,6 +485,8 @@ describe('PSelectList.vue', () => {
     });
 
     expect(wrapper.vm.$data.selected).toEqual([1, 3]);
+
+    cleanup(wrapper);
   });
 
   it('removes values from the internalValue (modelValue) that are not in the items list', async () => {

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

@@ -11,7 +11,7 @@ import {
 } from '@squirrel/utils/listKeyboardNavigation';
 import { toString } from '@squirrel/utils/string';
 import { useVirtualizer } from '@tanstack/vue-virtual';
-import { cloneDeep, uniqBy } from 'lodash-es';
+import { cloneDeep, difference, intersection, uniqBy } from 'lodash-es';
 import { type ComponentPublicInstance, computed, nextTick, onUnmounted, type Ref, ref, watch } from 'vue';
 
 type Emits = {
@@ -59,7 +59,11 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
 
   // Computed
   const selectedItems = computed(() => {
-    return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue] as AnyValue));
+    return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
+  });
+
+  const deselectedItems = computed(() => {
+    return internalItems.value.filter((item) => !internalValue.value.includes(item[props.itemValue]));
   });
 
   const computedItems = computed(() => {
@@ -279,20 +283,36 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
   };
 
   const selectAll = () => {
-    if (!props.multiple) {
-      return;
-    }
+    if (!props.multiple) return;
 
     const selectedItems = internalValue.value;
+    const deselectedDisabledItemsValues = deselectedItems.value
+      .filter((item) => isDisabled(item))
+      .map((item) => item[props.itemValue]);
     const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
-    const toEmit = uniqBy([...selectedItems, ...filteredItems], (item) => item);
+    const uniqueItems = uniqBy([...selectedItems, ...filteredItems], (item) => item);
+
+    // We cannot select disabled items so we remove them from the list
+    const toEmit = difference(uniqueItems, deselectedDisabledItemsValues);
 
     emit('update:modelValue', toArrOfObjIfNeeded(toEmit));
   };
 
   const clearAll = () => {
+    if (!props.multiple) return;
+
     search.value = '';
-    emit('update:modelValue', []);
+
+    // We cannot clear disabled items that are selected
+    const disabledItemsValues = internalItems.value
+      .filter((item) => isDisabled(item))
+      .map((item) => item[props.itemValue]);
+
+    const selectedItemsValues = internalValue.value;
+
+    const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
+
+    emit('update:modelValue', toArrOfObjIfNeeded(selectedDisabledItems));
   };
 
   // Watch

package/squirrel/utils/listKeyboardNavigation.spec.js

@@ -168,4 +168,40 @@ describe('listKeyboardNavigation', () => {
 
     navigationSvc.destroy();
   });
+
+  it('triggers selection event on enter key', () => {
+    const navigationSvc = createTestSvc();
+
+    const event = new window.KeyboardEvent('keydown', {
+      key: 'Enter',
+      keyCode: 13,
+      bubbles: true,
+      target: document.querySelector('.dropdown-menu'),
+    });
+
+    const items = navigationSvc.getItems();
+    navigationSvc.setFocusedItem(items[1]);
+
+    const clickEvent = vi.fn();
+    items[1].addEventListener('click', clickEvent);
+
+    navigationSvc.listKeydown(event);
+
+    expect(clickEvent).toHaveBeenCalled();
+
+    navigationSvc.destroy();
+  });
+
+  it('warns when multiple instances are initialized', () => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const navigationSvc1 = createTestSvc();
+    const navigationSvc2 = createTestSvc();
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith('There can only be one instance of list navigation active at a time.');
+
+    navigationSvc1.destroy();
+    navigationSvc2.destroy();
+    consoleWarnSpy.mockRestore();
+  });
 });