@box/combobox-with-api 2.2.7 → 2.2.8

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

@@ -1 +1 @@
-import{ComboboxWithApi}from"./combobox-with-api.js";import{useCallback,useEffect,useMemo,useState}from"react";import{jsx}from"react/jsx-runtime";import _debounce from"lodash/debounce";var abortErrorName=`AbortError`,ComboboxWithApiContainer=props=>{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})};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,...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};

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

@@ -1 +1 @@
-import{t as ComboboxWithApiError}from"../../../../chunks/combobox-with-api-error.js";import{Combobox}from"@box/blueprint-web";import{useMemo}from"react";import{jsx}from"react/jsx-runtime";import _uniqBy from"lodash/uniqBy";var ComboboxWithApi=props=>{let{isEmpty,isError,isLoading,noResultMessage,onTryAgain,options,value,...rest}=props,combinedOptions=useMemo(()=>Array.isArray(value)?_uniqBy([...options,...value].reverse(),item=>(typeof item==`string`?item:item.value).toLocaleLowerCase().trim()).reverse():options,[options,value]),noResultMessageFromState;return noResultMessageFromState=isError&&!isLoading?jsx(ComboboxWithApiError,{onTryAgain}):isEmpty&&noResultMessage&&!isLoading?noResultMessage:void 0,jsx(Combobox,{...rest,hideSelectedOptions:!0,loading:isLoading,noResultMessage:noResultMessageFromState,options:combinedOptions,value})};export{ComboboxWithApi};
+import{t as ComboboxWithApiError}from"../../../../chunks/combobox-with-api-error.js";import{Combobox}from"@box/blueprint-web";import{forwardRef,useMemo}from"react";import{jsx}from"react/jsx-runtime";import _uniqBy from"lodash/uniqBy";var ComboboxWithApi=forwardRef((props,forwardedRef)=>{let{isEmpty,isError,isLoading,noResultMessage,onTryAgain,options,value,...rest}=props,combinedOptions=useMemo(()=>Array.isArray(value)?_uniqBy([...options,...value].reverse(),item=>(typeof item==`string`?item:item.value).toLocaleLowerCase().trim()).reverse():options,[options,value]),noResultMessageFromState;return noResultMessageFromState=isError&&!isLoading?jsx(ComboboxWithApiError,{onTryAgain}):isEmpty&&noResultMessage&&!isLoading?noResultMessage:void 0,jsx(Combobox,{...rest,hideSelectedOptions:!0,loading:isLoading,noResultMessage:noResultMessageFromState,options:combinedOptions,value,ref:forwardedRef})});export{ComboboxWithApi};

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

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

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

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

package/package.json

@@ -1,23 +1,23 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "2.2.7",
+    "version": "2.2.8",
     "peerDependencies": {
         "@ariakit/react": "0.4.21",
-        "@box/blueprint-web": "^16.17.1",
-        "@box/blueprint-web-assets": "^5.6.7",
+        "@box/blueprint-web": "^16.18.0",
+        "@box/blueprint-web-assets": "^5.6.8",
         "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.2.7",
+        "@box/tree": "^2.2.8",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.17.1",
-        "@box/blueprint-web-assets": "^5.6.7",
-        "@box/storybook-utils": "^1.2.7",
+        "@box/blueprint-web": "^16.18.0",
+        "@box/blueprint-web-assets": "^5.6.8",
+        "@box/storybook-utils": "^1.2.8",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },