chore: add wds multiselect component

app/client/package.json

@@ -388,4 +388,4 @@
     "@types/react": "^17.0.2",
     "postcss": "8.4.31"
   }
-}
+}

app/client/packages/design-system/widgets/package.json

@@ -26,7 +26,7 @@
     "@tabler/icons-react": "^3.10.0",
     "clsx": "^2.0.0",
     "lodash": "*",
-    "react-aria-components": "^1.2.1",
+    "react-aria-components": "^1.6.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-transition-group": "^4.4.5",

app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeading.tsx

@@ -17,6 +17,8 @@ function CalendarHeading(
   [props, ref] = useContextProps(props, ref, HeadingContext);
   const state = useContext(CalendarStateContext);
 
+  if (!state) return null;
+
   return (
     <div className={styles.monthYearDropdown}>
       <CalendarMonthDropdown state={state} />

app/client/packages/design-system/widgets/src/components/Checkbox/src/Checkbox.tsx

@@ -1,3 +1,4 @@
+import { clsx } from "clsx";
 import React, { forwardRef } from "react";
 import type { ForwardedRef } from "react";
 import { Text, Icon } from "@appsmith/wds";
@@ -12,6 +13,7 @@ const _Checkbox = (
 ) => {
   const {
     children,
+    className,
     isIndeterminate,
     isRequired,
     labelPosition = "end",
@@ -22,7 +24,7 @@ const _Checkbox = (
     <HeadlessCheckbox
       ref={ref}
       {...rest}
-      className={styles.checkbox}
+      className={clsx(styles.checkbox, className)}
       data-label-position={labelPosition}
       isIndeterminate={isIndeterminate}
     >

app/client/packages/design-system/widgets/src/components/Datepicker/src/Datepicker.tsx

@@ -94,7 +94,11 @@ export const DatePicker = <T extends DateValue>(props: DatePickerProps<T>) => {
                       label="Time"
                       maxValue={timeMaxValue}
                       minValue={timeMinValue}
-                      onChange={state.setTimeValue}
+                      onChange={(value) => {
+                        if (value) {
+                          state.setTimeValue(value);
+                        }
+                      }}
                       placeholderValue={timePlaceholder}
                       value={state.timeValue}
                     />

app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./FieldError";
 export type { FieldErrorProps } from "./types";
+export { default as fieldErrorStyles } from "./styles.module.css";

app/client/packages/design-system/widgets/src/components/ListBox/src/ListBox.tsx

@@ -3,12 +3,13 @@ import styles from "./styles.module.css";
 import { ListBox as HeadlessListBox } from "react-aria-components";
 
 import type { ListBoxProps } from "./types";
+import clsx from "clsx";
 
 export function ListBox(props: ListBoxProps) {
-  const { children, ...rest } = props;
+  const { children, className, ...rest } = props;
 
   return (
-    <HeadlessListBox {...rest} className={styles.listBox}>
+    <HeadlessListBox {...rest} className={clsx(styles.listBox, className)}>
       {children}
     </HeadlessListBox>
   );

app/client/packages/design-system/widgets/src/components/ListBox/src/index.ts

@@ -1,2 +1,2 @@
 export { ListBox } from "./ListBox";
-export { default as listStyles } from "./styles.module.css";
+export { default as listBoxStyles } from "./styles.module.css";

app/client/packages/design-system/widgets/src/components/ListBoxItem/src/ListBoxItem.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 import { Icon, Text } from "@appsmith/wds";
 import { ListBoxItem as HeadlessListBoxItem } from "react-aria-components";
@@ -6,12 +7,21 @@ import styles from "./styles.module.css";
 import type { ListBoxItemProps } from "./types";
 
 export function ListBoxItem(props: ListBoxItemProps) {
-  const { children, icon, ...rest } = props;
+  const { children, className, icon, ...rest } = props;
 
   return (
-    <HeadlessListBoxItem {...rest} className={styles.listBoxItem}>
-      {icon && <Icon name={icon} />}
-      <Text lineClamp={1}>{children}</Text>
+    <HeadlessListBoxItem
+      {...rest}
+      className={clsx(styles.listBoxItem, className)}
+    >
+      {typeof children === "function" ? (
+        children
+      ) : (
+        <>
+          {icon && <Icon name={icon} />}
+          <Text lineClamp={1}>{children}</Text>
+        </>
+      )}
     </HeadlessListBoxItem>
   );
 }

app/client/packages/design-system/widgets/src/components/ListBoxItem/src/types.ts

@@ -1,5 +1,5 @@
-import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
 import type { IconProps } from "@appsmith/wds";
+import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
 
 export interface ListBoxItemProps extends AriaListBoxItemProps<object> {
   icon?: IconProps["name"];

app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx

@@ -1,35 +1,30 @@
 import {
   Popover,
-  listStyles,
+  listBoxStyles,
   useRootContainer,
   POPOVER_LIST_BOX_MAX_HEIGHT,
 } from "@appsmith/wds";
-import React, { createContext, useContext } from "react";
+import React from "react";
 import { Menu as HeadlessMenu } from "react-aria-components";
 
 import type { MenuProps } from "./types";
 import clsx from "clsx";
 
-const MenuNestingContext = createContext(0);
-
 export const Menu = (props: MenuProps) => {
   const { children, className, ...rest } = props;
   const root = useRootContainer();
 
-  const nestingLevel = useContext(MenuNestingContext);
-  const isRootMenu = nestingLevel === 0;
-
   return (
-    <MenuNestingContext.Provider value={nestingLevel + 1}>
-      {/* Only the parent Popover should be placed in the root. Placing child popoves in root would cause the menu to function incorrectly */}
-      <Popover
-        UNSTABLE_portalContainer={isRootMenu ? root : undefined}
-        maxHeight={POPOVER_LIST_BOX_MAX_HEIGHT}
+    <Popover
+      UNSTABLE_portalContainer={root}
+      maxHeight={POPOVER_LIST_BOX_MAX_HEIGHT}
+    >
+      <HeadlessMenu
+        className={clsx(listBoxStyles.listBox, className)}
+        {...rest}
       >
-        <HeadlessMenu className={clsx(listStyles.listBox, className)} {...rest}>
-          {children}
-        </HeadlessMenu>
-      </Popover>
-    </MenuNestingContext.Provider>
+        {children}
+      </HeadlessMenu>
+    </Popover>
   );
 };

app/client/packages/design-system/widgets/src/components/MultiSelect/index.ts

@@ -0,0 +1 @@
+export * from "./src";

app/client/packages/design-system/widgets/src/components/MultiSelect/src/MultiSelect.tsx

@@ -0,0 +1,185 @@
+import clsx from "clsx";
+import React, { useRef, useState } from "react";
+
+import { useField } from "react-aria";
+import {
+  DialogTrigger,
+  UNSTABLE_Autocomplete,
+  useFilter,
+  ButtonContext,
+  type Selection,
+} from "react-aria-components";
+
+import { setInteractionModality } from "@react-aria/interactions";
+
+import { Text } from "../../Text";
+import styles from "./styles.module.css";
+import { ListBox } from "../../ListBox";
+import {
+  Popover,
+  POPOVER_LIST_BOX_MAX_HEIGHT,
+  useRootContainer,
+} from "../../Popover";
+import { selectStyles } from "../../Select";
+import { TextField } from "../../TextField";
+import { FieldLabel } from "../../FieldLabel";
+import { textInputStyles } from "../../Input";
+import { inputFieldStyles } from "../../Field";
+import type { MultiSelectProps } from "./types";
+import { fieldErrorStyles } from "../../FieldError";
+
+import { MultiSelectValue } from "./MultiSelectValue";
+import { Checkbox } from "../../Checkbox";
+import { ListBoxItem } from "../../ListBoxItem";
+
+const EmptyState = () => {
+  return (
+    <Text className={styles.emptyState} color="neutral-subtle">
+      No options found
+    </Text>
+  );
+};
+
+/**
+ * Note: React aria components does not provide us any mutliselect componennt or hooks for it.
+ * We are just replicating the behaviour of mutli select component with all available hooks and components.
+ * Few things are implemented manually like opening the popover on keydown or keyup when the button is focused
+ * or focusing the trigger on click of label.
+ *
+ * This is a temporary solution until we have a mutli select component from react aria components library.
+ */
+export const MultiSelect = <T extends { label: string; value: string }>(
+  props: MultiSelectProps<T>,
+) => {
+  const {
+    contextualHelp,
+    defaultSelectedKeys = new Set(),
+    disabledKeys,
+    errorMessage,
+    excludeFromTabOrder,
+    isDisabled,
+    isInvalid,
+    isLoading,
+    isRequired,
+    items,
+    label,
+    onSelectionChange: onSelectionChangeProp,
+    placeholder,
+    selectedKeys: selectedKeysProp,
+    size,
+  } = props;
+  const root = useRootContainer();
+  const [_selectedKeys, _setSelectedKeys] = useState<Selection>();
+  const selectedKeys = selectedKeysProp ?? _selectedKeys ?? defaultSelectedKeys;
+  const setSelectedKeys = onSelectionChangeProp ?? _setSelectedKeys;
+  const { labelProps } = useField(props);
+  const { contains } = useFilter({ sensitivity: "base" });
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  // Note we have to use controlled state for the popover as we need a custom logic to open the popover
+  // for the usecase where we need to open the popover on keydown or keyup when the button is focused.
+  const [isOpen, setOpen] = useState(false);
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      setOpen(true);
+    }
+  };
+
+  const filter = (textValue: string, inputValue: string) =>
+    contains(textValue, inputValue);
+
+  return (
+    <ButtonContext.Provider value={{ onKeyDown, ref: triggerRef }}>
+      <div className={inputFieldStyles.field}>
+        {Boolean(label) && (
+          <FieldLabel
+            {...labelProps}
+            contextualHelp={contextualHelp}
+            isDisabled={isDisabled}
+            isRequired={isRequired}
+            // this is required to imitate the behavior where on click of label, the trigger or input is focused.
+            // In our select component,  this is done by the useSelect hook. Since we don't have that for multi select,
+            // we are doing this manually here
+            onClick={() => {
+              if (triggerRef.current) {
+                triggerRef.current.focus();
+
+                setInteractionModality("keyboard");
+              }
+            }}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <div
+          className={clsx(
+            textInputStyles.inputGroup,
+            selectStyles.selectInputGroup,
+          )}
+        >
+          <DialogTrigger isOpen={isOpen} onOpenChange={setOpen}>
+            <MultiSelectValue
+              excludeFromTabOrder={excludeFromTabOrder}
+              isDisabled={isDisabled}
+              isInvalid={isInvalid}
+              isLoading={isLoading}
+              items={items}
+              placeholder={placeholder}
+              selectedKeys={selectedKeys}
+              size={size}
+              triggerRef={triggerRef}
+            />
+            <Popover
+              UNSTABLE_portalContainer={root}
+              className={styles.popover}
+              maxHeight={POPOVER_LIST_BOX_MAX_HEIGHT}
+              placement="bottom start"
+              style={
+                {
+                  "--trigger-width": `${triggerRef?.current?.offsetWidth}px`,
+                } as React.CSSProperties
+              }
+              triggerRef={triggerRef}
+            >
+              <UNSTABLE_Autocomplete filter={filter}>
+                <TextField autoFocus className={styles.textField} />
+                <ListBox
+                  className={styles.listBox}
+                  disabledKeys={disabledKeys}
+                  items={items}
+                  onSelectionChange={setSelectedKeys}
+                  renderEmptyState={EmptyState}
+                  selectedKeys={selectedKeys}
+                  selectionMode="multiple"
+                  shouldFocusWrap
+                >
+                  {(item: T) => (
+                    <ListBoxItem id={item.value} textValue={item.label}>
+                      {({ isSelected }) => (
+                        <>
+                          <Checkbox
+                            className={styles.listBoxItemCheckbox}
+                            isSelected={isSelected}
+                          />
+                          {item.label}
+                        </>
+                      )}
+                    </ListBoxItem>
+                  )}
+                </ListBox>
+              </UNSTABLE_Autocomplete>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        {/* We can't use our FieldError component as it only works when used with FieldErrorContext.
+          We can use it in our Select and other inputs because the implementation is abstracted in the react aria components library.
+          But since for MultiSelect, we don't have any component from react-aria, we have to manually render the error message here. */}
+        <div className={fieldErrorStyles.errorText}>
+          <Text color="negative" size="caption">
+            {errorMessage}
+          </Text>
+        </div>
+      </div>
+    </ButtonContext.Provider>
+  );
+};