feat: combobox onclose state can be tracked

next-docs/pages/components/combobox.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import Preview from '../../components/codePreview/Preview';
 import ComponentAnatomy from '../../components/ComponentAnatomy';
 import ComponentPageDescription from '../../components/ComponentPageDescription';
+import type { ComponentNames } from '../../components/getComponent';
 import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
 import Default from '../../public/examples/combobox/Default';
@@ -12,7 +13,6 @@ import MultiSelect from '../../public/examples/combobox/MultiSelect';
 import Select from '../../public/examples/combobox/Select';
 import SelectStates from '../../public/examples/combobox/SelectStates';
 import useComponent from '../../utils/useComponent';
-import type { ComponentNames } from '../../components/getComponent';
 
 const COMPONENT_NAME: ComponentNames = 'Combobox';
 
@@ -242,6 +242,13 @@ const PageCombobox = () => {
             default: '-',
             description: 'Tailwind classes for custom styles.',
           },
+          {
+            name: 'onClose',
+            type: '(value: unknown) => void;',
+            required: false,
+            default: '-',
+            description: 'Called when the Combobox is dismissed.',
+          },
         ]}
       />
 
@@ -457,6 +464,13 @@ const PageCombobox = () => {
             default: '-',
             description: 'Whether or not the Listbox is open.',
           },
+          {
+            name: 'onClose',
+            type: '(value: unknown) => void;',
+            required: false,
+            default: '-',
+            description: 'Called when the Combobox is dismissed.',
+          },
         ]}
       />
 
@@ -527,6 +541,13 @@ const PageCombobox = () => {
             default: '-',
             description: 'Whether or not the Listbox is open.',
           },
+          {
+            name: 'onClose',
+            type: '(value: unknown) => void;',
+            required: false,
+            default: '-',
+            description: 'Called when the Combobox is dismissed.',
+          },
         ]}
       />
 

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

@@ -45,7 +45,7 @@ const Example = () => {
       >
         {({ open }) => (
           <>
-            <Combobox.Trigger open={open} className="min-w-[18.75rem]">
+            <Combobox.Trigger open={open} className="min-w-[18.75rem]" onClose={console.log}>
               <Combobox.Input
                 open={open}
                 placeholder={'Choose a name...'}
@@ -90,7 +90,7 @@ const Example = () => {
       >
         {({ open }) => (
           <>
-            <Combobox.Trigger open={open} className="min-w-[18.75rem]">
+            <Combobox.Trigger open={open} className="min-w-[18.75rem]" onClose={console.log}>
               <Combobox.Input
                 open={open}
                 placeholder={'Choose a name...'}

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

@@ -57,6 +57,7 @@ const Example = () => {
               counter={selected0.length}
               placeholder="Choose an option"
               displayValue={({ label }) => label}
+              onClose={console.log}
             >
               <ControlsChevronDownSmall />
             </Combobox.MultiSelect>
@@ -101,6 +102,7 @@ const Example = () => {
               counter={selected1.length}
               placeholder="Choose an option"
               displayValue={({ label }) => label}
+              onClose={console.log}
             >
               <ControlsChevronDownSmall />
             </Combobox.MultiSelect>
@@ -146,6 +148,7 @@ const Example = () => {
               counter={selected2.length}
               placeholder="Choose an option"
               displayValue={({ label }) => label}
+              onClose={console.log}
             >
               <ControlsChevronDownSmall />
             </Combobox.MultiSelect>

packages/assets/src/icons/IconLivespins.tsx

@@ -18,27 +18,30 @@ const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 type IconProps = {
-  backgroundColor?: ColorProps;
-  circleColor?: ColorProps;
-  color?: ColorProps;
+  backgroundColor?: ColorProps,
+  circleColor?: ColorProps,
+  color?: ColorProps,
 };
-const IconLivespins = styled(Svg).withConfig({
-  shouldForwardProp: (prop) =>
-    !['backgroundColor', 'circleColor', 'color'].includes(prop),
-})<IconProps>(({ backgroundColor, circleColor, color, theme }) => [
-  backgroundColor && {
-    backgroundColor: themed('color', backgroundColor)(theme),
-    padding: backgroundColor ? '0.25em' : 0,
-    overflow: 'visible',
-    borderRadius: '50%',
-  },
-  color && {
-    color: themed('color', color)(theme),
-  },
-  circleColor && {
-    circle: {
-      fill: themed('color', circleColor)(theme),
+const IconLivespins =
+  styled(Svg).withConfig({
+    shouldForwardProp: prop =>
+      !['backgroundColor', 'circleColor', 'color'].includes(prop),
+  }) <
+  IconProps >
+  (({ backgroundColor, circleColor, color, theme }) => [
+    backgroundColor && {
+      backgroundColor: themed('color', backgroundColor)(theme),
+      padding: backgroundColor ? '0.25em' : 0,
+      overflow: 'visible',
+      borderRadius: '50%',
     },
-  },
-]);
+    color && {
+      color: themed('color', color)(theme),
+    },
+    circleColor && {
+      circle: {
+        fill: themed('color', circleColor)(theme),
+      },
+    },
+  ]);
 export default IconLivespins;

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,20 @@ 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');
 
+  useEffect(() => {
+    if (!open && typeof onClose === 'function') {
+      onClose(value)
+    }
+  }, [open, value]);
+
   return (
     <div
       tabIndex={-1}

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

@@ -2,11 +2,12 @@ type SelectProps = {
   label?: JSX.Element | string;
   placeholder?: JSX.Element | string;
   open?: boolean;
-  value?: undefined;
+  value?: unknown;
   innerLabel?: boolean;
   className?: string;
   multiple?: boolean;
   counter?: number;
+  onClose?: (value: unknown) => void;
 };
 
 export default SelectProps