@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.js.flow

@@ -0,0 +1,117 @@
+// @flow strict
+
+import type {GroupTitleOption} from '../useFilteredOptions';
+import {useFilteredOptions} from '../useFilteredOptions';
+
+
+export type ArbitraryOption = {
+  key: string,
+  label: string,
+  arbitrary?: boolean,
+  multiArbitrary?: boolean,
+};
+
+export function useArbitraryOptionAddition<V>({
+  searchTerm,
+  options = [],
+  excludedKeys = [],
+  allowArbitraryValues = true,
+  allowMultiArbitraryValues = false,
+  validateArbitraryValue = (value: string): boolean => value.trim() !== '',
+  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+  makeArbitraryValue = (searchTerm): V => ({
+    key: searchTerm,
+    label: searchTerm,
+    arbitrary: true,
+  }),
+  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+  makeMultiArbitraryValue = (searchTerm): V => {
+    const regex = /^(?=.*[,\n]).+$/s;
+    if (regex.test(searchTerm)) {
+      // $FlowFixMe - Object literal is compatible with V due to type constraint
+      return {key: searchTerm, label: searchTerm, multiArbitrary: true};
+    }
+  },
+  groupTitleOptions = [],
+  arbitraryGroup = {groupTitle: '', showLineDivider: false, options: []},
+  searchOptionsBy = (option: V, searchTerm: string): boolean => {
+    // $FlowFixMe
+    const {label, key}: {label: string, key: string} = option;
+    return (
+      key.toLowerCase().includes(searchTerm) ||
+      label.toLowerCase().includes(searchTerm)
+    );
+  },
+}: {
+  searchTerm: string,
+  options?: V[],
+  excludedKeys?: string[],
+  allowArbitraryValues?: boolean,
+  allowMultiArbitraryValues?: boolean,
+  validateArbitraryValue?: (string) => boolean,
+  makeArbitraryValue?: (string) => V,
+  makeMultiArbitraryValue?: (string) => V,
+  groupTitleOptions?: GroupTitleOption<V>[],
+  arbitraryGroup?: GroupTitleOption<V>,
+  searchOptionsBy?: (option: V, searchTerm: string) => boolean,
+}): {
+  optionsWithArbitrary: Array<V>,
+  groupTitleOptionsWithArbitrary: Array<GroupTitleOption<V>>,
+} {
+  const trimmedSearchTerm = (searchTerm || '').trim().toLowerCase();
+
+  const {filteredOptions, filteredGroupTitleOptions} = useFilteredOptions({
+    searchTerm: trimmedSearchTerm,
+    options,
+    // $FlowFixMe[incompatible-call]
+    groupTitleOptions,
+    searchOptionsBy,
+  });
+
+  // Find if an arbitrary option should be added
+  const arbitraryOption =
+    allowArbitraryValues &&
+    trimmedSearchTerm &&
+    // $FlowFixMe - Array methods are valid here
+    !filteredOptions.some((option) => option.key === trimmedSearchTerm) &&
+    // $FlowFixMe - Array methods are valid here
+    !filteredGroupTitleOptions.some(
+      (group) =>
+        Array.isArray(group.options) &&
+        // $FlowFixMe- option has key property
+        group.options.some((option) => option.key === trimmedSearchTerm),
+    ) &&
+    !excludedKeys.includes(trimmedSearchTerm) &&
+    validateArbitraryValue(trimmedSearchTerm) &&
+    makeArbitraryValue(trimmedSearchTerm);
+
+  // Find if a multi-arbitrary option should be added
+  const multiArbitraryOption =
+    allowMultiArbitraryValues &&
+    trimmedSearchTerm &&
+    makeMultiArbitraryValue(trimmedSearchTerm);
+
+  // Compose the results
+  let optionsWithArbitrary = filteredOptions;
+  let groupTitleOptionsWithArbitrary = groupTitleOptions;
+
+  if (arbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [arbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [
+      {...arbitraryGroup, options: [arbitraryOption]},
+      ...groupTitleOptionsWithArbitrary,
+    ];
+  }
+
+  if (multiArbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [multiArbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [
+      {...arbitraryGroup, options: [multiArbitraryOption]},
+      ...groupTitleOptionsWithArbitrary,
+    ];
+  }
+  // $FlowFixMe[incompatible-return]
+  return {optionsWithArbitrary, groupTitleOptionsWithArbitrary};
+}

package/lib/hooks/useCopyToClipboard/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useCopyToClipboard';

package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCopyToClipboard = useCopyToClipboard;
 var _react = require("react");
 // Return success
-
 function useCopyToClipboard() {
   const [copiedText, setCopiedText] = (0, _react.useState)(null);
   const copy = async text => {

package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js.flow

@@ -0,0 +1,31 @@
+// @flow strict
+
+import {useState} from 'react';
+
+
+type CopiedValue = string | null;
+type CopyFn = (text: string) => Promise<boolean>; // Return success
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = async (text) => {
+    if (!navigator.clipboard) {
+      console.warn('Clipboard not supported');
+      return false;
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn('Copy failed', error);
+      setCopiedText(null);
+      return false;
+    }
+  };
+
+  return [copiedText, copy];
+}

package/lib/hooks/useDebounce/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useDebounce';

package/lib/hooks/useDebounce/useDebounce.js.flow

@@ -0,0 +1,17 @@
+// @flow strict
+
+import * as React from 'react';
+
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};

package/lib/hooks/useFileUpload/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useFileUpload';

package/lib/hooks/useFileUpload/useFileUpload.js

@@ -8,8 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _reactDropzone = require("react-dropzone");
 var _helpers = require("../../utils/helpers");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// $FlowFixMe[untyped-import]
 // useFileUpload hook returns these props
-
 const initialState = {
   validFiles: [],
   rejectedFiles: []
@@ -180,9 +180,7 @@ const useFileUpload = _ref => {
         file,
         id: (0, _helpers.uuid)(),
         reject: true,
-        rejectReason:
-        // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly 'file-too-large': "File exceeds maximum size"; readonly 'file-invalid-type': "Wrong file type"; readonly 'too-many-files': "Too many files"; readonly 'file-too-small': "File is too small"; }'.
-        DROPZONE_ERROR_MESSAGES[errors[0].code] || 'Some error occurred uploading this file',
+        rejectReason: DROPZONE_ERROR_MESSAGES[errors[0].code] || 'Some error occurred uploading this file',
         success: false,
         successMessage: undefined,
         progress: undefined,
@@ -259,7 +257,6 @@ const useFileUpload = _ref => {
     noClick: !shouldAcceptFiles,
     noDrag: !shouldAcceptFiles,
     onDropAccepted: handleDropAccepted,
-    // @ts-ignore - TS2322 - Type '(fileRejections: Array<FileRejection>) => void' is not assignable to type '(fileRejections: FileRejection[], event: DropEvent) => void'.
     onDropRejected: handleDropRejected
   });
   return {
@@ -267,9 +264,7 @@ const useFileUpload = _ref => {
     rejectedFiles: state.rejectedFiles,
     shouldAcceptFiles,
     isDragActive,
-    // @ts-ignore - TS2322 - Type '<T extends DropzoneRootProps>(props?: T | undefined) => T' is not assignable to type '(arg1: unknown) => unknown'.
     getRootProps,
-    // @ts-ignore - TS2322 - Type '<T extends DropzoneInputProps>(props?: T | undefined) => T' is not assignable to type '(arg1: unknown) => unknown'.
     getInputProps,
     handleFileClear,
     handleClear,

package/lib/hooks/useFileUpload/useFileUpload.js.flow

@@ -0,0 +1,304 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {useDropzone} from 'react-dropzone';
+
+import type {
+  FileObject,
+  FileProgress,
+  FileRejection,
+  FileUploadBaseProps,
+} from '../../components/FileUpload';
+import {uuid} from '../../utils/helpers';
+
+// useFileUpload hook returns these props
+export type UseFileUploadReturnProps = {
+  validFiles: Array<FileObject>,
+  rejectedFiles: Array<FileObject>,
+  isDragActive: boolean,
+  shouldAcceptFiles: boolean,
+  getRootProps: (mixed) => mixed,
+  getInputProps: (mixed) => mixed,
+  handleFileClear: (id: string) => mixed,
+  handleClear: () => mixed,
+  moveFileToProgress: (id: string, progress: FileProgress) => mixed,
+  moveFileToSuccess: (id: string, successMessage?: string) => mixed,
+  moveFileToReject: (id: string, rejectReason?: string) => mixed,
+  setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
+};
+
+type State = {
+  validFiles: Array<FileObject>,
+  rejectedFiles: Array<FileObject>,
+};
+
+type Action =
+  | {type: 'ADD_VALID_FILES', files: Array<FileObject>}
+  | {type: 'ADD_REJECTED_FILES', files: Array<FileObject>}
+  | {type: 'REMOVE_FILE', id: string}
+  | {type: 'CLEAR_FILES'}
+  | {type: 'UPDATE_FILE_PROGRESS', id: string, progress: FileProgress}
+  | {type: 'SET_FILE_SUCCESS', id: string, successMessage?: string}
+  | {type: 'SET_FILE_REJECT', id: string, rejectReason?: string}
+  | {type: 'SET_FILE_RE_UPLOAD', id: string, showReUpload?: boolean};
+
+const initialState: State = {
+  validFiles: [],
+  rejectedFiles: [],
+};
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+  case 'ADD_VALID_FILES':
+    return {
+      ...state,
+      validFiles: [...state.validFiles, ...action.files],
+    };
+  case 'ADD_REJECTED_FILES':
+    return {
+      ...state,
+      rejectedFiles: [...state.rejectedFiles, ...action.files],
+    };
+  case 'REMOVE_FILE':
+    return {
+      ...state,
+      validFiles: state.validFiles.filter((file) => file.id !== action.id),
+      rejectedFiles: state.rejectedFiles.filter(
+        (file) => file.id !== action.id,
+      ),
+    };
+  case 'CLEAR_FILES':
+    return {
+      validFiles: [],
+      rejectedFiles: [],
+    };
+  case 'UPDATE_FILE_PROGRESS':
+    return {
+      ...state,
+      validFiles: state.validFiles.map((file) =>
+        file.id === action.id
+          ? {
+            ...file,
+            progress: action.progress,
+            showReUpload: false,
+            successMessage: undefined,
+            rejectReason: undefined,
+          }
+          : file,
+      ),
+      rejectedFiles: state.rejectedFiles.map((file) =>
+        file.id === action.id
+          ? {
+            ...file,
+            progress: action.progress,
+            showReUpload: false,
+            successMessage: undefined,
+            rejectReason: undefined,
+          }
+          : file,
+      ),
+    };
+  case 'SET_FILE_RE_UPLOAD':
+    return {
+      ...state,
+      validFiles: state.validFiles.map((file) =>
+        file.id === action.id
+          ? {...file, progress: undefined, showReUpload: action.showReUpload}
+          : file,
+      ),
+      rejectedFiles: state.rejectedFiles.map((file) =>
+        file.id === action.id
+          ? {...file, progress: undefined, showReUpload: action.showReUpload}
+          : file,
+      ),
+    };
+  case 'SET_FILE_SUCCESS': {
+    // Note: When a file is accepted manually we would move a file from rejected files(if found) to valid files first
+    const fileIndex = state.rejectedFiles.findIndex(
+      (file) => file.id === action.id,
+    );
+    let validFiles = [...state.validFiles];
+    const rejectedFiles = [...state.rejectedFiles];
+
+    if (fileIndex !== -1) {
+      const file = rejectedFiles[fileIndex];
+      rejectedFiles.splice(fileIndex, 1);
+      validFiles = [...validFiles, {...file}];
+    }
+
+    validFiles = validFiles.map((file) =>
+      file.id === action.id
+        ? {
+          ...file,
+          success: true,
+          successMessage: action.successMessage,
+          reject: false,
+          rejectReason: undefined,
+          progress: undefined,
+          showReUpload: false,
+        }
+        : file,
+    );
+
+    return {
+      ...state,
+      validFiles,
+      rejectedFiles,
+    };
+  }
+  case 'SET_FILE_REJECT': {
+    // Note: When a file is rejected manually we would move a file from valid files(if found) to rejected files first
+    const fileIndex = state.validFiles.findIndex(
+      (file) => file.id === action.id,
+    );
+    const validFiles = [...state.validFiles];
+    let rejectedFiles = [...state.rejectedFiles];
+
+    if (fileIndex !== -1) {
+      const file = validFiles[fileIndex];
+      validFiles.splice(fileIndex, 1);
+      rejectedFiles = [...rejectedFiles, {...file}];
+    }
+
+    rejectedFiles = rejectedFiles.map((file) =>
+      file.id === action.id
+        ? {
+          ...file,
+          reject: true,
+          rejectReason: action.rejectReason,
+          success: false,
+          successMessage: undefined,
+          progress: undefined,
+          showReUpload: false,
+        }
+        : file,
+    );
+
+    return {
+      ...state,
+      validFiles,
+      rejectedFiles,
+    };
+  }
+
+  default:
+    return state;
+  }
+};
+
+// This is a map of error codes returned by react-dropzone and their corresponding error messages
+const DROPZONE_ERROR_MESSAGES = {
+  'file-too-large': 'File exceeds maximum size',
+  'file-invalid-type': 'Wrong file type',
+  'too-many-files': 'Too many files',
+  'file-too-small': 'File is too small',
+};
+
+export const useFileUpload = ({
+  maxFiles = 1,
+  maxSize,
+  accept,
+  disabled,
+  onValidFilesDrop,
+  onRejectedFilesDrop,
+  onFileClear,
+  onClear,
+}: FileUploadBaseProps): UseFileUploadReturnProps => {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+
+  // Callbacks for when files are dropped / selected and are valid
+  const handleDropAccepted = (acceptedFiles: Array<File>) => {
+    const validFiles = acceptedFiles.map((file) => ({
+      file,
+      id: uuid(),
+      reject: false,
+      rejectReason: undefined,
+      success: true,
+      successMessage: undefined,
+      progress: undefined,
+      showReUpload: false,
+    }));
+    dispatch({type: 'ADD_VALID_FILES', files: validFiles});
+    onValidFilesDrop?.(validFiles);
+  };
+
+  // Callbacks for when files are dropped / selected and are invalid
+  const handleDropRejected = (fileRejections: Array<FileRejection>) => {
+    const rejectedFiles = fileRejections.map(({file, errors}) => ({
+      file,
+      id: uuid(),
+      reject: true,
+      rejectReason:
+        DROPZONE_ERROR_MESSAGES[errors[0].code] ||
+        'Some error occurred uploading this file',
+      success: false,
+      successMessage: undefined,
+      progress: undefined,
+      showReUpload: false,
+    }));
+    dispatch({type: 'ADD_REJECTED_FILES', files: rejectedFiles});
+    onRejectedFilesDrop?.(rejectedFiles);
+  };
+
+  const handleFileClear = (id: string) => {
+    dispatch({type: 'REMOVE_FILE', id});
+    onFileClear?.(id);
+  };
+
+  const handleClear = () => {
+    dispatch({type: 'CLEAR_FILES'});
+    onClear?.();
+  };
+
+  const moveFileToProgress = (id: string, progress: FileProgress) => {
+    dispatch({type: 'UPDATE_FILE_PROGRESS', id, progress});
+  };
+
+  // Note(Nishant): If the file is found in rejected files, we move it to valid files first in the reducer
+  const moveFileToSuccess = (id: string, successMessage?: string) => {
+    dispatch({type: 'SET_FILE_SUCCESS', id, successMessage});
+  };
+
+  // Note(Nishant): If the file is found in valid files, we move it to rejected files first in the reducer
+  const moveFileToReject = (id: string, rejectReason?: string) => {
+    dispatch({type: 'SET_FILE_REJECT', id, rejectReason});
+  };
+
+  // Note: This is used to show the re-upload button on the file
+  const setShowReUpload = (id: string, showReUpload?: boolean) => {
+    dispatch({type: 'SET_FILE_RE_UPLOAD', id, showReUpload});
+  };
+
+  const totalFiles = state.validFiles.length + state.rejectedFiles.length;
+  const shouldAcceptFiles =
+    !disabled && (maxFiles === 0 || totalFiles < maxFiles);
+
+  // We are using react-dropzone's useDropzone hook to get the drag and drop props
+  const {isDragActive, getRootProps, getInputProps} = useDropzone({
+    maxFiles,
+    multiple: maxFiles > 1 || maxFiles === 0,
+    maxSize,
+    accept,
+    disabled,
+    noClick: !shouldAcceptFiles,
+    noDrag: !shouldAcceptFiles,
+    onDropAccepted: handleDropAccepted,
+    onDropRejected: handleDropRejected,
+  });
+
+  return {
+    validFiles: state.validFiles,
+    rejectedFiles: state.rejectedFiles,
+    shouldAcceptFiles,
+    isDragActive,
+    getRootProps,
+    getInputProps,
+    handleFileClear,
+    handleClear,
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject,
+    setShowReUpload,
+  };
+};

package/lib/hooks/useFilteredOptions/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useFilteredOptions';

package/lib/hooks/useFilteredOptions/useFilteredOptions.js

@@ -7,7 +7,6 @@ exports.useFilteredOptions = useFilteredOptions;
 var React = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // TODO: V should generic with constraints.
-
 function useFilteredOptions(_ref) {
   let {
     searchTerm,
@@ -16,7 +15,6 @@ function useFilteredOptions(_ref) {
     groupTitleOptions = [],
     searchOptionsBy = (option, searchTerm) => {
       // $FlowFixMe
-      // @ts-ignore - TS2322 - Type 'V' is not assignable to type '{ label: string; key: string; }'.
       const {
         label,
         key
@@ -25,9 +23,9 @@ function useFilteredOptions(_ref) {
     }
   } = _ref;
   // Memoize the filterExcluded function for performance
-  const filterExcluded = React.useCallback(
-  // @ts-ignore - TS2339 - Property 'key' does not exist on type 'V'.
-  list => list ? list.filter(option => !excludedKeys.includes(option.key)) : [], [excludedKeys]);
+  const filterExcluded = React.useCallback(list =>
+  // $FlowFixMe - list has key property
+  list ? list.filter(option => !excludedKeys.includes(option.key)) : [], [excludedKeys]);
   return React.useMemo(() => {
     const trimmedValue = (searchTerm || '').trim().toLowerCase();
 

package/lib/hooks/useFilteredOptions/useFilteredOptions.js.flow

@@ -0,0 +1,81 @@
+// @flow strict
+import * as React from 'react';
+
+
+export type GroupTitleOption<V> = {
+  groupTitle: React.Node,
+  options?: V[],
+  showLineDivider?: boolean,
+};
+
+// TODO: V should generic with constraints.
+
+export function useFilteredOptions<V>({
+  searchTerm,
+  options = [],
+  excludedKeys = [],
+  groupTitleOptions = [],
+  searchOptionsBy = (option: V, searchTerm: string): boolean => {
+    // $FlowFixMe
+    const {label, key}: {label: string, key: string} = option;
+
+    return (
+      key.toLowerCase().includes(searchTerm) ||
+      (label ? label.toLowerCase().includes(searchTerm) : false)
+    );
+  },
+}: {
+  searchTerm: string,
+  options?: V[],
+  groupTitleOptions?: GroupTitleOption<V>[],
+  excludedKeys?: string[],
+  searchOptionsBy?: (option: V, searchTerm: string) => boolean,
+}): {filteredOptions?: V[], filteredGroupTitleOptions?: GroupTitleOption<V>[]} {
+  // Memoize the filterExcluded function for performance
+  const filterExcluded = React.useCallback(
+    (list?: V[]): V[] =>
+      // $FlowFixMe - list has key property
+      list ? list.filter((option) => !excludedKeys.includes(option.key)) : [],
+    [excludedKeys],
+  );
+
+  return React.useMemo(() => {
+    const trimmedValue = (searchTerm || '').trim().toLowerCase();
+
+    // Initialize filteredOptions as an empty array if options are not provided
+    let filteredOptions: V[] = [];
+    if (options.length) {
+      filteredOptions = filterExcluded(options);
+
+      // Apply search term filtering
+      if (trimmedValue) {
+        filteredOptions = filteredOptions.filter((option) =>
+          searchOptionsBy(option, trimmedValue),
+        );
+      }
+    }
+
+    let filteredGroupTitleOptions: GroupTitleOption<V>[] = [];
+
+    // Process groupTitleOptions if provided
+    if (Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
+      filteredGroupTitleOptions = groupTitleOptions
+        .map((group) => {
+          const filtered = filterExcluded(group.options).filter(
+            (option) => !trimmedValue || searchOptionsBy(option, trimmedValue),
+          );
+          return {...group, options: filtered};
+        })
+        .filter((group) => (group.options ? group.options.length > 0 : false));
+    }
+
+    return {filteredOptions, filteredGroupTitleOptions};
+  }, [
+    searchTerm,
+    options,
+    excludedKeys,
+    groupTitleOptions,
+    searchOptionsBy,
+    filterExcluded,
+  ]);
+}

package/lib/hooks/useInfiniteScroll/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useInfiniteScroll';