@antify/ui 4.1.27 → 4.1.29

package/dist/components/inputs/AntDateInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  computed, onMounted,
+  computed, onMounted, ref,
 } from 'vue';
 import AntField from '../forms/AntField.vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
@@ -9,9 +9,6 @@ import AntIcon from '../AntIcon.vue';
 import {
   Size,
 } from '../../enums/Size.enum';
-import {
-  useVModel,
-} from '@vueuse/core';
 import {
   Grouped, InputState, State,
 } from '../../enums';
@@ -66,7 +63,7 @@ const emit = defineEmits([
   'update:inputRef',
   'validate',
 ]);
-const _modelValue = useVModel(props, 'modelValue', emit);
+const _modelValue = ref<string | null>(props.modelValue);
 const _inputRef = defineModel<HTMLInputElement | null>('inputRef', {
   default: null,
 });
@@ -100,6 +97,18 @@ function onClickCalendar() {
 
   _inputRef.value?.showPicker();
 }
+
+const onBlur = () => {
+  if (!_modelValue.value) {
+    _modelValue.value = null;
+
+    emit('update:modelValue', null);
+
+    return;
+  }
+
+  emit('update:modelValue', _modelValue.value);
+};
 </script>
 
 <template>
@@ -127,6 +136,7 @@ function onClickCalendar() {
         :max="max"
         :grouped="_nullable ? Grouped.left : Grouped.none"
         v-bind="$attrs"
+        @blur="onBlur"
         @validate="val => $emit('validate', val)"
       >
         <template #icon-right>

package/dist/components/inputs/AntSelect.vue

@@ -44,9 +44,6 @@ import {
   IconSize,
 } from '../__types';
 import AntSelectMenu from './Elements/AntSelectMenu.vue';
-import {
-  useVModel,
-} from '@vueuse/core';
 
 defineOptions({
   inheritAttrs: false,
@@ -70,6 +67,7 @@ const props = withDefaults(defineProps<{
   expanded?: boolean;
   messages?: string[];
   inputRef?: HTMLInputElement | null;
+  maxHeight?: string;
 }>(), {
   state: InputState.base,
   grouped: Grouped.none,
@@ -81,6 +79,7 @@ const props = withDefaults(defineProps<{
   expanded: true,
   messages: () => [],
   inputRef: null,
+  maxHeight: '350px',
 });
 const emit = defineEmits([
   'update:modelValue',
@@ -88,7 +87,9 @@ const emit = defineEmits([
   'blur',
   'validate',
 ]);
-const isOpen = ref(false);
+const isOpen = defineModel<boolean>('open', {
+  default: false,
+});
 const _modelValue = computed({
   get: () => props.modelValue,
   set: (val: string | number | null) => {
@@ -96,7 +97,15 @@ const _modelValue = computed({
   },
 });
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
-const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
+
+const lastValidLabel = ref<string | null>(null);
+
+const valueLabel = computed(() => {
+  const found = props.options.find(option => option.value === _modelValue.value);
+
+  return found ? found.label : lastValidLabel.value;
+});
+
 const selectedOption = computed(() => props.options.find(option => option.value === _modelValue.value) || null);
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
@@ -223,12 +232,20 @@ function onBlur(e: FocusEvent) {
   emit('blur', e);
 }
 
-function onClickOutside() {
+function onClickOutside(e) {
   if (!isOpen.value) {
     return;
   }
 
+  const menuElement = dropDownRef.value?.floating;
+
+  if (menuElement && menuElement.contains(e.target as Node)) {
+    return;
+  }
+
   isOpen.value = false;
+
+  emit('validate', props.modelValue);
   _inputRef.value?.focus();
 }
 
@@ -250,6 +267,27 @@ function onClickRemoveButton() {
   _inputRef.value?.focus();
   _modelValue.value = null;
 }
+
+function onElementSelect(value: string | number | null) {
+  _modelValue.value = value;
+
+  emit('validate', value);
+
+  _inputRef.value?.focus();
+}
+
+watch([
+  () => props.options,
+  () => _modelValue.value,
+], () => {
+  const found = props.options.find(option => option.value === _modelValue.value);
+
+  if (found) {
+    lastValidLabel.value = found.label;
+  }
+}, {
+  immediate: true,
+});
 </script>
 
 <template>
@@ -290,7 +328,13 @@ function onClickRemoveButton() {
           :size="size"
           :state="state"
           :close-on-enter="true"
+          :max-height="maxHeight"
+          @select-element="onElementSelect"
         >
+          <template #contentBefore>
+            <slot name="selectMenuContentBefore" />
+          </template>
+
           <template #contentLeft="props">
             <slot
               name="contentLeft"
@@ -305,6 +349,10 @@ function onClickRemoveButton() {
             />
           </template>
 
+          <template #empty>
+            <slot name="empty" />
+          </template>
+
           <AntSkeleton
             :visible="skeleton"
             rounded

package/dist/components/inputs/AntSwitch.vue

@@ -187,7 +187,6 @@ function onBlur(e: FocusEvent) {
       <div
         v-if="hasSlotContent($slots['default'])"
         class="relative flex items-center"
-        :class="props.size === Size.lg || props.size === Size.md ||props.size === Size.sm ? 'h-5' : 'h-4'"
       >
         <span :class="valueClasses">
           <slot />

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -22,7 +22,7 @@ import type {
   Validator,
 } from '@antify/validate';
 import {
-  autoPlacement, autoUpdate, flip, offset, useFloating,
+  autoUpdate, flip, offset, useFloating,
 } from '@floating-ui/vue';
 
 const emit = defineEmits([
@@ -43,12 +43,14 @@ const props = withDefaults(defineProps<{
   closeOnEnter?: boolean;
   autoSelectFirstOnOpen?: boolean;
   closeOnSelectItem?: boolean;
+  maxHeight?: string;
 }>(), {
   state: InputState.base,
   focusOnOpen: true,
   closeOnEnter: false,
   autoSelectFirstOnOpen: true,
   closeOnSelectItem: true,
+  maxHeight: '350px',
 });
 const reference = ref<HTMLElement | null | undefined>(props.inputRef);
 const elementSize = useElementSize(reference);
@@ -80,32 +82,16 @@ const _modelValue = useVModel(props, 'modelValue', emit);
 const isOpen = useVModel(props, 'open', emit);
 const focusedDropDownItem = useVModel(props, 'focused', emit);
 const dropdownClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-base-300 border-base-300',
-    [InputState.success]: 'bg-success-500 border-success-500',
-    [InputState.info]: 'bg-info-500 border-info-500',
-    [InputState.warning]: 'bg-warning-500 border-warning-500',
-    [InputState.danger]: 'bg-danger-500 border-danger-500',
-  };
-
   return {
     'w-fit border outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
     'rounded-md': true,
-    [variants[props.state]]: true,
+    'bg-base-300 border-base-300': true,
   };
 });
 const dropDownItemClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-white text-for-white-bg-font',
-    [InputState.success]: 'bg-success-100 border-success-100-font',
-    [InputState.info]: 'bg-info-100 border-info-100-font',
-    [InputState.warning]: 'bg-warning-100 border-warning-100-font',
-    [InputState.danger]: 'bg-danger-100 border-danger-100-font',
-  };
-
   return {
     'flex items-center select-none text-ellipsis overflow-hidden whitespace-nowrap min-h-fit': true,
-    [variants[props.state]]: true,
+    'bg-white text-for-white-bg-font': true,
     // Size
     'p-1 text-xs gap-1': props.size === Size.xs2,
     'p-1.5 text-xs gap1.5': props.size === Size.xs,
@@ -241,17 +227,8 @@ function getActiveDropDownItemClasses(option: SelectOption) {
     return {};
   }
 
-  const variants: Record<InputState, string> = {
-    [InputState.base]: '!bg-base-100',
-    [InputState.success]: 'bg-success-200',
-    [InputState.info]: 'bg-info-200',
-    [InputState.warning]: 'bg-warning-200',
-    [InputState.danger]: 'bg-danger-200',
-  };
-
   return option.value === focusedDropDownItem.value ? {
-    'bg-white': false,
-    [variants[props.state]]: true,
+    '!bg-base-100': true,
   } : {};
 }
 
@@ -272,9 +249,31 @@ function onClickDropDownItem(e: MouseEvent, option: SelectOption) {
   _modelValue.value = option.value || null;
 }
 
+function getOptionClasses(option: SelectOption, index: number) {
+  const prevOption = props.options[index - 1];
+
+  return {
+    ...dropDownItemClasses.value,
+    ...getActiveDropDownItemClasses(option),
+    'cursor-pointer': !option.isGroupLabel,
+    'text-base-600' : true,
+    'sticky top-[-1px] z-20 font-bold bg-white': option.isGroupLabel,
+    'border-y border-base-300': option.isGroupLabel,
+    '-mt-px': option.isGroupLabel,
+    'border-t border-base-300':
+      !option.isGroupLabel &&
+      index !== 0 &&
+      (!prevOption || !prevOption.isGroupLabel),
+  };
+}
+
 watch(_modelValue, (val) => {
   focusedDropDownItem.value = Array.isArray(val) ? val[0] : val;
 });
+
+defineExpose({
+  floating,
+});
 </script>
 
 <template>
@@ -288,44 +287,73 @@ watch(_modelValue, (val) => {
       <div
         v-if="isOpen"
         ref="floating"
-        :class="dropdownClasses"
-        :style="{minWidth: `${elementSize.width.value}px!important`, ...floatingStyles}"
+        :class="[
+          dropdownClasses,
+          'flex flex-col overflow-hidden',
+        ]"
+        :style="{
+          minWidth: `${elementSize.width.value}px`,
+          maxHeight: props.maxHeight,
+          ...floatingStyles}"
         data-e2e="select-menu"
         :data-e2e-state="state"
       >
-        <div class="flex flex-col gap-px">
+        <div
+          v-if="$slots.contentBefore"
+          class="flex-shrink-0 z-30"
+        >
+          <slot name="contentBefore" />
+        </div>
+
+        <div class="flex-grow overflow-y-auto min-h-0">
+          <div class="flex flex-col -mt-px">
+            <div
+              v-for="(option, index) in options"
+              :key="`option-${index}`"
+              data-e2e="select-menu-item"
+              :class="getOptionClasses(option, index)"
+              @click="(e) => onClickDropDownItem(e, option)"
+              @mouseover="() => focusedDropDownItem = !option.isGroupLabel && option.value !== undefined ? option.value : null"
+            >
+              <div class="flex items-center justify-between w-full">
+                <div class="flex items-center gap-2">
+                  <slot
+                    name="contentLeft"
+                    v-bind="option"
+                  />
+                  <span>{{ option.label }}</span>
+                </div>
+
+                <div
+                  v-if="option.tag"
+                >
+                  <span class="px-1 py-0.5 rounded bg-base-200 text-[12px]">
+                    {{ option.tag }}
+                  </span>
+                </div>
+
+                <slot
+                  name="contentRight"
+                  v-bind="option"
+                />
+              </div>
+            </div>
+          </div>
+
           <div
-            v-for="(option, index) in options"
-            :key="`option-${index}`"
-            data-e2e="select-menu-item"
-            :class="{
-              ...dropDownItemClasses,
-              ...getActiveDropDownItemClasses(option),
-              'font-bold': option.isGroupLabel,
-            }"
-            @click="(e) => onClickDropDownItem(e, option)"
-            @mouseover="() => focusedDropDownItem = !option.isGroupLabel && option.value !== undefined ? option.value : null"
+            v-if="options.length === 0"
+            :class="[
+              dropDownItemClasses,
+              {
+                'flex items-center justify-center p-2 pt-2 bg-white font-medium italic text-center': $slots.contentBefore
+              }
+            ]"
           >
-            <slot
-              name="contentLeft"
-              v-bind="option"
-            />
-            {{ option.label }}
-            <slot
-              name="contentRight"
-              v-bind="option"
-            />
+            <slot name="empty">
+              Keine Einträge vorhanden
+            </slot>
           </div>
         </div>
-
-        <div
-          v-if="options.length === 0"
-          :class="{...dropDownItemClasses}"
-        >
-          <slot name="empty">
-            Keine Einträge vorhanden
-          </slot>
-        </div>
       </div>
     </teleport>
   </div>

package/dist/components/inputs/__stories/AntDateInput.stories.js

@@ -22,10 +22,8 @@ const meta = {
   },
   argTypes: {
     modelValue: {
-      table: {
-        type: {
-          summary: "string|null"
-        }
+      control: {
+        type: "text"
       }
     },
     type: {

package/dist/components/inputs/__stories/AntDateInput.stories.mjs

@@ -23,10 +23,8 @@ const meta = {
   },
   argTypes: {
     modelValue: {
-      table: {
-        type: {
-          summary: "string|null"
-        }
+      control: {
+        type: "text"
       }
     },
     type: {

package/dist/components/inputs/__stories/AntSelect.stories.d.ts

@@ -14,4 +14,5 @@ export declare const disabled: Story;
 export declare const grouped: Story;
 export declare const withPlaceholder: Story;
 export declare const ellipsisText: Story;
+export declare const AdvancedCustomDropdown: Story;
 export declare const summary: Story;

package/dist/components/inputs/__stories/AntSelect.stories.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withPlaceholder = exports.withDeleted = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.longOptions = exports.grouped = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
-var _Size = require("../../../enums/Size.enum");
+exports.withPlaceholder = exports.withDeleted = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.longOptions = exports.grouped = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = exports.AdvancedCustomDropdown = void 0;
 var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
 var _AntIcon = _interopRequireDefault(require("../../AntIcon.vue"));
 var _AntSelectMenu = _interopRequireDefault(require("../Elements/AntSelectMenu.vue"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _vue = require("vue");
-var _enums = require("../../../enums");
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _AntSearch = _interopRequireDefault(require("../AntSearch.vue"));
+var _AntButton = _interopRequireDefault(require("../../AntButton.vue"));
+var _enums = require("../../../enums");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Select",
@@ -49,10 +50,10 @@ const meta = {
       control: {
         type: "select"
       },
-      options: Object.values(_Size.Size),
+      options: Object.values(_enums.Size),
       table: {
         defaultValue: {
-          summary: _Size.Size.md
+          summary: _enums.Size.md
         }
       }
     },
@@ -375,6 +376,259 @@ const ellipsisText = exports.ellipsisText = {
     nullable: true
   }
 };
+const AdvancedCustomDropdown = exports.AdvancedCustomDropdown = {
+  render: args => ({
+    components: {
+      AntSelect: _AntSelect.default,
+      AntSearch: _AntSearch.default,
+      AntButton: _AntButton.default,
+      AntIcon: _AntIcon.default
+    },
+    setup() {
+      const searchTerm = (0, _vue.ref)(null);
+      const isSelectOpen = (0, _vue.ref)(false);
+      const activeFilter = (0, _vue.ref)("all");
+      const modelValue = (0, _vue.ref)(args.modelValue);
+      const rawPractitioners = [{
+        name: "Item 1",
+        type: "first",
+        loc: "Group Name - First"
+      }, {
+        name: "Item 1",
+        type: "first",
+        loc: "Group Name - First"
+      }, {
+        name: "Item 1",
+        type: "first",
+        loc: "Group Name - First"
+      }, {
+        name: "Item 1",
+        type: "first",
+        loc: "Group Name - First"
+      }, {
+        name: "Item 1",
+        type: "first",
+        loc: "Group Name - First"
+      }, {
+        name: "Item 1",
+        type: "first",
+        loc: "Group Name - First"
+      }, {
+        name: "Item 1",
+        type: "first",
+        loc: "Group Name - First"
+      }, {
+        name: "Item 2",
+        type: "second",
+        loc: "Group Name - Second"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 3",
+        type: "third",
+        loc: "Group Name - Third"
+      }, {
+        name: "Item 4",
+        type: "fourth",
+        loc: "Group Name - Fourth"
+      }, {
+        name: "Item 5",
+        type: "fifth",
+        loc: "Group Name - Fifth"
+      }, {
+        name: "Item 6",
+        type: "sixth",
+        loc: "Group Name - Sixth"
+      }, {
+        name: "Item 7",
+        type: "seventh",
+        loc: "Group Name - Seventh"
+      }];
+      const typeToTag = {
+        first: "FIRST",
+        second: "SECOND",
+        third: "THIRD",
+        fourth: "FOURTH",
+        fifth: "FIFTH",
+        sixth: "SIXTH",
+        seventh: "SEVENTH"
+      };
+      const filteredOptions = (0, _vue.computed)(() => {
+        const search = searchTerm.value;
+        const groups = {};
+        rawPractitioners.forEach((p, index) => {
+          const matchesFilter = activeFilter.value === "all" || p.type === activeFilter.value;
+          const matchesSearch = !search || p.name.toLowerCase().includes(search.toLowerCase());
+          if (matchesFilter && matchesSearch) {
+            if (!groups[p.loc]) {
+              groups[p.loc] = [];
+            }
+            groups[p.loc].push({
+              label: p.name,
+              value: `${p.name}-${p.loc}-${index}`,
+              tag: typeToTag[p.type] || "Another"
+            });
+          }
+        });
+        const result = [];
+        Object.keys(groups).sort().forEach(loc => {
+          result.push({
+            label: loc,
+            value: `group-header-${loc}`,
+            isGroupLabel: true
+          });
+          result.push(...groups[loc]);
+        });
+        return result;
+      });
+      (0, _vue.watch)(isSelectOpen, val => {
+        if (!val) {
+          searchTerm.value = null;
+        }
+      });
+      return {
+        args,
+        isSelectOpen,
+        modelValue,
+        searchTerm,
+        activeFilter,
+        filteredOptions,
+        State: _enums.State,
+        GroupedEnum: _enums.Grouped
+      };
+    },
+    template: `
+      <div>
+        <AntSelect
+          v-bind="args"
+          v-model="modelValue"
+          v-model:open="isSelectOpen"
+          :options="filteredOptions"
+        >
+          <template #selectMenuContentBefore>
+            <div class="flex p-2 border-b border-base-300 bg-white gap-2">
+              <AntSearch v-model="searchTerm" placeholder="Search..." />
+
+              <div class="flex">
+                <AntButton
+                  :state="activeFilter === 'all' ? State.primary : State.base"
+                  :filled="activeFilter === 'all'"
+                  :grouped="GroupedEnum.left"
+                  @click="activeFilter = 'all'"
+                >All</AntButton>
+                <AntButton
+                  :state="activeFilter === 'first' ? State.primary : State.base"
+                  :filled="activeFilter === 'first'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'first'"
+                >First</AntButton>
+                <AntButton
+                  :state="activeFilter === 'second' ? State.primary : State.base"
+                  :filled="activeFilter === 'second'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'second'"
+                >Second</AntButton>
+                <AntButton
+                  :state="activeFilter === 'third' ? State.primary : State.base"
+                  :filled="activeFilter === 'third'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'third'"
+                >Third</AntButton>
+                <AntButton
+                  :state="activeFilter === 'fourth' ? State.primary : State.base"
+                  :filled="activeFilter === 'fourth'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'fourth'"
+                >Fourth</AntButton>
+                <AntButton
+                  :state="activeFilter === 'fifth' ? State.primary : State.base"
+                  :filled="activeFilter === 'fifth'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'fifth'"
+                >Fifth</AntButton>
+                <AntButton
+                  :state="activeFilter === 'sixth' ? State.primary : State.base"
+                  :filled="activeFilter === 'sixth'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'sixth'"
+                >Sixth</AntButton>
+                <AntButton
+                  :state="activeFilter === 'seventh' ? State.primary : State.base"
+                  :filled="activeFilter === 'seventh'"
+                  :grouped="GroupedEnum.right"
+                  @click="activeFilter = 'seventh'"
+                >Seventh</AntButton>
+              </div>
+            </div>
+          </template>
+
+          <template #empty>
+            Mock message when no match is found
+          </template>
+        </AntSelect>
+      </div>
+    `
+  }),
+  args: {
+    label: "Placeholder",
+    description: "Sticky groups, Tags and Search inside base AntSelect",
+    modelValue: null
+  }
+};
 const summary = exports.summary = {
   parameters: {
     chromatic: {

package/dist/components/inputs/__stories/AntSelect.stories.mjs

@@ -1,6 +1,3 @@
-import {
-  Size
-} from "../../../enums/Size.enum.mjs";
 import AntSelect from "../AntSelect.vue";
 import AntIcon from "../../AntIcon.vue";
 import AntDropdown from "../Elements/AntSelectMenu.vue";
@@ -10,13 +7,19 @@ import {
 import {
   computed,
   onMounted,
-  ref
+  ref,
+  watch
 } from "vue";
-import {
-  InputState
-} from "../../../enums/index.mjs";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntSearch from "../AntSearch.vue";
+import AntButton from "../../AntButton.vue";
+import {
+  State,
+  Grouped as GroupedEnum,
+  InputState,
+  Size
+} from "../../../enums/index.mjs";
 const meta = {
   title: "Inputs/Select",
   component: AntSelect,
@@ -412,6 +415,287 @@ export const ellipsisText = {
     nullable: true
   }
 };
+export const AdvancedCustomDropdown = {
+  render: (args) => ({
+    components: {
+      AntSelect,
+      AntSearch,
+      AntButton,
+      AntIcon
+    },
+    setup() {
+      const searchTerm = ref(null);
+      const isSelectOpen = ref(false);
+      const activeFilter = ref("all");
+      const modelValue = ref(args.modelValue);
+      const rawPractitioners = [
+        {
+          name: "Item 1",
+          type: "first",
+          loc: "Group Name - First"
+        },
+        {
+          name: "Item 1",
+          type: "first",
+          loc: "Group Name - First"
+        },
+        {
+          name: "Item 1",
+          type: "first",
+          loc: "Group Name - First"
+        },
+        {
+          name: "Item 1",
+          type: "first",
+          loc: "Group Name - First"
+        },
+        {
+          name: "Item 1",
+          type: "first",
+          loc: "Group Name - First"
+        },
+        {
+          name: "Item 1",
+          type: "first",
+          loc: "Group Name - First"
+        },
+        {
+          name: "Item 1",
+          type: "first",
+          loc: "Group Name - First"
+        },
+        {
+          name: "Item 2",
+          type: "second",
+          loc: "Group Name - Second"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 3",
+          type: "third",
+          loc: "Group Name - Third"
+        },
+        {
+          name: "Item 4",
+          type: "fourth",
+          loc: "Group Name - Fourth"
+        },
+        {
+          name: "Item 5",
+          type: "fifth",
+          loc: "Group Name - Fifth"
+        },
+        {
+          name: "Item 6",
+          type: "sixth",
+          loc: "Group Name - Sixth"
+        },
+        {
+          name: "Item 7",
+          type: "seventh",
+          loc: "Group Name - Seventh"
+        }
+      ];
+      const typeToTag = {
+        first: "FIRST",
+        second: "SECOND",
+        third: "THIRD",
+        fourth: "FOURTH",
+        fifth: "FIFTH",
+        sixth: "SIXTH",
+        seventh: "SEVENTH"
+      };
+      const filteredOptions = computed(() => {
+        const search = searchTerm.value;
+        const groups = {};
+        rawPractitioners.forEach((p, index) => {
+          const matchesFilter = activeFilter.value === "all" || p.type === activeFilter.value;
+          const matchesSearch = !search || p.name.toLowerCase().includes(search.toLowerCase());
+          if (matchesFilter && matchesSearch) {
+            if (!groups[p.loc]) {
+              groups[p.loc] = [];
+            }
+            groups[p.loc].push({
+              label: p.name,
+              value: `${p.name}-${p.loc}-${index}`,
+              tag: typeToTag[p.type] || "Another"
+            });
+          }
+        });
+        const result = [];
+        Object.keys(groups).sort().forEach((loc) => {
+          result.push({
+            label: loc,
+            value: `group-header-${loc}`,
+            isGroupLabel: true
+          });
+          result.push(...groups[loc]);
+        });
+        return result;
+      });
+      watch(isSelectOpen, (val) => {
+        if (!val) {
+          searchTerm.value = null;
+        }
+      });
+      return {
+        args,
+        isSelectOpen,
+        modelValue,
+        searchTerm,
+        activeFilter,
+        filteredOptions,
+        State,
+        GroupedEnum
+      };
+    },
+    template: `
+      <div>
+        <AntSelect
+          v-bind="args"
+          v-model="modelValue"
+          v-model:open="isSelectOpen"
+          :options="filteredOptions"
+        >
+          <template #selectMenuContentBefore>
+            <div class="flex p-2 border-b border-base-300 bg-white gap-2">
+              <AntSearch v-model="searchTerm" placeholder="Search..." />
+
+              <div class="flex">
+                <AntButton
+                  :state="activeFilter === 'all' ? State.primary : State.base"
+                  :filled="activeFilter === 'all'"
+                  :grouped="GroupedEnum.left"
+                  @click="activeFilter = 'all'"
+                >All</AntButton>
+                <AntButton
+                  :state="activeFilter === 'first' ? State.primary : State.base"
+                  :filled="activeFilter === 'first'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'first'"
+                >First</AntButton>
+                <AntButton
+                  :state="activeFilter === 'second' ? State.primary : State.base"
+                  :filled="activeFilter === 'second'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'second'"
+                >Second</AntButton>
+                <AntButton
+                  :state="activeFilter === 'third' ? State.primary : State.base"
+                  :filled="activeFilter === 'third'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'third'"
+                >Third</AntButton>
+                <AntButton
+                  :state="activeFilter === 'fourth' ? State.primary : State.base"
+                  :filled="activeFilter === 'fourth'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'fourth'"
+                >Fourth</AntButton>
+                <AntButton
+                  :state="activeFilter === 'fifth' ? State.primary : State.base"
+                  :filled="activeFilter === 'fifth'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'fifth'"
+                >Fifth</AntButton>
+                <AntButton
+                  :state="activeFilter === 'sixth' ? State.primary : State.base"
+                  :filled="activeFilter === 'sixth'"
+                  :grouped="GroupedEnum.center"
+                  @click="activeFilter = 'sixth'"
+                >Sixth</AntButton>
+                <AntButton
+                  :state="activeFilter === 'seventh' ? State.primary : State.base"
+                  :filled="activeFilter === 'seventh'"
+                  :grouped="GroupedEnum.right"
+                  @click="activeFilter = 'seventh'"
+                >Seventh</AntButton>
+              </div>
+            </div>
+          </template>
+
+          <template #empty>
+            Mock message when no match is found
+          </template>
+        </AntSelect>
+      </div>
+    `
+  }),
+  args: {
+    label: "Placeholder",
+    description: "Sticky groups, Tags and Search inside base AntSelect",
+    modelValue: null
+  }
+};
 export const summary = {
   parameters: {
     chromatic: {

package/dist/components/inputs/__types/AntSelect.types.d.ts

@@ -3,4 +3,5 @@ export type SelectOption = {
     value?: string | number;
     isGroupLabel?: boolean;
     isDeleted?: boolean;
+    tag?: string;
 } & Record<string, unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "4.1.27",
+  "version": "4.1.29",
   "private": false,
   "type": "module",
   "exports": {