From 6f68f60635a21987c62ce9f986f6ebe9503ca551 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 16 Jan 2025 09:34:19 +0100
Subject: [PATCH 01/12] replaced managed state with defineModel

---
 .../composables/helpers/useOutsideClick.ts    |   7 +-
 packages/headless/src/utils/types.ts          |   6 +-
 packages/sit-onyx/.storybook/managed.ts       |   9 --
 packages/sit-onyx/.storybook/preview.ts       |   9 +-
 packages/sit-onyx/.storybook/vModel.ts        |  16 ---
 .../OnyxMiniSearch/OnyxMiniSearch.vue         |  19 +--
 .../src/components/OnyxMiniSearch/types.ts    |   4 -
 .../modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue |  17 +--
 .../modules/OnyxFlyoutMenu/types.ts           |   7 --
 .../modules/OnyxNavButton/OnyxNavButton.vue   |  19 +--
 .../OnyxNavBar/modules/OnyxNavButton/types.ts |   6 -
 .../modules/OnyxUserMenu/OnyxUserMenu.vue     |  15 ++-
 .../modules/OnyxUserMenu/UserMenuLayout.vue   |  32 ++---
 .../OnyxNavBar/modules/OnyxUserMenu/types.ts  |   7 --
 .../OnyxSelect/OnyxSelect.stories.ts          |  17 ---
 .../src/components/OnyxSelect/OnyxSelect.vue  |  88 +++++++-------
 .../src/components/OnyxSelect/types.ts        | 109 ++++++------------
 .../src/composables/useManagedState.spec.ts   |  38 ------
 .../src/composables/useManagedState.ts        |  53 ---------
 19 files changed, 124 insertions(+), 354 deletions(-)
 delete mode 100644 packages/sit-onyx/.storybook/managed.ts
 delete mode 100644 packages/sit-onyx/.storybook/vModel.ts
 delete mode 100644 packages/sit-onyx/src/composables/useManagedState.spec.ts
 delete mode 100644 packages/sit-onyx/src/composables/useManagedState.ts

diff --git a/packages/headless/src/composables/helpers/useOutsideClick.ts b/packages/headless/src/composables/helpers/useOutsideClick.ts
index 2ecc031c6..96d564da4 100644
--- a/packages/headless/src/composables/helpers/useOutsideClick.ts
+++ b/packages/headless/src/composables/helpers/useOutsideClick.ts
@@ -1,13 +1,12 @@
-import type { Arrayable } from "vitest";
-import { toValue, type Ref } from "vue";
-import type { MaybeReactiveSource } from "../../utils/types";
+import { toValue, type MaybeRefOrGetter, type Ref } from "vue";
+import type { Arrayable } from "../../utils/types";
 import { useGlobalEventListener } from "./useGlobalListener";
 
 export type UseOutsideClickOptions = {
   /**
    * HTML element of the component where clicks should be ignored
    */
-  inside: MaybeReactiveSource<Arrayable<HTMLElement | undefined>>;
+  inside: MaybeRefOrGetter<Arrayable<HTMLElement | undefined>>;
   /**
    * Callback when an outside click occurred.
    */
diff --git a/packages/headless/src/utils/types.ts b/packages/headless/src/utils/types.ts
index 897d6f2c1..e7c5995e7 100644
--- a/packages/headless/src/utils/types.ts
+++ b/packages/headless/src/utils/types.ts
@@ -1,5 +1,3 @@
-import type { ComputedRef, MaybeRefOrGetter } from "vue";
-
 /**
  * Adds the entry with the key `Key` and the value of type `TValue` to a record when it is defined.
  * Then the entry is either undefined or exists without being optional.
@@ -25,6 +23,6 @@ export type IsArray<TValue, TMultiple extends boolean = false> = TMultiple exten
   : TValue;
 
 /**
- * Type for any kind of ref source. Preferably used in combination with vue's `toValue` method
+ * A type that can be wrapped in an array.
  */
-export type MaybeReactiveSource<T> = MaybeRefOrGetter<T> | ComputedRef<T>;
+export type Arrayable<T> = T | Array<T>;
diff --git a/packages/sit-onyx/.storybook/managed.ts b/packages/sit-onyx/.storybook/managed.ts
deleted file mode 100644
index c02513b43..000000000
--- a/packages/sit-onyx/.storybook/managed.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createSymbolArgTypeEnhancer } from "@sit-onyx/storybook-utils";
-
-export const enhanceManagedSymbol = createSymbolArgTypeEnhancer(
-  "MANAGED_SYMBOL",
-  "If no value (or `undefined`) is passed, `MANAGED_SYMBOL` is the internal default value for this prop.\n" +
-    "It signals the component that the prop is managed and it's state tracked internally.\n" +
-    "So in that case no prop binding or `v-model` is necessary.\n" +
-    "Updates for the prop will still be emitted.\n",
-);
diff --git a/packages/sit-onyx/.storybook/preview.ts b/packages/sit-onyx/.storybook/preview.ts
index a9b54ec39..29ef0fba3 100644
--- a/packages/sit-onyx/.storybook/preview.ts
+++ b/packages/sit-onyx/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import { createPreview } from "@sit-onyx/storybook-utils";
+import { createPreview, withVModelDecorator } from "@sit-onyx/storybook-utils";
 import { setup, type Preview } from "@storybook/vue3";
 import { createToastProvider, TOAST_PROVIDER_INJECTION_KEY } from "../src";
 import docsTemplate from "./docs-template.mdx";
@@ -12,9 +12,8 @@ import { a11yTags } from "../src/a11yConfig";
 import "../src/styles/index.scss";
 import "./docs-template.scss";
 import { enhanceFormInjectedSymbol } from "./formInjected";
-import { enhanceManagedSymbol } from "./managed";
 import brandImage from "./public/onyx-logo-long.svg";
-import { withOnyxVModelDecorator } from "./vModel";
+
 const enabledRules = getRules(a11yTags).map((ruleMetadata) => ({
   id: ruleMetadata.ruleId,
   enabled: true,
@@ -24,7 +23,7 @@ const axeConfig: Spec = { rules: enabledRules };
 
 const basePreview = createPreview(
   {
-    argTypesEnhancers: [enhanceManagedSymbol, enhanceFormInjectedSymbol],
+    argTypesEnhancers: [enhanceFormInjectedSymbol],
     parameters: {
       docs: {
         page: docsTemplate,
@@ -42,7 +41,7 @@ const basePreview = createPreview(
     globalTypes: {
       ...onyxThemeGlobalType,
     },
-    decorators: [withOnyxTheme, withOnyxVModelDecorator],
+    decorators: [withOnyxTheme, withVModelDecorator()],
   },
   {
     brandImage,
diff --git a/packages/sit-onyx/.storybook/vModel.ts b/packages/sit-onyx/.storybook/vModel.ts
deleted file mode 100644
index db9b18e59..000000000
--- a/packages/sit-onyx/.storybook/vModel.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { withVModelDecorator } from "@sit-onyx/storybook-utils";
-import type { StrictInputType } from "storybook/internal/types";
-
-const isManaged = (argType: StrictInputType) =>
-  argType.table?.defaultValue?.summary === "MANAGED_SYMBOL";
-
-/**
- * Custom `withVModelDecorator` filter function, because we want don't want to override values that are managed.
- */
-export const withOnyxVModelDecorator = withVModelDecorator({
-  filter: ({ table, name }, _, argTypes) => {
-    if (table?.category !== "events" || !name.startsWith("update:")) return false;
-    const propName = name.replace(/^update:/, "");
-    return !argTypes.some((argType) => argType.name === propName && isManaged(argType));
-  },
-});
diff --git a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
index 672141800..ca7901fbe 100644
--- a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
+++ b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
@@ -13,29 +13,22 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps<OnyxMiniSearchProps>();
 
 const emit = defineEmits<{
-  /**
-   * Emitted when the current search value changes.
-   */
-  "update:modelValue": [input: string];
   /**
    * Emitted when the clear button is clicked.
    */
   clear: [];
 }>();
 
+/**
+ * Current input/search value.
+ */
+const modelValue = defineModel<string>();
+
 const { rootAttrs, restAttrs } = useRootAttrs();
 const { densityClass } = useDensity(props);
 const { t } = injectI18n();
 const input = ref<HTMLInputElement>();
 
-/**
- * Current value (with getter and setter) that can be used as "v-model" for the native input.
- */
-const value = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value ?? ""),
-});
-
 const placeholder = computed(() => t.value("select.searchPlaceholder"));
 
 defineExpose({
@@ -54,7 +47,7 @@ defineExpose({
   >
     <input
       ref="input"
-      v-model="value"
+      v-model="modelValue"
       class="onyx-mini-search__input onyx-text"
       :placeholder="placeholder"
       type="text"
diff --git a/packages/sit-onyx/src/components/OnyxMiniSearch/types.ts b/packages/sit-onyx/src/components/OnyxMiniSearch/types.ts
index 994e941ca..ec73bebf6 100644
--- a/packages/sit-onyx/src/components/OnyxMiniSearch/types.ts
+++ b/packages/sit-onyx/src/components/OnyxMiniSearch/types.ts
@@ -5,8 +5,4 @@ export type OnyxMiniSearchProps = DensityProp & {
    * (Aria) label of the input.
    */
   label: string;
-  /**
-   * Current input/search value.
-   */
-  modelValue?: string;
 };
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue
index 4211a293a..9b171e298 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue
@@ -1,24 +1,17 @@
 <script setup lang="ts" generic="TValue extends SelectOptionValue = SelectOptionValue">
 import { createMenuButton } from "@sit-onyx/headless";
-import { computed, toRef } from "vue";
-import { MANAGED_SYMBOL, useManagedState } from "../../../../composables/useManagedState";
+import { computed } from "vue";
 import type { SelectOptionValue } from "../../../../types";
 import type { OnyxFlyoutMenuProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxFlyoutMenuProps>(), {
-  open: MANAGED_SYMBOL,
   trigger: "hover",
 });
 
-const emit = defineEmits<{
-  "update:open": [isOpen: boolean];
-}>();
-
-const { state: isExpanded } = useManagedState(
-  toRef(() => props.open),
-  false,
-  (newVal) => emit("update:open", newVal),
-);
+/**
+ * If the flyout is expanded or not.
+ */
+const isExpanded = defineModel<boolean>("open", { default: false });
 
 const slots = defineSlots<{
   /**
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/types.ts b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/types.ts
index 8e67014f8..29987b36e 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/types.ts
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/types.ts
@@ -1,11 +1,4 @@
-import type { ManagedProp } from "../../../../composables/useManagedState";
-
 export type OnyxFlyoutMenuProps = {
-  /**
-   * If the flyout is expanded or not.
-   * If `undefined`, the state will be managed internally.
-   */
-  open?: ManagedProp<boolean>;
   /**
    * If the flyout is expanded on click or hover.
    * The default value is 'hover' which will expand the flyout on hover.
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
index d9ad0d17e..2204204eb 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import chevronRightSmall from "@sit-onyx/icons/chevron-right-small.svg?raw";
-import { computed, inject, toRef } from "vue";
-import { MANAGED_SYMBOL, useManagedState } from "../../../../composables/useManagedState";
+import { computed, inject } from "vue";
 import { useMoreListChild } from "../../../../composables/useMoreList";
 import OnyxExternalLinkIcon from "../../../OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue";
 import OnyxIcon from "../../../OnyxIcon/OnyxIcon.vue";
@@ -12,7 +11,6 @@ import type { OnyxNavButtonProps } from "./types";
 const props = withDefaults(defineProps<OnyxNavButtonProps>(), {
   active: false,
   withExternalIcon: "auto",
-  mobileChildrenOpen: MANAGED_SYMBOL,
 });
 
 const emit = defineEmits<{
@@ -20,10 +18,6 @@ const emit = defineEmits<{
    * Emitted when the nav button is clicked (via click or keyboard).
    */
   navigate: [href: string, event: MouseEvent];
-  /**
-   * Emitted when the mobile children are open or closed.
-   */
-  "update:mobileChildrenOpen": [isOpen: boolean];
 }>();
 
 const slots = defineSlots<{
@@ -37,6 +31,11 @@ const slots = defineSlots<{
   children?(): unknown;
 }>();
 
+/**
+ * Controls the open state for the mobile children.
+ */
+const mobileChildrenOpen = defineModel<boolean>("mobileChildrenOpen", { default: false });
+
 const isMobile = inject(
   MOBILE_NAV_BAR_INJECTION_KEY,
   computed(() => false),
@@ -44,12 +43,6 @@ const isMobile = inject(
 const hasChildren = computed(() => !!slots.children);
 const { componentRef, isVisible } = useMoreListChild(NAV_BAR_MORE_LIST_INJECTION_KEY);
 
-const { state: mobileChildrenOpen } = useManagedState(
-  toRef(() => props.mobileChildrenOpen),
-  false,
-  (newVal) => emit("update:mobileChildrenOpen", newVal),
-);
-
 const handleParentClick = (event: MouseEvent) => {
   if (isMobile?.value && hasChildren.value && !mobileChildrenOpen.value) {
     mobileChildrenOpen.value = true;
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/types.ts b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/types.ts
index 633de6540..ae405d51a 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/types.ts
@@ -1,12 +1,6 @@
-import type { ManagedProp } from "../../../../composables/useManagedState";
 import type { OnyxExternalLinkIcon } from "../../../OnyxExternalLinkIcon/types";
 
 export type OnyxNavButtonProps = OnyxExternalLinkIcon & {
-  /**
-   * Controls the open state for the mobile children.
-   * Is managed internally if not provided.
-   */
-  mobileChildrenOpen?: ManagedProp<boolean>;
   /**
    * Label to show inside the Nav item.
    * You can use the `default` slot to display custom content.
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue
index 825c751c6..c96579e44 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue
@@ -1,16 +1,11 @@
 <script lang="ts" setup>
 import { computed, inject } from "vue";
-import { MANAGED_SYMBOL } from "../../../../composables/useManagedState";
 import OnyxAvatar from "../../../OnyxAvatar/OnyxAvatar.vue";
 import { MOBILE_NAV_BAR_INJECTION_KEY } from "../../types";
 import type { OnyxUserMenuProps } from "./types";
 import UserMenuLayout from "./UserMenuLayout.vue";
 
-const props = withDefaults(defineProps<OnyxUserMenuProps>(), { flyoutOpen: MANAGED_SYMBOL });
-
-const emit = defineEmits<{
-  "update:flyoutOpen": [isOpen: boolean];
-}>();
+const props = defineProps<OnyxUserMenuProps>();
 
 const slots = defineSlots<{
   /**
@@ -23,6 +18,11 @@ const slots = defineSlots<{
   footer?(): unknown;
 }>();
 
+/**
+ * If the flyout is expanded or not. Only has an effect in desktop (non-mobile) mode.
+ */
+const flyoutOpen = defineModel<boolean>("flyoutOpen", { default: false });
+
 const avatar = computed(() => {
   return { src: props.avatar, label: props.username };
 });
@@ -35,11 +35,10 @@ const isMobile = inject(
 
 <template>
   <UserMenuLayout
+    v-model:flyout-open="flyoutOpen"
     class="onyx-component onyx-user-menu"
     :class="{ 'onyx-user-menu--mobile': isMobile }"
     :is-mobile="isMobile"
-    :flyout-open="flyoutOpen"
-    @update:flyout-open="emit('update:flyoutOpen', $event)"
   >
     <template #button="{ trigger }">
       <button class="onyx-user-menu__trigger onyx-text" type="button" v-bind="trigger">
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue
index eb899f2de..c498c7c6a 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue
@@ -1,36 +1,22 @@
 <script lang="ts" setup generic="TValue extends SelectOptionValue = SelectOptionValue">
 // this layout component is only used internally for the user menu component
 // to easily switch between mobile and desktop layout
-import { useModel } from "vue";
-import { MANAGED_SYMBOL, type ManagedProp } from "../../../../composables/useManagedState";
 import { injectI18n } from "../../../../i18n";
 import type { SelectOptionValue } from "../../../../types";
 import OnyxListItem from "../../../OnyxListItem/OnyxListItem.vue";
 import OnyxFlyoutMenu from "../OnyxFlyoutMenu/OnyxFlyoutMenu.vue";
 
-const props = withDefaults(
-  defineProps<{
-    /**
-     * If the mobile layout should be used instead of the desktop layout.
-     */
-    isMobile: boolean;
-    /**
-     * Controls the open state of the user menu flyout.
-     * Will be managed automatically, if not provided as a prop.
-     */
-    flyoutOpen?: ManagedProp<boolean>;
-  }>(),
-  {
-    // eslint-disable-next-line vue/no-boolean-default
-    flyoutOpen: MANAGED_SYMBOL,
-  },
-);
-
-defineEmits<{
-  "update:flyoutOpen": [isOpen: boolean];
+const props = defineProps<{
+  /**
+   * If the mobile layout should be used instead of the desktop layout.
+   */
+  isMobile: boolean;
 }>();
 
-const flyoutOpen = useModel(props, "flyoutOpen");
+/**
+ * Controls the open state of the user menu flyout.
+ */
+const flyoutOpen = defineModel<boolean>("flyoutOpen", { default: false });
 
 const slots = defineSlots<{
   /**
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts
index 437ca2321..a1ff72d8f 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts
@@ -1,5 +1,3 @@
-import type { ManagedProp } from "../../../../composables/useManagedState";
-
 export type OnyxUserMenuProps = {
   /**
    * User name.
@@ -13,9 +11,4 @@ export type OnyxUserMenuProps = {
    * Optional user description that is displayed when the menu is opened.
    */
   description?: string;
-  /**
-   * If the flyout is expanded or not. Only has an effect in desktop (non-mobile) mode.
-   * If `undefined`, the state will be managed internally.
-   */
-  flyoutOpen?: ManagedProp<boolean>;
 };
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts
index e8c47d2ac..28d7b3ad8 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts
@@ -276,23 +276,6 @@ export const WithSearch: Story = {
     ...Default.args,
     withSearch: true,
   },
-  decorators: [
-    /**
-     * Decorator to prevent Storybook from setting the searchTerm
-     * which would disable the included filtering by managed search state
-     */
-    (story, ctx) => ({
-      components: { story },
-      setup: () => {
-        watchEffect(() => {
-          ctx.args.searchTerm = undefined;
-          // the following line is needed to keep the reactivity, although it's not clear why
-          ctx.args.searchTerm;
-        });
-      },
-      template: `<story />`,
-    }),
-  ],
 };
 
 const optionsForCustomSearch = [
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 407085ab2..b02b8d495 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -1,20 +1,28 @@
-<script lang="ts" setup generic="TValue extends SelectOptionValue = SelectOptionValue">
+<script
+  lang="ts"
+  setup
+  generic="
+    TWithSearch extends boolean | undefined,
+    TModelValue extends SelectOptionValue | SelectOptionValue[],
+    TMultiple extends TModelValue extends any[] ? true : undefined,
+    TValue extends TModelValue extends (infer TInner)[] ? TInner : TModelValue
+  "
+>
 import { createComboBox, type ComboboxAutoComplete } from "@sit-onyx/headless";
 import {
   computed,
   nextTick,
   ref,
-  toRef,
   toRefs,
   useId,
   useTemplateRef,
   watch,
   watchEffect,
+  type Ref,
 } from "vue";
 import { useCheckAll } from "../../composables/checkAll";
 import { useDensity } from "../../composables/density";
 import { useScrollEnd } from "../../composables/scrollEnd";
-import { MANAGED_SYMBOL, useManagedState } from "../../composables/useManagedState";
 import { useOpenDirection } from "../../composables/useOpenDirection";
 import { injectI18n } from "../../i18n";
 import type { SelectOptionValue } from "../../types";
@@ -29,10 +37,9 @@ import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import OnyxSelectOption from "../OnyxSelectOption/OnyxSelectOption.vue";
 import type { OnyxSelectProps, SelectOption } from "./types";
 
-const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
+const props = withDefaults(defineProps<OnyxSelectProps<TMultiple, TValue, TWithSearch>>(), {
   loading: false,
-  searchTerm: MANAGED_SYMBOL,
-  open: MANAGED_SYMBOL,
+  noFilter: false,
   disabled: FORM_INJECTED_SYMBOL,
   readonly: false,
   truncation: "ellipsis",
@@ -41,15 +48,6 @@ const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
 });
 
 const emit = defineEmits<{
-  /**
-   * Emitted when the current value changes.
-   */
-  "update:modelValue": [value: typeof props.modelValue];
-  /**
-   * Emitted when the current search input value changes.
-   */
-  "update:searchTerm": [searchTerm: string];
-  "update:open": [open: boolean];
   /**
    * Emitted if lazy loading is triggered / the users scrolls to the end of the options.
    * See property `lazyLoading` for enabling the lazy loading.
@@ -84,17 +82,22 @@ const slots = defineSlots<{
 
 const { t } = injectI18n();
 
-const { state: searchTerm, isManaged: managedSearch } = useManagedState(
-  toRef(() => props.searchTerm),
-  "",
-  (v) => emit("update:searchTerm", v),
-);
+/**
+ * Value of the currently selected option or an array of values when the `multiple` prop is `true`.
+ */
+const modelValue = defineModel<TModelValue>();
 
-const { state: open } = useManagedState(
-  toRef(() => props.open),
-  false,
-  (v) => emit("update:open", v),
-);
+/**
+ * Value of the search input, when `withSearch` is `true`.
+ *
+ * Hint: Cover `valueLabel` to prevent the disappearance of the current selections label
+ */
+const searchTerm = defineModel<string>("searchTerm", { default: "" });
+
+/**
+ * If true, the select popover is expanded and visible.
+ */
+const open = defineModel<boolean>("open", { default: false });
 
 const selectRef = ref<HTMLElement>();
 const { openDirection, updateOpenDirection } = useOpenDirection(selectRef);
@@ -109,10 +112,10 @@ const activeValue = ref<TValue>();
  * to work with it in a unified way.
  */
 const arrayValue = computed(() => {
-  if (props.modelValue === undefined) return [];
-  if (props.multiple && Array.isArray(props.modelValue)) return props.modelValue;
-  return [props.modelValue as TValue];
-});
+  if (modelValue.value === undefined) return [];
+  if (props.multiple && Array.isArray(modelValue.value)) return modelValue.value;
+  return [modelValue.value];
+}) as Readonly<Ref<TValue[]>>;
 
 /**
  * Contains an array of labels that will be shown in the OnyxSelectInput.
@@ -137,13 +140,12 @@ const miniSearch = useTemplateRef("miniSearch");
 const selectInput = useTemplateRef("selectInput");
 
 const filteredOptions = computed(() => {
-  // if onyx does not manage the search, we don't filter the options further
-  if (!managedSearch.value) return props.options;
+  // if onyx does not manage the search or no searchTerm is given, we don't filter the options further
+  if (props.noFilter || !searchTerm.value) return props.options;
 
-  // managed filtering
-  return searchTerm.value
-    ? props.options.filter(({ label }: SelectOption) => normalizedIncludes(label, searchTerm.value))
-    : props.options;
+  return props.options.filter(({ label }: SelectOption) =>
+    normalizedIncludes(label, searchTerm.value as string),
+  );
 });
 
 /**
@@ -232,18 +234,18 @@ const onSelect = (selectedOption: TValue) => {
     return;
   }
   if (!props.multiple) {
-    return emit("update:modelValue", selectedOption);
+    modelValue.value = selectedOption as unknown as TModelValue;
+    return;
   }
 
   // add or remove value depending on whether its already selected
   const alreadyInList = arrayValue.value.some((value) => value === selectedOption);
   if (alreadyInList) {
-    emit(
-      "update:modelValue",
-      arrayValue.value.filter((value) => value !== selectedOption),
-    );
+    modelValue.value = arrayValue.value.filter(
+      (value) => value !== selectedOption,
+    ) as unknown as TModelValue;
   } else {
-    emit("update:modelValue", [...arrayValue.value, selectedOption]);
+    modelValue.value = [...arrayValue.value, selectedOption] as unknown[] as TModelValue;
   }
 };
 
@@ -301,7 +303,7 @@ const checkAll = computed(() => {
     const selectedOptions: TValue[] = newValues
       .map((v) => props.options.find(({ value }) => value === v)?.value)
       .filter((option): option is NonNullable<typeof option> => option != undefined);
-    emit("update:modelValue", selectedOptions);
+    modelValue.value = selectedOptions as unknown[] as TModelValue;
   });
 });
 
@@ -423,7 +425,7 @@ defineExpose({ input: computed(() => selectInput.value?.input) });
                   headlessOption({
                     value: option.value,
                     label: option.label,
-                    disabled: option.disabled,
+                    disabled: option.disabled as any,
                     // TODO: remove type cast once its fixed in Vue / vue-tsc version
                     selected: arrayValue.some((value: TValue) => value === option.value),
                   })
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index f3c7fc71e..5f87e9792 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -1,79 +1,49 @@
 import type { DensityProp } from "../../composables/density";
-import type { ManagedProp } from "../../composables/useManagedState";
 import type { AutofocusProp, BaseSelectOption, SelectOptionValue } from "../../types";
 import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import type { OnyxSelectOptionProps } from "../OnyxSelectOption/types";
 
-export type SelectSearchProps =
-  | {
-      /**
-       * Allows the user to filter the list entries.
-       * If enabled, you need to manually filter the options based on the current `searchTerm`.
-       * You can use our `normalizedIncludes()` utility function for this.
-       * No support for `lazyLoading` yet.
-       */
-      withSearch: true;
-      /**
-       * Value of the search input.
-       * Property is managed internally, when undefined. That means:
-       * As default, onyx will handle filtering the options by comparing
-       * the option labels with the `searchTerm`.
-       *
-       * When `searchTerm` is handled by you (not undefined), this behavior is disabled.
-       * Then, you can handle the filtering yourself by reducing the `options` as desired.
-       * Hint: Cover `valueLabel` to prevent the disappearance of the current selections label
-       */
-      searchTerm?: ManagedProp<string>;
-    }
-  | {
-      withSearch?: false;
-      searchTerm?: never;
-    };
-
-export type SelectModelValueProps<TValue extends SelectOptionValue> =
-  | {
-      /**
-       * Allows the selection of multiple options
-       */
-      multiple?: false;
-      /**
-       * Value of the currently selected option.
-       */
-      modelValue?: TValue;
-      withCheckAll?: never;
-    }
-  | {
-      /**
-       * Allows the selection of multiple options
-       */
-      multiple: true;
-      /**
-       * Values of the currently selected options.
-       */
-      modelValue?: TValue[];
-      /**
-       * If true, a checkbox will be displayed to check/uncheck all options.
-       * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior.
-       * Only available if "multiple" is true and no `searchTerm` is provided.
-       */
-      withCheckAll?:
-        | boolean
-        | {
-            /**
-             * Label for the `select all` checkbox.
-             * If unset, a default label will be shown depending on the current locale/language.
-             */
-            label?: string;
-          };
-    };
-
-export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp &
-  SelectModelValueProps<TValue> &
-  SelectSearchProps &
+export type OnyxSelectProps<
+  TMultiple extends boolean | undefined,
+  TValue extends SelectOptionValue = SelectOptionValue,
+  TWithSearch extends boolean | undefined = undefined,
+> = DensityProp &
   Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus" | "disabled"> &
   AutofocusProp &
   Pick<BaseSelectOption, "truncation"> & {
+    /**
+     * Disables the implicit options filtering when the user changes the search term.
+     */
+    noFilter?: boolean;
+    /**
+     * Allows the user to filter the list entries.
+     * If enabled, you need to manually filter the options based on the current `searchTerm`.
+     * You can use our `normalizedIncludes()` utility function for this.
+     * No support for `lazyLoading` yet.
+     */
+    withSearch?: TWithSearch;
+    /**
+     * Allows the selection of multiple options
+     */
+    multiple?: TMultiple;
+    /**
+     * If true, a checkbox will be displayed to check/uncheck all options.
+     * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior.
+     * Only available if "multiple" is true and no `searchTerm` is provided.
+     */
+    withCheckAll?: TMultiple extends true
+      ?
+          | boolean
+          | {
+              /**
+               * Label for the `select all` checkbox.
+               * If unset, a default label will be shown depending on the current locale/language.
+               */
+              label?: string;
+            }
+      : never;
+
     /**
      * Whether the select should be disabled.
      */
@@ -85,11 +55,6 @@ export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue
      * or a manual search is implemented.
      */
     valueLabel?: string | string[];
-    /**
-     * If true, the select popover is expanded and visible.
-     * Property is managed internally, when undefined.
-     */
-    open?: ManagedProp<boolean>;
     /**
      * Alignment of the select flyout relative to the input.
      * If set to full, the width of the flyout will be aligned (100%) with the input of the select.
diff --git a/packages/sit-onyx/src/composables/useManagedState.spec.ts b/packages/sit-onyx/src/composables/useManagedState.spec.ts
deleted file mode 100644
index 2106583f8..000000000
--- a/packages/sit-onyx/src/composables/useManagedState.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { reactive, toRef } from "vue";
-import { MANAGED_SYMBOL, useManagedState, type ManagedProp } from "./useManagedState";
-
-describe("useManagedState", () => {
-  const props = reactive({ custom: "customValue" as ManagedProp<string> });
-  const emitSpy = vi.fn(() => {});
-  const { state, isManaged } = useManagedState(
-    toRef(() => props.custom),
-    "",
-    emitSpy,
-  );
-
-  test("should use prop value as initial value", () => {
-    expect(state.value).toBe("customValue");
-    expect(isManaged.value).toBeFalsy();
-  });
-
-  test("should reflect prop updates", () => {
-    props.custom = "newValue";
-    expect(state.value).toBe("newValue");
-    expect(isManaged.value).toBeFalsy();
-  });
-
-  test("should emit and not update on state writes", () => {
-    state.value = "updatedValue";
-    expect(state.value).toBe("newValue");
-    expect(isManaged.value).toBeFalsy();
-    expect(emitSpy).toBeCalledTimes(1);
-    expect(emitSpy).toBeCalledWith("updatedValue");
-  });
-
-  test("should use state value when prop is undefined", () => {
-    props.custom = MANAGED_SYMBOL;
-    expect(state.value).toBe("updatedValue");
-    expect(isManaged.value).toBeTruthy();
-  });
-});
diff --git a/packages/sit-onyx/src/composables/useManagedState.ts b/packages/sit-onyx/src/composables/useManagedState.ts
deleted file mode 100644
index a80f6a241..000000000
--- a/packages/sit-onyx/src/composables/useManagedState.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { type Ref, computed, ref, toValue } from "vue";
-import { asymComputed } from "./asymmetricComputed";
-
-export type ManagedProp<T> = ManagedSymbolType | T;
-export type ManagedSymbolType = symbol; // we can't use `typeof MANAGED_SYMBOL` as vue is unable to infer its type: https://github.com/SchwarzIT/onyx/issues/1980
-export const MANAGED_SYMBOL = Symbol("MANAGED_SYMBOL");
-
-/**
- * Composable for conditionally managing state based on the prop value.
- *
- * When the prop value is not undefined, the prop value is always used.
- * If the prop value is undefined, then the internal state is used instead.
- *
- * @param prop `toRef(() => props.something)` ref of the optional prop.
- * @param initialState in case of the prop being initially undefined, this will be used as the initial state value.
- * @param emit function that is called when a state write is performed
- * @returns ref of the state and isManaged
- *
- * @example ```ts
- * // IMPORTANT: default value MUST be set to MANAGED_SYMBOL
- * const props = withDefaults(defineProps<{ isExpanded?: ManagedProp<boolean> }>(), { isExpanded: MANAGED_SYMBOL });
- * const emit = defineEmits<{ "update:isExpanded": [isExpanded: boolean] }>();
- *
- * const { state: isExpanded } = useManagedState(
- *  toRef(() => props.isExpanded),
- *  false,
- *  (v) => emit("update:isExpanded", v ?? false),
- * );
- * ```
- */
-export const useManagedState = <
-  T,
-  Prop extends Readonly<Ref<T | ManagedSymbolType>>,
-  Referable extends boolean = false,
-  V = Referable extends true ? T | ManagedSymbolType : T,
->(
-  prop: Prop,
-  initialState: T,
-  emit: (val: T) => void,
-) => {
-  const isManaged = computed(() => prop.value === MANAGED_SYMBOL);
-  const internalState = ref(toValue(isManaged) ? initialState : prop.value) as Ref<T>;
-
-  const state = asymComputed({
-    set: (val: T) => {
-      internalState.value = val;
-      emit(val);
-    },
-    get: () => (isManaged.value ? internalState.value : prop.value) as V,
-  });
-
-  return { state, isManaged };
-};

From e7620b3324c912bf3c1ef1e4a61d3a3895549fba Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 16 Jan 2025 09:43:34 +0100
Subject: [PATCH 02/12] fix type issues

---
 .../OnyxNavBar/modules/OnyxNavButton/NavButtonLayout.vue    | 6 ++----
 .../examples/ComponentShowcase/ComponentShowcase.vue        | 2 +-
 .../src/components/examples/FormExample/FormExample.vue     | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/NavButtonLayout.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/NavButtonLayout.vue
index 8e596846a..2f0bdeb5f 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/NavButtonLayout.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/NavButtonLayout.vue
@@ -32,9 +32,7 @@ const slots = defineSlots<{
 
 const { t } = injectI18n();
 
-const emit = defineEmits<{
-  "update:mobileChildrenOpen": [isOpen: boolean];
-}>();
+const mobileChildrenOpen = defineModel<boolean>("mobileChildrenOpen", { default: false });
 </script>
 
 <template>
@@ -46,7 +44,7 @@ const emit = defineEmits<{
         mode="plain"
         color="neutral"
         :icon="arrowSmallLeft"
-        @click="emit('update:mobileChildrenOpen', false)"
+        @click="mobileChildrenOpen = false"
       />
 
       <slot
diff --git a/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.vue b/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.vue
index 29bd9ef42..1c2b27996 100644
--- a/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.vue
+++ b/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.vue
@@ -33,7 +33,7 @@ import {
 } from "../../..";
 
 type State = {
-  select?: string[];
+  select?: number[];
   textarea?: string;
   pagination: number;
   checkboxGroup?: number[];
diff --git a/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue b/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
index 6e30ee431..676d97c54 100644
--- a/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
+++ b/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
@@ -59,7 +59,7 @@ const fruitOptions = ref(
     "Melon",
     "Raspberry",
     "Strawberry",
-  ].map<SelectOption>((option) => ({ value: option.toLowerCase(), label: option })),
+  ].map<SelectOption<string>>((option) => ({ value: option.toLowerCase(), label: option })),
 );
 
 const legalTerms: CheckboxGroupOption<LegalTerm>[] = [

From 0b5039c40aeb343a4b2db7a036810f111cdf10c5 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 16 Jan 2025 10:11:42 +0100
Subject: [PATCH 03/12] fix tsc issue

---
 apps/playground/tsconfig.app.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/playground/tsconfig.app.json b/apps/playground/tsconfig.app.json
index 06359f411..ef84dc6a0 100644
--- a/apps/playground/tsconfig.app.json
+++ b/apps/playground/tsconfig.app.json
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "composite": true,
     "rootDir": "./src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "baseUrl": "."
   }
 }

From 6910d7e2c8e11a49650334aa76c358bf797b15c8 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 16 Jan 2025 10:24:25 +0100
Subject: [PATCH 04/12] fix open issues

---
 apps/demo-app/src/components/SelectDemo.vue | 16 +++++++++-------
 apps/demo-app/src/views/HomeView.vue        |  2 +-
 apps/demo-app/tsconfig.json                 |  1 +
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/demo-app/src/components/SelectDemo.vue b/apps/demo-app/src/components/SelectDemo.vue
index 624e23795..7b89f7c87 100644
--- a/apps/demo-app/src/components/SelectDemo.vue
+++ b/apps/demo-app/src/components/SelectDemo.vue
@@ -3,11 +3,11 @@ import { normalizedIncludes, OnyxSelect, type SelectOption } from "sit-onyx";
 import { computed, ref } from "vue";
 
 defineProps<{
-  selectOptions: SelectOption[];
+  selectOptions: SelectOption<string>[];
   useSkeleton: boolean;
 }>();
 
-const groupedSelectOptions: SelectOption[] = [
+const groupedSelectOptions = [
   { value: "cat", label: "Cat", group: "Land" },
   { value: "dog", label: "Dog", group: "Land" },
   { value: "tiger", label: "Tiger", group: "Land" },
@@ -18,7 +18,7 @@ const groupedSelectOptions: SelectOption[] = [
   { value: "eel", label: "Eel", group: "Water" },
   { value: "falcon", label: "Falcon", group: "Air" },
   { value: "owl", label: "Owl", group: "Air" },
-];
+] satisfies SelectOption[];
 
 const selectState = ref<string>();
 const groupedSelectState = ref<string>();
@@ -26,14 +26,14 @@ const multiselectState = ref<string[]>();
 
 const lazyLoadedState = ref(15);
 const lazyLoadedLength = ref(10);
-const lazyLoadedOptions = computed<SelectOption[]>(() =>
+const lazyLoadedOptions = computed<SelectOption<number>[]>(() =>
   Array.from({ length: lazyLoadedLength.value }, (_, value) => ({
     value,
     label: `Lazy option ${value}`,
   })),
 );
 
-const filteredState = ref(3);
+const filteredState = ref("3");
 const filterSearchTerm = ref("");
 const filterBase = [
   { value: "0", label: "Option Zero" },
@@ -43,8 +43,10 @@ const filterBase = [
   { value: "4", label: "Option Four" },
   { value: "5", label: "Option Five" },
 ];
-const filterValueLabel = computed(() => filterBase[filteredState.value].label);
-const filteredOptions = computed<SelectOption[]>(() =>
+const filterValueLabel = computed(
+  () => filterBase.find(({ value }) => value === filteredState.value)?.label,
+);
+const filteredOptions = computed(() =>
   filterBase.filter(
     ({ value, label }) =>
       normalizedIncludes(label, filterSearchTerm.value) || value === filterSearchTerm.value,
diff --git a/apps/demo-app/src/views/HomeView.vue b/apps/demo-app/src/views/HomeView.vue
index 140434577..4a11f4eda 100644
--- a/apps/demo-app/src/views/HomeView.vue
+++ b/apps/demo-app/src/views/HomeView.vue
@@ -123,7 +123,7 @@ const selectOptions = [
   "Melon",
   "Raspberry",
   "Strawberry",
-].map<SelectOption>((option) => ({ value: option.toLowerCase(), label: option }));
+].map((option) => ({ value: option.toLowerCase(), label: option }));
 
 const minimalSelectOptions = selectOptions.slice(0, 3);
 
diff --git a/apps/demo-app/tsconfig.json b/apps/demo-app/tsconfig.json
index 908e88405..9433bd974 100644
--- a/apps/demo-app/tsconfig.json
+++ b/apps/demo-app/tsconfig.json
@@ -3,6 +3,7 @@
   "include": ["src/**/*"],
   "compilerOptions": {
     "rootDir": "./src",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "baseUrl": "."
   }
 }

From bae7e65f039d8e6b9761b0ea4b31f78af459308e Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 16 Jan 2025 11:33:56 +0100
Subject: [PATCH 05/12] fix with search type

---
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue | 3 +--
 packages/sit-onyx/src/components/OnyxSelect/types.ts       | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index b02b8d495..27adf0536 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -2,7 +2,6 @@
   lang="ts"
   setup
   generic="
-    TWithSearch extends boolean | undefined,
     TModelValue extends SelectOptionValue | SelectOptionValue[],
     TMultiple extends TModelValue extends any[] ? true : undefined,
     TValue extends TModelValue extends (infer TInner)[] ? TInner : TModelValue
@@ -37,7 +36,7 @@ import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import OnyxSelectOption from "../OnyxSelectOption/OnyxSelectOption.vue";
 import type { OnyxSelectProps, SelectOption } from "./types";
 
-const props = withDefaults(defineProps<OnyxSelectProps<TMultiple, TValue, TWithSearch>>(), {
+const props = withDefaults(defineProps<OnyxSelectProps<TMultiple, TValue>>(), {
   loading: false,
   noFilter: false,
   disabled: FORM_INJECTED_SYMBOL,
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 5f87e9792..7c0b123d4 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -7,7 +7,6 @@ import type { OnyxSelectOptionProps } from "../OnyxSelectOption/types";
 export type OnyxSelectProps<
   TMultiple extends boolean | undefined,
   TValue extends SelectOptionValue = SelectOptionValue,
-  TWithSearch extends boolean | undefined = undefined,
 > = DensityProp &
   Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus" | "disabled"> &
   AutofocusProp &
@@ -22,7 +21,7 @@ export type OnyxSelectProps<
      * You can use our `normalizedIncludes()` utility function for this.
      * No support for `lazyLoading` yet.
      */
-    withSearch?: TWithSearch;
+    withSearch?: boolean;
     /**
      * Allows the selection of multiple options
      */

From d06be1275f4abb35cf2f75cc451c46e8d350c547 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 16 Jan 2025 11:35:12 +0100
Subject: [PATCH 06/12] fix test

---
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx
index 6e25fe33d..93825eb14 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx
@@ -916,7 +916,7 @@ test("should manage filtering internally except when filteredOptions are given",
   ).toBeHidden();
 
   // ACT
-  await component.update({ props: { searchTerm: "1" } });
+  await component.update({ props: { searchTerm: "1", noFilter: true } });
   // ASSERT
   expect(
     await page.getByRole("option").count(),

From f22d97c6f7e93b8bc27c2e74e306c29f34b101a5 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Thu, 16 Jan 2025 13:17:19 +0100
Subject: [PATCH 07/12] docs(changeset): chore: replace redundant
 useManagedState with defineModel

---
 .changeset/three-hornets-shout.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .changeset/three-hornets-shout.md

diff --git a/.changeset/three-hornets-shout.md b/.changeset/three-hornets-shout.md
new file mode 100644
index 000000000..c920fc5a4
--- /dev/null
+++ b/.changeset/three-hornets-shout.md
@@ -0,0 +1,11 @@
+---
+"@sit-onyx/headless": patch
+"sit-onyx": major
+---
+
+chore: replace redundant useManagedState with defineModel
+
+The changes are mostly internal, but the typings were of `OnyxSelect` were improved:
+
+- The `modelValue` now infers a specific subtype of `SelectOptionValue` and the `options` values must match.
+- `withSearch`: Filtering of the options will not automatically disabled anymore when `searchTerm` is bound. Instead `noFilter` must be set.

From 8a225ca3e03aea5f0764f14b0d49f52d283831bd Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 17 Jan 2025 08:51:16 +0100
Subject: [PATCH 08/12] review: update disabled typings and remove todos

---
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue | 5 +----
 packages/sit-onyx/src/components/OnyxSelect/types.ts       | 6 +++++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 27adf0536..3c5d1c55e 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -415,8 +415,6 @@ defineExpose({ input: computed(() => selectInput.value?.input) });
               >
                 {{ group }}
               </li>
-
-              <!-- TODO: remove type cast once its fixed in Vue / vue-tsc version -->
               <OnyxSelectOption
                 v-for="option in groupOptions"
                 :key="option.value.toString()"
@@ -424,8 +422,7 @@ defineExpose({ input: computed(() => selectInput.value?.input) });
                   headlessOption({
                     value: option.value,
                     label: option.label,
-                    disabled: option.disabled as any,
-                    // TODO: remove type cast once its fixed in Vue / vue-tsc version
+                    disabled: option.disabled,
                     selected: arrayValue.some((value: TValue) => value === option.value),
                   })
                 "
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 7c0b123d4..71ef66704 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -82,9 +82,13 @@ export type OnyxSelectProps<
 
 export type SelectOption<TValue extends SelectOptionValue = SelectOptionValue> = Pick<
   BaseSelectOption<TValue>,
-  "value" | "label" | "disabled" | "truncation"
+  "value" | "label" | "truncation"
 > &
   Pick<OnyxSelectOptionProps, "icon"> & {
+    /**
+     * Disables the option and prevents it from being selected.
+     */
+    disabled?: boolean;
     /**
      * Optional group name. If set, all options with the same group name will be grouped below that name.
      * If `group` is used for one option, it should be used for all other options as well.

From a8864d5c296ba9fd87097756c0bdc12f33e36fe4 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 17 Jan 2025 08:52:34 +0100
Subject: [PATCH 09/12] review typings

---
 .../src/components/examples/FormExample/FormExample.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue b/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
index 676d97c54..ab7a4bed8 100644
--- a/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
+++ b/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
@@ -41,7 +41,7 @@ const handleSubmit = () => {
   });
 };
 
-const fruitOptions = ref(
+const fruitOptions = ref<SelectOption[]>(
   [
     "Apple",
     "Banana",
@@ -59,7 +59,7 @@ const fruitOptions = ref(
     "Melon",
     "Raspberry",
     "Strawberry",
-  ].map<SelectOption<string>>((option) => ({ value: option.toLowerCase(), label: option })),
+  ].map((option) => ({ value: option.toLowerCase(), label: option })),
 );
 
 const legalTerms: CheckboxGroupOption<LegalTerm>[] = [

From 2e7a2c1143a8373e34a2a1a82c4c401cc8483dbd Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 17 Jan 2025 08:53:49 +0100
Subject: [PATCH 10/12] add default for OnyxMiniSearch typing

---
 .../sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
index ca7901fbe..c1a2e6f76 100644
--- a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
+++ b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
@@ -22,7 +22,7 @@ const emit = defineEmits<{
 /**
  * Current input/search value.
  */
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string>({ default: "" });
 
 const { rootAttrs, restAttrs } = useRootAttrs();
 const { densityClass } = useDensity(props);

From 77d2951444c42262dace1266a69a855a66e8b5cb Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 17 Jan 2025 09:01:04 +0100
Subject: [PATCH 11/12] fix typing issue

---
 .../src/components/examples/FormExample/FormExample.vue        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue b/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
index ab7a4bed8..560f51981 100644
--- a/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
+++ b/packages/sit-onyx/src/components/examples/FormExample/FormExample.vue
@@ -11,7 +11,6 @@ import {
   OnyxTextarea,
   useToast,
   type CheckboxGroupOption,
-  type SelectOption,
 } from "../../..";
 
 type LegalTerm = "general-terms" | "optional-terms";
@@ -41,7 +40,7 @@ const handleSubmit = () => {
   });
 };
 
-const fruitOptions = ref<SelectOption[]>(
+const fruitOptions = ref(
   [
     "Apple",
     "Banana",

From 21148a0c5266add05b263c25f0fc1836bcfd8a7f Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 17 Jan 2025 13:04:01 +0100
Subject: [PATCH 12/12] readd todo

---
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 3c5d1c55e..f0c7285c4 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -386,6 +386,7 @@ defineExpose({ input: computed(() => selectInput.value?.input) });
                   headlessOption({
                     value: CHECK_ALL_ID as TValue,
                     label: checkAllLabel,
+                    // TODO: remove type cast once its fixed in Vue / vue-tsc version
                     selected: checkAll?.state.value.modelValue,
                   })
                 "