feat(DataGrid): implemented a column search inside the hideCoulumns feature

.changeset/dry-canyons-ring.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxDataGrid) implemented a column search inside the hideColumns feature.

packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue

@@ -38,5 +38,11 @@ const features = computed(() => [withHideColumns.value]);
 </script>
 
 <template>
-  <OnyxDataGrid :columns :data :features />
+  <OnyxDataGrid :columns :data :features class="data-grid" />
 </template>
+
+<style lang="scss" scoped>
+.data-grid {
+  padding-bottom: 4rem;
+}
+</style>

packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx

@@ -70,6 +70,49 @@ test("should hide and show columns", async ({ mount }) => {
   });
 });
 
+test("should filter hidden columns via search", async ({ mount }) => {
+  const state = ref<(keyof Entry)[]>([]);
+  // ARRANGE
+  const component = await mount(
+    <TestCase onUpdate:state={(newState) => (state.value = newState)} allHidable />,
+  );
+  const revealButton = component.getByRole("button", { name: "Show hidden columns" });
+  const menuItem = component.getByRole("menuitem", { name: "Hide column" });
+  const openMoreActions = async (name: string) =>
+    component
+      .getByRole("columnheader", { name: `${name} Toggle column actions`, exact: true })
+      .getByLabel("Toggle column actions")
+      .click();
+
+  await openMoreActions("a");
+  await component.getByRole("menuitem", { name: "Hide column" }).click();
+  await openMoreActions("c");
+  await menuItem.click();
+
+  await revealButton.click();
+
+  const searchInput = component.getByRole("textbox", { name: "Filter the list items" });
+
+  await test.step("Filter the list", async () => {
+    await searchInput.fill("a");
+
+    await expect(component.getByRole("menuitem", { name: "a", exact: true })).toBeVisible();
+    await expect(component.getByRole("menuitem", { name: "c", exact: true })).toBeHidden();
+    await expect(component).toHaveScreenshot("data-grid-hide-columns-search-filtered.png");
+  });
+
+  await test.step("Clear search via clear button", async () => {
+    await component.getByRole("button", { name: "Clear" }).click();
+    await expect(searchInput).toHaveValue("");
+    await expect(component.getByRole("menuitem", { name: "c", exact: true })).toBeVisible();
+  });
+
+  await test.step("Search with no results", async () => {
+    await searchInput.fill("non-existent-column");
+    await expect(component.getByRole("menuitem")).toHaveCount(0);
+  });
+});
+
 test("last Column should not be hidable", async ({ mount }) => {
   const state = ref<(keyof Entry)[]>([]);
 

packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts

@@ -1,7 +1,9 @@
 import { iconCircleInformation, iconEyeDisabled, iconPlusSmall } from "@sit-onyx/icons";
 import { computed, h, ref, toRef, type AriaAttributes, type Ref } from "vue";
 import type { ComponentSlots } from "vue-component-type-helpers";
+import { normalizedIncludes } from "../../../../utils/strings.js";
 import OnyxIcon from "../../../OnyxIcon/OnyxIcon.vue";
+import OnyxMiniSearch from "../../../OnyxMiniSearch/OnyxMiniSearch.vue";
 import OnyxFlyoutMenu from "../../../OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue";
 import OnyxMenuItem from "../../../OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue";
 import OnyxSystemButton from "../../../OnyxSystemButton/OnyxSystemButton.vue";
@@ -32,6 +34,8 @@ export const useHideColumns = <TEntry extends DataGridEntry>(
       columnConfig.value.filter((c) => hiddenColumnKeys.value.has(c.key)),
     );
 
+    const searchTerm = ref("");
+
     const flyoutMenu = () =>
       h(
         OnyxFlyoutMenu,
@@ -50,17 +54,30 @@ export const useHideColumns = <TEntry extends DataGridEntry>(
               ...trigger,
             }),
           options: () => {
-            return Array.from(hiddenColumns.value)
-              .sort((a, b) => Intl.Collator(i18n.locale.value).compare(a.label, b.label))
-              .map(({ key, label }) =>
-                h(
-                  OnyxMenuItem,
-                  {
-                    onClick: () => hiddenColumnKeys.value.delete(key),
-                  },
-                  () => label,
+            return [
+              h(OnyxMiniSearch, {
+                label: i18n.t.value("select.searchInputLabel"),
+                modelValue: searchTerm.value,
+                "onUpdate:modelValue": (value: string) => (searchTerm.value = value),
+                onClear: () => (searchTerm.value = ""),
+                autofocus: true,
+              }),
+              Array.from(hiddenColumns.value)
+                .filter(({ label }) => {
+                  if (!searchTerm.value) return true;
+                  return normalizedIncludes(label, searchTerm.value);
+                })
+                .sort((a, b) => Intl.Collator(i18n.locale.value).compare(a.label, b.label))
+                .map(({ key, label }) =>
+                  h(
+                    OnyxMenuItem,
+                    {
+                      onClick: () => hiddenColumnKeys.value.delete(key),
+                    },
+                    () => label,
+                  ),
                 ),
-              );
+            ];
           },
         } satisfies ComponentSlots<typeof OnyxFlyoutMenu>,
       );

packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue

@@ -55,6 +55,7 @@ defineExpose({
     :class="['onyx-component', 'onyx-mini-search', densityClass]"
     v-bind="rootAttrs"
     :style="{ '--onyx-placeholder-character-count': placeholder.length }"
+    @click.stop
   >
     <input
       ref="input"