@pequity/squirrel 5.4.2 → 5.4.4

package/dist/cjs/index.js

@@ -445,6 +445,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     closePopperOnSelect: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Focus the search input on mount
+     */
+    focusSearchOnMount: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ["update:modelValue", "select"],
@@ -487,7 +494,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       scrollerStyle.value = { maxHeight: `${computedItemSize.value * props.itemsVisible - actionsContainerHeight}px` };
       putSelectedItemsOnTop();
       if (props.searchable) {
-        (_b = inputSearch.value) == null ? void 0 : _b.$el.querySelector("input").focus();
+        props.focusSearchOnMount && ((_b = inputSearch.value) == null ? void 0 : _b.$el.querySelector("input").focus());
       } else {
         setupNavigationSvc();
       }

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/es/index.js

@@ -445,6 +445,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     closePopperOnSelect: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Focus the search input on mount
+     */
+    focusSearchOnMount: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ["update:modelValue", "select"],
@@ -487,7 +494,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       scrollerStyle.value = { maxHeight: `${computedItemSize.value * props.itemsVisible - actionsContainerHeight}px` };
       putSelectedItemsOnTop();
       if (props.searchable) {
-        (_b = inputSearch.value) == null ? void 0 : _b.$el.querySelector("input").focus();
+        props.focusSearchOnMount && ((_b = inputSearch.value) == null ? void 0 : _b.$el.querySelector("input").focus());
       } else {
         setupNavigationSvc();
       }

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/squirrel/components/p-select-list/p-select-list.vue.d.ts

@@ -324,6 +324,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Focus the search input on mount
+     */
+    focusSearchOnMount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -435,6 +442,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Focus the search input on mount
+     */
+    focusSearchOnMount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -457,6 +471,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     selectedTopShown: boolean;
     topSectionClass: string;
     closePopperOnSelect: boolean;
+    focusSearchOnMount: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.2",
-  "packageManager": "pnpm@9.12.1",
+  "version": "5.4.4",
+  "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,11 +94,11 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
-    "sass": "^1.79.5",
+    "sass": "^1.80.2",
     "semantic-release": "^24.1.2",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.14",
     "typescript": "5.6.3",
     "v-calendar": "3.1.2",
     "vite": "^5.4.9",

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

@@ -89,6 +89,32 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
+  it('focuses on the search input on mount', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: 17 }, { searchable: true, focusSearchOnMount: true });
+
+    const inputSearch = wrapper.findComponent({ name: 'PInputSearch' });
+
+    expect(inputSearch.exists()).toBe(true);
+    expect(inputSearch.element.querySelector('input')).toBe(document.activeElement);
+
+    cleanup(wrapper);
+  });
+
+  it('does not focus on the search input on mount', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: 17 }, { searchable: true, focusSearchOnMount: false });
+
+    const inputSearch = wrapper.findComponent({ name: 'PInputSearch' });
+
+    expect(inputSearch.exists()).toBe(true);
+    expect(inputSearch.element.querySelector('input')).not.toBe(document.activeElement);
+
+    cleanup(wrapper);
+  });
+
   it('emits the selected value when clicked (v-model)', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 

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

@@ -251,6 +251,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * Focus the search input on mount
+   */
+  focusSearchOnMount: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 // Data
@@ -298,7 +305,7 @@ onMounted(async () => {
   putSelectedItemsOnTop();
 
   if (props.searchable) {
-    inputSearch.value?.$el.querySelector('input').focus();
+    props.focusSearchOnMount && inputSearch.value?.$el.querySelector('input').focus();
   } else {
     setupNavigationSvc();
   }

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;
   };