fix: refactor wds menu and related components, widgets (#33703)

## Description
1. WDS menu component has been completely refactored. WDS headless
component has been removed, we use `react-aria-components` instead. The
menu component now has the ability to use submenus and icons for items.
2. Rename components `ActionGroup` to `ToolbarButtons and `ButtonGroup`
to `InlineButtons`
3. Make API of the `ToolbarButtons`, `Menu`, `InlineButtons`, `Select`
consistent.
4. Cosmetic refactoring of `ToolbarButtons` and `InlineButtons` and
related widgets.

Fixes:
#32299
#32109

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9210315418>
> Commit: b11c002
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9210315418&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->




## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No

---------

Co-authored-by: Pawan Kumar <[email protected]>

app/client/package.json

@@ -74,6 +74,7 @@
     "@opentelemetry/sdk-trace-base": "^1.17.1",
     "@opentelemetry/sdk-trace-web": "^1.17.1",
     "@opentelemetry/semantic-conventions": "^1.17.1",
+    "@react-types/shared": "^3.23.0",
     "@sentry/react": "^6.2.4",
     "@sentry/tracing": "^6.2.4",
     "@shared/ast": "workspace:^",

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

@@ -30,7 +30,7 @@
     "@react-types/checkbox": "^3.4.3",
     "@react-types/label": "^3.7.3",
     "@react-types/menu": "^3.9.5",
-    "@react-types/shared": "^3.22.0",
+    "@react-types/shared": "^3.23.1",
     "classnames": "*"
   },
   "peerDependencies": {

app/client/packages/design-system/headless/src/components/Field/src/Field.tsx

@@ -1,21 +1,36 @@
-import type { Ref } from "react";
+import type { ReactNode, Ref } from "react";
 import React, { forwardRef } from "react";
 import type { SpectrumFieldProps } from "@react-types/label";
 
 import { Label } from "./Label";
 import { HelpText } from "./HelpText";
-import type { StyleProps, ValidationState } from "@react-types/shared";
-
-export type FieldProps = Omit<
+export type FieldProps = Pick<
   SpectrumFieldProps,
-  "showErrorIcon" | "labelPosition" | "labelAlign" | keyof StyleProps
+  | "contextualHelp"
+  | "description"
+  | "descriptionProps"
+  | "elementType"
+  | "errorMessage"
+  | "errorMessageProps"
+  | "includeNecessityIndicatorInAccessibilityName"
+  | "isDisabled"
+  | "isRequired"
+  | "label"
+  | "labelProps"
+  | "necessityIndicator"
+  | "wrapperClassName"
+  | "wrapperProps"
 > & {
   fieldType?: "field" | "field-group";
   labelClassName?: string;
   helpTextClassName?: string;
   validationState?: ValidationState;
+  children: ReactNode;
+  isReadOnly?: boolean;
 };
 
+import type { ValidationState } from "@react-types/shared";
+
 export type FieldRef = Ref<HTMLDivElement>;
 
 const _Field = (props: FieldProps, ref: FieldRef) => {
@@ -75,7 +90,9 @@ const _Field = (props: FieldProps, ref: FieldRef) => {
             includeNecessityIndicatorInAccessibilityName
           }
           isRequired={isRequired}
-          necessityIndicator={!Boolean(isReadOnly) && necessityIndicator}
+          necessityIndicator={
+            !Boolean(isReadOnly) ? necessityIndicator : undefined
+          }
         >
           <span>{label}</span>
         </Label>

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

@@ -8,4 +8,3 @@ export * from "./components/Switch";
 export * from "./components/TextInput";
 export * from "./components/TextArea";
 export * from "./components/Popover";
-export * from "./components/Menu";

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

@@ -18,11 +18,12 @@
     "@react-aria/utils": "^3.16.0",
     "@react-aria/visually-hidden": "^3.8.0",
     "@react-types/actiongroup": "^3.4.6",
+    "@react-types/shared": "^3.23.1",
     "@tabler/icons-react": "^2.45.0",
     "clsx": "^2.0.0",
     "colorjs.io": "^0.4.3",
     "lodash": "*",
-    "react-aria-components": "^1.1.1"
+    "react-aria-components": "^1.2.1"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",