fix: static and dynamic children (#792)

* Expand children for SearchSelect  compatibility

* Expand children for Select compatibility

* Expand children for MultiSelect compatibility

src/components/input-elements/MultiSelect/MultiSelect.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { tremorTwMerge } from "lib";
-import React, { useMemo, useState } from "react";
+import React, { isValidElement, useMemo, useState } from "react";
 
 import { SelectedValueContext } from "contexts";
 
@@ -23,7 +23,7 @@ export interface MultiSelectProps extends React.HTMLAttributes<HTMLDivElement> {
   placeholderSearch?: string;
   disabled?: boolean;
   icon?: React.ElementType | React.JSXElementConstructor<any>;
-  children: React.ReactElement[] | React.ReactElement;
+  children: React.ReactNode;
 }
 
 const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, ref) => {
@@ -43,7 +43,12 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
   const Icon = icon;
 
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
-  const optionsAvailable = getFilteredOptions("", children as React.ReactElement[]);
+
+  const { reactElementChildren, optionsAvailable } = useMemo(() => {
+    const reactElementChildren = React.Children.toArray(children).filter(isValidElement);
+    const optionsAvailable = getFilteredOptions("", reactElementChildren);
+    return { reactElementChildren, optionsAvailable };
+  }, [children]);
 
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -53,11 +58,8 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
   const hasSelection = selectedItems.length > 0;
 
   const filteredOptions = useMemo(
-    () =>
-      searchQuery
-        ? getFilteredOptions(searchQuery, children as React.ReactElement[])
-        : optionsAvailable,
-    [searchQuery, children, optionsAvailable],
+    () => (searchQuery ? getFilteredOptions(searchQuery, reactElementChildren) : optionsAvailable),
+    [searchQuery, reactElementChildren, optionsAvailable],
   );
 
   const handleReset = () => {

src/components/input-elements/SearchSelect/SearchSelect.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useInternalState } from "hooks";
 import { tremorTwMerge } from "lib";
-import React, { useMemo, useState } from "react";
+import React, { isValidElement, useMemo, useState } from "react";
 
 import { Combobox, Transition } from "@headlessui/react";
 import { ArrowDownHeadIcon, XCircleIcon } from "assets";
@@ -23,7 +23,7 @@ export interface SearchSelectProps extends React.HTMLAttributes<HTMLDivElement>
   disabled?: boolean;
   icon?: React.ElementType | React.JSXElementConstructor<any>;
   enableClear?: boolean;
-  children: React.ReactElement[] | React.ReactElement;
+  children: React.ReactNode;
 }
 
 const makeSelectClassName = makeClassName("SearchSelect");
@@ -46,10 +46,16 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
 
   const Icon = icon;
-  const valueToNameMapping = useMemo(() => constructValueToNameMapping(children), [children]);
+
+  const { reactElementChildren, valueToNameMapping } = useMemo(() => {
+    const reactElementChildren = React.Children.toArray(children).filter(isValidElement);
+    const valueToNameMapping = constructValueToNameMapping(reactElementChildren);
+    return { reactElementChildren, valueToNameMapping };
+  }, [children]);
+
   const filteredOptions = useMemo(
-    () => getFilteredOptions(searchQuery, children as React.ReactElement[]),
-    [searchQuery, children],
+    () => getFilteredOptions(searchQuery, reactElementChildren),
+    [searchQuery, reactElementChildren],
   );
 
   const handleReset = () => {

src/components/input-elements/Select/Select.tsx

@@ -2,7 +2,7 @@
 
 import { ArrowDownHeadIcon, XCircleIcon } from "assets";
 import { border, makeClassName, sizing, spacing } from "lib";
-import React, { useMemo } from "react";
+import React, { isValidElement, useMemo } from "react";
 import { constructValueToNameMapping, getSelectButtonColors, hasValue } from "../selectUtils";
 
 import { Listbox, Transition } from "@headlessui/react";
@@ -19,7 +19,7 @@ export interface SelectProps extends React.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   icon?: React.JSXElementConstructor<any>;
   enableClear?: boolean;
-  children: React.ReactElement[] | React.ReactElement;
+  children: React.ReactNode;
 }
 
 const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
@@ -38,7 +38,11 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
 
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
   const Icon = icon;
-  const valueToNameMapping = useMemo(() => constructValueToNameMapping(children), [children]);
+  const valueToNameMapping = useMemo(() => {
+    const reactElementChildren = React.Children.toArray(children).filter(isValidElement);
+    const valueToNameMapping = constructValueToNameMapping(reactElementChildren);
+    return valueToNameMapping;
+  }, [children]);
 
   const handleReset = () => {
     setSelectedValue("");

src/stories/input-elements/MultiSelect.stories.tsx

@@ -1,7 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { MultiSelect } from "components";
-import { SimpleMultiSelect, SimpleMultiSelectControlled } from "./helpers/SimpleMultiSelect";
+import {
+  SimpleMultiSelect,
+  SimpleMultiSelectControlled,
+  SimpleMultiSelectWithStaticAndDynamicChildren,
+} from "./helpers/SimpleMultiSelect";
 
 import { CalendarIcon } from "assets";
 
@@ -18,6 +22,11 @@ export const UncontrolledDefault: Story = {
   args: {},
 };
 
+export const UncontrolledDefaultWithStaticAndDynamicChildren: Story = {
+  render: SimpleMultiSelectWithStaticAndDynamicChildren,
+  args: {},
+};
+
 export const UncontrolledDefaultValues: Story = {
   render: SimpleMultiSelect,
   args: { defaultValue: ["5", "1"] },

src/stories/input-elements/SearchSelect.stories.tsx

@@ -1,7 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { SearchSelect } from "components";
-import { SimpleSearchSelect, SimpleSearchSelectControlled } from "./helpers/SimpleSearchSelect";
+import {
+  SimpleSearchSelect,
+  SimpleSearchSelectControlled,
+  SimpleSearchSelectWithStaticAndDynamicChildren,
+} from "./helpers/SimpleSearchSelect";
 
 import { CalendarIcon } from "assets";
 
@@ -18,6 +22,11 @@ export const UncontrolledDefault: Story = {
   args: {},
 };
 
+export const UncontrolledDefaultWithStaticAndDynamicChildren: Story = {
+  render: SimpleSearchSelectWithStaticAndDynamicChildren,
+  args: {},
+};
+
 export const UncontrolledOnValueChange: Story = {
   render: SimpleSearchSelect,
   args: { onValueChange: (v: string) => alert(v) },

src/stories/input-elements/Select.stories.tsx

@@ -1,7 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Select } from "components";
-import { SimpleSelect, SimpleSelectControlled } from "./helpers/SimpleSelect";
+import {
+  SimpleSelect,
+  SimpleSelectControlled,
+  SimpleSelectWithStaticAndDynamicChildren,
+} from "./helpers/SimpleSelect";
 
 import { CalendarIcon } from "assets";
 
@@ -18,6 +22,11 @@ export const UncontrolledDefault: Story = {
   args: {},
 };
 
+export const UncontrolledDefaultWithStaticAndDynamicChildren: Story = {
+  render: SimpleSelectWithStaticAndDynamicChildren,
+  args: {},
+};
+
 export const UncontrolledOnValueChange: Story = {
   render: SimpleSelect,
   args: { onValueChange: (v: string) => alert(v) },

src/stories/input-elements/helpers/SimpleMultiSelect.tsx

@@ -10,6 +10,18 @@ export const SimpleMultiSelect = (args: any) => (
   </MultiSelect>
 );
 
+export const SimpleMultiSelectWithStaticAndDynamicChildren = (args: any) => {
+  const items = ["item1", "item2"];
+  return (
+    <MultiSelect {...args}>
+      <MultiSelectItem value="item0">item0</MultiSelectItem>
+      {items.map((item) => {
+        return <MultiSelectItem value={item} key={item} />;
+      })}
+    </MultiSelect>
+  );
+};
+
 export const SimpleMultiSelectControlled = () => {
   const [value, setValue] = React.useState<string[]>([]);
 

src/stories/input-elements/helpers/SimpleSearchSelect.tsx

@@ -15,6 +15,18 @@ export const SimpleSearchSelect = (args: any) => (
   </SearchSelect>
 );
 
+export const SimpleSearchSelectWithStaticAndDynamicChildren = (args: any) => {
+  const items = ["item1", "item2"];
+  return (
+    <SearchSelect {...args}>
+      <SearchSelectItem value="item0">item0</SearchSelectItem>
+      {items.map((item) => {
+        return <SearchSelectItem value={item} key={item} />;
+      })}
+    </SearchSelect>
+  );
+};
+
 export const SimpleSearchSelectControlled = (args: any) => {
   const [value, setValue] = React.useState<string>("5");
   return (

src/stories/input-elements/helpers/SimpleSelect.tsx

@@ -17,6 +17,18 @@ export const SimpleSelect = (args: any) => (
   </Select>
 );
 
+export const SimpleSelectWithStaticAndDynamicChildren = (args: any) => {
+  const items = ["item1", "item2"];
+  return (
+    <Select {...args}>
+      <SelectItem value="item0">item0</SelectItem>
+      {items.map((item) => {
+        return <SelectItem value={item} key={item} />;
+      })}
+    </Select>
+  );
+};
+
 export function SimpleSelectControlled() {
   const [value, setValue] = React.useState("5");
 

src/tests/input-elements/MultiSelect.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 
 import MultiSelect from "components/input-elements/MultiSelect/MultiSelect";
@@ -14,4 +14,23 @@ describe("MultiSelect", () => {
       </MultiSelect>,
     );
   });
+
+  test("renders the MultiSelect component with static and dynamic children", () => {
+    const placeholder = "Select options...";
+    const items = ["item1", "item2"];
+    render(
+      <MultiSelect placeholder={placeholder}>
+        <MultiSelectItem value="item0">item0</MultiSelectItem>
+        {items.map((item) => {
+          return <MultiSelectItem value={item} key={item} />;
+        })}
+      </MultiSelect>,
+    );
+
+    fireEvent.click(screen.getByText(placeholder));
+
+    expect(screen.queryByText("item0")).toBeTruthy();
+    expect(screen.queryByText("item1")).toBeTruthy();
+    expect(screen.queryByText("item2")).toBeTruthy();
+  });
 });

src/tests/input-elements/SearchSelect.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 
 import SearchSelect from "components/input-elements/SearchSelect/SearchSelect";
@@ -14,4 +14,23 @@ describe("SearchSelect", () => {
       </SearchSelect>,
     );
   });
+
+  test("renders the SelectBox component with static and dynamic children", () => {
+    const placeholder = "Select options...";
+    const items = ["item1", "item2"];
+    render(
+      <SearchSelect placeholder={placeholder}>
+        <SearchSelectItem value="item0">item0</SearchSelectItem>
+        {items.map((item) => {
+          return <SearchSelectItem value={item} key={item} />;
+        })}
+      </SearchSelect>,
+    );
+
+    fireEvent.click(screen.getByPlaceholderText(placeholder));
+
+    expect(screen.queryByText("item0")).toBeTruthy();
+    expect(screen.queryByText("item1")).toBeTruthy();
+    expect(screen.queryByText("item2")).toBeTruthy();
+  });
 });

src/tests/input-elements/Select.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 
 import Select from "components/input-elements/Select/Select";
@@ -14,4 +14,23 @@ describe("Select", () => {
       </Select>,
     );
   });
+
+  test("renders the Select component with static and dynamic children", () => {
+    const placeholder = "Select options...";
+    const items = ["item1", "item2"];
+    render(
+      <Select placeholder={placeholder}>
+        <SelectItem value="item0">item0</SelectItem>
+        {items.map((item) => {
+          return <SelectItem value={item} key={item} />;
+        })}
+      </Select>,
+    );
+
+    fireEvent.click(screen.getByText(placeholder));
+
+    expect(screen.queryByText("item0")).toBeTruthy();
+    expect(screen.queryByText("item1")).toBeTruthy();
+    expect(screen.queryByText("item2")).toBeTruthy();
+  });
 });