@k-int/stripes-kint-components 5.34.1 → 5.36.0

package/src/lib/Files/FileView/FileView.js

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+
+import { Col, Icon, IconButton, KeyValue, Row, Tooltip } from '@folio/stripes/components';
+
+import { useKintIntl } from '../../hooks';
+
+import css from '../../../../styles/FileView.css';
+
+const FileView = ({
+  canDownload,
+  file,
+  onDownload,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
+  onDelete,
+}) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  if (!file) return null;
+
+  return (
+    <div className={css.fileViewContainer}>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              kintIntl.formatKintMessage({
+                id: 'files.filename',
+                overrideValue: labelOverrides.filename,
+              })
+            }
+          >
+            {canDownload ?
+              /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+              <a
+                data-test-fileview-name
+                href="#"
+                onClick={(e) => {
+                  onDownload(file);
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                rel="noopener noreferrer"
+                style={{ wordBreak: 'break-all' }}
+                target="_blank"
+              >
+                {file.name}
+                <Icon icon="external-link" />
+              </a> :
+              <div data-test-fileview-name>
+                {file.name}
+              </div>
+            }
+          </KeyValue>
+        </Col>
+        <Col xs={4}>
+          <KeyValue
+            label={
+              kintIntl.formatKintMessage({
+                id: 'files.uploaded',
+                overrideValue: labelOverrides.uploaded,
+              })
+            }
+            value={(
+              <span data-test-fileview-uploaded>
+                <div>{kintIntl.formatDate(file.modified)}</div>
+                <div>{kintIntl.formatTime(file.modified)}</div>
+              </span>
+            )}
+          />
+        </Col>
+        <Col xs={2}>
+          <Tooltip
+            id={`file-${file?.id}-delete-button`}
+            text={
+              kintIntl.formatKintMessage({
+                id: 'files.remove',
+                overrideValue: labelOverrides.remove,
+              })
+            }
+          >
+            {({ ariaIds, ref }) => (
+              <IconButton
+                ref={ref}
+                aria-labelledby={ariaIds.text}
+                data-test-fileview-delete
+                icon="trash"
+                onClick={e => {
+                  e.stopPropagation();
+                  onDelete(file);
+                }}
+              />
+            )}
+          </Tooltip>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+FileView.propTypes = {
+  file: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.shape({
+    filename: PropTypes.string,
+    remove: PropTypes.string,
+    uploaded: PropTypes.string,
+  })
+};
+
+export default FileView;

package/src/lib/Files/FileView/index.js

@@ -0,0 +1 @@
+export { default } from './FileView';

package/src/lib/Files/index.js

@@ -0,0 +1,3 @@
+export { default as FileView } from './FileView';
+export { default as FileUploader } from './FileUploader';
+export { default as useFileHandlers } from './useFileHandlers';

package/src/lib/Files/useFileHandlers.js

@@ -0,0 +1,128 @@
+import { useCallback } from 'react';
+import { useMutation, useQuery } from 'react-query';
+
+import { useOkapiKy } from '@folio/stripes/core';
+import { downloadBlob } from '../utils';
+
+// This is copied and adapted from stripes-erm-components
+
+const useFileHandlers = ({
+  // When fetchFile is true, will AUTOMATICALLY fetch not only
+  // fileMetadata but ALSO file itself
+  fetchFile = false,
+  /* fileEndpoint can be a string or
+   * {
+   *   download: string | function,
+   *   metadata: string | function
+   *   upload: string | function,
+   * }
+   */
+  fileEndpoint,
+  fileField = 'upload',
+  fileMappings = {}, // A mapping from file -> formData field,
+  fileId // An OPTIONAL id for a file which results in fetching and returning file metadata
+}) => {
+  const ky = useOkapiKy();
+
+  // A method which resolves the endpoint to hit based on fileEndpoint
+  const resolveEndpoint = useCallback((type, file) => {
+    if (typeof fileEndpoint === 'string') {
+      // We have a base endpoint, configure default behaviour
+      switch (type) {
+        case 'upload':
+          return fileEndpoint;
+        case 'download':
+          return `${fileEndpoint}/${file?.id}/raw`;
+        case 'metadata':
+          return `${fileEndpoint}/${file.id}`;
+        default:
+          throw new TypeError(`Unsupported endpoint type ${type}`);
+      }
+    }
+
+    if (typeof fileEndpoint !== 'object') {
+      throw new TypeError(`Unsupported fileEndpoint type ${typeof fileEndpoint}`);
+    }
+    const config = fileEndpoint[type];
+
+    if (config === null) {
+      throw new TypeError(`Unsupported fileEndpoint[${type}] is not configured`);
+    }
+
+    // Finally we have configured behaviour
+    switch (typeof config) {
+      case 'function':
+        return config(file);
+      case 'string':
+        return config;
+      default:
+        // If we have hit the end then we've done something wrong
+        throw new TypeError(`Unsupported configuration for fileEndpoint[${type}]: ${typeof config}`);
+    }
+  }, [fileEndpoint]);
+
+  const { mutateAsync: handleUploadFile } = useMutation(
+    [fileEndpoint, 'handleUpload'],
+    (file) => {
+      const formData = new FormData();
+      formData.append(fileField, file);
+
+      Object.entries(fileMappings).forEach(([key, value]) => {
+        if (typeof value === 'string') {
+          formData.append(key, value);
+        } else if (typeof value === 'function') {
+          formData.append(key, value(file));
+        } else {
+          throw new TypeError('Invalid fileMapping: ' + key);
+        }
+      });
+
+      return ky.post(resolveEndpoint('upload', file), { body: formData }).json();
+    }
+  );
+
+  const {
+    data: fileBlob,
+    isLoading: isFileLoading,
+    refetch: refetchFile
+  } = useQuery({
+    queryKey: [fileEndpoint, 'content', fileId],
+    queryFn: () => ky.get(resolveEndpoint('download', { id: fileId })).blob(),
+    enabled: !!fileId && typeof fileId === 'string' && fetchFile,
+    staleTime: Infinity, // Assume the file won't change underneath us.
+  });
+
+
+  // We are declaratively fetching a file via a function, useMutation is more convenient here
+  // NOTE even if fileBlob already exists this will refetch it for download
+  const { mutate: getFile, mutateAsync: getFileAsync } = useMutation(
+    [fileEndpoint, 'getFile'],
+    (file) => ky.get(resolveEndpoint('download', file)).blob()
+  );
+
+  const handleDownloadFile = useCallback((fileMetadata) => {
+    return getFileAsync(fileMetadata)
+      /* In this instance we want the file name back as it was handed in, whitespace and all */
+      .then(downloadBlob(fileMetadata.name, { processWhitespace: false }));
+  }, [getFileAsync]);
+
+  const { data: fileMetadata, isLoading: isFileMetadataLoading } = useQuery({
+    queryKey: [fileEndpoint, 'metadata', fileId],
+    queryFn: () => ky.get(resolveEndpoint('metadata', { id: fileId })).json(),
+    enabled: !!fileId && typeof fileId === 'string',
+  });
+
+  return {
+    file: fileBlob,
+    fileMetadata,
+    getFile,
+    getFileAsync,
+    handleDownloadFile,
+    handleUploadFile,
+    isFileLoading,
+    isFileMetadataLoading,
+    refetchFile
+  };
+};
+
+export default useFileHandlers;

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -2,17 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Button, Icon } from '@folio/stripes/components';
-import css from '../../../styles/NoResultsMessage.css';
 import { useKintIntl } from '../hooks';
 
+import css from '../../../styles/NoResultsMessage.css';
+
 const NoResultsMessage = ({
+  className,
+  error,
+  filters,
+  filterPaneIsVisible,
   icon: userIcon,
+  iconPresets: {
+    noTerms: noTermsIcon,
+    noTermsWhenFilterPane: noTermsWhenFilterPaneIcon,
+    noResults: noResultsIcon,
+    isLoading: isLoadingIcon,
+    error: errorIcon,
+  } = {},
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   isLoading,
   isError,
-  error,
-  filterPaneIsVisible,
   label: userLabel,
   labelOverrides = {},
   searchTerm,
@@ -23,28 +33,28 @@ const NoResultsMessage = ({
   let icon = 'search';
   let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
 
-  if (!isLoading && !searchTerm) {
+  if (!isLoading && !searchTerm && !filters) {
     // No search term and not loading
-    icon = filterPaneIsVisible ? 'arrow-left' : null;
+    icon = noTermsIcon ?? (filterPaneIsVisible ? (noTermsWhenFilterPaneIcon ?? 'arrow-left') : null);
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.noTerms" />;
   } else if (!isLoading) {
     // Search term but not loading
-    icon = 'search';
+    icon = noResultsIcon ?? 'search';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.noResults" />;
   } else if (isLoading) {
     // Loading
-    icon = 'spinner-ellipsis';
+    icon = isLoadingIcon ?? 'spinner-ellipsis';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.loading" />;
   } else if (isError) {
     // Request failure
-    icon = 'exclamation-circle';
+    icon = errorIcon ?? 'exclamation-circle';
     label = error?.message;
   }
 
   return (
-    <div className={css.noResultsMessage}>
+    <div className={`${className} ${css.noResultsMessage}`}>
       <div className={css.noResultsMessageLabelWrap}>
-        {(icon || userIcon) &&
+        {(userIcon || icon) &&
           <Icon
             icon={userIcon ?? icon}
             iconRootClass={css.noResultsMessageIcon}
@@ -72,9 +82,18 @@ const NoResultsMessage = ({
 };
 
 NoResultsMessage.propTypes = {
+  className: PropTypes.string,
   error: PropTypes.object,
+  filters: PropTypes.string,
   filterPaneIsVisible: PropTypes.bool.isRequired,
   icon: PropTypes.string,
+  iconPresets: PropTypes.shape({
+    noTerms: PropTypes.string,
+    noTermsWhenFilterPane: PropTypes.string,
+    noResults: PropTypes.string,
+    isLoading: PropTypes.string,
+    error: PropTypes.string,
+  }),
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
   isLoading: PropTypes.bool,

package/src/lib/NoResultsMessage/README.md

@@ -66,16 +66,19 @@ export default MyDataView;
 
 ## Props
 
-| **Prop**              | **Type**                 | **Required** | **Description**                                                                                                                                       |
-|-----------------------|--------------------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `filterPaneIsVisible` | `boolean`                | ✓            | Indicates if the associated filter pane is currently visible. Controls the display of the "Show Filters" button.                                      |
-| `toggleFilterPane`    | `() => void`             | ✓            | Callback function invoked when the "Show Filters" button is clicked. Typically used to toggle the filter pane's visibility.                           |
-| `error`               | `object`                 | ✕            | An error object (e.g., from `react-query`) containing details of a failed request. Its `message` property will be displayed if `isError` is `true`.   |
-| `icon`                | `string`                 | ✕            | An optional custom icon string (from `@folio/stripes/components/Icon`) to override the default icon based on the message state.                       |
-| `intlKey`             | `string`                 | ✕            | A base internationalization key used by the internal `useKintIntl` hook to resolve localized messages.                                                |
-| `intlNS`              | `string`                 | ✕            | An internationalization namespace used by the internal `useKintIntl` hook.                                                                            |
-| `isLoading`           | `boolean`                | ✕            | When `true`, indicates that data is currently being loaded, displaying a loading message.                                                             |
-| `isError`             | `boolean`                | ✕            | When `true`, indicates an error occurred during data fetching, displaying an error message.                                                           |
-| `label`               | `string`, `node`, `func` | ✕            | An optional custom label to override all default message content.                                                                                     |
-| `labelOverrides`      | `object`                 | ✕            | An object for overriding specific parts of the default labels, such as `{ noResultsLabel: 'No records found' }` or `{ showFilters: 'View Filters' }`. |
-| `searchTerm`          | `string`                 | ✕            | The current search query string. Used to differentiate between "no results for search" and "no search term entered" messages.                         |
+| **Prop**              | **Type**                 | **Required** | **Description**                                                                                                                                                                                                                |
+|-----------------------|--------------------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `className`           | `string`                 | ✕            | Allows the passing of additional CSS characteristics to the noResultsMessage                                                                                                                                                   | 
+| `filters  `           | `string`                 | ✕            | The current filters. Used alongside searchTerm to differentiate between "no results for search" and "no search term entered" messages.                                                                                         |
+| `filterPaneIsVisible` | `boolean`                | ✓            | Indicates if the associated filter pane is currently visible. Controls the display of the "Show Filters" button.                                                                                                               |
+| `toggleFilterPane`    | `() => void`             | ✓            | Callback function invoked when the "Show Filters" button is clicked. Typically used to toggle the filter pane's visibility.                                                                                                    |
+| `error`               | `object`                 | ✕            | An error object (e.g., from `react-query`) containing details of a failed request. Its `message` property will be displayed if `isError` is `true`.                                                                            |
+| `icon`                | `string`                 | ✕            | An optional custom icon string (from `@folio/stripes/components/Icon`) to override the default icon based on the message state.                                                                                                |
+| `iconPresets`         | `object`                 | ✕            | An optional object containing keys: `noTerms`, `noTermsWhenFilterPane`, `noResults`, `isLoading` and `error`. Each key is optional and allows direcet overriding of one of the states NoResultsMessage is configured to output |
+| `intlKey`             | `string`                 | ✕            | A base internationalization key used by the internal `useKintIntl` hook to resolve localized messages.                                                                                                                         |
+| `intlNS`              | `string`                 | ✕            | An internationalization namespace used by the internal `useKintIntl` hook.                                                                                                                                                     |
+| `isLoading`           | `boolean`                | ✕            | When `true`, indicates that data is currently being loaded, displaying a loading message.                                                                                                                                      |
+| `isError`             | `boolean`                | ✕            | When `true`, indicates an error occurred during data fetching, displaying an error message.                                                                                                                                    |
+| `label`               | `string`, `node`, `func` | ✕            | An optional custom label to override all default message content.                                                                                                                                                              |
+| `labelOverrides`      | `object`                 | ✕            | An object for overriding specific parts of the default labels, such as `{ noResultsLabel: 'No records found' }` or `{ showFilters: 'View Filters' }`.                                                                          |
+| `searchTerm`          | `string`                 | ✕            | The current search query string. Used alongside filters to differentiate between "no results for search" and "no search term entered" messages.                                                                                |

package/src/lib/SASQLookupComponent/README.md

@@ -178,3 +178,15 @@ export default LookupWithRefExample;
     Using `forwardRef` and `useImperativeHandle`, the component exposes certain query properties and generated query parameters to parent components.
 
 This design enables **SASQLookupComponent** to serve as a robust and flexible foundation for building data lookup views with advanced filtering, search, and pagination functionalities.
+
+## Use in Settings
+
+In Settings, often a "search and filter" experience is wanted, but with 2 panes instead of 3. In order to facilitate this,
+SASQRoute (via SASQLookupComponent) exposes a set of props.
+
+- `hasFilterPane`. This defaults to true, if set to false it will _instead_ default to rendering a search bar at the
+  top of the main pane. It will additionally render any passed FilterHeaderComponent and FilterComponent.
+- `noSearchField`. In order to prevent rendering of the search bar, set this to false.
+
+In this way a SASQRoute can be set up to be purely routing with no search/filter, or with search and filter in the main
+  body for settings.

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,5 +1,5 @@
 import {
-  forwardRef,
+  forwardRef, useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -38,6 +38,8 @@ import {
 import TableBody from './TableBody';
 import SearchKeyControl from '../SearchKeyControl';
 
+import css from '../../../styles/SASQLookupComponent.css';
+
 const SASQLookupComponent = forwardRef((props, ref) => {
   const {
     children,
@@ -60,9 +62,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
       if (passedId) {
         queryNamespace.push(passedId);
       }
-      queryNamespace.push('viewAll');
-      queryNamespace.push(query);
-      queryNamespace.push(currentPage);
+      queryNamespace.push('viewAll', query, currentPage);
 
       return queryNamespace;
     },
@@ -78,6 +78,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     rowNavigation = true, // Default navigation onRowClick
     sasqProps,
     searchableIndexes = [],
+    SearchComponent: PassedSearchComponent,
     searchFieldAriaLabel,
     searchFieldProps = {},
   } = props;
@@ -194,6 +195,53 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     queryParams,
   }));
 
+  const InternalSearchComponent = useCallback(({
+    disableReset,
+    resetAll,
+    searchHandlers,
+    searchValue
+  }) => (
+    <>
+      <SearchField
+        ariaLabel={searchFieldAriaLabel}
+        autoFocus
+        id={`sasq-search-field-${id}`}
+        name="query"
+        onChange={(e) => {
+          if (e.target?.value) {
+            searchHandlers.query(e); // SASQ needs the whole event here
+          } else {
+            searchHandlers.reset();
+          }
+        }}
+        onClear={searchHandlers.reset}
+        value={searchValue.query}
+        {...searchFieldProps}
+      />
+      {searchableIndexes?.length > 0 && (
+        <SearchKeyControl options={searchableIndexes} />
+      )}
+      <Button
+        buttonStyle="primary"
+        disabled={!searchValue.query}
+        fullWidth
+        type="submit"
+      >
+        <FormattedMessage id="stripes-smart-components.search" />
+      </Button>
+      <Button
+        buttonStyle="none"
+        disabled={disableReset}
+        id="clickable-reset-all"
+        onClick={resetAll}
+      >
+        <Icon icon="times-circle-solid">
+          <FormattedMessage id="stripes-smart-components.resetAll" />
+        </Icon>
+      </Button>
+    </>
+  ), [id, searchFieldAriaLabel, searchFieldProps, searchableIndexes]);
+
   return (
     <SearchAndSortQuery
       initialSearchState={{ query: '' }}
@@ -260,6 +308,8 @@ const SASQLookupComponent = forwardRef((props, ref) => {
           return null;
         };
 
+        const SearchComponent = PassedSearchComponent ?? InternalSearchComponent;
+
         return (
           <PersistedPaneset
             appId={namespace}
@@ -291,49 +341,17 @@ const SASQLookupComponent = forwardRef((props, ref) => {
               >
                 <form onSubmit={onSubmitSearch}>
                   <FilterPaneHeaderComponent />
-                  {!noSearchField && (
-                    <>
-                      <SearchField
-                        ariaLabel={searchFieldAriaLabel}
-                        autoFocus
-                        id={`sasq-search-field-${id}`}
-                        name="query"
-                        onChange={(e) => {
-                          if (e.target?.value) {
-                            searchHandlers.query(e); // SASQ needs the whole event here
-                          } else {
-                            searchHandlers.reset();
-                          }
-                        }}
-                        onClear={searchHandlers.reset}
-                        value={searchValue.query}
-                        {...searchFieldProps}
-                      />
-                      {searchableIndexes?.length > 0 && (
-                        <SearchKeyControl options={searchableIndexes} />
-                      )}
-                      <Button
-                        buttonStyle="primary"
-                        disabled={!searchValue.query}
-                        fullWidth
-                        type="submit"
-                      >
-                        <FormattedMessage id="stripes-smart-components.search" />
-                      </Button>
-                      <Button
-                        buttonStyle="none"
-                        disabled={disableReset}
-                        id="clickable-reset-all"
-                        onClick={resetAll}
-                      >
-                        <Icon icon="times-circle-solid">
-                          <FormattedMessage id="stripes-smart-components.resetAll" />
-                        </Icon>
-                      </Button>
-                    </>
-                  )}
+                  {!noSearchField &&
+                    <SearchComponent
+                      disableReset={disableReset}
+                      resetAll={resetAll}
+                      searchHandlers={searchHandlers}
+                      searchValue={searchValue}
+                    />
+                  }
                   <FilterComponent
-                    activeFilters={activeFilters.state}
+                    activeFilters={activeFilters}
+                    data={data}
                     filterChanged={filterChanged}
                     filterHandlers={getFilterHandlers()}
                     resetAll={resetAll}
@@ -363,33 +381,68 @@ const SASQLookupComponent = forwardRef((props, ref) => {
               )}
               {...restOfMainPaneProps}
             >
-              <Body
-                data={data}
-                filterPaneVisible={filterPaneVisible}
-                intlKey={passedIntlKey}
-                intlNS={passedIntlNS}
-                labelOverrides={labelOverrides}
-                noResultsProps={noResultsProps}
-                query={query}
-                rowNavigation={rowNavigation}
-                toggleFilterPane={toggleFilterPane}
-                {...restOfQueryProps}
-                {...sasqRenderProps}
-                /*
-                 * This is insane, it looks like SASQProps `initialSortState`
-                 * needs to be passed through to MCL, as it relies on MCL calling the initial
-                 * sort handler. Passing through SASQProps.
-                 */
-                {...sasqProps}
-                // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
-                {...{
-                  ...props,
-                  mclProps: {
-                    ...paginationMCLProps,
-                    ...mclProps,
-                  },
-                }}
-              />
+              <div className={css.mainPaneContainer}>
+                {!hasFilterPane &&
+                  <div className={css.controlsContainer}>
+                    <form onSubmit={onSubmitSearch}>
+                      <FilterPaneHeaderComponent />
+                      {!noSearchField &&
+                        <SearchComponent
+                          disableReset={disableReset}
+                          resetAll={resetAll}
+                          searchHandlers={searchHandlers}
+                          searchValue={searchValue}
+                        />
+                      }
+                      <FilterComponent
+                        activeFilters={activeFilters}
+                        data={data}
+                        filterChanged={filterChanged}
+                        filterHandlers={getFilterHandlers()}
+                        resetAll={resetAll}
+                        searchChanged={searchChanged}
+                        searchHandlers={getSearchHandlers()}
+                        searchValue={searchValue}
+                      />
+                    </form>
+                  </div>
+                }
+                <div className={css.bodyContainer}>
+                  <Body
+                    data={data}
+                    filterPaneVisible={filterPaneVisible}
+                    intlKey={passedIntlKey}
+                    intlNS={passedIntlNS}
+                    labelOverrides={labelOverrides}
+                    noResultsProps={{
+                      ...noResultsProps,
+                      iconPresets: {
+                        noTermsWhenFilterPane: hasFilterPane ? null : 'arrow-up',
+                        ...noResultsProps.iconPresets,
+                      },
+                    }}
+                    query={query}
+                    rowNavigation={rowNavigation}
+                    toggleFilterPane={toggleFilterPane}
+                    {...restOfQueryProps}
+                    {...sasqRenderProps}
+                    /*
+                     * This is insane, it looks like SASQProps `initialSortState`
+                     * needs to be passed through to MCL, as it relies on MCL calling the initial
+                     * sort handler. Passing through SASQProps.
+                     */
+                    {...sasqProps}
+                    // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
+                    {...{
+                      ...props,
+                      mclProps: {
+                        ...paginationMCLProps,
+                        ...mclProps,
+                      },
+                    }}
+                  />
+                </div>
+              </div>
             </Pane>
             {children}
           </PersistedPaneset>
@@ -431,6 +484,7 @@ SASQLookupComponent.propTypes = {
       label: PropTypes.string,
     })
   ),
+  SearchComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   searchFieldAriaLabel: PropTypes.string,
   searchFieldProps: PropTypes.object,
 };