enhance MultiSelect component with maxCount, maxTagCount, and maxTagTextLength props (#1016)

Author: anserwaseem

.changeset/hungry-teachers-cheat.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+enhance MultiSelect component with maxCount, maxTagCount, and maxTagTextLength props

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -201,6 +201,9 @@ View:
                         placeholder: "Select From Groups"
                         value: ["hbingley1@plala.or.jp", "val 2"]
                         data: getData.body.users
+                        maxCount: 5
+                        maxTagCount: 3
+                        maxTagTextLength: 5
                         labelKey: firstName
                         valueKey: email
                         items: ${ensemble.storage.get('dummyData')}

packages/runtime/src/widgets/Form/MultiSelect.tsx

@@ -14,7 +14,15 @@ import {
 } from "@ensembleui/react-framework";
 import { PlusCircleOutlined } from "@ant-design/icons";
 import { Select as SelectComponent, Space, Form } from "antd";
-import { get, isArray, isEmpty, isEqual, isObject, isString } from "lodash-es";
+import {
+  get,
+  isArray,
+  isEmpty,
+  isEqual,
+  isObject,
+  isString,
+  toNumber,
+} from "lodash-es";
 import { useDebounce } from "react-use";
 import { WidgetRegistry } from "../../registry";
 import { useEnsembleAction } from "../../runtime/hooks/useEnsembleAction";
@@ -59,6 +67,12 @@ export type MultiSelectProps = {
   } & EnsembleAction;
   hintStyle?: EnsembleWidgetStyles;
   allowCreateOptions?: boolean;
+  /**	The max number of items can be selected */
+  maxCount: Expression<number>;
+  /** Max tag count to show */
+  maxTagCount: Expression<number | "responsive">;
+  /** Max tag text length to show */
+  maxTagTextLength: Expression<number>;
 } & EnsembleWidgetProps<MultiSelectStyles> &
   FormInputProps<object[] | string[]>;
 
@@ -98,8 +112,8 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
         isObject(item)
           ? {
               ...(item as { [key: string]: unknown }),
-              label: get(item, values?.labelKey || "label") as string,
-              value: get(item, values?.valueKey || "value") as string,
+              label: get(item, values.labelKey || "label") as string,
+              value: get(item, values.valueKey || "value") as string,
             }
           : item,
       );
@@ -174,7 +188,7 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
         onSearchAction.callback({ search: searchValue });
       }
     },
-    props?.onSearch?.debounceMs || 0,
+    props.onSearch?.debounceMs || 0,
     [searchValue],
   );
 
@@ -333,6 +347,15 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
             filterOption={props.onSearch ? false : handleFilterOption}
             id={values?.id}
             labelRender={labelRender}
+            maxCount={values?.maxCount ? toNumber(values.maxCount) : undefined}
+            maxTagCount={
+              values?.maxTagCount as number | "responsive" | undefined
+            }
+            maxTagTextLength={
+              values?.maxTagTextLength
+                ? toNumber(values.maxTagTextLength)
+                : undefined
+            }
             mode={values?.allowCreateOptions ? "tags" : "multiple"}
             notFoundContent="No Results"
             onChange={handleChange}

packages/runtime/src/widgets/Form/__tests__/MultiSelect.test.tsx

@@ -538,5 +538,112 @@ describe("MultiSelect Widget", () => {
       expect(screen.queryByText("Option 44", { selector })).toBeVisible();
     });
   });
+
+  test("respects maxCount limit when selecting options", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "MultiSelect",
+            properties: {
+              id: "multiSelect",
+              label: "Choose Option",
+              maxCount: 2,
+              data: [
+                { label: "Option 1", value: "option1" },
+                { label: "Option 2", value: "option2" },
+                { label: "Option 3", value: "option3" },
+                { label: "Option 4", value: "option4" },
+              ],
+            },
+          },
+          ...defaultFormButton,
+        ]}
+        id="form"
+      />,
+      { wrapper: FormTestWrapper },
+    );
+
+    const getValueButton = screen.getByText("Get Value");
+
+    userEvent.click(screen.getByRole("combobox"));
+    userEvent.click(screen.getByTitle("Option 1"));
+    userEvent.click(screen.getByTitle("Option 2"));
+
+    // should not be selectable
+    userEvent.click(screen.getByTitle("Option 3"));
+
+    fireEvent.click(getValueButton);
+
+    await waitFor(() => {
+      expect(logSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ multiSelect: ["option1", "option2"] }),
+      );
+    });
+  });
+
+  test("displays correct number of tags based on maxTagCount", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "MultiSelect",
+            properties: {
+              id: "multiSelect",
+              label: "Choose Option",
+              maxTagCount: 1,
+              data: [
+                { label: "Option 1", value: "option1" },
+                { label: "Option 2", value: "option2" },
+                { label: "Option 3", value: "option3" },
+                { label: "Option 4", value: "option4" },
+              ],
+              value: `\${["option1", "option2", "option3", "option4"]}`,
+            },
+          },
+        ]}
+        id="form"
+      />,
+      { wrapper: FormTestWrapper },
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Option 1")).toBeInTheDocument();
+      expect(screen.getByText("+ 3 ...")).toBeInTheDocument();
+
+      expect(screen.queryByText("Option 2")).toBeNull();
+      expect(screen.queryByText("Option 3")).toBeNull();
+      expect(screen.queryByText("Option 4")).toBeNull();
+    });
+  });
+
+  test("truncates tag text according to maxTagTextLength", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "MultiSelect",
+            properties: {
+              id: "multiSelect",
+              label: "Choose Option",
+              maxTagTextLength: 6,
+              data: [
+                { label: "Very Long Option One", value: "option1" },
+                { label: "Another Long Option", value: "option2" },
+              ],
+              value: `\${["option1", "option2"]}`,
+            },
+          },
+        ]}
+        id="form"
+      />,
+      { wrapper: FormTestWrapper },
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Very L...")).toBeInTheDocument();
+      expect(screen.getByText("Anothe...")).toBeInTheDocument();
+    });
+  });
 });
 /* eslint-enable react/no-children-prop */