@box/combobox-with-api 2.1.35 → 2.1.37

package/dist/esm/lib/components/combobox-with-api-pagination/utils/use-controllable-state.js

@@ -1,35 +1 @@
-import * as e from "react";
-function t(t) {
-	let n = e.useRef(t);
-	return e.useEffect(() => {
-		n.current = t;
-	}), e.useMemo(() => ((...e) => n.current?.(...e)), []);
-}
-function n({ prop: n, defaultProp: i, onChange: a = () => {} }) {
-	let [o, s] = r({
-		defaultProp: i,
-		onChange: a
-	}), c = n !== void 0, l = c ? n : o, u = t(a);
-	return [l, e.useCallback((e) => {
-		if (c) {
-			let t = typeof e == "function" ? e(n) : e;
-			t !== n && u(t);
-		} else s(e);
-	}, [
-		c,
-		n,
-		s,
-		u
-	])];
-}
-function r({ defaultProp: n, onChange: r }) {
-	let i = e.useState(n), [a] = i, o = e.useRef(a), s = t(r);
-	return e.useEffect(() => {
-		o.current !== a && (s(a), o.current = a);
-	}, [
-		a,
-		o,
-		s
-	]), i;
-}
-export { n as useControllableState };
+import*as React from"react";function useCallbackRef(callback){let callbackRef=React.useRef(callback);return React.useEffect(()=>{callbackRef.current=callback}),React.useMemo(()=>((...args)=>callbackRef.current?.(...args)),[])}function useControllableState({prop,defaultProp,onChange=()=>{}}){let[uncontrolledProp,setUncontrolledProp]=useUncontrolledState({defaultProp,onChange}),isControlled=prop!==void 0,value=isControlled?prop:uncontrolledProp,handleChange=useCallbackRef(onChange);return[value,React.useCallback(nextValue=>{if(isControlled){let internalValue=typeof nextValue==`function`?nextValue(prop):nextValue;internalValue!==prop&&handleChange(internalValue)}else setUncontrolledProp(nextValue)},[isControlled,prop,setUncontrolledProp,handleChange])]}function useUncontrolledState({defaultProp,onChange}){let uncontrolledState=React.useState(defaultProp),[value]=uncontrolledState,prevValueRef=React.useRef(value),handleChange=useCallbackRef(onChange);return React.useEffect(()=>{prevValueRef.current!==value&&(handleChange(value),prevValueRef.current=value)},[value,prevValueRef,handleChange]),uncontrolledState}export{useControllableState};

package/dist/esm/lib/components/combobox-with-api-pagination/utils/use-intersection-observer.js

@@ -1,75 +1 @@
-import { useCallback as e, useRef as t, useState as n } from "react";
-var r = "0px", i = [0];
-function a() {
-	let e = /* @__PURE__ */ new Map();
-	function t({ root: t, rootMargin: n, threshold: r }) {
-		let i = e.get(t);
-		i || (i = /* @__PURE__ */ new Map(), e.set(t, i));
-		let a = JSON.stringify({
-			rootMargin: n,
-			threshold: r
-		}), o = i.get(a);
-		if (!o) {
-			let e = /* @__PURE__ */ new Map();
-			o = {
-				observer: new IntersectionObserver((t) => {
-					t.forEach((t) => {
-						e.get(t.target)?.(t);
-					});
-				}, {
-					root: t,
-					rootMargin: n,
-					threshold: r
-				}),
-				entryCallbacks: e
-			}, i.set(a, o);
-		}
-		return {
-			observe: (e, t) => {
-				o?.entryCallbacks.set(e, t), o?.observer.observe(e);
-			},
-			unobserve: (e) => {
-				o?.entryCallbacks.delete(e), o?.observer.unobserve(e);
-			}
-		};
-	}
-	return { getObserver: t };
-}
-var o = a();
-function s(a) {
-	let s = a?.rootMargin ?? r, c = a?.threshold ?? i, l = t(null), u = t(null), d = t(null), [f, p] = n(), m = e(() => {
-		let e = l.current;
-		if (!e) {
-			p(void 0);
-			return;
-		}
-		let t = o.getObserver({
-			root: u.current,
-			rootMargin: s,
-			threshold: c
-		});
-		t.observe(e, (e) => {
-			p(e);
-		}), d.current = t;
-	}, [s, c]), h = e(() => {
-		let e = d.current, t = l.current;
-		t && e?.unobserve(t), d.current = null;
-	}, []);
-	return [e((e) => {
-		h(), l.current = e, m();
-	}, [m, h]), {
-		entry: f,
-		rootRef: e((e) => {
-			h(), u.current = e, m();
-		}, [m, h])
-	}];
-}
-function c(e) {
-	let [t, r] = s(e), i = !!r.entry?.isIntersecting, [a, o] = n(i);
-	return i && !a && o(!0), [t, {
-		...r,
-		isVisible: i,
-		wasEverVisible: a
-	}];
-}
-export { a as createObserverCache, c as useTrackVisibility };
+import{useCallback,useRef,useState}from"react";var DEFAULT_ROOT_MARGIN=`0px`,DEFAULT_THRESHOLD=[0];function createObserverCache(){let cachesByRoot=new Map;function getObserver({root,rootMargin,threshold}){let cacheByRoot=cachesByRoot.get(root);cacheByRoot||(cacheByRoot=new Map,cachesByRoot.set(root,cacheByRoot));let cacheKey=JSON.stringify({rootMargin,threshold}),cachedObserver=cacheByRoot.get(cacheKey);if(!cachedObserver){let entryCallbacks=new Map;cachedObserver={observer:new IntersectionObserver(entries=>{entries.forEach(entry=>{entryCallbacks.get(entry.target)?.(entry)})},{root,rootMargin,threshold}),entryCallbacks},cacheByRoot.set(cacheKey,cachedObserver)}return{observe:(node,callback)=>{cachedObserver?.entryCallbacks.set(node,callback),cachedObserver?.observer.observe(node)},unobserve:node=>{cachedObserver?.entryCallbacks.delete(node),cachedObserver?.observer.unobserve(node)}}}return{getObserver}}var observerCache=createObserverCache();function useIntersectionObserver(args){let rootMargin=args?.rootMargin??DEFAULT_ROOT_MARGIN,threshold=args?.threshold??DEFAULT_THRESHOLD,nodeRef=useRef(null),rootRef=useRef(null),observerRef=useRef(null),[entry,setEntry]=useState(),observe=useCallback(()=>{let node=nodeRef.current;if(!node){setEntry(void 0);return}let observer=observerCache.getObserver({root:rootRef.current,rootMargin,threshold});observer.observe(node,observedEntry=>{setEntry(observedEntry)}),observerRef.current=observer},[rootMargin,threshold]),unobserve=useCallback(()=>{let currentObserver=observerRef.current,node=nodeRef.current;node&&currentObserver?.unobserve(node),observerRef.current=null},[]);return[useCallback(node=>{unobserve(),nodeRef.current=node,observe()},[observe,unobserve]),{entry,rootRef:useCallback(rootNode=>{unobserve(),rootRef.current=rootNode,observe()},[observe,unobserve])}]}function useTrackVisibility(args){let[ref,result]=useIntersectionObserver(args),isVisible=!!result.entry?.isIntersecting,[wasEverVisible,setWasEverVisible]=useState(isVisible);return isVisible&&!wasEverVisible&&setWasEverVisible(!0),[ref,{...result,isVisible,wasEverVisible}]}export{createObserverCache,useTrackVisibility};

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

@@ -1,134 +1 @@
-import e from "../combobox-with-api-pagination/messages.js";
-import { useControllableState as t } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
-import { n, t as r } from "../../../../chunks/dynamic-loading-tree.js";
-import { Combobox as i, ComboboxCancel as a, ComboboxItem as ee, ComboboxPopover as o, ComboboxProvider as s, PopoverAnchor as c, useComboboxStore as l } from "@ariakit/react";
-import { ChipsGroup as te, IconButton as ne, InputChip as re, useLabelable as ie } from "@box/blueprint-web";
-import { Search as u, XMark as d } from "@box/blueprint-web-assets/icons/Fill";
-import { IconIconOnLightSecondary as f, Size1 as p, Size6 as m } from "@box/blueprint-web-assets/tokens/tokens";
-import h from "clsx";
-import { forwardRef as g, useCallback as _, useId as v, useRef as y, useState as b } from "react";
-import { useIntl as ae } from "react-intl";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
-var oe = () => /* @__PURE__ */ x(u, {
-	color: f,
-	height: m,
-	role: "presentation",
-	style: {
-		padding: p,
-		boxSizing: "border-box"
-	},
-	width: m
-}), C = /*#__PURE__*/ g(function(u, f) {
-	let { className: p, closeOnSelection: m = !1, dataTargetId: g, defaultFetcher: C, defaultValue: se = [], disabled: w, hideLabel: T, initialOpen: E = !1, label: D, levels: O, loadingAriaLabel: k, multiselect: A = !1, noResultMessage: j, onValueChange: M, onOpenChange: N, placeholder: P, portalElement: F, selectableLevels: I, treeAriaLabel: L, value: R } = u, { formatMessage: z } = ae(), B = v(), [V, H] = b(E), [U, W] = t({
-		prop: R,
-		defaultProp: se,
-		onChange: M
-	}), [G, K] = b(""), q = y(null), [ce, J] = b(!1), le = _(() => J(!0), []), ue = _(() => J(!1), []), Y = y("");
-	ce || (Y.current = G.trimStart());
-	let X = l({
-		includesBaseElement: !0,
-		virtualFocus: !1,
-		value: G,
-		setValue: (e) => {
-			K(e);
-		},
-		open: V,
-		setOpen: (e) => {
-			H(e), N?.(e);
-		}
-	}), Z = U.length > 0, Q = U.length > 0, de = ie(D, B), $ = y(null);
-	return /* @__PURE__ */ S(s, {
-		store: X,
-		children: [/* @__PURE__ */ x(c, { children: /* @__PURE__ */ S("div", {
-			className: h(n.container, p, { [n.disabled]: w }),
-			children: [/* @__PURE__ */ x(de, {
-				className: h(n.label, { [n.hiddenLabel]: T }),
-				hideLabel: T
-			}), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ S("div", {
-				className: h(n.comboboxContainer, {
-					[n.withChips]: Q,
-					[n.withComboboxButtons]: Z
-				}),
-				children: [Q && /* @__PURE__ */ x(te, { children: U.map((e) => /* @__PURE__ */ x(re, {
-					label: e.displayValue,
-					onDelete: () => {
-						w || W(U.filter((t) => t.value !== e.value));
-					},
-					tooltip: e.displayValue
-				}, e.value)) }), /* @__PURE__ */ S("div", {
-					className: n.textInputWrapper,
-					children: [/* @__PURE__ */ x(i, {
-						ref: q,
-						"aria-haspopup": "tree",
-						className: n.textInput,
-						"data-target-id": g,
-						disabled: w,
-						id: B,
-						onCompositionEnd: ue,
-						onCompositionStart: le,
-						placeholder: P,
-						store: X
-					}), /* @__PURE__ */ x("div", {
-						className: n.comboboxButtons,
-						children: Z ? /* @__PURE__ */ x(a, {
-							disabled: w,
-							onClick: () => {
-								W([]);
-							},
-							render: (e) => /* @__PURE__ */ x(ne, {
-								...e,
-								"aria-label": "Clear selection",
-								icon: d,
-								size: "x-small"
-							}),
-							store: X
-						}) : /* @__PURE__ */ x(oe, {})
-					})]
-				})]
-			}) })]
-		}) }), /* @__PURE__ */ x(o, {
-			"aria-labelledby": B,
-			className: n.popover,
-			fitViewport: !0,
-			gutter: 8,
-			portal: !0,
-			portalElement: F,
-			sameWidth: !0,
-			children: /* @__PURE__ */ x(ee, {
-				onFocusVisible: (e) => {
-					($.current?.firstChild)?.focus();
-				},
-				onKeyDown: (e) => {
-					if (e.key === "ArrowUp") {
-						let e = $.current?.firstChild;
-						document.activeElement === e && (e.blur(), q.current?.focus());
-					}
-				},
-				children: /* @__PURE__ */ x(r, {
-					ref: $,
-					ariaLabel: L,
-					defaultFetcher: C,
-					levels: O,
-					loadingAriaLabel: k || z(e.loadingAriaLabel),
-					multiselect: A,
-					noResultMessage: j || z(e.noResults),
-					onSelect: (e) => {
-						let { metadata: t } = e.element, n = [];
-						e.isSelected ? (A && (n = U.filter((t) => t.value !== e.element.id)), n.push({
-							value: e.element.id,
-							displayValue: t.displayValue,
-							level: t.level,
-							selectable: t.selectable,
-							ancestors: t.ancestors
-						}), m && n.length > U.length && H(!1)) : n = U.filter((t) => t.value !== e.element.id), W(n), K("");
-					},
-					open: V,
-					searchInput: Y.current,
-					selectableLevels: I,
-					selectedNodes: U.map((e) => e.value)
-				})
-			})
-		})]
-	});
-});
-export { C as ComboboxWithApiTreeView };
+import messages from"../combobox-with-api-pagination/messages.js";import{useControllableState}from"../combobox-with-api-pagination/utils/use-controllable-state.js";import{n as combobox_with_api_tree_module_default,t as DynamicLoadingTree}from"../../../../chunks/dynamic-loading-tree.js";import{Combobox,ComboboxCancel,ComboboxItem,ComboboxPopover,ComboboxProvider,PopoverAnchor,useComboboxStore}from"@ariakit/react";import{ChipsGroup,IconButton,InputChip,useLabelable}from"@box/blueprint-web";import{Search,XMark}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,useId,useRef,useState}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var SearchIcon=()=>jsx(Search,{color:IconIconOnLightSecondary,height:Size6,role:`presentation`,style:{padding:Size1,boxSizing:`border-box`},width:Size6}),ComboboxWithApiTreeView=forwardRef(function(props,forwardedRef){let{className,closeOnSelection=!1,dataTargetId,defaultFetcher,defaultValue=[],disabled,hideLabel,initialOpen=!1,label,levels,loadingAriaLabel,multiselect=!1,noResultMessage,onValueChange,onOpenChange,placeholder,portalElement,selectableLevels,treeAriaLabel,value}=props,{formatMessage}=useIntl(),comboboxId=useId(),[isOpen,setIsOpen]=useState(initialOpen),[selectedNodes,setSelectedNodes]=useControllableState({prop:value,defaultProp:defaultValue,onChange:onValueChange}),[inputValue,setInputValue]=useState(``),comboboxRef=useRef(null),[isComposing,setIsComposing]=useState(!1),handleCompositionStart=useCallback(()=>setIsComposing(!0),[]),handleCompositionEnd=useCallback(()=>setIsComposing(!1),[]),lastCommittedSearchRef=useRef(``);isComposing||(lastCommittedSearchRef.current=inputValue.trimStart());let comboboxStore=useComboboxStore({includesBaseElement:!0,virtualFocus:!1,value:inputValue,setValue:newValue=>{setInputValue(newValue)},open:isOpen,setOpen:newIsOpen=>{setIsOpen(newIsOpen),onOpenChange?.(newIsOpen)}}),showComboboxCancelButton=selectedNodes.length>0,showChipsGroup=selectedNodes.length>0,Label=useLabelable(label,comboboxId),treeRef=useRef(null);return jsxs(ComboboxProvider,{store:comboboxStore,children:[jsx(PopoverAnchor,{children:jsxs(`div`,{className:clsx(combobox_with_api_tree_module_default.container,className,{[combobox_with_api_tree_module_default.disabled]:disabled}),children:[jsx(Label,{className:clsx(combobox_with_api_tree_module_default.label,{[combobox_with_api_tree_module_default.hiddenLabel]:hideLabel}),hideLabel}),jsx(`div`,{children:jsxs(`div`,{className:clsx(combobox_with_api_tree_module_default.comboboxContainer,{[combobox_with_api_tree_module_default.withChips]:showChipsGroup,[combobox_with_api_tree_module_default.withComboboxButtons]:showComboboxCancelButton}),children:[showChipsGroup&&jsx(ChipsGroup,{children:selectedNodes.map(selected=>jsx(InputChip,{label:selected.displayValue,onDelete:()=>{disabled||setSelectedNodes(selectedNodes.filter(n=>n.value!==selected.value))},tooltip:selected.displayValue},selected.value))}),jsxs(`div`,{className:combobox_with_api_tree_module_default.textInputWrapper,children:[jsx(Combobox,{ref:comboboxRef,"aria-haspopup":`tree`,className:combobox_with_api_tree_module_default.textInput,"data-target-id":dataTargetId,disabled,id:comboboxId,onCompositionEnd:handleCompositionEnd,onCompositionStart:handleCompositionStart,placeholder,store:comboboxStore}),jsx(`div`,{className:combobox_with_api_tree_module_default.comboboxButtons,children:showComboboxCancelButton?jsx(ComboboxCancel,{disabled,onClick:()=>{setSelectedNodes([])},render:cancelProps=>jsx(IconButton,{...cancelProps,"aria-label":`Clear selection`,icon:XMark,size:`x-small`}),store:comboboxStore}):jsx(SearchIcon,{})})]})]})})]})}),jsx(ComboboxPopover,{"aria-labelledby":comboboxId,className:combobox_with_api_tree_module_default.popover,fitViewport:!0,gutter:8,portal:!0,portalElement,sameWidth:!0,children:jsx(ComboboxItem,{onFocusVisible:e=>{(treeRef.current?.firstChild)?.focus()},onKeyDown:e=>{if(e.key===`ArrowUp`){let firstTreeItem=treeRef.current?.firstChild;document.activeElement===firstTreeItem&&(firstTreeItem.blur(),comboboxRef.current?.focus())}},children:jsx(DynamicLoadingTree,{ref:treeRef,ariaLabel:treeAriaLabel,defaultFetcher,levels,loadingAriaLabel:loadingAriaLabel||formatMessage(messages.loadingAriaLabel),multiselect,noResultMessage:noResultMessage||formatMessage(messages.noResults),onSelect:node=>{let{metadata}=node.element,newValue=[];node.isSelected?(multiselect&&(newValue=selectedNodes.filter(n=>n.value!==node.element.id)),newValue.push({value:node.element.id,displayValue:metadata.displayValue,level:metadata.level,selectable:metadata.selectable,ancestors:metadata.ancestors}),closeOnSelection&&newValue.length>selectedNodes.length&&setIsOpen(!1)):newValue=selectedNodes.filter(n=>n.value!==node.element.id),setSelectedNodes(newValue),setInputValue(``)},open:isOpen,searchInput:lastCommittedSearchRef.current,selectableLevels,selectedNodes:selectedNodes.map(n=>n.value)})})})]})});export{ComboboxWithApiTreeView};

package/dist/esm/lib/components/combobox-with-api-tree-view/dynamic-loading-tree.js

@@ -1,2 +1 @@
-import { t as e } from "../../../../chunks/dynamic-loading-tree.js";
-export { e as DynamicLoadingTree };
+import{t as DynamicLoadingTree}from"../../../../chunks/dynamic-loading-tree.js";export{DynamicLoadingTree};

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

@@ -1,3 +1 @@
-import { ComboboxWithApiTreeView as e } from "./combobox-with-api-tree-view.js";
-import { n as t, r as n, t as r } from "../../../../chunks/combobox-with-api-tree-view.js";
-export { e as ComboboxWithApiTreeView, n as apiResponse, r as findNode, t as mockTreeFetcher };
+import{ComboboxWithApiTreeView}from"./combobox-with-api-tree-view.js";import{n as mockTreeFetcher,r as apiResponse,t as findNode}from"../../../../chunks/combobox-with-api-tree-view.js";export{ComboboxWithApiTreeView,apiResponse,findNode,mockTreeFetcher};

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

@@ -1,18 +1 @@
-var e = (e, t, n) => ({
-	name: t,
-	id: `${e}_${n}`,
-	parent: e,
-	children: [],
-	metadata: { variant: n }
-}), t = (e) => e && typeof e.level == "number", n = {
-	name: "Root",
-	id: "root",
-	parent: null,
-	children: [],
-	metadata: {
-		variant: "content",
-		level: 0,
-		displayValue: "Root"
-	}
-};
-export { n as RootTreeNode, e as getServiceNode, t as hasValidLevel };
+var getServiceNode=(parentId,parentName,variant)=>({name:parentName,id:`${parentId}_${variant}`,parent:parentId,children:[],metadata:{variant}}),hasValidLevel=metadata=>metadata&&typeof metadata.level==`number`,RootTreeNode={name:`Root`,id:`root`,parent:null,children:[],metadata:{variant:`content`,level:0,displayValue:`Root`}};export{RootTreeNode,getServiceNode,hasValidLevel};

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

@@ -1,2 +1 @@
-import { n as e, t } from "../../../../chunks/treeReducer.js";
-export { t as initialTreeState, e as treeReducer };
+import{n as treeReducer,t as initialTreeState}from"../../../../chunks/treeReducer.js";export{initialTreeState,treeReducer};

package/package.json

@@ -1,23 +1,23 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "2.1.35",
+    "version": "2.1.37",
     "peerDependencies": {
         "@ariakit/react": "0.4.21",
-        "@box/blueprint-web": "^16.12.1",
-        "@box/blueprint-web-assets": "^5.5.8",
+        "@box/blueprint-web": "^16.13.1",
+        "@box/blueprint-web-assets": "^5.5.10",
         "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.1.35",
+        "@box/tree": "^2.1.37",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.12.1",
-        "@box/blueprint-web-assets": "^5.5.8",
-        "@box/storybook-utils": "^1.1.32",
+        "@box/blueprint-web": "^16.13.1",
+        "@box/blueprint-web-assets": "^5.5.10",
+        "@box/storybook-utils": "^1.1.34",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },