Merge branch 'main' into dependabot/npm_and_yarn/vite-4.5.2

adevinta · Jan 24, 2024 · e63be66 · e63be66
2 parents be13071 + d36ad24
commit e63be66
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/select/CHANGELOG.md b/packages/components/select/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.3](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-01-23)
+
+### Bug Fixes
+
+- **select:** forward ref to select items ([1177140](https://github.com/adevinta/spark/commit/11771408e59fd026fe7b68237857d159397d4608))
+
 ## [0.6.2](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-01-16)
 
 **Note:** Version bump only for package @spark-ui/select

diff --git a/packages/components/select/package.json b/packages/components/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/select",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Displays a list of options for the user to pick from—triggered by a button.",
   "publishConfig": {
     "access": "public"

diff --git a/packages/components/select/src/SelectItems.tsx b/packages/components/select/src/SelectItems.tsx
@@ -1,5 +1,5 @@
 import { cva } from 'class-variance-authority'
-import { ChangeEvent, ComponentPropsWithoutRef, PropsWithChildren } from 'react'
+import { ChangeEvent, ComponentPropsWithoutRef, forwardRef, PropsWithChildren, Ref } from 'react'
 
 import { useSelectContext } from './SelectContext'
 
@@ -35,51 +35,52 @@ export const styles = cva(
   }
 )
 
-export const Items = ({
-  children,
-  className,
-  ...rest
-}: PropsWithChildren<ComponentPropsWithoutRef<'select'>>) => {
-  const {
-    state,
-    disabled,
-    readOnly,
-    ariaLabel,
-    fieldLabelId,
-    isControlled,
-    onValueChange,
-    selectedItem,
-    setValue,
-    name,
-    required,
-  } = useSelectContext()
+export const Items = forwardRef(
+  (
+    { children, className, ...rest }: PropsWithChildren<ComponentPropsWithoutRef<'select'>>,
+    ref: Ref<HTMLSelectElement>
+  ) => {
+    const {
+      state,
+      disabled,
+      readOnly,
+      ariaLabel,
+      fieldLabelId,
+      isControlled,
+      onValueChange,
+      selectedItem,
+      setValue,
+      name,
+      required,
+    } = useSelectContext()
 
-  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    if (isControlled) {
-      event.preventDefault()
-      onValueChange?.(event.target.value)
-    } else {
-      setValue(event.target.value)
+    const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+      if (isControlled) {
+        event.preventDefault()
+        onValueChange?.(event.target.value)
+      } else {
+        setValue(event.target.value)
+      }
     }
-  }
 
-  return (
-    <select
-      data-spark-component="select-items"
-      disabled={disabled || readOnly}
-      name={name}
-      required={required}
-      aria-labelledby={fieldLabelId}
-      {...(ariaLabel && { 'aria-label': ariaLabel })}
-      className={styles({ className, state, disabled, readOnly })}
-      value={selectedItem?.value}
-      onChange={handleChange}
-      {...rest}
-    >
-      {children}
-    </select>
-  )
-}
+    return (
+      <select
+        data-spark-component="select-items"
+        ref={ref}
+        disabled={disabled || readOnly}
+        name={name}
+        required={required}
+        aria-labelledby={fieldLabelId}
+        {...(ariaLabel && { 'aria-label': ariaLabel })}
+        className={styles({ className, state, disabled, readOnly })}
+        value={selectedItem?.value}
+        onChange={handleChange}
+        {...rest}
+      >
+        {children}
+      </select>
+    )
+  }
+)
 
-Items.id = 'Items'
 Items.displayName = 'Select.Items'