feat: add ComboBox wds component

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

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

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

@@ -0,0 +1,83 @@
+import { Button, Icon, Label, Popover, Text } from "@appsmith/wds";
+import { getTypographyClassName } from "@appsmith/wds-theming";
+import clsx from "clsx";
+import React from "react";
+import {
+  FieldError,
+  ComboBox as HeadlessCombobox,
+  Input,
+  ListBox,
+} from "react-aria-components";
+import { ListBoxItem } from "./ListBoxItem";
+import styles from "./styles.module.css";
+import type { ComboBoxProps } from "./types";
+
+export const ComboBox = (props: ComboBoxProps) => {
+  const {
+    contextualHelp,
+    description,
+    errorMessage,
+    isLoading,
+    isRequired,
+    items,
+    label,
+    placeholder,
+    size = "medium",
+    ...rest
+  } = props;
+
+  // place Popover in the root theme provider to get access to the CSS tokens
+  const root = document.body.querySelector(
+    "[data-theme-provider]",
+  ) as HTMLButtonElement;
+
+  return (
+    <HeadlessCombobox
+      aria-label={Boolean(label) ? undefined : "ComboBox"}
+      className={styles.formField}
+      data-size={size}
+      isRequired={isRequired}
+      {...rest}
+    >
+      {({ isInvalid }) => (
+        <>
+          <Label
+            contextualHelp={contextualHelp}
+            isRequired={isRequired}
+            text={label}
+          />
+
+          {/* TODO: Use proper headless Input once Valera is back */}
+          <div className={styles.inputWrapper}>
+            <Input className={styles.input} placeholder={placeholder} />
+            <Button icon="chevron-down" isLoading={isLoading} size={size} />
+          </div>
+
+          <FieldError
+            className={clsx(
+              styles.errorText,
+              getTypographyClassName("footnote"),
+            )}
+          >
+            {errorMessage}
+          </FieldError>
+          {Boolean(description) && !Boolean(isInvalid) && (
+            <Text className={styles.description} lineClamp={2} size="footnote">
+              {description}
+            </Text>
+          )}
+          <Popover UNSTABLE_portalContainer={root}>
+            <ListBox className={styles.listBox} items={items} shouldFocusWrap>
+              {(item) => (
+                <ListBoxItem key={item.id} textValue={item.label}>
+                  {item.icon && <Icon name={item.icon} />}
+                  {item.label}
+                </ListBoxItem>
+              )}
+            </ListBox>
+          </Popover>
+        </>
+      )}
+    </HeadlessCombobox>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { ListBoxItem as HeadlessListBoxItem } from "react-aria-components";
+import clsx from "clsx";
+import { getTypographyClassName } from "@appsmith/wds-theming";
+import { listItemStyles } from "@appsmith/wds";
+import type { ListBoxItemProps } from "react-aria-components";
+
+export const ListBoxItem = (props: ListBoxItemProps) => {
+  return (
+    <HeadlessListBoxItem
+      {...props}
+      className={clsx(listItemStyles.item, getTypographyClassName("body"))}
+    />
+  );
+};

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

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

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

@@ -0,0 +1,89 @@
+.formField {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.inputWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.input {
+  display: flex;
+  flex: 1;
+  position: relative;
+  padding: 0;
+  border: none;
+  align-items: center;
+  border-radius: var(--border-radius-elevation-3);
+  background-color: var(--color-bg-neutral-subtle);
+  max-inline-size: 100%;
+  padding-inline-start: var(--inner-spacing-2);
+  padding-inline-end: calc(var(--inner-spacing-3) + var(--icon-size-2));
+  padding-block: var(--inner-spacing-3);
+  box-shadow: inset 0 0 0 var(--border-width-1)
+    var(--color-bd-on-neutral-subtle);
+  cursor: pointer;
+}
+
+.formField[data-invalid] .textField {
+  box-shadow: 0 0 0 var(--border-width-1) var(--color-bd-negative);
+}
+
+.formField[data-size="small"] .textField {
+  padding-block: var(--inner-spacing-2);
+}
+
+.textField[data-focus-visible] {
+  box-shadow:
+    0 0 0 2px var(--color-bg),
+    0 0 0 4px var(--color-bd-focus);
+}
+
+.textField[data-hovered] {
+  background-color: var(--color-bg-neutral-subtle-hover);
+  box-shadow: inset 0 0 0 var(--border-width-1)
+    var(--color-bd-on-neutral-subtle-hover);
+}
+
+.textField [data-icon] {
+  position: absolute;
+  right: var(--inner-spacing-2);
+}
+
+.necessityIndicator {
+  color: var(--color-fg-negative);
+  margin-inline-start: var(--inner-spacing-1);
+}
+
+.errorText {
+  margin-block-start: var(--inner-spacing-3);
+  color: var(--color-fg-negative);
+}
+
+.description {
+  margin-block-start: var(--inner-spacing-3);
+  color: var(--color-fg-neutral);
+}
+
+.fieldValue {
+  text-align: left;
+  flex: 1;
+}
+
+.fieldValue [data-icon] {
+  display: none;
+}
+
+.listBox {
+  min-inline-size: var(--trigger-width);
+}
+
+/** If at least one select item has an icon, we need to add extra padding for items that doesn't have an icon. */
+.listBox:has([data-icon]) [role="option"]:not(:has([data-icon])) {
+  padding-inline-start: calc(
+    var(--icon-size-2) + var(--inner-spacing-3) + var(--inner-spacing-2)
+  );
+}

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

@@ -0,0 +1,35 @@
+import type { Key } from "@react-types/shared";
+import type {
+  ComboBoxProps as SpectrumComboBoxProps,
+  ValidationResult,
+} from "react-aria-components";
+import type { IconProps, SIZES } from "@appsmith/wds";
+
+export interface ComboBoxProps
+  extends Omit<SpectrumComboBoxProps<ComboBoxItem>, "slot"> {
+  /** Item objects in the collection. */
+  items: ComboBoxItem[];
+  /** The content to display as the label. */
+  label?: string;
+  /** The content to display as the description. */
+  description?: string;
+  /** The content to display as the error message. */
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  /** size of the select
+   *
+   * @default medium
+   */
+  size?: Omit<keyof typeof SIZES, "large">;
+  /** loading state for the input */
+  isLoading?: boolean;
+  /** A ContextualHelp element to place next to the label. */
+  contextualHelp?: string;
+  /** The content to display as the placeholder. */
+  placeholder?: string;
+}
+
+export interface ComboBoxItem {
+  id: Key;
+  label: string;
+  icon?: IconProps["name"];
+}

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

@@ -0,0 +1,86 @@
+import { Button, ComboBox, Flex, SIZES } from "@appsmith/wds";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { items, itemsWithIcons } from "./items";
+
+/**
+ * A select displays a collapsible list of options and allows a user to select one of them.
+ */
+const meta: Meta<typeof ComboBox> = {
+  component: ComboBox,
+  title: "WDS/Widgets/ComboBox",
+};
+
+export default meta;
+type Story = StoryObj<typeof ComboBox>;
+
+export const Main: Story = {
+  args: {
+    items: items,
+  },
+  render: (args) => (
+    <Flex width="sizing-60">
+      <ComboBox {...args} />
+    </Flex>
+  ),
+};
+
+/**
+ * The component supports two sizes `small` and `medium`. Default size is `medium`.
+ */
+export const Sizes: Story = {
+  render: () => (
+    <Flex direction="column" gap="spacing-4" width="sizing-60">
+      {Object.keys(SIZES)
+        .filter((size) => !["large"].includes(size))
+        .map((size) => (
+          <ComboBox items={items} key={size} placeholder={size} size={size} />
+        ))}
+    </Flex>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    placeholder: "Loading",
+    isLoading: true,
+    items: items,
+  },
+};
+
+export const Validation: Story = {
+  render: () => (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        alert("Form submitted");
+      }}
+    >
+      <Flex direction="column" gap="spacing-2" width="sizing-60">
+        <ComboBox
+          description="description"
+          isRequired
+          items={items}
+          label="Validation"
+        />
+        <Button type="submit">Submit</Button>
+      </Flex>
+    </form>
+  ),
+};
+
+export const ContextualHelp: Story = {
+  args: {
+    label: "Label",
+    placeholder: "Contextual Help Text",
+    contextualHelp: "This is a contextual help text",
+    items: items,
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    label: "With icons",
+    items: itemsWithIcons,
+  },
+};

app/client/packages/design-system/widgets/src/components/ComboBox/stories/items.ts

@@ -0,0 +1,28 @@
+import type { ComboBoxItem } from "../src/types";
+
+export const items: ComboBoxItem[] = [
+  { id: 1, label: "Aerospace" },
+  {
+    id: 2,
+    label: "Mechanical",
+  },
+  { id: 3, label: "Civil" },
+  { id: 4, label: "Biomedical" },
+  { id: 5, label: "Nuclear" },
+  { id: 6, label: "Industrial" },
+  { id: 7, label: "Chemical" },
+  { id: 8, label: "Agricultural" },
+  { id: 9, label: "Electrical" },
+];
+
+export const itemsWithIcons: ComboBoxItem[] = [
+  { id: 1, label: "Aerospace", icon: "galaxy" },
+  {
+    id: 2,
+    label: "Mechanical",
+    icon: "automatic-gearbox",
+  },
+  { id: 3, label: "Civil", icon: "circuit-ground" },
+  { id: 4, label: "Biomedical", icon: "biohazard" },
+  { id: 5, label: "Nuclear", icon: "atom" },
+];

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

@@ -3,6 +3,7 @@ export * from "./components/Icon";
 export * from "./components/Button";
 export * from "./components/IconButton";
 export * from "./components/Checkbox";
+export * from "./components/ComboBox";
 export * from "./components/Text";
 export * from "./components/ToggleGroup";
 export * from "./components/Tooltip";

app/client/packages/icons/src/components/Icons/ComboboxSelectIcon.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const ComboboxSelectIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1"/><circle cx="5.5" cy="7.5" r="2" stroke="#000"/><path fill="#000" d="M7.354 8.646 7 8.293 6.293 9l.353.354zm.292 1.708a.5.5 0 0 0 .708-.708zm-1-1 1 1 .708-.708-1-1z"/></svg>;

app/client/packages/icons/src/components/Thumbnails/ComboboxSelectThumbnail.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const ComboboxSelectThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m56.5 36.5-3 3-3-3"/><circle cx="19" cy="37" r="4.5" stroke="#CC3D00"/><path stroke="#CC3D00" stroke-linecap="round" d="m22.5 40.5 2 2"/></svg>;

app/client/packages/icons/src/index.ts

@@ -1,6 +1,7 @@
 export { ButtonThumbnail } from "./components/Thumbnails/ButtonThumbnail";
 export { CheckboxGroupThumbnail } from "./components/Thumbnails/CheckboxGroupThumbnail";
 export { CheckboxThumbnail } from "./components/Thumbnails/CheckboxThumbnail";
+export { ComboboxSelectThumbnail } from "./components/Thumbnails/ComboboxSelectThumbnail";
 export { CurrencyInputThumbnail } from "./components/Thumbnails/CurrencyInputThumbnail";
 export { EmailInputThumbnail } from "./components/Thumbnails/EmailInputThumbnail";
 export { HeadingThumbnail } from "./components/Thumbnails/HeadingThumbnail";
@@ -27,6 +28,7 @@ export { ZoneThumbnail } from "./components/Thumbnails/ZoneThumbnail";
 export { ButtonIcon } from "./components/Icons/ButtonIcon";
 export { CheckboxGroupIcon } from "./components/Icons/CheckboxGroupIcon";
 export { CheckboxIcon } from "./components/Icons/CheckboxIcon";
+export { ComboboxSelectIcon } from "./components/Icons/ComboboxSelectIcon";
 export { CurrencyInputIcon } from "./components/Icons/CurrencyInputIcon";
 export { EmailInputIcon } from "./components/Icons/EmailInputIcon";
 export { HeadingIcon } from "./components/Icons/HeadingIcon";

app/client/packages/icons/src/stories/Icons.mdx

@@ -3,6 +3,7 @@ import { Flex } from "@appsmith/wds";
 import { ButtonIcon } from "../components/Icons/ButtonIcon";
 import { CheckboxGroupIcon } from "../components/Icons/CheckboxGroupIcon";
 import { CheckboxIcon } from "../components/Icons/CheckboxIcon";
+import { ComboboxSelectIcon } from "../components/Icons/ComboboxSelectIcon";
 import { CurrencyInputIcon } from "../components/Icons/CurrencyInputIcon";
 import { EmailInputIcon } from "../components/Icons/EmailInputIcon";
 import { HeadingIcon } from "../components/Icons/HeadingIcon";
@@ -38,6 +39,7 @@ export const Icons = () => {
       <ButtonIcon />
       <CheckboxGroupIcon />
       <CheckboxIcon />
+      <ComboboxSelectIcon />
       <CurrencyInputIcon />
       <EmailInputIcon />
       <HeadingIcon />