From bd40b9221f74450b822515686e61531e9d24e315 Mon Sep 17 00:00:00 2001 From: Alireza Date: Wed, 31 Jan 2024 22:31:57 +0100 Subject: [PATCH 01/34] refactor(SpeedSearch): rename `stickySearch` to `keepSearchActiveOnBlur` also added the option to decide based on the blur event --- .../useCollectionSpeedSearch.ts | 17 ++++++++++++----- .../List/SpeedSearchList/useSpeedSearchList.ts | 16 +++++++++------- packages/jui/src/Menu/SpeedSearchMenu.tsx | 2 +- .../jui/src/SpeedSearch/SpeedSearch.stories.tsx | 2 +- packages/jui/src/SpeedSearch/SpeedSearch.tsx | 6 +++--- packages/jui/src/SpeedSearch/useSpeedSearch.tsx | 16 ++++++++++------ .../Tree/SpeedSearchTree/useSpeedSearchTree.ts | 2 +- packages/website/docs/components/Tree.mdx | 2 +- 8 files changed, 38 insertions(+), 25 deletions(-) diff --git a/packages/jui/src/CollectionSpeedSearch/useCollectionSpeedSearch.ts b/packages/jui/src/CollectionSpeedSearch/useCollectionSpeedSearch.ts index 46e1b497..db29f290 100644 --- a/packages/jui/src/CollectionSpeedSearch/useCollectionSpeedSearch.ts +++ b/packages/jui/src/CollectionSpeedSearch/useCollectionSpeedSearch.ts @@ -1,7 +1,10 @@ import { HTMLAttributes, RefObject, useMemo } from "react"; import { Collection, KeyboardDelegate, Node } from "@react-types/shared"; import { SelectionManager } from "@react-stately/selection"; -import { SpeedSearchPopupProps } from "@intellij-platform/core/SpeedSearch"; +import { + SpeedSearchPopupProps, + SpeedSearchProps, +} from "@intellij-platform/core/SpeedSearch"; import { SpeedSearchState, SpeedSearchStateProps, @@ -41,7 +44,7 @@ export interface CollectionSpeedSearch { export function useCollectionSpeedSearch({ collection, selectionManager, - stickySearch, + keepSearchActiveOnBlur, keyboardDelegate, focusBestMatch, ref, @@ -51,9 +54,9 @@ export function useCollectionSpeedSearch({ selectionManager: SelectionManager; keyboardDelegate: KeyboardDelegate; ref: RefObject; - stickySearch?: boolean; focusBestMatch?: boolean; -} & SpeedSearchStateProps): CollectionSpeedSearch { +} & SpeedSearchStateProps & + Pick): CollectionSpeedSearch { const speedSearch = useSpeedSearchState(speedSearchStateProps); const { matches, selectionManager: speedSearchSelectionManager } = @@ -63,7 +66,11 @@ export function useCollectionSpeedSearch({ speedSearch, focusBestMatch, }); - const { containerProps } = useSpeedSearch({ stickySearch }, speedSearch, ref); + const { containerProps } = useSpeedSearch( + { keepSearchActiveOnBlur }, + speedSearch, + ref + ); const speedSearchKeyboardDelegate = useMemo( () => createSpeedSearchKeyboardDelegate( diff --git a/packages/jui/src/List/SpeedSearchList/useSpeedSearchList.ts b/packages/jui/src/List/SpeedSearchList/useSpeedSearchList.ts index 589186ff..a54ddd81 100644 --- a/packages/jui/src/List/SpeedSearchList/useSpeedSearchList.ts +++ b/packages/jui/src/List/SpeedSearchList/useSpeedSearchList.ts @@ -3,16 +3,18 @@ import { SelectionManager } from "@react-stately/selection"; import { HTMLProps, Key, RefObject } from "react"; import { mergeProps } from "@react-aria/utils"; import { ListKeyboardDelegate } from "@react-aria/selection"; +import { + CollectionSpeedSearchContextValue, + useCollectionSpeedSearch, +} from "@intellij-platform/core/CollectionSpeedSearch"; +import { SpeedSearchProps } from "@intellij-platform/core/SpeedSearch"; import { SpeedSearchPopupProps } from "../../SpeedSearch/SpeedSearchPopup"; import { TextRange } from "../../TextRange"; -import { useCollectionSpeedSearch } from "../../CollectionSpeedSearch/useCollectionSpeedSearch"; import { ListProps, useList } from "../useList"; -import { CollectionSpeedSearchContextValue } from "@intellij-platform/core/CollectionSpeedSearch"; interface UseListProps - extends Omit { - stickySearch?: boolean; -} + extends Omit, + Pick {} export function useSpeedSearchList( props: UseListProps, @@ -26,7 +28,7 @@ export function useSpeedSearchList( speedSearchContextValue: CollectionSpeedSearchContextValue; matches: Map; } { - const { stickySearch } = props; + const { keepSearchActiveOnBlur } = props; const { speedSearch, @@ -43,7 +45,7 @@ export function useSpeedSearchList( listState.disabledKeys, ref ), - stickySearch, + keepSearchActiveOnBlur, ref, }); const { listProps, focused } = useList( diff --git a/packages/jui/src/Menu/SpeedSearchMenu.tsx b/packages/jui/src/Menu/SpeedSearchMenu.tsx index 5f4c88bc..5ef552b5 100644 --- a/packages/jui/src/Menu/SpeedSearchMenu.tsx +++ b/packages/jui/src/Menu/SpeedSearchMenu.tsx @@ -109,7 +109,7 @@ function useSpeedSearchMenu( state.disabledKeys, ref ), - stickySearch: true, + keepSearchActiveOnBlur: true, focusBestMatch: true, ref, }); diff --git a/packages/jui/src/SpeedSearch/SpeedSearch.stories.tsx b/packages/jui/src/SpeedSearch/SpeedSearch.stories.tsx index 3536f36c..5be02409 100644 --- a/packages/jui/src/SpeedSearch/SpeedSearch.stories.tsx +++ b/packages/jui/src/SpeedSearch/SpeedSearch.stories.tsx @@ -41,7 +41,7 @@ export const Default: StoryObj = { onActiveChange?.(active); }} match // search is done within the searchable text component in this dummy example, and we don't have information about match. - stickySearch + keepSearchActiveOnBlur >