feat(Select): add OnOpenChange options

gravity-ui · Oct 26, 2024 · 717deb1 · 717deb1
1 parent b6516f4
commit 717deb1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/src/components/Select/__tests__/Select.base-actions.test.tsx b/src/components/Select/__tests__/Select.base-actions.test.tsx
@@ -134,9 +134,9 @@ describe('Select base actions', () => {
             setup({onOpenChange});
 
             await toggleSelectPopup();
-            expect(onOpenChange).toHaveBeenCalledWith(true);
+            expect(onOpenChange).toHaveBeenCalledWith(true, {reason: 'outside-click'});
             await toggleSelectPopup();
-            expect(onOpenChange).toHaveBeenCalledWith(false);
+            expect(onOpenChange).toHaveBeenCalledWith(false, {reason: 'outside-click'});
             expect(onOpenChange).toHaveBeenCalledTimes(2);
         });
         test('should call onOpenChange whith controlled open', async () => {
@@ -145,7 +145,7 @@ describe('Select base actions', () => {
 
             await toggleSelectPopup();
 
-            expect(onOpenChange).toHaveBeenCalledWith(false);
+            expect(onOpenChange).toHaveBeenCalledWith(false, {reason: 'outside-click'});
             expect(onOpenChange).toHaveBeenCalledTimes(1);
         });
     });

diff --git a/src/hooks/useSelect/__tests__/useOpenState.test.tsx b/src/hooks/useSelect/__tests__/useOpenState.test.tsx
@@ -71,14 +71,14 @@ describe('useOpenState', () => {
             });
             rerender(props);
 
-            expect(onOpenChange).toHaveBeenCalledWith(true);
+            expect(onOpenChange).toHaveBeenCalledWith(true, {reason: 'outside-click'});
 
             act(() => {
                 result.current.toggleOpen();
             });
             rerender(props);
 
-            expect(onOpenChange).toHaveBeenCalledWith(false);
+            expect(onOpenChange).toHaveBeenCalledWith(false, {reason: 'outside-click'});
         });
         test('if the same value is set, the onOpenChange will not be called', () => {
             const onOpenChange = jest.fn();
@@ -150,7 +150,20 @@ describe('useOpenState', () => {
             });
             rerender(props);
 
-            expect(onOpenChange).toHaveBeenCalledWith(false);
+            expect(onOpenChange).toHaveBeenCalledWith(false, {reason: 'outside-click'});
+        });
+
+        test('onOpenChange is called with reason', () => {
+            const onOpenChange = jest.fn();
+            const props = {open: true, onOpenChange};
+            const {result, rerender} = renderUseOpenStateHook(props);
+
+            act(() => {
+                result.current.toggleOpen(false, {reason: 'selection'});
+            });
+            rerender(props);
+
+            expect(onOpenChange).toHaveBeenCalledWith(false, {reason: 'selection'});
         });
 
         test('if the same value is set, the onOpenChange will not be called', () => {

diff --git a/src/hooks/useSelect/types.ts b/src/hooks/useSelect/types.ts
@@ -1,10 +1,14 @@
 export type UseSelectOption<T = unknown> = T & {value: string};
 
+export type OnOpenChangeOptions = {
+    reason: 'selection' | 'outside-click';
+};
+
 export type UseOpenProps = {
     defaultOpen?: boolean;
     open?: boolean;
     onClose?: () => void;
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean, options: OnOpenChangeOptions) => void;
 };
 
 export type UseSelectProps = {
@@ -22,6 +26,6 @@ export type UseSelectResult<T> = {
     handleSelection: (option: UseSelectOption<T>) => void;
     handleClearValue: () => void;
     setValue: (value: string[]) => void;
-    toggleOpen: (val?: boolean | undefined) => void;
+    toggleOpen: (val?: boolean, options?: OnOpenChangeOptions) => void;
     setActiveIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 };
diff --git a/src/hooks/useSelect/useOpenState.ts b/src/hooks/useSelect/useOpenState.ts
@@ -2,13 +2,13 @@ import React from 'react';
 
 import {useControlledState} from '../useControlledState/useControlledState';
 
-import type {UseOpenProps} from './types';
+import type {OnOpenChangeOptions, UseOpenProps} from './types';
 
 export const useOpenState = (props: UseOpenProps) => {
     const {onOpenChange, onClose} = props;
     const handleOpenChange = React.useCallback(
-        (newOpen: boolean) => {
-            onOpenChange?.(newOpen);
+        (newOpen: boolean, options: OnOpenChangeOptions = {reason: 'outside-click'}) => {
+            onOpenChange?.(newOpen, options);
             if (newOpen === false && onClose) {
                 onClose();
             }
@@ -23,9 +23,9 @@ export const useOpenState = (props: UseOpenProps) => {
     );
 
     const toggleOpen = React.useCallback(
-        (val?: boolean) => {
+        (val?: boolean, options?: OnOpenChangeOptions) => {
             const newOpen = typeof val === 'boolean' ? val : !open;
-            setOpenState(newOpen);
+            setOpenState(newOpen, options);
         },
         [open, setOpenState],
     );

diff --git a/src/hooks/useSelect/useSelect.ts b/src/hooks/useSelect/useSelect.ts
@@ -41,7 +41,7 @@ export const useSelect = <T extends unknown>({
                 setValue(nextValue);
             }
 
-            toggleOpen(false);
+            toggleOpen(false, {reason: 'selection'});
         },
         [value, setValue, toggleOpen],
     );