chore: add wds multiselect

app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css

@@ -30,6 +30,13 @@
   cursor: inherit;
 }
 
+.inputGroup .input:not(textarea) {
+  block-size: calc(
+    var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end)
+  );
+  padding-block: var(--inner-spacing-3);
+}
+
 .inputGroup:has([data-input-prefix]) .input {
   padding-inline-start: 0;
 }
@@ -196,10 +203,6 @@
  * SIZE
  * ----------------------------------------------------------------------------
  */
-.inputGroup .input {
-  block-size: var(--body-line-height);
-}
-
 .inputGroup .input[data-size="small"] {
   block-size: calc(
     var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end)

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

@@ -154,7 +154,11 @@ export const MultiSelect = <T extends { label: string; value: string }>(
                   shouldFocusWrap
                 >
                   {(item: T) => (
-                    <ListBoxItem id={item.value} textValue={item.label}>
+                    <ListBoxItem
+                      className={styles.listBoxItem}
+                      id={item.value}
+                      textValue={item.label}
+                    >
                       {({ isSelected }) => (
                         <>
                           <Checkbox

app/client/src/modules/ui-builder/ui/wds/WDSMultiSelectWidget/config/anvilConfig.ts

@@ -0,0 +1,11 @@
+import type { AnvilConfig } from "WidgetProvider/constants";
+
+export const anvilConfig: AnvilConfig = {
+  isLargeWidget: false,
+  widgetSize: {
+    minWidth: {
+      base: "100%",
+      "180px": "sizing-30",
+    },
+  },
+};

app/client/src/modules/ui-builder/ui/wds/WDSMultiSelectWidget/config/autocompleteConfig.ts

@@ -0,0 +1,22 @@
+import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
+
+export const autocompleteConfig = {
+  "!doc":
+    "MultiSelect is used to capture user input/s from a specified list of permitted inputs. A MultiSelect can capture multiple choices",
+  "!url": "https://docs.appsmith.com/widget-reference/dropdown",
+  isVisible: DefaultAutocompleteDefinitions.isVisible,
+  selectedOptionValues: {
+    "!type": "string",
+    "!doc": "The values selected in a multi select dropdown",
+    "!url": "https://docs.appsmith.com/widget-reference/dropdown",
+  },
+  selectedOptionLabels: {
+    "!type": "string",
+    "!doc": "The selected options's labels in a multi select dropdown",
+    "!url": "https://docs.appsmith.com/widget-reference/dropdown",
+  },
+  isDisabled: "bool",
+  isValid: "bool",
+  isDirty: "bool",
+  options: "[$__dropdownOption__$]",
+};

app/client/src/modules/ui-builder/ui/wds/WDSMultiSelectWidget/config/defaultsConfig.ts

@@ -0,0 +1,21 @@
+import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
+import type { WidgetDefaultProps } from "WidgetProvider/constants";
+import { SAMPLE_DATA } from "../widget/constants";
+
+export const defaultsConfig = {
+  animateLoading: true,
+  label: "Label",
+  sourceData: JSON.stringify(SAMPLE_DATA, null, 2),
+  optionLabel: "name",
+  optionValue: "code",
+  defaultOptionValues: "",
+  isRequired: false,
+  isDisabled: false,
+  isVisible: true,
+  isInline: false,
+  widgetName: "MultiSelect",
+  version: 1,
+  responsiveBehavior: ResponsiveBehavior.Fill,
+  dynamicPropertyPathList: [{ key: "sourceData" }],
+  placeholderText: "Select an item",
+} as unknown as WidgetDefaultProps;

app/client/src/modules/ui-builder/ui/wds/WDSMultiSelectWidget/config/index.ts

@@ -0,0 +1,7 @@
+export * from "./propertyPaneConfig";
+export { metaConfig } from "./metaConfig";
+export { anvilConfig } from "./anvilConfig";
+export { defaultsConfig } from "./defaultsConfig";
+export { settersConfig } from "./settersConfig";
+export { methodsConfig } from "./methodsConfig";
+export { autocompleteConfig } from "./autocompleteConfig";

app/client/src/modules/ui-builder/ui/wds/WDSMultiSelectWidget/config/metaConfig.ts

@@ -0,0 +1,8 @@
+import { WIDGET_TAGS } from "constants/WidgetConstants";
+
+export const metaConfig = {
+  name: "MultiSelect",
+  tags: [WIDGET_TAGS.SELECT],
+  needsMeta: true,
+  searchTags: ["choice", "option", "choose", "pick", "select", "dropdown"],
+};

app/client/src/modules/ui-builder/ui/wds/WDSMultiSelectWidget/config/methodsConfig.ts

@@ -0,0 +1,65 @@
+import type {
+  PropertyUpdates,
+  SnipingModeProperty,
+} from "WidgetProvider/constants";
+import type {
+  WidgetQueryConfig,
+  WidgetQueryGenerationFormConfig,
+} from "WidgetQueryGenerators/types";
+import { RadioGroupIcon, SelectThumbnail } from "appsmith-icons";
+import type { DynamicPath } from "utils/DynamicBindingUtils";
+import type { WidgetProps } from "widgets/BaseWidget";
+
+export const methodsConfig = {
+  getSnipingModeUpdates: (
+    propValueMap: SnipingModeProperty,
+  ): PropertyUpdates[] => {
+    return [
+      {
+        propertyPath: "sourceData",
+        propertyValue: propValueMap.data,
+        isDynamicPropertyPath: true,
+      },
+    ];
+  },
+  getQueryGenerationConfig(widget: WidgetProps) {
+    return {
+      select: {
+        where: `${widget.widgetName}.filterText`,
+      },
+    };
+  },
+  getPropertyUpdatesForQueryBinding(
+    queryConfig: WidgetQueryConfig,
+    widget: WidgetProps,
+    formConfig: WidgetQueryGenerationFormConfig,
+  ) {
+    let modify;
+
+    const dynamicPropertyPathList: DynamicPath[] = [
+      ...(widget.dynamicPropertyPathList || []),
+    ];
+
+    if (queryConfig.select) {
+      modify = {
+        sourceData: queryConfig.select.data,
+        optionLabel: formConfig.aliases.find((d) => d.name === "label")?.alias,
+        optionValue: formConfig.aliases.find((d) => d.name === "value")?.alias,
+        defaultOptionValues: "",
+        serverSideFiltering: false,
+        onFilterUpdate: queryConfig.select.run,
+      };
+
+      dynamicPropertyPathList.push({ key: "sourceData" });
+    }
+
+    return {
+      modify,
+      dynamicUpdates: {
+        dynamicPropertyPathList,
+      },
+    };
+  },
+  IconCmp: RadioGroupIcon,
+  ThumbnailCmp: SelectThumbnail,
+};