@pequity/squirrel 6.0.6 → 6.0.8

package/README.md

@@ -76,7 +76,7 @@ Import and use the components you need in your Vue 3 project:
 </template>
 
 <script setup lang="ts">
-  import { PBtn, PRingLoader } from '@pequity/squirrel';
+  import { PBtn } from '@pequity/squirrel';
 </script>
 ```
 
@@ -111,7 +111,7 @@ Then, in your consumer project's `.env.local` file, add an `VUE_APP_SQUIRREL_LOC
 
 Finally, in your project's `vite.config` file, add the following:
 
-> Heads up! The `vite.config.mts` file of the `pequity/frontendv2` already includes the following configuration.
+> Heads up! The `vite.config.ts` file of the `pequity/frontendv2` already includes the following configuration.
 
 ```js
 import { defineConfig, searchForWorkspaceRoot } from 'vite';

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

@@ -74,14 +74,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     },
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
       type: String,
       default: "text"
     },
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
       type: [String, Number],
@@ -160,9 +160,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     disabledBy: {
       type: String,
       default: "disabled"
+    },
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:modelValue", "select"],
+  emits: ["update:modelValue", "select", "create"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -264,6 +271,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       destroyNavigationSvc();
       (_b = (_a = formControl.value) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
     };
+    const handleCreate = () => {
+      emit("create", search.value);
+      dropdownShow.value = false;
+    };
     return (_ctx, _cache) => {
       const _directive_close_popper = vue.resolveDirective("close-popper");
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -398,7 +409,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 !vue.unref(computedItems).length ? vue.renderSlot(_ctx.$slots, "no-items", { key: 0 }, () => [
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["flex items-center justify-center", vue.unref(pSelectList.SIZES)[__props.size]])
-                  }, "No items found", 2)
+                  }, [
+                    __props.creatable && vue.unref(search) ? (vue.openBlock(), vue.createElementBlock("button", {
+                      key: 0,
+                      class: "hover:text-primary-hover flex items-center gap-2 font-medium text-p-blue-40",
+                      onClick: handleCreate
+                    }, [
+                      vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, { icon: "fe:plus-circle" }),
+                      vue.createTextVNode(" Add '" + vue.toDisplayString(vue.unref(search)) + "' ", 1)
+                    ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                      vue.createTextVNode("No items found")
+                    ], 64))
+                  ], 2)
                 ]) : vue.createCommentVNode("", true)
               ], 6)
             ], 16)
@@ -420,7 +442,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               }, () => [
                 vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.multiple && vue.unref(selectedItems).length > 1 ? `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1)
               ]),
-              __props.clearable && vue.unref(internalValue).length ? (vue.openBlock(), vue.createElementBlock("button", {
+              __props.clearable && vue.unref(selectedItems).length ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 2,
                 class: vue.normalizeClass(["absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60", [vue.unref(pSelectList.SIZES)[__props.size], CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",

package/dist/cjs/useSelectList.js

@@ -217,12 +217,17 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
-    if (!props.multiple) return;
     search.value = "";
-    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));
+    if (props.multiple) {
+      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));
+    } else {
+      if (!isDisabled(selectedItems.value[0])) {
+        emit("update:modelValue", null);
+      }
+    }
   };
   vue.watch(
     () => props.items,

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createElementVNode, isRef, Fragment, renderList, withDirectives, renderSlot, withModifiers, vShow } from "vue";
+import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createElementVNode, isRef, Fragment, renderList, withDirectives, renderSlot, createTextVNode, withModifiers, vShow } from "vue";
 import PDropdown from "../p-dropdown.js";
 import { _ as _sfc_main$1 } from "./p-icon.js";
 import PInputSearch from "../p-input-search.js";
@@ -73,14 +73,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     },
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
       type: String,
       default: "text"
     },
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
       type: [String, Number],
@@ -159,9 +159,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabledBy: {
       type: String,
       default: "disabled"
+    },
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:modelValue", "select"],
+  emits: ["update:modelValue", "select", "create"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -263,6 +270,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       destroyNavigationSvc();
       (_b = (_a = formControl.value) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
     };
+    const handleCreate = () => {
+      emit("create", search.value);
+      dropdownShow.value = false;
+    };
     return (_ctx, _cache) => {
       const _directive_close_popper = resolveDirective("close-popper");
       return openBlock(), createElementBlock("div", {
@@ -397,7 +408,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 !unref(computedItems).length ? renderSlot(_ctx.$slots, "no-items", { key: 0 }, () => [
                   createElementVNode("div", {
                     class: normalizeClass(["flex items-center justify-center", unref(SIZES)[__props.size]])
-                  }, "No items found", 2)
+                  }, [
+                    __props.creatable && unref(search) ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      class: "hover:text-primary-hover flex items-center gap-2 font-medium text-p-blue-40",
+                      onClick: handleCreate
+                    }, [
+                      createVNode(_sfc_main$1, { icon: "fe:plus-circle" }),
+                      createTextVNode(" Add '" + toDisplayString(unref(search)) + "' ", 1)
+                    ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode("No items found")
+                    ], 64))
+                  ], 2)
                 ]) : createCommentVNode("", true)
               ], 6)
             ], 16)
@@ -419,7 +441,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, () => [
                 createElementVNode("div", _hoisted_3, toDisplayString(__props.multiple && unref(selectedItems).length > 1 ? `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1)
               ]),
-              __props.clearable && unref(internalValue).length ? (openBlock(), createElementBlock("button", {
+              __props.clearable && unref(selectedItems).length ? (openBlock(), createElementBlock("button", {
                 key: 2,
                 class: normalizeClass(["absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60", [unref(SIZES)[__props.size], CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",

package/dist/es/useSelectList.js

@@ -215,12 +215,17 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
-    if (!props.multiple) return;
     search.value = "";
-    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));
+    if (props.multiple) {
+      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));
+    } else {
+      if (!isDisabled(selectedItems.value[0])) {
+        emit("update:modelValue", null);
+      }
+    }
   };
   watch(
     () => props.items,

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

@@ -262,14 +262,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         validator(value: Size): boolean;
     };
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
         type: StringConstructor;
         default: string;
     };
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
         type: (StringConstructor | NumberConstructor)[];
@@ -349,9 +349,17 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<string>;
         default: string;
     };
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
+    create: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<ModelValue>;
@@ -392,14 +400,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         validator(value: Size): boolean;
     };
     /**
-     * Set property of **items**’s text value
+     * Set property of **items**'s text value
      */
     itemText: {
         type: StringConstructor;
         default: string;
     };
     /**
-     * Set property of **items**’s value - must be primitive.
+     * Set property of **items**'s value - must be primitive.
      */
     itemValue: {
         type: (StringConstructor | NumberConstructor)[];
@@ -479,9 +487,17 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<string>;
         default: string;
     };
+    /**
+     * Enables the ability to create new items when no search results are found
+     */
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCreate?: ((...args: any[]) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
     label: string;
@@ -505,6 +521,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     placeholderSearch: string;
     selectedTopShown: boolean;
     disabledBy: string;
+    creatable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
     formControl: HTMLDivElement;
     button: HTMLButtonElement;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.6",
-  "packageManager": "pnpm@9.15.3",
+  "version": "6.0.8",
+  "packageManager": "pnpm@9.15.4",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -53,54 +53,54 @@
     "@playwright/test": "^1.49.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/test": "^8.4.7",
+    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-actions": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/manager-api": "^8.5.0",
+    "@storybook/test": "^8.5.0",
     "@storybook/test-runner": "^0.21.0",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/vue3": "^8.4.7",
-    "@storybook/vue3-vite": "^8.4.7",
+    "@storybook/theming": "^8.5.0",
+    "@storybook/vue3": "^8.5.0",
+    "@storybook/vue3-vite": "^8.5.0",
     "@tanstack/vue-virtual": "3.11.2",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.7",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.3",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.1",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-storybook": "^0.11.2",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
     "husky": "^9.1.7",
     "iconify-icon": "^2.3.0",
     "jsdom": "^26.0.0",
-    "lint-staged": "^15.3.0",
+    "lint-staged": "^15.4.1",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.10",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.83.1",
+    "sass": "^1.83.4",
     "semantic-release": "^24.2.1",
-    "storybook": "^8.4.7",
+    "storybook": "^8.5.0",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",
-    "vite": "^6.0.7",
-    "vitest": "^2.1.8",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.3",
     "vue": "3.5.13",
-    "vue-currency-input": "3.1.0",
+    "vue-currency-input": "3.2.1",
     "vue-router": "4.5.0",
     "vue-toastification": "2.0.0-rc.5",
     "vue-tsc": "2.2.0"

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

@@ -653,6 +653,17 @@ describe('PDropdownSelect.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not render clear button when there is no value selected', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: null }, { clearable: true });
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(false);
+
+    cleanup(wrapper);
+  });
+
   it('clears multiple selections when clearable is true', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 
@@ -666,4 +677,138 @@ describe('PDropdownSelect.vue', () => {
 
     cleanup(wrapper);
   });
+
+  it('clears a single selection select when clearable is true', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = false;
+    const wrapper = createWrapper({ selected: 1, items }, { multiple: false, clearable: true });
+
+    expect(wrapper.vm.$data.selected).toEqual(1);
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(true);
+
+    await clearButton.trigger('click');
+    expect(wrapper.vm.$data.selected).toEqual(null);
+
+    cleanup(wrapper);
+  });
+
+  it('does not clear a single selection select when the item is disabled', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    const wrapper = createWrapper({ selected: 1, items }, { multiple: false, clearable: true });
+
+    expect(wrapper.vm.$data.selected).toEqual(1);
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(true);
+
+    await clearButton.trigger('click');
+    expect(wrapper.vm.$data.selected).toEqual(1);
+
+    cleanup(wrapper);
+  });
+
+  describe('creatable functionality', () => {
+    it('shows create option when no items match search and creatable is true', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      expect(createButton.exists()).toBe(true);
+      expect(createButton.text()).toBe("Add 'New Item'");
+      cleanup(wrapper);
+    });
+
+    it('does not show create option when creatable is false', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: false });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      expect(createButton.exists()).toBe(false);
+      expect(wrapper.text()).toContain('No items found');
+      cleanup(wrapper);
+    });
+
+    it('emits create event when clicking create option', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted().create[0]).toEqual(['New Item']);
+      expect(wrapper.find('.pdropdown-stub-popper').exists()).toBe(false);
+      cleanup(wrapper);
+    });
+
+    it('does not update model value when creating new item', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted()['update:modelValue']).toBeFalsy();
+      expect(wrapper.vm.$data.selected).toBe(null);
+      cleanup(wrapper);
+    });
+
+    it('does not create object value when valueIsObject is true', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: true, valueIsObject: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted().create[0]).toEqual(['New Item']);
+      expect(pDropdownSelectCmp.emitted()['update:modelValue']).toBeFalsy();
+      expect(wrapper.vm.$data.selected).toBe(null);
+      cleanup(wrapper);
+    });
+
+    it('emits create event with search value when using custom itemValue and itemText', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+      const wrapper = createWrapper(
+        { selected: null },
+        {
+          searchable: true,
+          creatable: true,
+          valueIsObject: true,
+          itemValue: 'customValue',
+          itemText: 'customText',
+        }
+      );
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const searchInput = wrapper.find('input.text-night');
+      await searchInput.setValue('New Item');
+      const createButton = wrapper.find('button.hover\\:text-primary-hover');
+      await createButton.trigger('click');
+      const pDropdownSelectCmp = wrapper.findComponent(PDropdownSelect);
+      expect(pDropdownSelectCmp.emitted().create[0]).toEqual(['New Item']);
+      expect(pDropdownSelectCmp.emitted()['update:modelValue']).toBeFalsy();
+      cleanup(wrapper);
+    });
+  });
 });

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

@@ -312,3 +312,39 @@ export const ClearableMultiple = {
     clearable: true,
   },
 };
+
+export const Creatable = {
+  render: (args) => ({
+    components: { PDropdownSelect },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <div>
+        <PDropdownSelect 
+          v-model="value" 
+          v-bind="args" 
+          @create="(searchTerm) => alert('Create item: ' + searchTerm)"
+        />
+        <div class="mt-4">Selected: {{ value }}</div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example with creatable functionality enabled. When no search results are found, an option to create a new item is shown.',
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    label: 'Creatable dropdown',
+    items: items2,
+    searchable: true,
+    creatable: true,
+    placeholder: 'Search or create an item...',
+  },
+};

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

@@ -38,9 +38,9 @@
             }}
           </div>
         </slot>
-        <!-- Add clear button -->
+        <!-- Clear selection button -->
         <button
-          v-if="clearable && internalValue.length"
+          v-if="clearable && selectedItems.length"
           class="absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60"
           :class="[SIZES[size], CLEAR_BUTTON_SPACING[size]]"
           aria-label="Clear selection"
@@ -148,7 +148,18 @@
               </div>
             </div>
             <slot v-if="!computedItems.length" name="no-items">
-              <div :class="['flex items-center justify-center', SIZES[size]]">No items found</div>
+              <div :class="['flex items-center justify-center', SIZES[size]]">
+                <template v-if="creatable && search">
+                  <button
+                    class="hover:text-primary-hover flex items-center gap-2 font-medium text-p-blue-40"
+                    @click="handleCreate"
+                  >
+                    <PIcon icon="fe:plus-circle" />
+                    Add '{{ search }}'
+                  </button>
+                </template>
+                <template v-else>No items found</template>
+              </div>
             </slot>
           </div>
         </div>
@@ -197,7 +208,7 @@ defineSlots<{
   item(props: { item: any; isItemSelected: boolean; itemTextSplit: string[] }): unknown;
 }>();
 
-const emit = defineEmits(['update:modelValue', 'select']);
+const emit = defineEmits(['update:modelValue', 'select', 'create']);
 
 const props = defineProps({
   modelValue: {
@@ -241,14 +252,14 @@ const props = defineProps({
     },
   },
   /**
-   * Set property of **items**’s text value
+   * Set property of **items**'s text value
    */
   itemText: {
     type: String,
     default: 'text',
   },
   /**
-   * Set property of **items**’s value - must be primitive.
+   * Set property of **items**'s value - must be primitive.
    */
   itemValue: {
     type: [String, Number],
@@ -328,6 +339,13 @@ const props = defineProps({
     type: String as PropType<string>,
     default: 'disabled',
   },
+  /**
+   * Enables the ability to create new items when no search results are found
+   */
+  creatable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // Async helpers
@@ -453,4 +471,9 @@ const onHide = () => {
   destroyNavigationSvc();
   (formControl.value?.querySelector('button') as HTMLElement)?.focus();
 };
+
+const handleCreate = () => {
+  emit('create', search.value);
+  dropdownShow.value = false;
+};
 </script>

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

@@ -299,20 +299,24 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
   };
 
   const clearAll = () => {
-    if (!props.multiple) return;
-
     search.value = '';
 
     // We cannot clear disabled items that are selected
-    const disabledItemsValues = internalItems.value
-      .filter((item) => isDisabled(item))
-      .map((item) => item[props.itemValue]);
+    if (props.multiple) {
+      const disabledItemsValues = internalItems.value
+        .filter((item) => isDisabled(item))
+        .map((item) => item[props.itemValue]);
 
-    const selectedItemsValues = internalValue.value;
+      const selectedItemsValues = internalValue.value;
 
-    const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
+      const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
 
-    emit('update:modelValue', toArrOfObjIfNeeded(selectedDisabledItems));
+      emit('update:modelValue', toArrOfObjIfNeeded(selectedDisabledItems));
+    } else {
+      if (!isDisabled(selectedItems.value[0])) {
+        emit('update:modelValue', null);
+      }
+    }
   };
 
   // Watch