@k-int/stripes-kint-components 5.33.1 → 5.34.0

package/src/artifacts/coverage-jest/validators/validators.js.html

@@ -355,7 +355,7 @@ export {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-03-09T14:50:53.363Z
+                at 2026-03-18T13:14:53.894Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/lib/CustomProperties/Config/CustomPropertiesLookup.js

@@ -5,7 +5,7 @@ import { Col, MultiColumnList, Row, Spinner, Select, Button } from '@folio/strip
 
 import { Form } from 'react-final-form';
 import SearchField from '../../SearchField';
-import { useCustomProperties, useKintIntl } from '../../hooks';
+import { useCustProps, useKintIntl } from '../../hooks';
 
 import css from '../../../../styles/CustomProperties.css';
 
@@ -24,11 +24,10 @@ const CustomPropertiesLookup = ({
   });
   const [selectedContext, setSelectedContext] = useState();
 
-  const { data: custprops, isLoading } = useCustomProperties({
+  const { custprops, isLoading } = useCustProps({
     endpoint,
     nsValues,
     queryParams,
-    returnQueryObject: true,
     ctx: selectedContext,
     options: {
       sort: [

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -13,6 +13,7 @@ import CustomPropertiesLookup from './CustomPropertiesLookup';
 import CustomPropertyView from './CustomPropertyView';
 import CustomPropertiesForm from './CustomPropertyForm';
 import { useKintIntl, useMutateCustomProperties, useRefdata } from '../../hooks';
+import { CUSTPROPS_QUERY_KEY_BASE } from '../../hooks/useCustProps';
 import { parseErrorResponse } from '../../utils';
 
 const EDITING = 'edit';
@@ -87,7 +88,7 @@ const CustomPropertiesSettings = ({
     afterQueryCalls: {
       put: res => {
         setMode(VIEWING);
-        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        queryClient.invalidateQueries(CUSTPROPS_QUERY_KEY_BASE);
         setCustomProperty(res);
         if (afterQueryCalls?.put) {
           afterQueryCalls.put(res);
@@ -95,7 +96,7 @@ const CustomPropertiesSettings = ({
       },
       post: res => {
         setMode(VIEWING);
-        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        queryClient.invalidateQueries(CUSTPROPS_QUERY_KEY_BASE);
         setCustomProperty(res);
         if (afterQueryCalls?.post) {
           afterQueryCalls.post(res);
@@ -103,7 +104,7 @@ const CustomPropertiesSettings = ({
       },
       delete: res => {
         setMode(VIEWING);
-        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        queryClient.invalidateQueries(CUSTPROPS_QUERY_KEY_BASE);
         setCustomProperty();
         if (afterQueryCalls?.delete) {
           afterQueryCalls.delete(res);

package/src/lib/CustomProperties/Edit/CustomPropertiesEditCtx.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Accordion } from '@folio/stripes/components';
 
 import CustomPropertiesListField from './CustomPropertiesListField';
-import { useCustomProperties, useKintIntl } from '../../hooks';
+import { useCustProps, useKintIntl } from '../../hooks';
 
 const CustomPropertiesEditCtx = ({
   ctx,
@@ -41,10 +41,9 @@ const CustomPropertiesEditCtx = ({
     );
   };
 
-  const { data: custprops, isLoading } = useCustomProperties({
+  const { custprops, isLoading } = useCustProps({
     ctx,
     endpoint: customPropertiesEndpoint,
-    returnQueryObject: true,
     options: {
       filters: [{
         path: 'retired',

package/src/lib/CustomProperties/Filter/CustomPropertiesFilter.js

@@ -7,7 +7,7 @@ import {
   Layout,
   Spinner
 } from '@folio/stripes/components';
-import { useCustomProperties, useKintIntl } from '../../hooks';
+import { useCustProps, useKintIntl } from '../../hooks';
 import useParseActiveFilterStrings from './useParseActiveFilterStrings';
 import CustomPropertiesFilterForm from './CustomPropertiesFilterForm';
 import { MULTI_REFDATA_CLASS_NAME, REFDATA_CLASS_NAME } from '../../constants/customProperties';
@@ -22,16 +22,15 @@ const CustomPropertiesFilter = ({
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   labelOverrides = {}
- }) => {
+}) => {
   const [editingFilters, setEditingFilters] = useState(false);
   const openEditModal = () => setEditingFilters(true);
   const closeEditModal = () => setEditingFilters(false);
 
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
-  const { data: custprops, isLoading } = useCustomProperties({
+  const { custprops, isLoading } = useCustProps({
     endpoint: customPropertiesEndpoint,
-    returnQueryObject: true,
     options: {
       sort: [
         { path: 'ctx' }, // Group by ctx

package/src/lib/CustomProperties/Filter/CustomPropertiesFilter.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { MemoryRouter } from 'react-router-dom';
+
+import { waitFor } from '@folio/jest-config-stripes/testing-library/react';
 import { Accordion, Button } from '@folio/stripes-erm-testing';
 
 import { activeFilters, filterHandlers } from './testResources';
@@ -40,8 +42,16 @@ describe('CustomPropertiesFilter', () => {
     await Button({ id: 'accordion-toggle-button-clickable-custprop-filter' }).exists();
   });
 
-  it('renders CustomPropertiesFilterForm component ', () => {
-    const { getByText } = renderComponent;
-    expect(getByText('CustomPropertiesFilterForm')).toBeInTheDocument();
+  describe.each('Opening the Custom properties accordion', () => {
+    beforeEach(async () => {
+      await waitFor(async () => {
+        await Accordion({ id: 'clickable-custprop-filter' }).click();
+      });
+    });
+
+    it('renders CustomPropertiesFilterForm component ', () => {
+      const { getByText } = renderComponent;
+      expect(getByText('CustomPropertiesFilterForm')).toBeInTheDocument();
+    });
   });
 });

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { Accordion, Badge, Spinner } from '@folio/stripes/components';
 
-import { useCustomProperties, useKintIntl } from '../../hooks';
+import { useCustProps, useKintIntl } from '../../hooks';
 
 import CustomPropertyCard from './CustomPropertyCard';
 
@@ -42,10 +42,9 @@ const CustomPropertiesViewCtx = ({
     );
   };
 
-  const { data: custprops, isLoading } = useCustomProperties({
+  const { custprops, isLoading } = useCustProps({
     ctx,
     endpoint: customPropertiesEndpoint,
-    returnQueryObject: true,
     options: {
       sort: [
         { path: 'retired' }, // Place retired custprops at the end

package/src/lib/hooks/README.md

@@ -7,7 +7,7 @@ A hook for fetching refdata values
 ```javascript
 import { useRefdata } from '@k-int/stripes-kint-components'
 ...
-const data = useRefdata({ 
+const data = useRefdata({
   desc: 'PublicationRequest.PublicationType',
   endpoint: 'oa/refdata'
 });
@@ -253,3 +253,103 @@ updateObject({ id: 456, name: 'Updated Object' }) // Updates the object with id
 | queryKeyMutators  | object | An object of the form `{ delete: func1, post: func2, put: func3 }` where `func1()`, `func2()`, and `func3()` are functions that return the query key for each mutation.                                                                                                                                                                            | `{ delete: () => [...queryKey, 'delete'], post: () => [...queryKey, 'create'], put: () => [...queryKey, 'edit'] }`              | ✕        |
 | queryParams       | object | An object of the form `{ delete: obj1, post: obj2, put: obj3 }` where `obj1`, `obj2`, and `obj3` are the query parameters for each operation.                                                                                                                                                                                                      | `{}`                                                                                                                            | ✕        |
 | returnQueryObject | object | An object of the form `{ delete: bool1, post: bool2, put: bool3 }` containing switches to return the entire query object from `useMutation` for each operation. If `false` (the default), the `mutateAsync` function will be returned; if `true`, the full object (including `mutate`, `isLoading`, `error`, etc.) will be returned.               | `{ delete: false, post: false, put: false }`                                                                                    | ✕        |
+## useCustProps
+A hook for fetching custom property definitions using batched parallel requests.
+
+This hook replaces `useCustomProperties` as the preferred way of retrieving custom property definitions. It uses `useParallelBatchFetch` internally to ensure that all available custom properties are fetched even when the backend paginates responses.
+
+### Why this hook exists
+The previous `useCustomProperties` hook relied on a single request with `max: 100`, which meant that only the first 100 custom properties could be retrieved. In environments with more definitions this led to incomplete data.
+
+`useCustProps` resolves this by:
+- using batched requests with controlled concurrency
+- retrieving all available custom property definitions
+- maintaining compatibility with existing query key patterns used across `stripes-kint-components`
+
+### Basic usage
+```javascript
+  const { custprops, isLoading } = useCustProps({
+    ctx,
+    endpoint: customPropertiesEndpoint,
+  });
+  ```
+  ### Props
+  | Name               | Type              | Description                                                                 | Default           | Required |
+|--------------------|------------------|-----------------------------------------------------------------------------|-------------------|----------|
+| endpoint           | string            | Backend endpoint used to retrieve custom property definitions              |                   | ✓        |
+| ctx                | string \| string[]| Context or contexts used to filter custom properties                       |                   | ✕        |
+| nsValues           | object            | Additional namespace query parameters passed to generateKiwtQueryParams    | { sort: 'id' }    | ✕        |
+| options            | object            | Additional query configuration merged into the custom property query       | {}                | ✕        |
+| queryParams        | object            | Options forwarded to the underlying react-query calls                      | {}                | ✕        |
+| batchLimit         | number            | Maximum number of records to fetch                                          | Infinity          | ✕        |
+| batchSize          | number            | Number of records fetched per batch                                         | 100               | ✕        |
+| concurrentRequests | number            | Number of concurrent requests made when fetching batches                    | 5                 | ✕        |
+
+## useCustomProperties
+Legacy hook for fetching custom property definitions.
+
+This hook performs a single request using a `max` parameter (typically `100`) and therefore only retrieves the first page of results. In environments where more than 100 custom properties exist, this can lead to incomplete data.
+
+### Recommendation
+Where possible it is recommended to migrate to:
+
+- `useCustProps` for retrieving custom property definitions
+- or one of the shared components such as:
+  - `CustomPropertiesLookup`
+  - `CustomPropertiesView`
+  - `CustomPropertiesSettings`
+
+These components already use `useCustProps` internally and ensure consistent behaviour.
+
+`useCustomProperties` remains available for backwards compatibility but may be deprecated in the future.
+
+### Basic usage
+```javascript
+import { useCustomProperties } from '@k-int/stripes-kint-components';
+
+const { data, isLoading } = useCustomProperties({
+  endpoint: '/erm/custom-properties',
+  returnQueryObject: true
+});
+```
+### Props
+| Name              | Type              | Description                                                               | Default        | Required |
+|-------------------|------------------|---------------------------------------------------------------------------|---------------|----------|
+| endpoint          | string            | Backend endpoint used to retrieve custom property definitions            |               | ✓        |
+| ctx               | string \| string[]| Context or contexts used to filter custom properties                     |               | ✕        |
+| nsValues          | object            | Additional namespace query parameters passed to generateKiwtQuery        | { sort: 'id'} | ✕        |
+| options           | object            | Additional query configuration merged into the custom property query     | {}            | ✕        |
+| queryParams       | object            | Options forwarded to the underlying react-query call                     | {}            | ✕        |
+| returnQueryObject | boolean           | If true, the full react-query result object is returned instead of data | false         | ✕        |
+## useParallelBatchFetch
+A generic hook for performing batched parallel API requests.
+
+This hook is designed to fetch paginated resources in multiple requests while limiting the number of concurrent requests. It was originally introduced in `stripes-erm-components` and has been incorporated into `stripes-kint-components` to maintain consistency across libraries.
+
+The hook performs the following steps:
+
+1. Fetches the first page of results to determine the total record count.
+2. Generates additional requests using offsets.
+3. Executes batches of requests in parallel with a configurable concurrency limit.
+4. Returns a flattened array of results.
+
+### Basic usage
+```javascript
+import useParallelBatchFetch from '@k-int/stripes-kint-components/hooks/useParallelBatchFetch';
+
+const { items, isLoading, total } = useParallelBatchFetch({
+  endpoint: '/erm/custom-properties'
+});
+```
+### Props
+| Name                | Type     | Description                                                         | Default                     | Required |
+|---------------------|----------|---------------------------------------------------------------------|-----------------------------|----------|
+| endpoint            | string   | Endpoint used for fetching resources                                |                             | ✓        |
+| batchParams         | object   | Query configuration passed to generateKiwtQueryParams               | {}                          | ✕        |
+| nsValues            | object   | Additional namespace query parameters                               | {}                          | ✕        |
+| BATCH_SIZE          | number   | Number of records fetched per request                               | 100                         | ✕        |
+| CONCURRENT_REQUESTS | number   | Maximum number of parallel requests                                 | 5                           | ✕        |
+| BATCH_LIMIT         | number   | Maximum number of records to fetch                                  | Infinity                    | ✕        |
+| generateQueryKey    | function | Optional function used to generate custom react-query keys          |                             | ✕        |
+| queryOptions        | object   | Options passed to the underlying react-query calls                  | {}                          | ✕        |
+| queryNamespace      | string   | Namespace used for the default query key                            | 'stripes-kint-components'   | ✕        |

package/src/lib/hooks/index.js

@@ -7,6 +7,7 @@ export { default as useLocalStorageState } from './useLocalStorageState';
 export { default as useQIndex } from './useQIndex';
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';
 export { default as useCustomProperties } from './useCustomProperties';
+export { default as useCustProps } from './useCustProps';
 export { default as useInvalidateRefdata } from './useInvalidateRefdata';
 export { default as useSASQQueryMeta } from './useSASQQueryMeta';
 export { default as useModConfigEntries } from './useModConfigEntries';
@@ -21,4 +22,6 @@ export { default as useMutateModConfigEntry } from './useMutateModConfigEntry';
 export { default as usePrevNextPagination } from './usePrevNextPagination';
 export { default as useStandaloneSASQQueryParameter } from './useStandaloneSASQQueryParameter';
 
+export { default as useParallelBatchFetch } from './useParallelBatchFetch';
+
 export * from './intlHooks';

package/src/lib/hooks/useCustProps.js

@@ -0,0 +1,97 @@
+import PropTypes from 'prop-types';
+
+import useParallelBatchFetch from './useParallelBatchFetch';
+
+export const CUSTPROPS_QUERY_KEY_BASE = [
+  'stripes-kint-components',
+  'useCustProps',
+  'custprops'
+];
+
+const useCustProps = ({
+  endpoint,
+  ctx,
+  nsValues = {
+    sort: 'id'
+  },
+  options = {},
+  queryParams = {},
+  batchLimit = Infinity,
+  batchSize = 100,
+  concurrentRequests = 5,
+}) => {
+  const custPropOptions = {
+    searchKey: 'label,name,description',
+    filterKeys: {
+      ContextKey: 'ctx'
+    },
+    sort: [
+      { path: 'weight' },
+      { path: 'label' }
+    ],
+    filters: [],
+    ...options
+  };
+
+  if (Array.isArray(ctx)) {
+    custPropOptions.filters.push({
+      values: ctx.map(c => (c === 'isNull' ? 'ctx isNull' : `ctx==${c}`))
+    });
+  } else if (ctx === 'isNull') {
+    custPropOptions.filters.push({
+      value: 'ctx isNull'
+    });
+  } else if (ctx) {
+    custPropOptions.filters.push({
+      path: 'ctx',
+      value: ctx
+    });
+  }
+
+  const {
+    items: custprops = [],
+    isLoading = true,
+    total = 0
+  } = useParallelBatchFetch({
+    endpoint,
+    BATCH_LIMIT: batchLimit,
+    BATCH_SIZE: batchSize,
+    CONCURRENT_REQUESTS: concurrentRequests,
+    batchParams: custPropOptions,
+    nsValues,
+    generateQueryKey: ({
+      endpoint: queryEndpoint,
+      offset,
+      paramsArray
+    }) => [
+        ...CUSTPROPS_QUERY_KEY_BASE,
+        ctx,
+        queryEndpoint,
+        offset,
+        paramsArray
+      ],
+    queryOptions: queryParams
+  });
+
+  return {
+    custprops,
+    isLoading,
+    total
+  };
+};
+
+useCustProps.propTypes = {
+  endpoint: PropTypes.string,
+  ctx: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  nsValues: PropTypes.object,
+  options: PropTypes.object,
+  queryParams: PropTypes.object,
+  batchLimit: PropTypes.number,
+  batchSize: PropTypes.number,
+  concurrentRequests: PropTypes.number,
+};
+
+export default useCustProps;

package/src/lib/hooks/useParallelBatchFetch.js

@@ -0,0 +1,168 @@
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueries, useQuery } from 'react-query';
+
+import { chunk } from 'lodash';
+import { useOkapiKy } from '@folio/stripes/core';
+import { generateKiwtQueryParams } from '../utils';
+
+// A hook to do the same thing as batch fetching > 100 resources, but parallelising it.
+
+// Only defining defaults to ward of "magic number" sonarlint rule -.-
+const CONCURRENT_REQUESTS_DEFAULT = 5;
+const MAX_BATCH_SIZE = 100;
+const DEFAULT_BATCH_LIMIT = Infinity;
+
+// CONCURRENT_REQUESTS and BATCH_SIZE can be tweaked here, but implementor beware
+// They are formatted as if constants to discourage this
+const useParallelBatchFetch = ({
+  BATCH_LIMIT = DEFAULT_BATCH_LIMIT, // Number of resources to stop at, Infinity by default but can be set to a limit
+  batchParams = {}, // Params object of the shape accepted by generateKiwtQueryParams
+  nsValues = {},
+  BATCH_SIZE = MAX_BATCH_SIZE, // Number of resources to fetch per batch
+  CONCURRENT_REQUESTS = CONCURRENT_REQUESTS_DEFAULT, // Number of requests to make concurrently
+  endpoint, // endpoint to hit to fetch items
+  generateQueryKey, // Passed function to allow customised query keys
+  queryNamespace = 'stripes-kint-components',
+  queryOptions: passedQueryOptions = {}, // Options to pass to each query
+}) => {
+  const ky = useOkapiKy();
+  const SAFE_BATCH_SIZE = Math.min(BATCH_SIZE, MAX_BATCH_SIZE);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Destructure passed query options to grab enabled
+  const { enabled: queryEnabled = true, ...queryOptions } = passedQueryOptions;
+
+  const paramsArray = useMemo(() => (
+    generateKiwtQueryParams(
+      {
+        ...batchParams,
+        perPage: SAFE_BATCH_SIZE,
+        stats: true
+      },
+      nsValues
+    )
+  ), [batchParams, nsValues, SAFE_BATCH_SIZE]);
+
+  const getDefaultNSArray = useCallback(
+    (offset) => [queryNamespace, endpoint, offset, paramsArray, 'useChunkedBatchedFetch'],
+    [queryNamespace, endpoint, paramsArray]
+  );
+  const namespaceArray = generateQueryKey ? generateQueryKey({
+    CONCURRENT_REQUESTS,
+    BATCH_LIMIT,
+    SAFE_BATCH_SIZE,
+    batchParams,
+    endpoint,
+    offset: 0,
+    paramsArray,
+    passedQueryOptions,
+  }) : getDefaultNSArray(0);
+
+
+  // Firstly fetch page 1 to get information about totals
+  const firstFetchResult = useQuery(
+    namespaceArray,
+    () => ky.get(`${endpoint}?${[...paramsArray, 'offset=0']?.join('&')}`).json(),
+    passedQueryOptions
+  );
+
+  const totalRecords = useMemo(() => firstFetchResult?.data?.total ?? 0, [firstFetchResult]);
+
+  // WAIT for initial fetch to conclude before setting up queryArray
+  // Set up query array, and only enable the first CONCURRENT_REQUESTS requests
+  const getQueryArray = useCallback(() => {
+    if (!firstFetchResult?.isFetched) {
+      return [];
+    }
+
+    const recordsToFetch = Math.min(totalRecords, BATCH_LIMIT);
+    // Have already fetched page 1
+
+    const queryArray = [];
+    // Offset will be i * SAFE_BATCH_SIZE
+    for (let offset = SAFE_BATCH_SIZE; offset < recordsToFetch; offset += SAFE_BATCH_SIZE) {
+      const queryKey = generateQueryKey ? generateQueryKey({
+        CONCURRENT_REQUESTS,
+        BATCH_LIMIT,
+        SAFE_BATCH_SIZE,
+        batchParams,
+        endpoint,
+        offset,
+        paramsArray,
+        passedQueryOptions,
+      }) : getDefaultNSArray(offset);
+
+      const paramString = [...paramsArray, `offset=${offset}`]?.join('&');
+      queryArray.push({
+        queryKey,
+        queryFn: () => ky.get(`${endpoint}?${paramString}`).json(),
+        // Only enable once the previous slice has all been fetched
+        enabled: queryEnabled && offset / SAFE_BATCH_SIZE < CONCURRENT_REQUESTS,
+        ...queryOptions
+      });
+    }
+    return queryArray;
+  }, [
+    BATCH_LIMIT,
+    batchParams,
+    CONCURRENT_REQUESTS,
+    endpoint,
+    firstFetchResult,
+    generateQueryKey,
+    getDefaultNSArray,
+    ky,
+    paramsArray,
+    passedQueryOptions,
+    queryEnabled,
+    queryOptions,
+    SAFE_BATCH_SIZE,
+    totalRecords
+  ]);
+
+  // Differentiate between chunked logic and the first return (Which includes the initial fetch)
+  const itemQueries = useQueries(getQueryArray());
+  const returnItemQueries = useMemo(() => [firstFetchResult, ...itemQueries], [firstFetchResult, itemQueries]);
+
+  // Once chunk has finished fetching, fetch next chunk
+  useEffect(() => {
+    const chunkedQuery = chunk(returnItemQueries, CONCURRENT_REQUESTS);
+    chunkedQuery.forEach((q, i) => {
+      // Check that all previous chunk are fetched,
+      // and that all of our current chunk are not fetched and not loading
+      if (
+        i !== 0 &&
+        chunkedQuery[i - 1]?.every(pq => pq.isFetched === true) &&
+        q.every(req => req.isFetched === false) &&
+        q.every(req => req.isLoading === false)
+      ) {
+        // Trigger fetch for each request in the chunk
+        q.forEach(req => {
+          req.refetch();
+        });
+      }
+    });
+  }, [CONCURRENT_REQUESTS, returnItemQueries]);
+
+  // Keep easy track of whether this hook is all loaded or not
+  // (This slightly flattens the "isLoading/isFetched" distinction, but it's an ease of use prop)
+  useEffect(() => {
+    const newLoading = ((returnItemQueries?.length ?? 0) < 1 || returnItemQueries?.some(uq => !uq.isFetched));
+
+    if (isLoading !== newLoading) {
+      setIsLoading(newLoading);
+    }
+  }, [isLoading, returnItemQueries]);
+
+  return {
+    itemQueries: returnItemQueries,
+    isLoading,
+    // Offer all fetched orderLines in flattened array once ready
+    items: isLoading ? [] : returnItemQueries?.reduce((acc, curr) => {
+      return [...acc, ...(curr?.data?.results ?? [])];
+    }, []),
+    total: totalRecords
+  };
+};
+
+export default useParallelBatchFetch;

package/styles/TypeDown.css

@@ -20,8 +20,8 @@
   box-shadow: var(--shadow);
   border: 1px solid #ccc;
   margin-top: 0;
-  max-width: max(var(--searchWidth), 300px);
-  min-width: min(var(--searchWidth), 300px);
+  width: var(--searchWidth);
+  min-width: max(var(--searchWidth), 300px);
   pointer-events: all;
   z-index: 1000;
 }