chore: deprecate Dropdown

Author: adrienzheng-cb

apps/docs/docs/components/layout/Dropdown/webMetadata.json

@@ -4,6 +4,7 @@
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-dropdown-dropdown--default",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?m=auto&node-id=465-13742&t=8hgl6nX25pIzCo0y-1",
   "description": "An overlay that opens and closes.",
+  "warning": "This component is deprecated. Please use Popover instead.",
   "relatedComponents": [
     {
       "label": "Select",

packages/web/package.json

@@ -148,6 +148,10 @@
       "types": "./dts/pagination/index.d.ts",
       "default": "./esm/pagination/index.js"
     },
+    "./popover": {
+      "types": "./dts/popover/index.d.ts",
+      "default": "./esm/popover/index.js"
+    },
     "./section-header": {
       "types": "./dts/section-header/index.d.ts",
       "default": "./esm/section-header/index.js"

packages/web/src/dropdown/Dropdown.tsx

@@ -215,6 +215,10 @@ const PopoverDropdown = memo(
   ),
 );
 
+/**
+ * @deprecated Use Popover instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const Dropdown = memo(
   forwardRef<DropdownRef, DropdownProps>(
     (

packages/web/src/dropdown/DropdownProps.ts

@@ -2,15 +2,27 @@ import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common
 
 import { type PopoverProps } from '../overlays/popover/PopoverProps';
 
+/**
+ * @deprecated Use Popover instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type DropdownRef = {
   openMenu: () => void;
   closeMenu: () => void;
 };
 
+/**
+ * @deprecated Use Popover instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type DropdownInternalProps = DropdownProps & {
   visible: boolean;
 };
 
+/**
+ * @deprecated Use Popover instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type DropdownProps = {
   /**
    * Enable to have Dropdown render its content inside a Modal as opposed to a relatively positioned Popover
@@ -77,6 +89,10 @@ export type DropdownProps = {
     'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
   >;
 
+/**
+ * @deprecated Use Popover instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type DropdownRefProps = {
   openMenu: () => void;
   closeMenu: () => void;

packages/web/src/popover/index.ts

@@ -0,0 +1,3 @@
+export * from '../overlays/popover/Popover';
+export * from '../overlays/popover/PopoverProps';
+export * from '../overlays/popover/usePopper';