@box/combobox-with-api 2.2.22 → 2.2.24

package/dist/esm/lib/components/combobox-with-api/combobox-with-api-container.js

@@ -1 +1 @@
-import{ComboboxWithApi}from"./combobox-with-api.js";import{forwardRef,useCallback,useEffect,useMemo,useState}from"react";import{jsx}from"react/jsx-runtime";import _debounce from"lodash/debounce";var abortErrorName=`AbortError`,ComboboxWithApiContainer=forwardRef((props,forwardedRef)=>{let{debounceTime=250,defaultOptions,fetcher,includeTextInputOption=!1,onInputValueChange,...rest}=props,[isLoading,setIsLoading]=useState(!1),[isError,setIsError]=useState(!1),[isEmpty,setIsEmpty]=useState(!1),[queryValue,setQueryValue]=useState(``),[fetchedOptions,setFetchedOptions]=useState([]),debouncedSetQueryValue=useMemo(()=>_debounce(setQueryValue,debounceTime),[debounceTime]),handleOnInputValueChange=inputVal=>{debouncedSetQueryValue(inputVal),onInputValueChange?.(inputVal)},fetchOptions=useCallback(async queryVal=>{let trimmedValue=queryVal.trim();if(trimmedValue){setIsError(!1),setIsLoading(!0);try{let data=await fetcher(trimmedValue);(!(data.length>0)||typeof data[0]==`string`)&&includeTextInputOption?setFetchedOptions([trimmedValue.toLocaleLowerCase(),...data]):(setIsEmpty(data?.length===0),setFetchedOptions(data))}catch(err){err?.name!==abortErrorName&&setIsError(!0)}finally{setIsLoading(!1)}}},[fetcher,includeTextInputOption]),onTryAgain=()=>{fetchOptions(queryValue)};useEffect(()=>(queryValue.trim().length?fetchOptions(queryValue):(setFetchedOptions([]),setIsEmpty(!1)),()=>debouncedSetQueryValue.cancel()),[debouncedSetQueryValue,fetchOptions,queryValue]);let options=useMemo(()=>{let hasQuery=queryValue.trim().length>0;return defaultOptions?.length>0&&!hasQuery?defaultOptions:fetchedOptions},[queryValue,defaultOptions,fetchedOptions]);return jsx(ComboboxWithApi,{...rest,isEmpty,isError,isLoading,loading:isLoading,onInputValueChange:handleOnInputValueChange,onTryAgain,options,ref:forwardedRef})});export{ComboboxWithApiContainer};
+import{ComboboxWithApi}from"./combobox-with-api.js";import{forwardRef,useCallback,useEffect,useMemo,useState}from"react";import{jsx}from"react/jsx-runtime";import _debounce from"lodash/debounce";var abortErrorName=`AbortError`,ComboboxWithApiContainer=forwardRef((props,forwardedRef)=>{let{debounceTime=250,defaultOptions,fetcher,includeTextInputOption=!1,onInputValueChange,transformOptions,...rest}=props,[isLoading,setIsLoading]=useState(!1),[isError,setIsError]=useState(!1),[isEmpty,setIsEmpty]=useState(!1),[queryValue,setQueryValue]=useState(``),[fetchedOptions,setFetchedOptions]=useState([]),hasQuery=queryValue.trim().length>0,debouncedSetQueryValue=useMemo(()=>_debounce(setQueryValue,debounceTime),[debounceTime]),handleOnInputValueChange=inputVal=>{debouncedSetQueryValue(inputVal),onInputValueChange?.(inputVal)},fetchOptions=useCallback(async queryVal=>{let trimmedValue=queryVal.trim();if(trimmedValue){setIsError(!1),setIsLoading(!0);try{let data=await fetcher(trimmedValue);(!(data.length>0)||typeof data[0]==`string`)&&includeTextInputOption?setFetchedOptions([trimmedValue.toLocaleLowerCase(),...data]):(setIsEmpty(data?.length===0),setFetchedOptions(data))}catch(err){err?.name!==abortErrorName&&setIsError(!0)}finally{setIsLoading(!1)}}},[fetcher,includeTextInputOption]),onTryAgain=()=>{fetchOptions(queryValue)};useEffect(()=>(queryValue.trim().length?fetchOptions(queryValue):(setFetchedOptions([]),setIsEmpty(!1)),()=>debouncedSetQueryValue.cancel()),[debouncedSetQueryValue,fetchOptions,queryValue]);let options=useMemo(()=>{let optionsToRender=defaultOptions?.length>0&&!hasQuery?defaultOptions??[]:fetchedOptions;return transformOptions?transformOptions(optionsToRender,queryValue):optionsToRender},[hasQuery,defaultOptions,fetchedOptions,queryValue,transformOptions]);return jsx(ComboboxWithApi,{...rest,isEmpty:isEmpty||hasQuery&&options.length===0,isError,isLoading,loading:isLoading,onInputValueChange:handleOnInputValueChange,onTryAgain,options,ref:forwardedRef})});export{ComboboxWithApiContainer};

package/dist/types/lib/components/combobox-with-api/combobox-with-api-container.d.ts

@@ -1,8 +1,8 @@
 import { ForwardedRef } from 'react';
 import { OptionValue } from '@box/blueprint-web';
-import { ComboboxWithApiContainerProps } from './types';
-declare const ComboboxWithApiContainerInner: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>(props: ComboboxWithApiContainerProps<Multiple, FreeInput, T>, forwardedRef: ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxWithApiContainer: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>(props: ComboboxWithApiContainerProps<Multiple, FreeInput, T> & {
+import { ComboboxWithApiContainerProps, NonSelectableAdditionalOption } from './types';
+declare const ComboboxWithApiContainerInner: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue, AdditionalOption extends NonSelectableAdditionalOption = never, TransformedOption extends OptionValue = T>(props: ComboboxWithApiContainerProps<Multiple, FreeInput, T, AdditionalOption, TransformedOption>, forwardedRef: ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxWithApiContainer: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue, AdditionalOption extends NonSelectableAdditionalOption = never, TransformedOption extends OptionValue = T>(props: ComboboxWithApiContainerProps<Multiple, FreeInput, T, AdditionalOption, TransformedOption> & {
     ref?: ForwardedRef<HTMLInputElement>;
 }) => ReturnType<typeof ComboboxWithApiContainerInner>;
 export {};

package/dist/types/lib/components/combobox-with-api/combobox-with-api.d.ts

@@ -1,8 +1,8 @@
 import { ForwardedRef } from 'react';
 import { OptionValue } from '@box/blueprint-web';
-import { ComboboxWithApiProps } from './types';
-declare const ComboboxWithApiInner: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>(props: ComboboxWithApiProps<Multiple, FreeInput, T>, forwardedRef: ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxWithApi: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>(props: ComboboxWithApiProps<Multiple, FreeInput, T> & {
+import { ComboboxWithApiProps, NonSelectableAdditionalOption } from './types';
+declare const ComboboxWithApiInner: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue, AdditionalOption extends NonSelectableAdditionalOption = never, TransformedOption extends OptionValue = T>(props: ComboboxWithApiProps<Multiple, FreeInput, T, AdditionalOption, TransformedOption>, forwardedRef: ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxWithApi: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue, AdditionalOption extends NonSelectableAdditionalOption = never, TransformedOption extends OptionValue = T>(props: ComboboxWithApiProps<Multiple, FreeInput, T, AdditionalOption, TransformedOption> & {
     ref?: ForwardedRef<HTMLInputElement>;
 }) => ReturnType<typeof ComboboxWithApiInner>;
 export {};

package/dist/types/lib/components/combobox-with-api/types.d.ts

@@ -1,5 +1,10 @@
-import { ComboboxProps, OptionValue } from '@box/blueprint-web';
-export type ComboboxWithApiProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = Omit<ComboboxProps<Multiple, FreeInput, T>, 'error' | 'hideSelectedOptions'> & Required<Pick<ComboboxProps<Multiple, FreeInput, T>, 'value' | 'onValueChange' | 'loadingAriaLabel'>> & {
+import { ComboboxProps, ComboboxValue, OptionValue } from '@box/blueprint-web';
+export type NonSelectableAdditionalOption = Extract<OptionValue, {
+    value: string;
+}> & {
+    disabled: true;
+};
+export type ComboboxWithApiProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue, AdditionalOption extends NonSelectableAdditionalOption = never, TransformedOption extends OptionValue = T> = Omit<ComboboxProps<Multiple, FreeInput, T | TransformedOption | AdditionalOption>, 'error' | 'hideSelectedOptions' | 'onValueChange' | 'value'> & Required<Pick<ComboboxProps<Multiple, FreeInput, T | TransformedOption | AdditionalOption>, 'loadingAriaLabel'>> & {
     /**
      * Displays error state
      */
@@ -16,8 +21,16 @@ export type ComboboxWithApiProps<Multiple extends boolean, FreeInput extends boo
      * Function called when user clicks try again in error state
      */
     onTryAgain: () => void;
+    /**
+     * Event handler called when selectable value(s) change.
+     */
+    onValueChange: (value: ComboboxValue<Multiple, FreeInput, T>) => void;
+    /**
+     * Controlled selectable value(s) of the combobox.
+     */
+    value: ComboboxValue<Multiple, FreeInput, T>;
 };
-export type ComboboxWithApiContainerProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = Omit<ComboboxWithApiProps<Multiple, FreeInput, T>, 'options' | 'onTryAgain'> & {
+export type ComboboxWithApiContainerProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue, AdditionalOption extends NonSelectableAdditionalOption = never, TransformedOption extends OptionValue = T> = Omit<ComboboxWithApiProps<Multiple, FreeInput, T, AdditionalOption, TransformedOption>, 'options' | 'onTryAgain'> & {
     /**
      * Debounce time in ms for the fetcher call. Defaults to 250ms.
      */
@@ -34,6 +47,10 @@ export type ComboboxWithApiContainerProps<Multiple extends boolean, FreeInput ex
      * Default options to show when the input is empty
      */
     defaultOptions?: T[];
+    /**
+     * Function to transform options before they are rendered. Additional options must be disabled structural rows.
+     */
+    transformOptions?: (options: T[], inputValue: string) => Array<T | TransformedOption | AdditionalOption>;
 };
 export type ComboboxWithApiErrorProps = {
     /**

package/package.json

@@ -1,23 +1,23 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "2.2.22",
+    "version": "2.2.24",
     "peerDependencies": {
         "@ariakit/react": "0.4.21",
-        "@box/blueprint-web": "^16.20.5",
-        "@box/blueprint-web-assets": "^5.7.12",
+        "@box/blueprint-web": "^16.20.6",
+        "@box/blueprint-web-assets": "^5.7.13",
         "lodash": "^4.17.15",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^2.3.4",
+        "@box/tree": "^2.3.5",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.20.5",
-        "@box/blueprint-web-assets": "^5.7.12",
-        "@box/storybook-utils": "^1.2.21",
+        "@box/blueprint-web": "^16.20.6",
+        "@box/blueprint-web-assets": "^5.7.13",
+        "@box/storybook-utils": "^1.2.22",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },