@box/combobox-with-api 2.2.10 → 2.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- import messages from"../esm/lib/components/combobox-with-api-pagination/messages.js";import{useAsyncList}from"../esm/lib/components/combobox-with-api-pagination/use-async-list.js";import{useControllableState}from"../esm/lib/components/combobox-with-api-pagination/utils/use-controllable-state.js";import{useTrackVisibility}from"../esm/lib/components/combobox-with-api-pagination/utils/use-intersection-observer.js";import{ComboboxItemValue}from"@ariakit/react";import{Combobox as Combobox$1,InlineNotice,LoadingIndicator,Text,useForkRef}from"@box/blueprint-web";import{Loader,Search}from"@box/blueprint-web-assets/icons/Fill";import{IconIconOnLightSecondary,Size1,Size6}from"@box/blueprint-web-assets/tokens/tokens";import clsx from"clsx";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{FormattedMessage,useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import '../styles/combobox-with-api-pagination.css';var combobox_with_api_pagination_module_default={disabled:`_disabled_9lkdk_27`,highlightOptionText:`_highlightOptionText_9lkdk_31`,selected:`_selected_9lkdk_53`,option:`_option_9lkdk_73`,errorComboboxOption:`_errorComboboxOption_9lkdk_77`,errorComboboxOptionText:`_errorComboboxOptionText_9lkdk_82`},ComboboxWithApiError=forwardRef(({onTryAgain},forwardedRef)=>{let{formatMessage}=useIntl();return jsxs(Fragment,{children:[jsx(InlineNotice,{variant:`error`,variantIconAriaLabel:formatMessage(messages.loadingResultsErrorIconLabel),children:jsx(FormattedMessage,{...messages.loadingResultsErrorMessage})}),jsx(Combobox$1.Option,{ref:forwardedRef,className:combobox_with_api_pagination_module_default.errorComboboxOption,onClick:onTryAgain,children:jsxs(Text,{as:`span`,className:combobox_with_api_pagination_module_default.errorComboboxOptionText,color:`textOnLightLink`,variant:`bodyDefaultBold`,children:[jsx(FormattedMessage,{...messages.loadingResultsErrorAction}),jsx(Loader,{color:`currentColor`,height:`12px`,width:`12px`})]})})]})}),LOAD_MORE_VALUE=`__LOADING__`,LOAD_MORE_ERROR_VALUE=`__LOADING_ERROR__`,INTERSECTION_ROOT_MARGIN=`0px 0px 20px 0px`,EndComboboxSearchIcon=jsx(Search,{color:IconIconOnLightSecondary,height:Size6,role:`presentation`,style:{padding:Size1,boxSizing:`border-box`},width:Size6}),ComboboxWithApiPagination=forwardRef(function(props,forwardedRef){let{dataTargetId,defaultFetcher,initialOpen=!1,onInputValueChange,value,onValueChange,onOpenChange,noResultMessage,defaultValue=[],loadingAriaLabel,multiselect=!1,disabled,className,displaySingleSelectionAsChip=!0,...rest}=props,{formatMessage}=useIntl(),inputRef=useRef(null),shouldFetchOnSearch=useRef(!0),[isOpen,setIsOpen]=useState(initialOpen),list=useAsyncList({async load({marker,searchInput,signal}){let res=await defaultFetcher({signal,marker,searchInput});return{items:res.options,marker:res.marker}}}),didDispatchInitialFetch=useRef(!1),fetchOptions=useCallback(()=>{didDispatchInitialFetch.current||=(list.reload(),!0)},[]),[selectedValue,setSelectedOption]=useControllableState({prop:value,defaultProp:defaultValue,onChange:onValueChange}),isSingleSelectValueSelected=!multiselect&&selectedValue.length===1,shouldOverrideInputStyles=isSingleSelectValueSelected&&!disabled,handleOpenChange=useCallback(newIsOpen=>{setIsOpen(newIsOpen),onOpenChange?.(newIsOpen)},[onOpenChange]),handleOnValueChange=selectedOptions=>{disabled||(selectedOptions===void 0?(setSelectedOption([]),(!shouldFetchOnSearch.current||!displaySingleSelectionAsChip)&&(list.search(``),shouldFetchOnSearch.current=!0)):Array.isArray(selectedOptions)?setSelectedOption(selectedOptions):(setSelectedOption([selectedOptions]),multiselect||(setIsOpen(!1),onOpenChange?.(!1))))},comboboxValue=useMemo(()=>selectedValue.length===0?multiselect?[]:void 0:multiselect?selectedValue:selectedValue[0],[multiselect,selectedValue]),selectedOptionsWithoutItems=useMemo(()=>selectedValue.filter(option=>!list.items.some(item=>item.value===option.value)),[selectedValue,list.items]),renderInfiniteOption=option=>{let{value:optionValue,displayValue,...optionRest}=option;if(optionValue===LOAD_MORE_VALUE)return list.hasNextPage?jsx(Combobox$1.Option,{...optionRest,ref:triggerRef,disabled:!0,value:optionValue,children:jsx(LoadingIndicator,{"aria-label":formatMessage(messages.loadingMoreAriaLabel),style:{position:`unset`}})}):null;if(optionValue===LOAD_MORE_ERROR_VALUE&&list.hasError&&!list.isEmpty)return jsx(ComboboxWithApiError,{onTryAgain:()=>{list.loadMore(),inputRef.current?.focus()}});if(selectedOptionsWithoutItems.some(optionWithoutItem=>optionWithoutItem.value===optionValue))return null;let isSelected=selectedValue.some(selectedOption=>selectedOption.value===optionValue);return jsx(Combobox$1.Option,{...optionRest,className:combobox_with_api_pagination_module_default.option,value:optionValue,children:jsx(ComboboxItemValue,{className:clsx(combobox_with_api_pagination_module_default.highlightOptionText,isSelected&&combobox_with_api_pagination_module_default.selected),value:displayValue||optionValue})})},handleOnInputValueChange=inputVal=>{if(onInputValueChange?.(inputVal),isSingleSelectValueSelected&&inputVal===``){shouldFetchOnSearch.current=!1;return}list.search(inputVal)},handleTryAgain=()=>{list.reload(),inputRef.current?.focus()},noResultMessageFromState;noResultMessageFromState=list.hasError&&!list.isLoading?jsx(ComboboxWithApiError,{onTryAgain:handleTryAgain}):list.isEmpty&&!list.isLoading?noResultMessage||formatMessage(messages.noResults):void 0;let[triggerRef,{rootRef:popoverRef,isVisible}]=useTrackVisibility({rootMargin:INTERSECTION_ROOT_MARGIN});useEffect(()=>{if(!(isVisible&&list.hasNextPage))return;let timer=setTimeout(()=>{list.loadMore()},100);return()=>{clearTimeout(timer)}},[isVisible]);let finalOptions=useMemo(()=>{let loadMoreOption=list.hasNextPage?{displayValue:LOAD_MORE_VALUE,value:LOAD_MORE_VALUE}:null,loadMoreErrorOption=!loadMoreOption&&list.hasError&&!list.isEmpty?{displayValue:LOAD_MORE_ERROR_VALUE,value:LOAD_MORE_ERROR_VALUE}:null;return[...list.items,...selectedOptionsWithoutItems,loadMoreOption,loadMoreErrorOption].filter(Boolean)},[list.hasNextPage,list.hasError,list.isEmpty,list.items,selectedOptionsWithoutItems]);return jsx(Combobox$1,{...rest,ref:useForkRef(inputRef,forwardedRef),as:`input`,className:clsx(className,{[combobox_with_api_pagination_module_default.disabled]:shouldOverrideInputStyles}),clearButtonAriaLabel:formatMessage(messages.clearButtonAriaLabel),clearOnBlur:!1,"data-target-id":dataTargetId,disabled:disabled||isSingleSelectValueSelected&&displaySingleSelectionAsChip,displaySingleSelectionAsChip,displayValue:option=>option.displayValue||option.value,endComboboxIcon:EndComboboxSearchIcon,focusLoop:!1,getPopoverRef:popoverRef,loading:list.isReloading,loadingAriaLabel:loadingAriaLabel||formatMessage(messages.loadingAriaLabel),multiselect,noResultMessage:noResultMessageFromState,onFocus:fetchOptions,onInputValueChange:handleOnInputValueChange,onOpenChange:handleOpenChange,onValueChange:handleOnValueChange,open:isOpen,options:finalOptions,renderOption:renderInfiniteOption,value:comboboxValue})});export{ComboboxWithApiPagination as t};
1
+ import messages from"../esm/lib/components/combobox-with-api-pagination/messages.js";import{useAsyncList}from"../esm/lib/components/combobox-with-api-pagination/use-async-list.js";import{useControllableState}from"../esm/lib/components/combobox-with-api-pagination/utils/use-controllable-state.js";import{useTrackVisibility}from"../esm/lib/components/combobox-with-api-pagination/utils/use-intersection-observer.js";import{ComboboxItemValue}from"@ariakit/react";import{Combobox as Combobox$1,InlineNotice,LoadingIndicator,Text,useForkRef}from"@box/blueprint-web";import{Loader,Search}from"@box/blueprint-web-assets/icons/Fill";import{IconIconOnLightSecondary,Size1,Size6}from"@box/blueprint-web-assets/tokens/tokens";import clsx from"clsx";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{FormattedMessage,useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import '../styles/combobox-with-api-pagination.css';var combobox_with_api_pagination_module_default={disabled:`_disabled_zcru0_27`,highlightOptionText:`_highlightOptionText_zcru0_31`,selected:`_selected_zcru0_53`,option:`_option_zcru0_73`,errorComboboxOption:`_errorComboboxOption_zcru0_77`,errorComboboxOptionText:`_errorComboboxOptionText_zcru0_82`},ComboboxWithApiError=forwardRef(({onTryAgain},forwardedRef)=>{let{formatMessage}=useIntl();return jsxs(Fragment,{children:[jsx(InlineNotice,{variant:`error`,variantIconAriaLabel:formatMessage(messages.loadingResultsErrorIconLabel),children:jsx(FormattedMessage,{...messages.loadingResultsErrorMessage})}),jsx(Combobox$1.Option,{ref:forwardedRef,className:combobox_with_api_pagination_module_default.errorComboboxOption,onClick:onTryAgain,children:jsxs(Text,{as:`span`,className:combobox_with_api_pagination_module_default.errorComboboxOptionText,color:`textOnLightLink`,variant:`bodyDefaultBold`,children:[jsx(FormattedMessage,{...messages.loadingResultsErrorAction}),jsx(Loader,{color:`currentColor`,height:`12px`,width:`12px`})]})})]})}),LOAD_MORE_VALUE=`__LOADING__`,LOAD_MORE_ERROR_VALUE=`__LOADING_ERROR__`,INTERSECTION_ROOT_MARGIN=`0px 0px 20px 0px`,EndComboboxSearchIcon=jsx(Search,{color:IconIconOnLightSecondary,height:Size6,role:`presentation`,style:{padding:Size1,boxSizing:`border-box`},width:Size6}),ComboboxWithApiPagination=forwardRef(function(props,forwardedRef){let{dataTargetId,defaultFetcher,initialOpen=!1,onInputValueChange,value,onValueChange,onOpenChange,noResultMessage,defaultValue=[],loadingAriaLabel,multiselect=!1,disabled,className,displaySingleSelectionAsChip=!0,...rest}=props,{formatMessage}=useIntl(),inputRef=useRef(null),shouldFetchOnSearch=useRef(!0),[isOpen,setIsOpen]=useState(initialOpen),list=useAsyncList({async load({marker,searchInput,signal}){let res=await defaultFetcher({signal,marker,searchInput});return{items:res.options,marker:res.marker}}}),didDispatchInitialFetch=useRef(!1),fetchOptions=useCallback(()=>{didDispatchInitialFetch.current||=(list.reload(),!0)},[]),[selectedValue,setSelectedOption]=useControllableState({prop:value,defaultProp:defaultValue,onChange:onValueChange}),isSingleSelectValueSelected=!multiselect&&selectedValue.length===1,shouldOverrideInputStyles=isSingleSelectValueSelected&&!disabled,handleOpenChange=useCallback(newIsOpen=>{setIsOpen(newIsOpen),onOpenChange?.(newIsOpen)},[onOpenChange]),handleOnValueChange=selectedOptions=>{disabled||(selectedOptions===void 0?(setSelectedOption([]),(!shouldFetchOnSearch.current||!displaySingleSelectionAsChip)&&(list.search(``),shouldFetchOnSearch.current=!0)):Array.isArray(selectedOptions)?setSelectedOption(selectedOptions):(setSelectedOption([selectedOptions]),multiselect||(setIsOpen(!1),onOpenChange?.(!1))))},comboboxValue=useMemo(()=>selectedValue.length===0?multiselect?[]:void 0:multiselect?selectedValue:selectedValue[0],[multiselect,selectedValue]),selectedOptionsWithoutItems=useMemo(()=>selectedValue.filter(option=>!list.items.some(item=>item.value===option.value)),[selectedValue,list.items]),renderInfiniteOption=option=>{let{value:optionValue,displayValue,...optionRest}=option;if(optionValue===LOAD_MORE_VALUE)return list.hasNextPage?jsx(Combobox$1.Option,{...optionRest,ref:triggerRef,disabled:!0,value:optionValue,children:jsx(LoadingIndicator,{"aria-label":formatMessage(messages.loadingMoreAriaLabel),style:{position:`unset`}})}):null;if(optionValue===LOAD_MORE_ERROR_VALUE&&list.hasError&&!list.isEmpty)return jsx(ComboboxWithApiError,{onTryAgain:()=>{list.loadMore(),inputRef.current?.focus()}});if(selectedOptionsWithoutItems.some(optionWithoutItem=>optionWithoutItem.value===optionValue))return null;let isSelected=selectedValue.some(selectedOption=>selectedOption.value===optionValue);return jsx(Combobox$1.Option,{...optionRest,className:combobox_with_api_pagination_module_default.option,value:optionValue,children:jsx(ComboboxItemValue,{className:clsx(combobox_with_api_pagination_module_default.highlightOptionText,isSelected&&combobox_with_api_pagination_module_default.selected),value:displayValue||optionValue})})},handleOnInputValueChange=inputVal=>{if(onInputValueChange?.(inputVal),isSingleSelectValueSelected&&inputVal===``){shouldFetchOnSearch.current=!1;return}list.search(inputVal)},handleTryAgain=()=>{list.reload(),inputRef.current?.focus()},noResultMessageFromState;noResultMessageFromState=list.hasError&&!list.isLoading?jsx(ComboboxWithApiError,{onTryAgain:handleTryAgain}):list.isEmpty&&!list.isLoading?noResultMessage||formatMessage(messages.noResults):void 0;let[triggerRef,{rootRef:popoverRef,isVisible}]=useTrackVisibility({rootMargin:INTERSECTION_ROOT_MARGIN});useEffect(()=>{if(!(isVisible&&list.hasNextPage))return;let timer=setTimeout(()=>{list.loadMore()},100);return()=>{clearTimeout(timer)}},[isVisible]);let finalOptions=useMemo(()=>{let loadMoreOption=list.hasNextPage?{displayValue:LOAD_MORE_VALUE,value:LOAD_MORE_VALUE}:null,loadMoreErrorOption=!loadMoreOption&&list.hasError&&!list.isEmpty?{displayValue:LOAD_MORE_ERROR_VALUE,value:LOAD_MORE_ERROR_VALUE}:null;return[...list.items,...selectedOptionsWithoutItems,loadMoreOption,loadMoreErrorOption].filter(Boolean)},[list.hasNextPage,list.hasError,list.isEmpty,list.items,selectedOptionsWithoutItems]);return jsx(Combobox$1,{...rest,ref:useForkRef(inputRef,forwardedRef),as:`input`,className:clsx(className,{[combobox_with_api_pagination_module_default.disabled]:shouldOverrideInputStyles}),clearButtonAriaLabel:formatMessage(messages.clearButtonAriaLabel),clearOnBlur:!1,"data-target-id":dataTargetId,disabled:disabled||isSingleSelectValueSelected&&displaySingleSelectionAsChip,displaySingleSelectionAsChip,displayValue:option=>option.displayValue||option.value,endComboboxIcon:EndComboboxSearchIcon,focusLoop:!1,getPopoverRef:popoverRef,loading:list.isReloading,loadingAriaLabel:loadingAriaLabel||formatMessage(messages.loadingAriaLabel),multiselect,noResultMessage:noResultMessageFromState,onFocus:fetchOptions,onInputValueChange:handleOnInputValueChange,onOpenChange:handleOpenChange,onValueChange:handleOnValueChange,open:isOpen,options:finalOptions,renderOption:renderInfiniteOption,value:comboboxValue})});export{ComboboxWithApiPagination as t};
@@ -1 +1 @@
1
- import{RootTreeNode,getServiceNode,hasValidLevel}from"../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";import{n as treeReducer,r as ActionTypes,t as initialTreeState}from"./treeReducer.js";import{LoadingIndicator}from"@box/blueprint-web";import{forwardRef,useCallback,useEffect,useMemo,useReducer,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{InlineError,Tree}from"@box/tree";import '../styles/dynamic-loading-tree.css';var combobox_with_api_tree_module_default={container:`_container_ajuss_27`,disabled:`_disabled_ajuss_50`,label:`_label_ajuss_53`,hiddenLabel:`_hiddenLabel_ajuss_77`,comboboxContainer:`_comboboxContainer_ajuss_80`,withComboboxButtons:`_withComboboxButtons_ajuss_96`,textInputWrapper:`_textInputWrapper_ajuss_118`,textInput:`_textInput_ajuss_118`,comboboxButtons:`_comboboxButtons_ajuss_152`,withChips:`_withChips_ajuss_159`,popover:`_popover_ajuss_167`,loadingIndicator:`_loadingIndicator_ajuss_205`,noResultOption:`_noResultOption_ajuss_208`},getTreeNodeFromItem=item=>{let children=[...item.children],{metadata}=item;return{...item,children,metadata:{...item.metadata,variant:metadata.variant,isLoading:item.status===`loading`&&!item.children.length,labelName:metadata.labelName||``,labelValue:metadata.labelValue||``}}},getServiceNodeFromItem=(item,parentNode)=>{let serviceNode;return item.children.length&&item.status===`loading`&&(serviceNode=getServiceNode(parentNode.id,parentNode.metadata.displayValue,`loading`)),item.status===`error`&&(serviceNode=getServiceNode(parentNode.id,parentNode.metadata.displayValue,`reload`)),item.status===`success`&&item.marker&&(serviceNode=getServiceNode(parentNode.id,parentNode.metadata.displayValue,`loadMore`)),serviceNode},DynamicLoadingTree=forwardRef(({ariaLabel,onSelect,selectedNodes,defaultFetcher,levels,selectableLevels,multiselect,open,searchInput,noResultMessage,loadingAriaLabel},forwardedRef)=>{let[treeState,dispatch]=useReducer(treeReducer,initialTreeState),[treeData,setTreeData]=useState({nodes:[],selectedIds:[]}),[isLoading,setIsLoading]=useState(!1),[isTreeError,setIsTreeError]=useState(!1),maxSelectableLevel=useMemo(()=>Math.max(...selectableLevels),[selectableLevels]),getTreeDataFromState=useCallback((rawState=treeState)=>{let serviceNodes=[];return[...Object.values(rawState).map(item=>{let node=getTreeNodeFromItem(item),serviceNode=getServiceNodeFromItem(item,node);return serviceNode&&(serviceNodes.push(serviceNode),node.children.push(serviceNode.id)),node}),...serviceNodes]},[treeState]),getTreeNodeName=useCallback(option=>{let parentOption=option.ancestors?.find(a=>a.level===option.level-1),levelDesc=levels.find(l=>l.level===option.level);return option.level===1||searchInput===``?option.displayValue:{labelName:levelDesc.displayName,labelValue:parentOption.displayName}},[levels,searchInput]),mapFetcherOptionToStateItem=useCallback(option=>({id:option.value,name:option.displayValue,parent:RootTreeNode.id,isBranch:option.level!==maxSelectableLevel,children:[],metadata:{variant:`content`,displayValue:option.displayValue,level:option.level,selectable:option.selectable,marker:option.marker,ancestors:option.ancestors}}),[maxSelectableLevel]),dispatchTreeLoadingSuccess=useCallback((resNodes,resMarker)=>{dispatch({type:ActionTypes.RESET,payload:{id:RootTreeNode.id,items:[]}}),dispatch({type:ActionTypes.LOAD_SUCCESS,payload:{id:RootTreeNode.id,items:resNodes,marker:resMarker}}),setIsLoading(!1)},[dispatch,setIsLoading]),dispatchTreeLoadingError=useCallback(()=>{dispatch({type:ActionTypes.LOAD_ERROR,payload:{id:RootTreeNode.id}}),setIsLoading(!1),setIsTreeError(!0)},[dispatch,setIsLoading,setIsTreeError]),filterValidSelectedIds=useCallback((nodes,selectedIds)=>{let allNodeIds=new Set(nodes.map(node=>node.id));return selectedIds.filter(id=>id!=null&&allNodeIds.has(id))},[]);useEffect(()=>{let nodes=getTreeDataFromState(treeState);setTreeData({nodes,selectedIds:filterValidSelectedIds(nodes,selectedNodes)})},[filterValidSelectedIds,getTreeDataFromState,selectedNodes,treeState,isTreeError]),useEffect(()=>{if(!open)return;let{signal}=new AbortController;setIsLoading(!0),setIsTreeError(!1),searchInput?(dispatch({type:ActionTypes.RESET,payload:{id:RootTreeNode.id,items:[]}}),defaultFetcher({signal,marker:null,searchInput,level:null,onlySelectableOptions:!1,ancestorId:null}).then(res=>{dispatchTreeLoadingSuccess(res.options.filter(option=>option.selectable).map(option=>{let{labelName,labelValue}=getTreeNodeName(option);return{id:option.value,name:option.displayValue,parent:RootTreeNode.id,isBranch:option.level<maxSelectableLevel,children:[],metadata:{variant:option.level===1?`content`:`labeled`,displayValue:option.displayValue,level:option.level,selectable:option.selectable,ancestors:option.ancestors,labelName,labelValue}}}),res.marker)}).catch(()=>{dispatchTreeLoadingError()})):(dispatch({type:ActionTypes.RESET,payload:{id:RootTreeNode.id,items:[]}}),dispatch({type:ActionTypes.LOAD_DATA,payload:{id:RootTreeNode.id}}),defaultFetcher({signal,marker:null,searchInput:``,level:1,onlySelectableOptions:!1,ancestorId:null}).then(res=>{dispatchTreeLoadingSuccess(res.options.map(mapFetcherOptionToStateItem),res.marker)}).catch(()=>{dispatchTreeLoadingError()}))},[defaultFetcher,mapFetcherOptionToStateItem,open,searchInput,levels,maxSelectableLevel,getTreeNodeName,dispatchTreeLoadingSuccess,dispatchTreeLoadingError]);let onExpand=useCallback(item=>{let{isExpanded,isDisabled,element}=item;if(!isExpanded||isDisabled){dispatch({type:ActionTypes.RESET,payload:{id:element.id,items:[]}});return}let{level}=element.metadata,{id,marker}=element,{signal}=new AbortController;dispatch({type:ActionTypes.LOAD_DATA,payload:{id}}),defaultFetcher({signal,marker,searchInput:``,level:level+1,ancestorId:id,onlySelectableOptions:!1}).then(res=>{let resNodes=res.options.map(option=>(element.children.push(option.value),mapFetcherOptionToStateItem(option)));dispatch({type:ActionTypes.LOAD_SUCCESS,payload:{id,items:resNodes,marker:res.marker}})}).catch(()=>{dispatch({type:ActionTypes.LOAD_ERROR,payload:{id}})})},[defaultFetcher,mapFetcherOptionToStateItem]),handleNodeReload=useCallback(nodeId=>{isTreeError&&(setIsTreeError(!1),setIsLoading(!0));let element=treeState[nodeId],{level}=element.metadata,{id,marker}=element,{signal}=new AbortController;dispatch({type:ActionTypes.LOAD_DATA,payload:{id}}),defaultFetcher({signal,marker,searchInput,level:searchInput===``?level+1:null,ancestorId:id===RootTreeNode.id?null:id.toString(),onlySelectableOptions:!1}).then(res=>{let resNodes=res.options.map(mapFetcherOptionToStateItem);dispatch({type:ActionTypes.LOAD_SUCCESS,payload:{id,items:resNodes,marker:res.marker}}),setIsLoading(!1)}).catch(()=>{dispatch({type:ActionTypes.LOAD_ERROR,payload:{id,marker}})})},[defaultFetcher,isTreeError,mapFetcherOptionToStateItem,searchInput,treeState]),{isTreeEmpty,focusedId}=useMemo(()=>{let rootChildren=treeData.nodes.find(({id})=>id===RootTreeNode.id)?.children??[],firstRootChildId=rootChildren[0],shouldForceFocusFirstChild=!multiselect&&treeData.selectedIds.length===0&&firstRootChildId!=null;return{isTreeEmpty:treeData.nodes.length===0||rootChildren.length===0,focusedId:shouldForceFocusFirstChild?firstRootChildId:void 0}},[multiselect,treeData.nodes,treeData.selectedIds.length]),handleNodeSelection=useCallback(nodeSelectProps=>{let{metadata}=nodeSelectProps.element;hasValidLevel(metadata)&&selectableLevels.includes(metadata.level)?onSelect(nodeSelectProps):(nodeSelectProps.isSelected=!1,nodeSelectProps.treeState.selectedIds.delete(nodeSelectProps.element.id))},[selectableLevels,onSelect]);return isTreeError?jsx(InlineError,{onReload:()=>{handleNodeReload(`root`)}}):jsxs(`div`,{children:[isLoading&&jsx(`div`,{className:combobox_with_api_tree_module_default.noResultOption,children:jsx(LoadingIndicator,{"aria-label":loadingAriaLabel,className:combobox_with_api_tree_module_default.loadingIndicator})}),isTreeEmpty&&!isLoading?jsx(`div`,{className:combobox_with_api_tree_module_default.noResultOption,children:noResultMessage}):!isLoading&&jsx(Tree,{ref:forwardedRef,"aria-label":ariaLabel,data:treeData.nodes,focusedId,multiSelect:multiselect,onExpand,onLoadData:handleNodeReload,onNodeSelect:handleNodeSelection,selectedIds:treeData.selectedIds,size:`large`,togglableSelect:!0})]})});export{combobox_with_api_tree_module_default as n,DynamicLoadingTree as t};
1
+ import{RootTreeNode,getServiceNode,hasValidLevel}from"../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";import{n as treeReducer,r as ActionTypes,t as initialTreeState}from"./treeReducer.js";import{LoadingIndicator}from"@box/blueprint-web";import{forwardRef,useCallback,useEffect,useMemo,useReducer,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{InlineError,Tree}from"@box/tree";import '../styles/dynamic-loading-tree.css';var combobox_with_api_tree_module_default={container:`_container_o0ai6_27`,disabled:`_disabled_o0ai6_50`,label:`_label_o0ai6_53`,hiddenLabel:`_hiddenLabel_o0ai6_77`,comboboxContainer:`_comboboxContainer_o0ai6_80`,withComboboxButtons:`_withComboboxButtons_o0ai6_96`,textInputWrapper:`_textInputWrapper_o0ai6_118`,textInput:`_textInput_o0ai6_118`,comboboxButtons:`_comboboxButtons_o0ai6_152`,withChips:`_withChips_o0ai6_159`,popover:`_popover_o0ai6_167`,loadingIndicator:`_loadingIndicator_o0ai6_205`,noResultOption:`_noResultOption_o0ai6_208`},getTreeNodeFromItem=item=>{let children=[...item.children],{metadata}=item;return{...item,children,metadata:{...item.metadata,variant:metadata.variant,isLoading:item.status===`loading`&&!item.children.length,labelName:metadata.labelName||``,labelValue:metadata.labelValue||``}}},getServiceNodeFromItem=(item,parentNode)=>{let serviceNode;return item.children.length&&item.status===`loading`&&(serviceNode=getServiceNode(parentNode.id,parentNode.metadata.displayValue,`loading`)),item.status===`error`&&(serviceNode=getServiceNode(parentNode.id,parentNode.metadata.displayValue,`reload`)),item.status===`success`&&item.marker&&(serviceNode=getServiceNode(parentNode.id,parentNode.metadata.displayValue,`loadMore`)),serviceNode},DynamicLoadingTree=forwardRef(({ariaLabel,onSelect,selectedNodes,defaultFetcher,levels,selectableLevels,multiselect,open,searchInput,noResultMessage,loadingAriaLabel},forwardedRef)=>{let[treeState,dispatch]=useReducer(treeReducer,initialTreeState),[treeData,setTreeData]=useState({nodes:[],selectedIds:[]}),[isLoading,setIsLoading]=useState(!1),[isTreeError,setIsTreeError]=useState(!1),maxSelectableLevel=useMemo(()=>Math.max(...selectableLevels),[selectableLevels]),getTreeDataFromState=useCallback((rawState=treeState)=>{let serviceNodes=[];return[...Object.values(rawState).map(item=>{let node=getTreeNodeFromItem(item),serviceNode=getServiceNodeFromItem(item,node);return serviceNode&&(serviceNodes.push(serviceNode),node.children.push(serviceNode.id)),node}),...serviceNodes]},[treeState]),getTreeNodeName=useCallback(option=>{let parentOption=option.ancestors?.find(a=>a.level===option.level-1),levelDesc=levels.find(l=>l.level===option.level);return option.level===1||searchInput===``?option.displayValue:{labelName:levelDesc.displayName,labelValue:parentOption.displayName}},[levels,searchInput]),mapFetcherOptionToStateItem=useCallback(option=>({id:option.value,name:option.displayValue,parent:RootTreeNode.id,isBranch:option.level!==maxSelectableLevel,children:[],metadata:{variant:`content`,displayValue:option.displayValue,level:option.level,selectable:option.selectable,marker:option.marker,ancestors:option.ancestors}}),[maxSelectableLevel]),dispatchTreeLoadingSuccess=useCallback((resNodes,resMarker)=>{dispatch({type:ActionTypes.RESET,payload:{id:RootTreeNode.id,items:[]}}),dispatch({type:ActionTypes.LOAD_SUCCESS,payload:{id:RootTreeNode.id,items:resNodes,marker:resMarker}}),setIsLoading(!1)},[dispatch,setIsLoading]),dispatchTreeLoadingError=useCallback(()=>{dispatch({type:ActionTypes.LOAD_ERROR,payload:{id:RootTreeNode.id}}),setIsLoading(!1),setIsTreeError(!0)},[dispatch,setIsLoading,setIsTreeError]),filterValidSelectedIds=useCallback((nodes,selectedIds)=>{let allNodeIds=new Set(nodes.map(node=>node.id));return selectedIds.filter(id=>id!=null&&allNodeIds.has(id))},[]);useEffect(()=>{let nodes=getTreeDataFromState(treeState);setTreeData({nodes,selectedIds:filterValidSelectedIds(nodes,selectedNodes)})},[filterValidSelectedIds,getTreeDataFromState,selectedNodes,treeState,isTreeError]),useEffect(()=>{if(!open)return;let{signal}=new AbortController;setIsLoading(!0),setIsTreeError(!1),searchInput?(dispatch({type:ActionTypes.RESET,payload:{id:RootTreeNode.id,items:[]}}),defaultFetcher({signal,marker:null,searchInput,level:null,onlySelectableOptions:!1,ancestorId:null}).then(res=>{dispatchTreeLoadingSuccess(res.options.filter(option=>option.selectable).map(option=>{let{labelName,labelValue}=getTreeNodeName(option);return{id:option.value,name:option.displayValue,parent:RootTreeNode.id,isBranch:option.level<maxSelectableLevel,children:[],metadata:{variant:option.level===1?`content`:`labeled`,displayValue:option.displayValue,level:option.level,selectable:option.selectable,ancestors:option.ancestors,labelName,labelValue}}}),res.marker)}).catch(()=>{dispatchTreeLoadingError()})):(dispatch({type:ActionTypes.RESET,payload:{id:RootTreeNode.id,items:[]}}),dispatch({type:ActionTypes.LOAD_DATA,payload:{id:RootTreeNode.id}}),defaultFetcher({signal,marker:null,searchInput:``,level:1,onlySelectableOptions:!1,ancestorId:null}).then(res=>{dispatchTreeLoadingSuccess(res.options.map(mapFetcherOptionToStateItem),res.marker)}).catch(()=>{dispatchTreeLoadingError()}))},[defaultFetcher,mapFetcherOptionToStateItem,open,searchInput,levels,maxSelectableLevel,getTreeNodeName,dispatchTreeLoadingSuccess,dispatchTreeLoadingError]);let onExpand=useCallback(item=>{let{isExpanded,isDisabled,element}=item;if(!isExpanded||isDisabled){dispatch({type:ActionTypes.RESET,payload:{id:element.id,items:[]}});return}let{level}=element.metadata,{id,marker}=element,{signal}=new AbortController;dispatch({type:ActionTypes.LOAD_DATA,payload:{id}}),defaultFetcher({signal,marker,searchInput:``,level:level+1,ancestorId:id,onlySelectableOptions:!1}).then(res=>{let resNodes=res.options.map(option=>(element.children.push(option.value),mapFetcherOptionToStateItem(option)));dispatch({type:ActionTypes.LOAD_SUCCESS,payload:{id,items:resNodes,marker:res.marker}})}).catch(()=>{dispatch({type:ActionTypes.LOAD_ERROR,payload:{id}})})},[defaultFetcher,mapFetcherOptionToStateItem]),handleNodeReload=useCallback(nodeId=>{isTreeError&&(setIsTreeError(!1),setIsLoading(!0));let element=treeState[nodeId],{level}=element.metadata,{id,marker}=element,{signal}=new AbortController;dispatch({type:ActionTypes.LOAD_DATA,payload:{id}}),defaultFetcher({signal,marker,searchInput,level:searchInput===``?level+1:null,ancestorId:id===RootTreeNode.id?null:id.toString(),onlySelectableOptions:!1}).then(res=>{let resNodes=res.options.map(mapFetcherOptionToStateItem);dispatch({type:ActionTypes.LOAD_SUCCESS,payload:{id,items:resNodes,marker:res.marker}}),setIsLoading(!1)}).catch(()=>{dispatch({type:ActionTypes.LOAD_ERROR,payload:{id,marker}})})},[defaultFetcher,isTreeError,mapFetcherOptionToStateItem,searchInput,treeState]),{isTreeEmpty,focusedId}=useMemo(()=>{let rootChildren=treeData.nodes.find(({id})=>id===RootTreeNode.id)?.children??[],firstRootChildId=rootChildren[0],shouldForceFocusFirstChild=!multiselect&&treeData.selectedIds.length===0&&firstRootChildId!=null;return{isTreeEmpty:treeData.nodes.length===0||rootChildren.length===0,focusedId:shouldForceFocusFirstChild?firstRootChildId:void 0}},[multiselect,treeData.nodes,treeData.selectedIds.length]),handleNodeSelection=useCallback(nodeSelectProps=>{let{metadata}=nodeSelectProps.element;hasValidLevel(metadata)&&selectableLevels.includes(metadata.level)?onSelect(nodeSelectProps):(nodeSelectProps.isSelected=!1,nodeSelectProps.treeState.selectedIds.delete(nodeSelectProps.element.id))},[selectableLevels,onSelect]);return isTreeError?jsx(InlineError,{onReload:()=>{handleNodeReload(`root`)}}):jsxs(`div`,{children:[isLoading&&jsx(`div`,{className:combobox_with_api_tree_module_default.noResultOption,children:jsx(LoadingIndicator,{"aria-label":loadingAriaLabel,className:combobox_with_api_tree_module_default.loadingIndicator})}),isTreeEmpty&&!isLoading?jsx(`div`,{className:combobox_with_api_tree_module_default.noResultOption,children:noResultMessage}):!isLoading&&jsx(Tree,{ref:forwardedRef,"aria-label":ariaLabel,data:treeData.nodes,focusedId,multiSelect:multiselect,onExpand,onLoadData:handleNodeReload,onNodeSelect:handleNodeSelection,selectedIds:treeData.selectedIds,size:`large`,togglableSelect:!0})]})});export{combobox_with_api_tree_module_default as n,DynamicLoadingTree as t};
@@ -1 +1 @@
1
- ._disabled_9lkdk_27._disabled_9lkdk_27{opacity:unset}._highlightOptionText_9lkdk_31 [data-user-value]{font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._highlightOptionText_9lkdk_31 [data-user-value]{letter-spacing:0;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.25rem;text-decoration:none}._highlightOptionText_9lkdk_31 [data-autocomplete-value]{color:var(--text-text-on-light-secondary)}._highlightOptionText_9lkdk_31._selected_9lkdk_53,._highlightOptionText_9lkdk_31._selected_9lkdk_53 span{color:var(--text-text-on-light);font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._highlightOptionText_9lkdk_31._selected_9lkdk_53,:where(body.is-inter-font) ._highlightOptionText_9lkdk_31._selected_9lkdk_53 span{letter-spacing:0;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.25rem;text-decoration:none}._option_9lkdk_73:nth-last-child(1 of ._option_9lkdk_73){scroll-margin-block-end:var(--space-12)}._errorComboboxOption_9lkdk_77[role=option]{justify-content:center;align-items:center;display:flex}._errorComboboxOption_9lkdk_77[role=option] ._errorComboboxOptionText_9lkdk_82{gap:var(--space-1);align-items:center;display:flex}
1
+ ._disabled_zcru0_27._disabled_zcru0_27{opacity:unset}._highlightOptionText_zcru0_31 [data-user-value]{font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._highlightOptionText_zcru0_31 [data-user-value]{letter-spacing:.00625rem;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.375rem;text-decoration:none}._highlightOptionText_zcru0_31 [data-autocomplete-value]{color:var(--text-text-on-light-secondary)}._highlightOptionText_zcru0_31._selected_zcru0_53,._highlightOptionText_zcru0_31._selected_zcru0_53 span{color:var(--text-text-on-light);font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._highlightOptionText_zcru0_31._selected_zcru0_53,:where(body.is-inter-font) ._highlightOptionText_zcru0_31._selected_zcru0_53 span{letter-spacing:.00625rem;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.375rem;text-decoration:none}._option_zcru0_73:nth-last-child(1 of ._option_zcru0_73){scroll-margin-block-end:var(--space-12)}._errorComboboxOption_zcru0_77[role=option]{justify-content:center;align-items:center;display:flex}._errorComboboxOption_zcru0_77[role=option] ._errorComboboxOptionText_zcru0_82{gap:var(--space-1);align-items:center;display:flex}
@@ -1 +1 @@
1
- ._container_ajuss_27{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._container_ajuss_27{letter-spacing:0;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.25rem;text-decoration:none}._container_ajuss_27{flex-direction:column;display:flex}._container_ajuss_27._disabled_ajuss_50{opacity:.6}._container_ajuss_27 ._label_ajuss_53{font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._container_ajuss_27 ._label_ajuss_53{letter-spacing:0;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.25rem;text-decoration:none}._container_ajuss_27 ._label_ajuss_53{flex:0 0 fit-content;color:var(--text-text-on-light);overflow-wrap:break-word}._container_ajuss_27 ._label_ajuss_53:not(._hiddenLabel_ajuss_77){margin-block-end:var(--space-2)}._container_ajuss_27 ._comboboxContainer_ajuss_80{gap:var(--space-2);background-color:var(--surface-dropdown-surface);border-top:var(--blueprint-combobox-border-top-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-right:var(--blueprint-combobox-border-right-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-bottom:var(--blueprint-combobox-border-bottom-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-left:var(--blueprint-combobox-border-left-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-radius:var(--blueprint-combobox-input-radius,var(--radius-2));box-shadow:var(--innershadow-1);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-1));padding-inline:var(--space-3);flex-wrap:wrap;display:flex;position:relative;overflow-y:auto}._container_ajuss_27 ._comboboxContainer_ajuss_80._withComboboxButtons_ajuss_96{padding-inline-end:var(--space-10)}._container_ajuss_27 ._comboboxContainer_ajuss_80:not(:disabled):has(input:focus){background-color:var(--surface-dropdown-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_ajuss_27 ._comboboxContainer_ajuss_80:not(:disabled):has([aria-invalid=true]){background-color:var(--surface-dropdown-surface-error);border-top:var(--blueprint-combobox-border-error-top-width,var(--border-2)) solid var(--border-input-border-error);border-right:var(--blueprint-combobox-border-error-right-width,var(--border-2)) solid var(--border-input-border-error);border-bottom:var(--blueprint-combobox-border-error-bottom-width,var(--border-2)) solid var(--border-input-border-error);border-left:var(--blueprint-combobox-border-error-left-width,var(--border-2)) solid var(--border-input-border-error);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_ajuss_27 ._comboboxContainer_ajuss_80 ._textInputWrapper_ajuss_118{flex:content;gap:var(--space-2);align-items:center;display:flex}._container_ajuss_27 ._comboboxContainer_ajuss_80 ._textInputWrapper_ajuss_118 ._textInput_ajuss_118{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._container_ajuss_27 ._comboboxContainer_ajuss_80 ._textInputWrapper_ajuss_118 ._textInput_ajuss_118{letter-spacing:0;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.25rem;text-decoration:none}._container_ajuss_27 ._comboboxContainer_ajuss_80 ._textInputWrapper_ajuss_118 ._textInput_ajuss_118{width:100%;height:var(--space-5);color:var(--text-text-on-light);background-color:#0000;border:none;outline:none;padding:0}._container_ajuss_27 ._comboboxContainer_ajuss_80 ._textInputWrapper_ajuss_118 ._comboboxButtons_ajuss_152{top:var(--space-2);right:var(--space-2);align-items:center;display:flex;position:absolute}._container_ajuss_27 ._comboboxContainer_ajuss_80._withChips_ajuss_159{max-height:calc(2 * var(--space-2) + 3 * var(--space-6));padding-block:calc((40px - var(--space-7)) / 2 - var(--border-1))}._container_ajuss_27 ._comboboxContainer_ajuss_80._withChips_ajuss_159:not(:disabled):has(input:focus){padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._popover_ajuss_167{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._popover_ajuss_167{letter-spacing:0;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.25rem;text-decoration:none}._popover_ajuss_167{z-index:380;background-color:var(--surface-menu-surface);border:var(--border-1) solid var(--border-card-border);border-radius:var(--radius-3);max-height:300px;padding-block:var(--space-3);padding-inline:var(--space-3);box-shadow:var(--dropshadow-3);overflow:auto}._popover_ajuss_167 ul{padding-inline-start:0}._popover_ajuss_167 ._loadingIndicator_ajuss_205{position:unset}._popover_ajuss_167 ._noResultOption_ajuss_208{color:var(--text-text-on-light);text-align:center;-webkit-user-select:none;user-select:none}
1
+ ._container_o0ai6_27{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._container_o0ai6_27{letter-spacing:.00625rem;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.375rem;text-decoration:none}._container_o0ai6_27{flex-direction:column;display:flex}._container_o0ai6_27._disabled_o0ai6_50{opacity:.6}._container_o0ai6_27 ._label_o0ai6_53{font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._container_o0ai6_27 ._label_o0ai6_53{letter-spacing:.00625rem;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.375rem;text-decoration:none}._container_o0ai6_27 ._label_o0ai6_53{flex:0 0 fit-content;color:var(--text-text-on-light);overflow-wrap:break-word}._container_o0ai6_27 ._label_o0ai6_53:not(._hiddenLabel_o0ai6_77){margin-block-end:var(--space-2)}._container_o0ai6_27 ._comboboxContainer_o0ai6_80{gap:var(--space-2);background-color:var(--surface-dropdown-surface);border-top:var(--blueprint-combobox-border-top-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-right:var(--blueprint-combobox-border-right-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-bottom:var(--blueprint-combobox-border-bottom-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-left:var(--blueprint-combobox-border-left-width,var(--border-1)) solid var(--blueprint-combobox-border-color,var(--border-input-border));border-radius:var(--blueprint-combobox-input-radius,var(--radius-2));box-shadow:var(--innershadow-1);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-1));padding-inline:var(--space-3);flex-wrap:wrap;display:flex;position:relative;overflow-y:auto}._container_o0ai6_27 ._comboboxContainer_o0ai6_80._withComboboxButtons_o0ai6_96{padding-inline-end:var(--space-10)}._container_o0ai6_27 ._comboboxContainer_o0ai6_80:not(:disabled):has(input:focus){background-color:var(--surface-dropdown-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_o0ai6_27 ._comboboxContainer_o0ai6_80:not(:disabled):has([aria-invalid=true]){background-color:var(--surface-dropdown-surface-error);border-top:var(--blueprint-combobox-border-error-top-width,var(--border-2)) solid var(--border-input-border-error);border-right:var(--blueprint-combobox-border-error-right-width,var(--border-2)) solid var(--border-input-border-error);border-bottom:var(--blueprint-combobox-border-error-bottom-width,var(--border-2)) solid var(--border-input-border-error);border-left:var(--blueprint-combobox-border-error-left-width,var(--border-2)) solid var(--border-input-border-error);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_o0ai6_27 ._comboboxContainer_o0ai6_80 ._textInputWrapper_o0ai6_118{flex:content;gap:var(--space-2);align-items:center;display:flex}._container_o0ai6_27 ._comboboxContainer_o0ai6_80 ._textInputWrapper_o0ai6_118 ._textInput_o0ai6_118{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._container_o0ai6_27 ._comboboxContainer_o0ai6_80 ._textInputWrapper_o0ai6_118 ._textInput_o0ai6_118{letter-spacing:.00625rem;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.375rem;text-decoration:none}._container_o0ai6_27 ._comboboxContainer_o0ai6_80 ._textInputWrapper_o0ai6_118 ._textInput_o0ai6_118{width:100%;height:var(--space-5);color:var(--text-text-on-light);background-color:#0000;border:none;outline:none;padding:0}._container_o0ai6_27 ._comboboxContainer_o0ai6_80 ._textInputWrapper_o0ai6_118 ._comboboxButtons_o0ai6_152{top:var(--space-2);right:var(--space-2);align-items:center;display:flex;position:absolute}._container_o0ai6_27 ._comboboxContainer_o0ai6_80._withChips_o0ai6_159{max-height:calc(2 * var(--space-2) + 3 * var(--space-6));padding-block:calc((40px - var(--space-7)) / 2 - var(--border-1))}._container_o0ai6_27 ._comboboxContainer_o0ai6_80._withChips_o0ai6_159:not(:disabled):has(input:focus){padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._popover_o0ai6_167{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._popover_o0ai6_167{letter-spacing:.00625rem;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.375rem;text-decoration:none}._popover_o0ai6_167{z-index:380;background-color:var(--surface-menu-surface);border:var(--border-1) solid var(--border-card-border);border-radius:var(--radius-3);max-height:300px;padding-block:var(--space-3);padding-inline:var(--space-3);box-shadow:var(--dropshadow-3);overflow:auto}._popover_o0ai6_167 ul{padding-inline-start:0}._popover_o0ai6_167 ._loadingIndicator_o0ai6_205{position:unset}._popover_o0ai6_167 ._noResultOption_o0ai6_208{color:var(--text-text-on-light);text-align:center;-webkit-user-select:none;user-select:none}
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "@box/combobox-with-api",
3
- "version": "2.2.10",
3
+ "version": "2.2.12",
4
4
  "peerDependencies": {
5
5
  "@ariakit/react": "0.4.21",
6
- "@box/blueprint-web": "^16.18.2",
7
- "@box/blueprint-web-assets": "^5.7.1",
6
+ "@box/blueprint-web": "^16.18.4",
7
+ "@box/blueprint-web-assets": "^5.7.3",
8
8
  "lodash": "^4.17.15",
9
9
  "react": "^17.0.0 || ^18.0.0",
10
10
  "react-dom": "^17.0.0 || ^18.0.0",
11
11
  "react-intl": "^6.4.2"
12
12
  },
13
13
  "dependencies": {
14
- "@box/tree": "^2.2.10",
14
+ "@box/tree": "^2.2.12",
15
15
  "react-accessible-treeview": "2.9.0"
16
16
  },
17
17
  "devDependencies": {
18
- "@box/blueprint-web": "^16.18.2",
19
- "@box/blueprint-web-assets": "^5.7.1",
20
- "@box/storybook-utils": "^1.2.10",
18
+ "@box/blueprint-web": "^16.18.4",
19
+ "@box/blueprint-web-assets": "^5.7.3",
20
+ "@box/storybook-utils": "^1.2.12",
21
21
  "react": "^18.3.0",
22
22
  "react-dom": "^18.3.0"
23
23
  },