feat: DH-16336: usePickerWithSelectedValues - boolean flags should be calculated based on trimmed search text (#1750)

Supports DH-16336:
- Added an `isDebouncing` prop to `useDebouncedValue`
- Added support for search text trimming to
`usePickerWithSelectedValues`
- Introduced a validation delay to account for viewport filtering to
improve UX and avoid flicker of validation message

resolves #1747

Note that there's not any place in DHC that uses the
`usePickerWithSelectedValues` hook yet. I've been testing locally as
part of DH-16336.

BREAKING CHANGE: `usePickerWithSelectedValues` now takes an object as an
argument instead of positional args

Author: bmingles

packages/components/src/modal/DebouncedModal.tsx

@@ -28,7 +28,7 @@ function DebouncedModal({
   debounceMs,
   isOpen = false,
 }: DebouncedModalProps): JSX.Element {
-  const debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);
+  const { value: debouncedIsOpen } = useDebouncedValue(isOpen, debounceMs);
 
   return (
     <>

packages/jsapi-components/src/useCheckIfExistsValue.ts

@@ -36,7 +36,10 @@ export function useCheckIfExistsValue(
   const tableUtils = useTableUtils();
 
   const [valueTrimmed, setValueTrimmed] = useState('');
-  const valueTrimmedDebounced = useDebouncedValue(valueTrimmed, debounceMs);
+  const { value: valueTrimmedDebounced } = useDebouncedValue(
+    valueTrimmed,
+    debounceMs
+  );
 
   const trimAndUpdateValue = useCallback((text: string) => {
     setValueTrimmed(text.trim());

packages/jsapi-components/src/useDebouncedViewportSelectionFilter.test.ts

@@ -32,7 +32,10 @@ const mockViewportData =
   createMockProxy<WindowedListData<KeyedItem<unknown>>>();
 
 const mockSelection = {
-  useDebounceValueResult: { selection: new Set('a'), isInverted: true },
+  useDebounceValueResult: {
+    isDebouncing: false,
+    value: { selection: new Set('a'), isInverted: true },
+  },
   useIsEqualMemoResult: { selection: new Set('b'), isInverted: true },
   useMappedSelectionResult: { selection: new Set('c'), isInverted: true },
 } as const;
@@ -96,7 +99,7 @@ it('should memoize debounced selection based on value equality', () => {
   renderHook(() => useDebouncedViewportSelectionFilter(options));
 
   expect(useIsEqualMemo).toHaveBeenCalledWith(
-    mockSelection.useDebounceValueResult,
+    mockSelection.useDebounceValueResult.value,
     isSelectionMaybeInvertedEqual
   );
 });

packages/jsapi-components/src/useDebouncedViewportSelectionFilter.ts

@@ -44,7 +44,7 @@ export function useDebouncedViewportSelectionFilter<TItem, TValue>({
 
   // Debounce so user can rapidly select multiple items in a row without the
   // cost of updating the table on each change
-  const debouncedValuesSelection = useDebouncedValue(
+  const { value: debouncedValuesSelection } = useDebouncedValue(
     valuesSelection,
     DEBOUNCE_MS
   );