feat: combobox onclose state can be tracked

next-docs/public/examples/combobox/Default.tsx

@@ -35,6 +35,27 @@ const Example = () => {
   const filteredPeople0 = filter(query0, people);
   const filteredPeople1 = filter(query1, people);
 
+  const onClose0 = (value: undefined) => {
+    const v = value as unknown;
+    console.log('State on close:');
+    for (const [key, val] of Object.entries(v as Object)) {
+      console.log(`${key}: ${val}`);
+    }
+  }
+
+  const onClose1 = (value: undefined) => {
+    const v = value as unknown;
+    if (v === null) {
+      console.log('State on close: nothing is selected');
+    } else {
+      console.log('State on close:');
+      for (const [key, val] of Object.entries(v as Object)) {
+        console.log(`${key}: ${val}`);
+      }
+    }
+  }
+
+
   return (
     <div className="flex flex-col lg:flex-row lg:justify-center items-center w-full gap-4">
       <Combobox
@@ -45,7 +66,7 @@ const Example = () => {
       >
         {({ open }) => (
           <>
-            <Combobox.Trigger open={open} className="min-w-[18.75rem]">
+            <Combobox.Trigger open={open} onClose={onClose0} className="min-w-[18.75rem]">
               <Combobox.Input
                 open={open}
                 placeholder={'Choose a name...'}
@@ -90,7 +111,7 @@ const Example = () => {
       >
         {({ open }) => (
           <>
-            <Combobox.Trigger open={open} className="min-w-[18.75rem]">
+            <Combobox.Trigger open={open} onClose={onClose1} className="min-w-[18.75rem]">
               <Combobox.Input
                 open={open}
                 placeholder={'Choose a name...'}

workspaces/core/src/combobox/Combobox.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import {
   Combobox as HeadlessCombobox,
   Transition as HeadlessTransition,
@@ -109,12 +109,23 @@ const Trigger = forwardRef<HTMLDivElement, WithChildren<SelectProps>>(({
   children,
   className,
   innerLabel,
+  open,
+  onClose,
 },
   ref
 ) => {
-  const { size, input, popper, disabled, isError } =
+  const { value, size, input, popper, disabled, isError } =
     useComboboxContext('Combobox.Trigger');
 
+  const [isOpened, setIsOpened] = useState(open);
+
+  useEffect(() => {
+    if (open !== isOpened) {
+      !open && onClose && onClose(value as undefined);
+      setIsOpened(open);
+    }
+  }, [open, value]);
+
   return (
     <div
       tabIndex={-1}

workspaces/core/src/combobox/private/types/SelectProps.ts

@@ -7,6 +7,7 @@ type SelectProps = {
   className?: string;
   multiple?: boolean;
   counter?: number;
+  onClose?: (value: undefined) => void;
 };
 
 export default SelectProps