feat: select widget grouping

app/client/packages/design-system/ads/src/Select/Select.tsx

@@ -1,5 +1,8 @@
 import React from "react";
-import RCSelect, { Option as RCOption } from "rc-select";
+import RCSelect, {
+  Option as RCOption,
+  OptGroup as RCOptGroup,
+} from "rc-select";
 import clsx from "classnames";
 import "./rc-styles.css";
 import "./styles.css";
@@ -91,5 +94,6 @@ Select.displayName = "Select";
 Select.defaultProps = {};
 
 const Option = RCOption;
+const OptGroup = RCOptGroup;
 
-export { Select, Option };
+export { Select, Option, OptGroup };

app/client/packages/design-system/ads/src/Select/Select.types.ts

@@ -1,6 +1,7 @@
 import type { SelectProps as RCSelectProps } from "rc-select";
 import type { Sizes } from "../__config__/types";
 import type { OptionProps } from "rc-select/lib/Option";
+import type { OptGroupProps } from "rc-select/lib/OptGroup";
 
 export type SelectSizes = Extract<Sizes, "sm" | "md">;
 
@@ -13,3 +14,4 @@ export type SelectProps = RCSelectProps & {
 };
 
 export type SelectOptionProps = OptionProps;
+export type SelectOptionGroupProps = OptGroupProps;

app/client/packages/design-system/ads/src/Select/styles.css

@@ -231,6 +231,48 @@
   box-sizing: border-box;
 }
 
+/* Option group */
+.ads-v2-select__dropdown .rc-select-item.rc-select-item-group {
+  --select-option-padding: var(--ads-v2-spaces-3);
+  --select-option-gap: var(--ads-v2-spaces-3);
+  --select-option-color-bg: var(--ads-v2-colors-content-surface-default-bg);
+  --select-option-font-size: var(--ads-v2-font-size-4);
+  --select-option-height: 36px;
+
+  padding: var(--select-option-padding) 0 0 var(--select-option-padding);
+  border-radius: var(--ads-v2-border-radius);
+  font-weight: 500;
+  font-size: var(--ads-v2-font-size-4);
+  /* TODO: remove !important after WDS fix their issue in tree select */
+  background-color: var(--select-option-color-bg) !important;
+  position: relative;
+  color: var(--ads-v2-colors-content-label-default-fg);
+  min-height: var(--select-option-height);
+  box-sizing: border-box;
+}
+
+/* Option when it is grouped */
+.ads-v2-select__dropdown
+  .rc-select-item.rc-select-item-option.rc-select-item-option-grouped {
+  --select-option-padding: var(--ads-v2-spaces-3);
+  --select-option-gap: var(--ads-v2-spaces-3);
+  --select-option-color-bg: var(--ads-v2-colors-content-surface-default-bg);
+  --select-option-font-size: var(--ads-v2-font-size-4);
+  --select-option-height: 36px;
+
+  padding: var(--select-option-padding);
+  padding-left: var(--ads-v2-spaces-5);
+  margin-bottom: var(--ads-v2-spaces-1);
+  border-radius: var(--ads-v2-border-radius);
+  cursor: pointer;
+  /* TODO: remove !important after WDS fix their issue in tree select */
+  background-color: var(--select-option-color-bg) !important;
+  position: relative;
+  color: var(--ads-v2-colors-content-label-default-fg);
+  min-height: var(--select-option-height);
+  box-sizing: border-box;
+}
+
 /* size sm */
 .ads-v2-select__dropdown.ads-v2-select__dropdown--sm .rc-select-item {
   --select-option-padding: var(--ads-v2-spaces-2);

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx

@@ -6,13 +6,17 @@ import { reduxForm } from "redux-form";
 import { Flex } from "@appsmith/ads";
 import { useGoogleSheetsSetDefaultProperty } from "./hooks/useGoogleSheetsSetDefaultProperty";
 import { useFormData } from "./hooks/useFormData";
+import { test } from "./test";
 
 const UQIEditorForm = () => {
   const {
-    editorConfig,
+    //editorConfig,
     plugin: { uiComponent },
   } = usePluginActionContext();
 
+  // TODO: remove test file before merging
+  const editorConfig = test;
+
   // Set default values for Google Sheets
   useGoogleSheetsSetDefaultProperty();