[select] Add open state for Select.Icon and fix ref type (#2714)

Author: seongminn

docs/reference/generated/select-icon.json

@@ -12,6 +12,10 @@
       "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Select.Icon.State,\n  ) => ReactElement)"
     }
   },
-  "dataAttributes": {},
+  "dataAttributes": {
+    "data-popup-open": {
+      "description": "Present when the corresponding popup is open."
+    }
+  },
   "cssVariables": {}
 }

packages/react/src/select/icon/SelectIcon.tsx

@@ -1,7 +1,11 @@
 'use client';
 import * as React from 'react';
+import { useStore } from '@base-ui-components/utils/store';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { useRenderElement } from '../../utils/useRenderElement';
+import { useSelectRootContext } from '../root/SelectRootContext';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
+import { selectors } from '../store';
 
 /**
  * An icon that indicates that the trigger button opens a select menu.
@@ -11,19 +15,25 @@ import { useRenderElement } from '../../utils/useRenderElement';
  */
 export const SelectIcon = React.forwardRef(function SelectIcon(
   componentProps: SelectIcon.Props,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const { className, render, ...elementProps } = componentProps;
 
+  const { store } = useSelectRootContext();
+  const open = useStore(store, selectors.open);
+
+  const state: SelectIcon.State = React.useMemo(
+    () => ({
+      open,
+    }),
+    [open],
+  );
+
   const element = useRenderElement('span', componentProps, {
+    state,
     ref: forwardedRef,
-    props: [
-      {
-        'aria-hidden': true,
-        children: '▼',
-      },
-      elementProps,
-    ],
+    props: [{ 'aria-hidden': true, children: '▼' }, elementProps],
+    stateAttributesMapping: triggerOpenStateMapping,
   });
 
   return element;

packages/react/src/select/icon/SelectIconDataAttributes.ts

@@ -0,0 +1,8 @@
+import { CommonTriggerDataAttributes } from '../../utils/popupStateMapping';
+
+export enum SelectIconDataAttributes {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  popupOpen = CommonTriggerDataAttributes.popupOpen,
+}