@charcoal-ui/react 5.6.0-beta.3 → 5.6.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.6.0-beta.3",
+  "version": "5.6.0-beta.5",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -54,10 +54,10 @@
     "react-compiler-runtime": "1.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "5.6.0-beta.3",
-    "@charcoal-ui/theme": "5.6.0-beta.3",
-    "@charcoal-ui/icons": "5.6.0-beta.3",
-    "@charcoal-ui/utils": "5.6.0-beta.3"
+    "@charcoal-ui/foundation": "5.6.0-beta.5",
+    "@charcoal-ui/icons": "5.6.0-beta.5",
+    "@charcoal-ui/utils": "5.6.0-beta.5",
+    "@charcoal-ui/theme": "5.6.0-beta.5"
   },
   "peerDependencies": {
     "react": ">=17.0.0"

package/src/components/DropdownSelector/index.story.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import DropdownSelector from '.'
 import { Divider } from './Divider'
 import MenuItemGroup from './MenuItemGroup'
@@ -453,3 +453,44 @@ export const WithSeconday: StoryObj<typeof DropdownSelector> = {
     )
   },
 }
+
+export const WithRef: StoryObj<typeof DropdownSelector> = {
+  render: function Render(props) {
+    const [selected, setSelected] = useState('1')
+    const [currentValue, setCurrentValue] = useState('')
+    const selectRef = useRef<HTMLSelectElement>(null)
+
+    return (
+      <div
+        style={{
+          width: 288,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 16,
+        }}
+      >
+        <DropdownSelector
+          {...props}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+          selectRef={selectRef}
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+        <Button
+          onClick={() => {
+            setCurrentValue(selectRef.current?.value ?? 'ref is null')
+          }}
+        >
+          check ref current value
+        </Button>
+        <div>ref current value: {currentValue}</div>
+      </div>
+    )
+  },
+}

package/src/components/DropdownSelector/index.tsx

@@ -31,11 +31,13 @@ export type DropdownSelectorProps = {
   children: MenuListChildren
   onChange: (value: string) => void
   className?: string
+  selectRef?: React.Ref<HTMLSelectElement>
 } & Pick<PopoverProps, 'inertWorkaround'>
 
 export default function DropdownSelector({
   onChange,
   showLabel = false,
+  selectRef,
   ...props
 }: DropdownSelectorProps) {
   const triggerRef = useRef<HTMLButtonElement>(null)
@@ -82,6 +84,7 @@ export default function DropdownSelector({
           value={props.value}
           onChange={handleChange}
           tabIndex={-1}
+          ref={selectRef}
         >
           {propsArray.map((itemProps) => {
             return (