Merge pull request #292 from LifeSG/nested-multi-select-long-lived

Nested multi select long lived

src/form/form-nested-multi-select.tsx

@@ -0,0 +1,29 @@
+import { InputNestedMultiSelect } from "../input-nested-multi-select";
+import { FormWrapper } from "./form-wrapper";
+import { FormNestedMultiSelectProps } from "./types";
+
+export const FormNestedMultiSelect = <V1, V2, V3>({
+    label,
+    errorMessage,
+    id = "form-nested-multi-select",
+    "data-error-testid": errorTestId,
+    "data-testid": testId,
+    ...otherProps
+}: FormNestedMultiSelectProps<V1, V2, V3>): JSX.Element => {
+    return (
+        <FormWrapper
+            id={id}
+            label={label}
+            errorMessage={errorMessage}
+            data-error-testid={errorTestId}
+            disabled={otherProps.disabled}
+        >
+            <InputNestedMultiSelect
+                id={`${id}-base`}
+                data-testid={testId || id}
+                error={!!errorMessage}
+                {...otherProps}
+            />
+        </FormWrapper>
+    );
+};

src/form/index.ts

@@ -6,6 +6,7 @@ import { FormInputGroup } from "./form-input-group";
 import { FormLabel } from "./form-label";
 import { FormMultiSelect } from "./form-multi-select";
 import { FormNestedSelect } from "./form-nested-select";
+import { FormNestedMultiSelect } from "./form-nested-multi-select";
 import { FormPhoneNumberInput } from "./form-phone-number-input";
 import { FormPredictiveTextInput } from "./form-predictive-text-input";
 import { FormRangeSelect } from "./form-range-select";
@@ -23,6 +24,7 @@ export const Form = {
     Label: FormLabel,
     MultiSelect: FormMultiSelect,
     NestedSelect: FormNestedSelect,
+    NestedMultiSelect: FormNestedMultiSelect,
     Select: FormSelect,
     RangeSelect: FormRangeSelect,
     Textarea: FormTextarea,

src/form/types.ts

@@ -3,6 +3,7 @@ import { DateRangeInputProps } from "../date-range-input/types";
 import { InputGroupPartialProps } from "../input-group/types";
 import { InputMultiSelectPartialProps } from "../input-multi-select/types";
 import { InputNestedSelectPartialProps } from "../input-nested-select";
+import { InputNestedMultiSelectPartialProps } from "../input-nested-multi-select";
 import { InputRangeSelectPartialProps } from "../input-range-select/types";
 import { InputSelectPartialProps } from "../input-select/types";
 import { TextareaPartialProps } from "../input-textarea/types";
@@ -81,6 +82,10 @@ export interface FormNestedSelectProps<V1, V2, V3>
     extends InputNestedSelectPartialProps<V1, V2, V3>,
         BaseFormElementProps {}
 
+export interface FormNestedMultiSelectProps<V1, V2, V3>
+    extends InputNestedMultiSelectPartialProps<V1, V2, V3>,
+        BaseFormElementProps {}
+
 export interface FormDateInputProps
     extends DateInputProps,
         BaseFormElementProps {}

src/index.ts

@@ -25,6 +25,7 @@ export * from "./input";
 export * from "./input-group";
 export * from "./input-multi-select";
 export * from "./input-nested-select";
+export * from "./input-nested-multi-select";
 export * from "./input-range-select";
 export * from "./input-select";
 export * from "./input-textarea";

src/input-nested-multi-select/index.ts

@@ -0,0 +1,2 @@
+export * from "./input-nested-multi-select";
+export * from "./types";