@box/user-selector 2.1.37 → 2.1.38

package/dist/chunks/buildOptionsWithOverlay.js

@@ -1,22 +1 @@
-var e = "__combobox_overlay_header__", t = "__combobox_overlay_separator__";
-function n(n, r, i) {
-	if (!n || n.length === 0) return n ?? void 0;
-	let a = [...n];
-	if (i >= 0 && i < a.length - 1) {
-		let e = {
-			name: "",
-			value: t
-		};
-		a = [
-			...a.slice(0, i + 1),
-			e,
-			...a.slice(i + 1)
-		];
-	}
-	return r && a.length > 0 && i >= 0 && (a = [{
-		name: "",
-		value: e,
-		label: r
-	}, ...a]), a;
-}
-export { e as n, t as r, n as t };
+var OVERLAY_HEADER_VALUE=`__combobox_overlay_header__`,OVERLAY_SEPARATOR_VALUE=`__combobox_overlay_separator__`;function buildOptionsWithOverlay(options,overlayTitle,overlayDividerIndex){if(!options||options.length===0)return options??void 0;let result=[...options];if(overlayDividerIndex>=0&&overlayDividerIndex<result.length-1){let dividerOption={name:``,value:OVERLAY_SEPARATOR_VALUE};result=[...result.slice(0,overlayDividerIndex+1),dividerOption,...result.slice(overlayDividerIndex+1)]}return overlayTitle&&result.length>0&&overlayDividerIndex>=0&&(result=[{name:``,value:OVERLAY_HEADER_VALUE,label:overlayTitle},...result]),result}export{OVERLAY_HEADER_VALUE as n,OVERLAY_SEPARATOR_VALUE as r,buildOptionsWithOverlay as t};

package/dist/chunks/user-selector-headless.module.js

@@ -1,14 +1 @@
-import '../styles/user-selector-headless.css';var e = {
-	userSelectorListItemBase: "_userSelectorListItemBase_17ynx_1",
-	userSelectorInviteRow: "_userSelectorInviteRow_17ynx_1",
-	popoverContainer: "_popoverContainer_17ynx_18",
-	popoverContent: "_popoverContent_17ynx_26",
-	userSelectorListItem: "_userSelectorListItem_17ynx_1",
-	listItemAvatar: "_listItemAvatar_17ynx_37",
-	userSelectorGhostStateItem: "_userSelectorGhostStateItem_17ynx_41",
-	titleGhost: "_titleGhost_17ynx_47",
-	userSelectorEmptyText: "_userSelectorEmptyText_17ynx_51",
-	userSelectorEmptyContainer: "_userSelectorEmptyContainer_17ynx_55",
-	userSelectorInviteButtonIcon: "_userSelectorInviteButtonIcon_17ynx_70"
-};
-export { e as t };
+import '../styles/user-selector-headless.css';var user_selector_headless_module_default={userSelectorListItemBase:`_userSelectorListItemBase_17ynx_1`,userSelectorInviteRow:`_userSelectorInviteRow_17ynx_1`,popoverContainer:`_popoverContainer_17ynx_18`,popoverContent:`_popoverContent_17ynx_26`,userSelectorListItem:`_userSelectorListItem_17ynx_1`,listItemAvatar:`_listItemAvatar_17ynx_37`,userSelectorGhostStateItem:`_userSelectorGhostStateItem_17ynx_41`,titleGhost:`_titleGhost_17ynx_47`,userSelectorEmptyText:`_userSelectorEmptyText_17ynx_51`,userSelectorEmptyContainer:`_userSelectorEmptyContainer_17ynx_55`,userSelectorInviteButtonIcon:`_userSelectorInviteButtonIcon_17ynx_70`};export{user_selector_headless_module_default as t};

package/dist/chunks/user-selector-list-item.js

@@ -1,84 +1 @@
-import e from "../esm/lib/messages.js";
-import { isUserContactType as t } from "../esm/lib/utils/isUserContactType.js";
-import n, { forwardRef as r } from "react";
-import i from "clsx";
-import { useIntl as a } from "react-intl";
-import { Combobox as o, Text as s, Tooltip as c } from "@box/blueprint-web";
-import { AvatarPlusBadge as l } from "@box/blueprint-web-assets/icons/Line";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import '../styles/user-selector-list-item.css';var f = {
-	userSelectorListItemBase: "_userSelectorListItemBase_1m2q6_1",
-	userSelectorListItem: "_userSelectorListItem_1m2q6_1",
-	listItemAvatar: "_listItemAvatar_1m2q6_18",
-	userInfo: "_userInfo_1m2q6_21",
-	title: "_title_1m2q6_28",
-	userName: "_userName_1m2q6_34",
-	userEmail: "_userEmail_1m2q6_35",
-	userSelectorListItemInviteIcon: "_userSelectorListItemInviteIcon_1m2q6_43"
-}, p = /*#__PURE__*/ r(({ renderAvatar: t, title: r, subtitle: o, onClick: p, className: m, id: h, selected: g, isCollaborator: _ = !0, ...v }, y) => {
-	let b = /*#__PURE__*/ n.cloneElement(t(), { className: i(f.listItemAvatar) }), { formatMessage: x } = a(), S = /* @__PURE__ */ d("div", {
-		ref: y,
-		"aria-selected": g,
-		className: i(f.userSelectorListItem, m),
-		id: h,
-		...p ? { onClick: p } : {},
-		...v,
-		children: [
-			b,
-			/* @__PURE__ */ d("div", {
-				className: i(f.userInfo),
-				children: [/* @__PURE__ */ u("div", {
-					className: i(f.title),
-					children: /* @__PURE__ */ u(s, {
-						as: "span",
-						className: i(f.userName),
-						variant: "bodyDefaultSemibold",
-						children: r
-					})
-				}), /* @__PURE__ */ u(s, {
-					as: "span",
-					className: i(f.userEmail),
-					color: "textOnLightSecondary",
-					variant: "caption",
-					children: o
-				})]
-			}),
-			!_ && /* @__PURE__ */ u(l, { className: f.userSelectorListItemInviteIcon })
-		]
-	});
-	return _ ? S : /* @__PURE__ */ u(c, {
-		content: x(e.inviteCollaboratorsTooltip),
-		side: "right",
-		children: S
-	});
-}), m = /*#__PURE__*/ r(({ renderAvatar: t, userContact: n, onClick: r, id: i, ...o }, s) => {
-	let c = a().formatMessage(e.userName, {
-		name: n.name,
-		isCurrentUser: !!n.isCurrentUser
-	});
-	return /* @__PURE__ */ u(p, {
-		ref: s,
-		id: i,
-		onClick: () => {
-			r?.(n, i);
-		},
-		renderAvatar: () => t(n),
-		subtitle: n.email,
-		title: c,
-		...o
-	});
-}), h = /*#__PURE__*/ r(function(e, n) {
-	let { className: r, userContact: i, renderAvatar: a, renderCustomOption: s, ...c } = e, l = t(i), d = l ? !0 : i.hideOnClick ?? !0;
-	return /* @__PURE__ */ u(o.Option, {
-		ref: n,
-		className: r,
-		hideOnClick: d,
-		value: i.value,
-		...c,
-		children: l ? /* @__PURE__ */ u(m, {
-			renderAvatar: a,
-			userContact: i
-		}) : s(i, () => a(i))
-	});
-});
-export { m as n, p as r, h as t };
+import messages from"../esm/lib/messages.js";import{isUserContactType}from"../esm/lib/utils/isUserContactType.js";import React,{forwardRef}from"react";import clsx from"clsx";import{useIntl}from"react-intl";import{Combobox,Text,Tooltip}from"@box/blueprint-web";import{AvatarPlusBadge}from"@box/blueprint-web-assets/icons/Line";import{jsx,jsxs}from"react/jsx-runtime";import '../styles/user-selector-list-item.css';var user_selector_list_item_module_default={userSelectorListItemBase:`_userSelectorListItemBase_1m2q6_1`,userSelectorListItem:`_userSelectorListItem_1m2q6_1`,listItemAvatar:`_listItemAvatar_1m2q6_18`,userInfo:`_userInfo_1m2q6_21`,title:`_title_1m2q6_28`,userName:`_userName_1m2q6_34`,userEmail:`_userEmail_1m2q6_35`,userSelectorListItemInviteIcon:`_userSelectorListItemInviteIcon_1m2q6_43`},UserSelectorListItemInfo=forwardRef(({renderAvatar,title,subtitle,onClick,className,id,selected,isCollaborator=!0,...rest},forwardedRef)=>{let avatar=React.cloneElement(renderAvatar(),{className:clsx(user_selector_list_item_module_default.listItemAvatar)}),{formatMessage}=useIntl(),content=jsxs(`div`,{ref:forwardedRef,"aria-selected":selected,className:clsx(user_selector_list_item_module_default.userSelectorListItem,className),id,...onClick?{onClick}:{},...rest,children:[avatar,jsxs(`div`,{className:clsx(user_selector_list_item_module_default.userInfo),children:[jsx(`div`,{className:clsx(user_selector_list_item_module_default.title),children:jsx(Text,{as:`span`,className:clsx(user_selector_list_item_module_default.userName),variant:`bodyDefaultSemibold`,children:title})}),jsx(Text,{as:`span`,className:clsx(user_selector_list_item_module_default.userEmail),color:`textOnLightSecondary`,variant:`caption`,children:subtitle})]}),!isCollaborator&&jsx(AvatarPlusBadge,{className:user_selector_list_item_module_default.userSelectorListItemInviteIcon})]});return isCollaborator?content:jsx(Tooltip,{content:formatMessage(messages.inviteCollaboratorsTooltip),side:`right`,children:content})}),UserSelectorListItem=forwardRef(({renderAvatar,userContact,onClick,id,...rest},forwardedRef)=>{let usernameText=useIntl().formatMessage(messages.userName,{name:userContact.name,isCurrentUser:!!userContact.isCurrentUser});return jsx(UserSelectorListItemInfo,{ref:forwardedRef,id,onClick:()=>{onClick?.(userContact,id)},renderAvatar:()=>renderAvatar(userContact),subtitle:userContact.email,title:usernameText,...rest})}),UserSelectorComboboxOption=forwardRef(function(props,forwardedRef){let{className,userContact,renderAvatar,renderCustomOption,...optionProps}=props,isUserOption=isUserContactType(userContact),hideOnClick=isUserOption?!0:userContact.hideOnClick??!0;return jsx(Combobox.Option,{ref:forwardedRef,className,hideOnClick,value:userContact.value,...optionProps,children:isUserOption?jsx(UserSelectorListItem,{renderAvatar,userContact}):renderCustomOption(userContact,()=>renderAvatar(userContact))})});export{UserSelectorListItem as n,UserSelectorListItemInfo as r,UserSelectorComboboxOption as t};

package/dist/chunks/user-selector.js

@@ -1,89 +1 @@
-import { t as e } from "./buildOptionsWithOverlay.js";
-import t from "../esm/lib/messages.js";
-import { t as n } from "./user-selector-list-item.js";
-import { isUserContactType as r } from "../esm/lib/utils/isUserContactType.js";
-import { defaultRenderCustomOption as i } from "../esm/lib/utils/defaultRenderCustomOption.js";
-import { getInitials as a } from "../esm/lib/utils/getInitials.js";
-import { useCallback as o } from "react";
-import s from "clsx";
-import { useIntl as c } from "react-intl";
-import { Avatar as l, Combobox as u, Divider as d, IconBadge as f, Text as p } from "@box/blueprint-web";
-import { ComboboxWithApi as m } from "@box/combobox-with-api";
-import { jsx as h } from "react/jsx-runtime";
-import '../styles/user-selector.css';var g = {
-	overlayHeader: "_overlayHeader_u0715_1",
-	overlaySeparatorOption: "_overlaySeparatorOption_u0715_8",
-	textArea: "_textArea_u0715_15"
-}, _ = (_) => {
-	let { fetchedAvatarUrls: v, fetchUsers: y, onSelectedUsersChange: b, selectedUsers: x, variant: S, className: C, defaultOptions: w, overlayDividerIndex: T, overlayTitle: E, renderCustomOption: D = i, ...O } = _, k = c(), A = (e) => {
-		if (!(e.value === "__combobox_overlay_header__" || e.value === "__combobox_overlay_separator__")) {
-			if (r(e)) {
-				let { name: n, isExternalUser: r, id: i } = e, o = /* @__PURE__ */ h(l, {
-					alt: k.formatMessage(t.userAvatar),
-					colorIndex: i,
-					src: v[i],
-					text: a(n)
-				});
-				return r ? /* @__PURE__ */ h(f, {
-					offset: {
-						right: -4,
-						bottom: -2
-					},
-					size: "medium",
-					variant: "collaborator-external",
-					children: o
-				}) : o;
-			}
-			return /* @__PURE__ */ h(l, { ...e.avatar });
-		}
-	}, j = (e) => {
-		if (!r(e)) return e.chipVariant;
-	}, M = o(async (t) => {
-		let n = await y(t);
-		if (!E || T == null || T < 0) return n;
-		let r = new Set(x.map((e) => e.value)), i = n.filter((e) => !r.has(e.value)), a = n.slice(0, T + 1).filter((e) => !r.has(e.value)).length;
-		return e(i, E, a > 0 ? a - 1 : -1);
-	}, [
-		y,
-		E,
-		T,
-		x
-	]);
-	return /* @__PURE__ */ h(m, {
-		as: "input",
-		className: s(C, S === "textarea" && g.textArea),
-		defaultOptions: w,
-		displayAvatar: A,
-		displayChipVariant: j,
-		displayValue: (e) => e.name,
-		fetcher: M,
-		freeInput: !1,
-		loadingAriaLabel: k.formatMessage(t.loading),
-		multiselect: !0,
-		noResultMessage: k.formatMessage(t.noResults),
-		onValueChange: b,
-		renderOption: (e) => e.value === "__combobox_overlay_header__" && "label" in e ? /* @__PURE__ */ h(u.Option, {
-			className: g.overlayHeader,
-			disabled: !0,
-			value: e.value,
-			children: /* @__PURE__ */ h(p, {
-				as: "span",
-				variant: "bodySmallSemibold",
-				color: "textOnLightSecondary",
-				children: e.label
-			})
-		}) : e.value === "__combobox_overlay_separator__" ? /* @__PURE__ */ h(u.Option, {
-			className: g.overlaySeparatorOption,
-			disabled: !0,
-			value: e.value,
-			children: /* @__PURE__ */ h(d, { "aria-hidden": !0 })
-		}) : /* @__PURE__ */ h(n, {
-			renderAvatar: A,
-			renderCustomOption: D,
-			userContact: e
-		}),
-		value: x,
-		...O
-	});
-};
-export { _ as t };
+import{t as buildOptionsWithOverlay}from"./buildOptionsWithOverlay.js";import messages from"../esm/lib/messages.js";import{t as UserSelectorComboboxOption}from"./user-selector-list-item.js";import{isUserContactType}from"../esm/lib/utils/isUserContactType.js";import{defaultRenderCustomOption}from"../esm/lib/utils/defaultRenderCustomOption.js";import{getInitials}from"../esm/lib/utils/getInitials.js";import{useCallback}from"react";import clsx from"clsx";import{useIntl}from"react-intl";import{Avatar,Combobox,Divider,IconBadge,Text}from"@box/blueprint-web";import{ComboboxWithApi}from"@box/combobox-with-api";import{jsx}from"react/jsx-runtime";import '../styles/user-selector.css';var user_selector_module_default={overlayHeader:`_overlayHeader_u0715_1`,overlaySeparatorOption:`_overlaySeparatorOption_u0715_8`,textArea:`_textArea_u0715_15`},UserSelector=props=>{let{fetchedAvatarUrls,fetchUsers,onSelectedUsersChange,selectedUsers,variant,className,defaultOptions,overlayDividerIndex,overlayTitle,renderCustomOption=defaultRenderCustomOption,...rest}=props,intl=useIntl(),renderAvatar=option=>{if(!(option.value===`__combobox_overlay_header__`||option.value===`__combobox_overlay_separator__`)){if(isUserContactType(option)){let{name,isExternalUser,id}=option,avatar=jsx(Avatar,{alt:intl.formatMessage(messages.userAvatar),colorIndex:id,src:fetchedAvatarUrls[id],text:getInitials(name)});return isExternalUser?jsx(IconBadge,{offset:{right:-4,bottom:-2},size:`medium`,variant:`collaborator-external`,children:avatar}):avatar}return jsx(Avatar,{...option.avatar})}},displayChipVariant=option=>{if(!isUserContactType(option))return option.chipVariant},fetcherWithOverlay=useCallback(async inputValue=>{let options=await fetchUsers(inputValue);if(!overlayTitle||overlayDividerIndex==null||overlayDividerIndex<0)return options;let selectedValues=new Set(selectedUsers.map(s=>s.value)),visibleOptions=options.filter(opt=>!selectedValues.has(opt.value)),beforeCount=options.slice(0,overlayDividerIndex+1).filter(opt=>!selectedValues.has(opt.value)).length;return buildOptionsWithOverlay(visibleOptions,overlayTitle,beforeCount>0?beforeCount-1:-1)},[fetchUsers,overlayTitle,overlayDividerIndex,selectedUsers]);return jsx(ComboboxWithApi,{as:`input`,className:clsx(className,variant===`textarea`&&user_selector_module_default.textArea),defaultOptions,displayAvatar:renderAvatar,displayChipVariant,displayValue:option=>option.name,fetcher:fetcherWithOverlay,freeInput:!1,loadingAriaLabel:intl.formatMessage(messages.loading),multiselect:!0,noResultMessage:intl.formatMessage(messages.noResults),onValueChange:onSelectedUsersChange,renderOption:option=>option.value===`__combobox_overlay_header__`&&`label`in option?jsx(Combobox.Option,{className:user_selector_module_default.overlayHeader,disabled:!0,value:option.value,children:jsx(Text,{as:`span`,variant:`bodySmallSemibold`,color:`textOnLightSecondary`,children:option.label})}):option.value===`__combobox_overlay_separator__`?jsx(Combobox.Option,{className:user_selector_module_default.overlaySeparatorOption,disabled:!0,value:option.value,children:jsx(Divider,{"aria-hidden":!0})}):jsx(UserSelectorComboboxOption,{renderAvatar,renderCustomOption,userContact:option}),value:selectedUsers,...rest})};export{UserSelector as t};

package/dist/esm/index.js

@@ -1,4 +1 @@
-import { n as e, r as t } from "../chunks/buildOptionsWithOverlay.js";
-import { UserSelectorContainer as n } from "./lib/user-selector-container.js";
-import { UserSelectorHeadless as r } from "./lib/user-selector-headless/user-selector-headless.js";
-export { e as OVERLAY_HEADER_VALUE, t as OVERLAY_SEPARATOR_VALUE, n as UserSelectorContainer, r as UserSelectorHeadless };
+import{n as OVERLAY_HEADER_VALUE,r as OVERLAY_SEPARATOR_VALUE}from"../chunks/buildOptionsWithOverlay.js";import{UserSelectorContainer}from"./lib/user-selector-container.js";import{UserSelectorHeadless}from"./lib/user-selector-headless/user-selector-headless.js";export{OVERLAY_HEADER_VALUE,OVERLAY_SEPARATOR_VALUE,UserSelectorContainer,UserSelectorHeadless};

package/dist/esm/lib/messages.js

@@ -1,44 +1 @@
-import { defineMessages as e } from "react-intl";
-var t = e({
-	loading: {
-		id: "groupSharedFeatures.userSelector.loading",
-		defaultMessage: "Loading"
-	},
-	noResults: {
-		id: "groupSharedFeatures.userSelector.noResults",
-		defaultMessage: "No results"
-	},
-	tryAgain: {
-		id: "groupSharedFeatures.userSelector.tryAgain",
-		defaultMessage: "Try again"
-	},
-	userAvatar: {
-		id: "groupSharedFeatures.userSelector.userAvatar",
-		defaultMessage: "User avatar"
-	},
-	userName: {
-		id: "groupSharedFeatures.userSelector.userName",
-		defaultMessage: "{name} {isCurrentUser, select, true { (me)} other {}}"
-	},
-	errorMessage: {
-		id: "groupSharedFeatures.userSelector.errorMessage",
-		defaultMessage: "We were unable to load users"
-	},
-	errorMessageDescription: {
-		id: "groupSharedFeatures.userSelector.errorMessageDescription",
-		defaultMessage: "Please try again later"
-	},
-	emptyMessage: {
-		id: "groupSharedFeatures.userSelector.emptyMessage",
-		defaultMessage: "NO COLLABORATORS FOUND"
-	},
-	inviteCollaborators: {
-		id: "groupSharedFeatures.userSelector.inviteCollaborators",
-		defaultMessage: "Invite Collaborators"
-	},
-	inviteCollaboratorsTooltip: {
-		id: "groupSharedFeatures.userSelector.inviteCollaboratorsTooltip",
-		defaultMessage: "This person doesn't have access and won't be notified unless invited."
-	}
-});
-export { t as default };
+import{defineMessages}from"react-intl";var messages=defineMessages({loading:{id:`groupSharedFeatures.userSelector.loading`,defaultMessage:`Loading`},noResults:{id:`groupSharedFeatures.userSelector.noResults`,defaultMessage:`No results`},tryAgain:{id:`groupSharedFeatures.userSelector.tryAgain`,defaultMessage:`Try again`},userAvatar:{id:`groupSharedFeatures.userSelector.userAvatar`,defaultMessage:`User avatar`},userName:{id:`groupSharedFeatures.userSelector.userName`,defaultMessage:`{name} {isCurrentUser, select, true { (me)} other {}}`},errorMessage:{id:`groupSharedFeatures.userSelector.errorMessage`,defaultMessage:`We were unable to load users`},errorMessageDescription:{id:`groupSharedFeatures.userSelector.errorMessageDescription`,defaultMessage:`Please try again later`},emptyMessage:{id:`groupSharedFeatures.userSelector.emptyMessage`,defaultMessage:`NO COLLABORATORS FOUND`},inviteCollaborators:{id:`groupSharedFeatures.userSelector.inviteCollaborators`,defaultMessage:`Invite Collaborators`},inviteCollaboratorsTooltip:{id:`groupSharedFeatures.userSelector.inviteCollaboratorsTooltip`,defaultMessage:`This person doesn't have access and won't be notified unless invited.`}});export{messages as default};

package/dist/esm/lib/shared.js

@@ -1,7 +1 @@
-var e = {
-	email: "a@abc.com",
-	id: 123,
-	name: "a",
-	value: "a"
-};
-export { e as placeholderUser };
+var placeholderUser={email:`a@abc.com`,id:123,name:`a`,value:`a`};export{placeholderUser};

package/dist/esm/lib/user-selector-container.js

@@ -1,30 +1 @@
-import { isUserContactType as e } from "./utils/isUserContactType.js";
-import { t } from "../../chunks/user-selector.js";
-import { defaultRenderCustomOption as n } from "./utils/defaultRenderCustomOption.js";
-import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
-var c = ({ fetchAvatarUrls: c, fetchUsers: l, onSelectedUsersChange: u, selectedUsers: d, renderCustomOption: f = n, ...p }) => {
-	let m = a(!0), [h, g] = o([]), [_, v] = o({}), y = r(async (e) => {
-		let t = await l(e);
-		return g(t), t;
-	}, [l, g]), b = r(async (e) => {
-		try {
-			v(await c(e));
-		} catch {
-			v({});
-		}
-	}, [c, v]);
-	return i(() => {
-		m.current && (m.current = !1, d.length > 0 && g(d.filter(e)));
-	}, [d, g]), i(() => {
-		h.length > 0 && b(h.filter(e));
-	}, [h, b]), /* @__PURE__ */ s(t, {
-		fetchedAvatarUrls: _,
-		fetchUsers: y,
-		onSelectedUsersChange: u,
-		renderCustomOption: f,
-		selectedUsers: d,
-		...p
-	});
-};
-export { c as UserSelectorContainer };
+import{isUserContactType}from"./utils/isUserContactType.js";import{t as UserSelector}from"../../chunks/user-selector.js";import{defaultRenderCustomOption}from"./utils/defaultRenderCustomOption.js";import{useCallback,useEffect,useRef,useState}from"react";import{jsx}from"react/jsx-runtime";var UserSelectorContainer=({fetchAvatarUrls,fetchUsers,onSelectedUsersChange,selectedUsers,renderCustomOption=defaultRenderCustomOption,...rest})=>{let isFirstRender=useRef(!0),[fetchedOptions,setFetchedOptions]=useState([]),[fetchedAvatarUrls,setFetchedAvatarUrls]=useState({}),fetchOptions=useCallback(async inputVal=>{let options=await fetchUsers(inputVal);return setFetchedOptions(options),options},[fetchUsers,setFetchedOptions]),getAvatarUrls=useCallback(async users=>{try{setFetchedAvatarUrls(await fetchAvatarUrls(users))}catch{setFetchedAvatarUrls({})}},[fetchAvatarUrls,setFetchedAvatarUrls]);return useEffect(()=>{isFirstRender.current&&(isFirstRender.current=!1,selectedUsers.length>0&&setFetchedOptions(selectedUsers.filter(isUserContactType)))},[selectedUsers,setFetchedOptions]),useEffect(()=>{fetchedOptions.length>0&&getAvatarUrls(fetchedOptions.filter(isUserContactType))},[fetchedOptions,getAvatarUrls]),jsx(UserSelector,{fetchedAvatarUrls,fetchUsers:fetchOptions,onSelectedUsersChange,renderCustomOption,selectedUsers,...rest})};export{UserSelectorContainer};

package/dist/esm/lib/user-selector-headless/components/user-avatar.js

@@ -1,26 +1 @@
-import e from "../../messages.js";
-import { getInitials as t } from "../../utils/getInitials.js";
-import { useUserSelector as n } from "../user-selector-context.js";
-import { t as r } from "../../../../chunks/user-selector-headless.module.js";
-import { useIntl as i } from "react-intl";
-import { Avatar as a, IconBadge as o } from "@box/blueprint-web";
-import { jsx as s } from "react/jsx-runtime";
-var c = ({ userContact: c }) => {
-	let l = i(), { avatars: u } = n(), d = t(c.name), f = /* @__PURE__ */ s(a, {
-		alt: l.formatMessage(e.userAvatar),
-		className: r.listItemAvatar,
-		colorIndex: c.id,
-		src: u[c.id],
-		text: d
-	});
-	return c.isExternalUser ? /* @__PURE__ */ s(o, {
-		offset: {
-			right: -4,
-			bottom: -2
-		},
-		size: "medium",
-		variant: "collaborator-external",
-		children: f
-	}) : f;
-};
-export { c as UserAvatar };
+import messages from"../../messages.js";import{getInitials}from"../../utils/getInitials.js";import{useUserSelector}from"../user-selector-context.js";import{t as user_selector_headless_module_default}from"../../../../chunks/user-selector-headless.module.js";import{useIntl}from"react-intl";import{Avatar,IconBadge}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";var UserAvatar=({userContact})=>{let intl=useIntl(),{avatars}=useUserSelector(),initials=getInitials(userContact.name),avatar=jsx(Avatar,{alt:intl.formatMessage(messages.userAvatar),className:user_selector_headless_module_default.listItemAvatar,colorIndex:userContact.id,src:avatars[userContact.id],text:initials});return userContact.isExternalUser?jsx(IconBadge,{offset:{right:-4,bottom:-2},size:`medium`,variant:`collaborator-external`,children:avatar}):avatar};export{UserAvatar};

package/dist/esm/lib/user-selector-headless/components/user-selector-content.js

@@ -1,28 +1 @@
-import { n as e } from "../../../../chunks/user-selector-list-item.js";
-import { useUserSelector as t } from "../user-selector-context.js";
-import { t as n } from "../../../../chunks/user-selector-headless.module.js";
-import { UserAvatar as r } from "./user-avatar.js";
-import { UserSelectorDefaultEmpty as i } from "./user-selector-default-empty.js";
-import { UserSelectorDefaultError as a } from "./user-selector-default-error.js";
-import { UserSelectorSkeleton as o } from "./user-selector-skeleton.js";
-import { jsx as s } from "react/jsx-runtime";
-var c = ({ renderError: c, renderEmpty: l, loadingAriaLabel: u, optionRefs: d, handleOptionClick: f, options: p, isEmpty: m, isLoading: h, error: g, handleInvite: _ }) => {
-	let { value: v, activeId: y, getOptionId: b } = t();
-	return g ? c ? c(g) : /* @__PURE__ */ s(a, {}) : m ? l ? l(v) : /* @__PURE__ */ s(i, { handleInvite: _ }) : h ? /* @__PURE__ */ s(o, { loadingAriaLabel: u }) : p.map((t) => {
-		let i = b(t);
-		return /* @__PURE__ */ s(e, {
-			ref: (e) => {
-				e ? d.current.set(i, e) : d.current.delete(i);
-			},
-			className: n.userSelectorListItem,
-			id: i,
-			isCollaborator: t.isCollaborator,
-			onClick: f,
-			renderAvatar: () => /* @__PURE__ */ s(r, { userContact: t }),
-			role: "option",
-			selected: i === y,
-			userContact: t
-		}, t.id);
-	});
-};
-export { c as UserSelectorContent };
+import{n as UserSelectorListItem}from"../../../../chunks/user-selector-list-item.js";import{useUserSelector}from"../user-selector-context.js";import{t as user_selector_headless_module_default}from"../../../../chunks/user-selector-headless.module.js";import{UserAvatar}from"./user-avatar.js";import{UserSelectorDefaultEmpty}from"./user-selector-default-empty.js";import{UserSelectorDefaultError}from"./user-selector-default-error.js";import{UserSelectorSkeleton}from"./user-selector-skeleton.js";import{jsx}from"react/jsx-runtime";var UserSelectorContent=({renderError,renderEmpty,loadingAriaLabel,optionRefs,handleOptionClick,options,isEmpty,isLoading,error,handleInvite})=>{let{value,activeId,getOptionId}=useUserSelector();return error?renderError?renderError(error):jsx(UserSelectorDefaultError,{}):isEmpty?renderEmpty?renderEmpty(value):jsx(UserSelectorDefaultEmpty,{handleInvite}):isLoading?jsx(UserSelectorSkeleton,{loadingAriaLabel}):options.map(option=>{let id=getOptionId(option);return jsx(UserSelectorListItem,{ref:el=>{el?optionRefs.current.set(id,el):optionRefs.current.delete(id)},className:user_selector_headless_module_default.userSelectorListItem,id,isCollaborator:option.isCollaborator,onClick:handleOptionClick,renderAvatar:()=>jsx(UserAvatar,{userContact:option}),role:`option`,selected:id===activeId,userContact:option},option.id)})};export{UserSelectorContent};

package/dist/esm/lib/user-selector-headless/components/user-selector-default-empty.js

@@ -1,38 +1 @@
-import e from "../../messages.js";
-import { useUserSelector as t } from "../user-selector-context.js";
-import { t as n } from "../../../../chunks/user-selector-headless.module.js";
-import { useCallback as r } from "react";
-import { useIntl as i } from "react-intl";
-import { Text as a } from "@box/blueprint-web";
-import { AvatarPlusBadge as o } from "@box/blueprint-web-assets/icons/Line";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-var l = ({ handleInvite: l }) => {
-	let { formatMessage: u } = i(), { value: d } = t(), f = r(() => {
-		l?.(d);
-	}, [l, d]);
-	return /* @__PURE__ */ c("div", {
-		className: n.userSelectorEmptyContainer,
-		children: [/* @__PURE__ */ s(a, {
-			as: "span",
-			className: n.userSelectorEmptyText,
-			color: "textOnLightSecondary",
-			variant: "label",
-			children: u(e.emptyMessage)
-		}), l && /* @__PURE__ */ c("button", {
-			className: n.userSelectorInviteRow,
-			onClick: f,
-			tabIndex: 0,
-			type: "button",
-			children: [/* @__PURE__ */ s("span", {
-				className: n.userSelectorInviteButtonIcon,
-				children: /* @__PURE__ */ s(o, {})
-			}), /* @__PURE__ */ s(a, {
-				as: "span",
-				className: n.userName,
-				variant: "bodyDefault",
-				children: u(e.inviteCollaborators)
-			})]
-		})]
-	});
-};
-export { l as UserSelectorDefaultEmpty };
+import messages from"../../messages.js";import{useUserSelector}from"../user-selector-context.js";import{t as user_selector_headless_module_default}from"../../../../chunks/user-selector-headless.module.js";import{useCallback}from"react";import{useIntl}from"react-intl";import{Text}from"@box/blueprint-web";import{AvatarPlusBadge}from"@box/blueprint-web-assets/icons/Line";import{jsx,jsxs}from"react/jsx-runtime";var UserSelectorDefaultEmpty=({handleInvite})=>{let{formatMessage}=useIntl(),{value}=useUserSelector(),handleOnInviteClick=useCallback(()=>{handleInvite?.(value)},[handleInvite,value]);return jsxs(`div`,{className:user_selector_headless_module_default.userSelectorEmptyContainer,children:[jsx(Text,{as:`span`,className:user_selector_headless_module_default.userSelectorEmptyText,color:`textOnLightSecondary`,variant:`label`,children:formatMessage(messages.emptyMessage)}),handleInvite&&jsxs(`button`,{className:user_selector_headless_module_default.userSelectorInviteRow,onClick:handleOnInviteClick,tabIndex:0,type:`button`,children:[jsx(`span`,{className:user_selector_headless_module_default.userSelectorInviteButtonIcon,children:jsx(AvatarPlusBadge,{})}),jsx(Text,{as:`span`,className:user_selector_headless_module_default.userName,variant:`bodyDefault`,children:formatMessage(messages.inviteCollaborators)})]})]})};export{UserSelectorDefaultEmpty};

package/dist/esm/lib/user-selector-headless/components/user-selector-default-error.js

@@ -1,14 +1 @@
-import e from "../../messages.js";
-import { FormattedMessage as t, useIntl as n } from "react-intl";
-import { InlineNotice as r } from "@box/blueprint-web";
-import { jsx as i } from "react/jsx-runtime";
-var a = () => {
-	let { formatMessage: a } = n();
-	return /* @__PURE__ */ i(r, {
-		title: a(e.errorMessage),
-		variant: "error",
-		variantIconAriaLabel: "error",
-		children: /* @__PURE__ */ i(t, { ...e.errorMessageDescription })
-	});
-};
-export { a as UserSelectorDefaultError };
+import messages from"../../messages.js";import{FormattedMessage,useIntl}from"react-intl";import{InlineNotice}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";var UserSelectorDefaultError=()=>{let{formatMessage}=useIntl();return jsx(InlineNotice,{title:formatMessage(messages.errorMessage),variant:`error`,variantIconAriaLabel:`error`,children:jsx(FormattedMessage,{...messages.errorMessageDescription})})};export{UserSelectorDefaultError};

package/dist/esm/lib/user-selector-headless/components/user-selector-skeleton.js

@@ -1,21 +1 @@
-import { t as e } from "../../../../chunks/user-selector-headless.module.js";
-import { Ghost as t } from "@box/blueprint-web";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Size5 as i, Size8 as a } from "@box/blueprint-web-assets/tokens/tokens";
-var o = ({ loadingAriaLabel: o }) => /* @__PURE__ */ n("div", {
-	"aria-label": o,
-	children: Array.from({ length: 4 }, (o, s) => /* @__PURE__ */ r("div", {
-		className: e.userSelectorGhostStateItem,
-		children: [/* @__PURE__ */ n(t, {
-			className: e.titleGhost,
-			height: a,
-			variant: "rectangle",
-			width: a
-		}), /* @__PURE__ */ n(t, {
-			height: i,
-			variant: "rectangle",
-			width: "100%"
-		})]
-	}, s))
-});
-export { o as UserSelectorSkeleton };
+import{t as user_selector_headless_module_default}from"../../../../chunks/user-selector-headless.module.js";import{Ghost}from"@box/blueprint-web";import{jsx,jsxs}from"react/jsx-runtime";import{Size5,Size8}from"@box/blueprint-web-assets/tokens/tokens";var UserSelectorSkeleton=({loadingAriaLabel})=>jsx(`div`,{"aria-label":loadingAriaLabel,children:Array.from({length:4},(_,i)=>jsxs(`div`,{className:user_selector_headless_module_default.userSelectorGhostStateItem,children:[jsx(Ghost,{className:user_selector_headless_module_default.titleGhost,height:Size8,variant:`rectangle`,width:Size8}),jsx(Ghost,{height:Size5,variant:`rectangle`,width:`100%`})]},i))});export{UserSelectorSkeleton};

package/dist/esm/lib/user-selector-headless/hooks/use-avatars.js

@@ -1,14 +1 @@
-import { useCallback as e, useEffect as t, useState as n } from "react";
-var r = ({ fetchAvatarUrls: r, options: i }) => {
-	let [a, o] = n({}), s = e(async (e) => {
-		try {
-			o(await r(e));
-		} catch {
-			o({});
-		}
-	}, [r, o]);
-	return t(() => {
-		i.length > 0 && s(i);
-	}, [i, s]), { avatars: a };
-};
-export { r as useAvatars };
+import{useCallback,useEffect,useState}from"react";var useAvatars=({fetchAvatarUrls,options})=>{let[avatars,setAvatars]=useState({}),getAvatarUrls=useCallback(async users=>{try{setAvatars(await fetchAvatarUrls(users))}catch{setAvatars({})}},[fetchAvatarUrls,setAvatars]);return useEffect(()=>{options.length>0&&getAvatarUrls(options)},[options,getAvatarUrls]),{avatars}};export{useAvatars};

package/dist/esm/lib/user-selector-headless/hooks/use-keyboard-navigation.js

@@ -1,25 +1 @@
-import { useCallback as e } from "react";
-var t = ({ isLoading: t, error: n, isEmpty: r, open: i, selectNext: a, selectPrevious: o, selectItem: s }) => e((e) => {
-	if (!(!i || t || n || r)) switch (e.key) {
-		case "ArrowDown":
-			e.preventDefault(), a();
-			break;
-		case "ArrowUp":
-			e.preventDefault(), o();
-			break;
-		case "Enter":
-		case " ":
-			e.preventDefault(), s();
-			break;
-		default: break;
-	}
-}, [
-	n,
-	r,
-	t,
-	i,
-	a,
-	o,
-	s
-]);
-export { t as useKeyboardNavigation };
+import{useCallback}from"react";var useKeyboardNavigation=({isLoading,error,isEmpty,open,selectNext,selectPrevious,selectItem})=>useCallback(event=>{if(!(!open||isLoading||error||isEmpty))switch(event.key){case`ArrowDown`:event.preventDefault(),selectNext();break;case`ArrowUp`:event.preventDefault(),selectPrevious();break;case`Enter`:case` `:event.preventDefault(),selectItem();break;default:break}},[error,isEmpty,isLoading,open,selectNext,selectPrevious,selectItem]);export{useKeyboardNavigation};

package/dist/esm/lib/user-selector-headless/hooks/use-select-options.js

@@ -1,25 +1 @@
-import { useCallback as e, useEffect as t, useMemo as n, useState as r } from "react";
-import i from "lodash/debounce";
-var a = ({ fetcher: a, value: o, debounceTime: s = 250, allowEmptyQuery: c = !1 }) => {
-	let [l, u] = r(!1), [d, f] = r(!1), [p, m] = r(null), [h, g] = r([]), _ = e(async (e) => {
-		try {
-			let t = await a(e);
-			f(t?.length === 0), g(t);
-		} catch (e) {
-			m(e);
-		} finally {
-			u(!1);
-		}
-	}, [a]), v = n(() => i(_, s), [_, s]);
-	return t(() => (o.length || c ? (u(!0), m(null), f(!1), v(o)) : (v.cancel(), u(!1), g([]), m(null), f(!1)), () => v.cancel()), [
-		o,
-		v,
-		c
-	]), {
-		isLoading: l,
-		isEmpty: d,
-		error: p,
-		options: h
-	};
-};
-export { a as useSelectOptions };
+import{useCallback,useEffect,useMemo,useState}from"react";import _debounce from"lodash/debounce";var useSelectOptions=({fetcher,value,debounceTime=250,allowEmptyQuery=!1})=>{let[isLoading,setIsLoading]=useState(!1),[isEmpty,setIsEmpty]=useState(!1),[error,setError]=useState(null),[options,setOptions]=useState([]),fetchOptions=useCallback(async queryVal=>{try{let data=await fetcher(queryVal);setIsEmpty(data?.length===0),setOptions(data)}catch(err){setError(err)}finally{setIsLoading(!1)}},[fetcher]),debouncedFetchOptions=useMemo(()=>_debounce(fetchOptions,debounceTime),[fetchOptions,debounceTime]);return useEffect(()=>(value.length||allowEmptyQuery?(setIsLoading(!0),setError(null),setIsEmpty(!1),debouncedFetchOptions(value)):(debouncedFetchOptions.cancel(),setIsLoading(!1),setOptions([]),setError(null),setIsEmpty(!1)),()=>debouncedFetchOptions.cancel()),[value,debouncedFetchOptions,allowEmptyQuery]),{isLoading,isEmpty,error,options}};export{useSelectOptions};

package/dist/esm/lib/user-selector-headless/user-selector-context.js

@@ -1,7 +1 @@
-import { createContext as e, useContext as t } from "react";
-var n = /*#__PURE__*/ e(null), r = () => {
-	let e = t(n);
-	if (!e) throw Error("useUserSelector must be used within a UserSelectorProvider");
-	return e;
-};
-export { n as UserSelectorContext, r as useUserSelector };
+import{createContext,useContext}from"react";var UserSelectorContext=createContext(null),useUserSelector=()=>{let context=useContext(UserSelectorContext);if(!context)throw Error(`useUserSelector must be used within a UserSelectorProvider`);return context};export{UserSelectorContext,useUserSelector};

package/dist/esm/lib/user-selector-headless/user-selector-headless.js

@@ -1,172 +1 @@
-import { UserSelectorContext as e } from "./user-selector-context.js";
-import { t } from "../../../chunks/user-selector-headless.module.js";
-import { UserSelectorContent as n } from "./components/user-selector-content.js";
-import { useAvatars as r } from "./hooks/use-avatars.js";
-import { useKeyboardNavigation as i } from "./hooks/use-keyboard-navigation.js";
-import { useSelectOptions as a } from "./hooks/use-select-options.js";
-import { forwardRef as o, useCallback as s, useEffect as c, useId as l, useImperativeHandle as u, useMemo as d, useRef as f, useState as p } from "react";
-import m from "clsx";
-import { Popover as h } from "@box/blueprint-web";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-var v = /*#__PURE__*/ o(({ fetchUsers: o, fetchAvatarUrls: v, open: y, value: b, rootElement: x, onSelectedUserChange: S, inputElementRef: C, focusOnOpen: w = !1, renderError: T, renderEmpty: E, loadingAriaLabel: D, ariaRoleDescription: O, nativeFocusEnabled: k = !0, allowEmptyQuery: A = !1, onInvite: j, popoverContentContainerProps: M }, N) => {
-	let [P, F] = p(null), { options: I, isEmpty: L, isLoading: R, error: z } = a({
-		fetcher: o,
-		value: b,
-		allowEmptyQuery: A
-	}), { avatars: B } = r({
-		fetchAvatarUrls: v,
-		options: I
-	}), V = l(), H = f(/* @__PURE__ */ new Map()), U = d(() => `listbox-${V}`, [V]), W = s((e) => `${V}-option-${e.id}`, [V]), G = s((e) => {
-		let t = H.current.get(e);
-		if (t) {
-			if (F(e), k) {
-				t.focus();
-				return;
-			}
-			t.scrollIntoView({
-				behavior: "smooth",
-				block: "nearest",
-				inline: "nearest"
-			});
-		}
-	}, [k]), K = d(() => I.findIndex((e) => W(e) === P), [
-		P,
-		W,
-		I
-	]), q = s(() => {
-		C.current?.focus(), F(null);
-	}, [C]), J = s(() => {
-		if (P) {
-			let e = I.find((e) => W(e) === P);
-			e && S(e);
-		}
-	}, [
-		S,
-		P,
-		W,
-		I
-	]), Y = s(() => {
-		if (I.length !== 0) {
-			if (K < I.length - 1) {
-				G(W(I[K + 1]));
-				return;
-			}
-			if (k) {
-				q();
-				return;
-			}
-			G(W(I[0]));
-		}
-	}, [
-		K,
-		G,
-		W,
-		I,
-		k,
-		q
-	]), X = s(() => {
-		if (I.length !== 0) {
-			if (K > 0) {
-				G(W(I[K - 1]));
-				return;
-			}
-			if (k) {
-				q();
-				return;
-			}
-			G(W(I[I.length - 1]));
-		}
-	}, [
-		K,
-		G,
-		W,
-		I,
-		k,
-		q
-	]), Z = i({
-		isLoading: R,
-		error: z,
-		isEmpty: L,
-		open: y,
-		selectNext: Y,
-		selectPrevious: X,
-		selectItem: J
-	}), Q = s((e, t) => {
-		G(t), S(e);
-	}, [G, S]);
-	u(N, () => ({
-		focusFirstOption: () => {
-			I.length > 0 && G(W(I[0]));
-		},
-		focusLastOption: () => {
-			I.length > 0 && G(W(I[I.length - 1]));
-		},
-		selectNext: Y,
-		selectPrevious: X,
-		selectItem: J
-	}), [
-		G,
-		W,
-		I,
-		Y,
-		X,
-		J
-	]), c(() => {
-		I.length > 0 && w && G(W(I[0]));
-	}, [
-		I,
-		y,
-		W,
-		G,
-		w
-	]);
-	let $ = {
-		fetchUsers: o,
-		fetchAvatarUrls: v,
-		onSelectedUserChange: S,
-		value: b,
-		avatars: B,
-		activeId: P,
-		setActiveId: F,
-		listboxId: U,
-		getOptionId: W
-	};
-	return /* @__PURE__ */ g(e.Provider, {
-		value: $,
-		children: /* @__PURE__ */ _(h.Root, {
-			modal: !1,
-			open: y,
-			children: [/* @__PURE__ */ g(h.Anchor, { children: x }), /* @__PURE__ */ g(h.ContentContainer, {
-				...M,
-				align: "start",
-				className: m(t.popoverContainer, M?.className),
-				onOpenAutoFocus: (e) => {
-					e.preventDefault();
-				},
-				children: /* @__PURE__ */ g(h.MainContent, {
-					"aria-activedescendant": P,
-					"aria-owns": Array.from(H.current.values()).map((e) => e.id).join(" "),
-					"aria-roledescription": O,
-					className: t.popoverContent,
-					id: U,
-					onKeyDown: Z,
-					role: "listbox",
-					tabIndex: -1,
-					children: /* @__PURE__ */ g(n, {
-						error: z,
-						handleInvite: j,
-						handleOptionClick: Q,
-						isEmpty: L,
-						isLoading: R,
-						loadingAriaLabel: D,
-						optionRefs: H,
-						options: I,
-						renderEmpty: E,
-						renderError: T
-					})
-				})
-			})]
-		})
-	});
-});
-export { v as UserSelectorHeadless };
+import{UserSelectorContext}from"./user-selector-context.js";import{t as user_selector_headless_module_default}from"../../../chunks/user-selector-headless.module.js";import{UserSelectorContent}from"./components/user-selector-content.js";import{useAvatars}from"./hooks/use-avatars.js";import{useKeyboardNavigation}from"./hooks/use-keyboard-navigation.js";import{useSelectOptions}from"./hooks/use-select-options.js";import{forwardRef,useCallback,useEffect,useId,useImperativeHandle,useMemo,useRef,useState}from"react";import clsx from"clsx";import{Popover}from"@box/blueprint-web";import{jsx,jsxs}from"react/jsx-runtime";var UserSelectorHeadless=forwardRef(({fetchUsers,fetchAvatarUrls,open,value,rootElement,onSelectedUserChange,inputElementRef,focusOnOpen=!1,renderError,renderEmpty,loadingAriaLabel,ariaRoleDescription,nativeFocusEnabled=!0,allowEmptyQuery=!1,onInvite,popoverContentContainerProps},ref)=>{let[activeId,setActiveId]=useState(null),{options,isEmpty,isLoading,error}=useSelectOptions({fetcher:fetchUsers,value,allowEmptyQuery}),{avatars}=useAvatars({fetchAvatarUrls,options}),uniqueId=useId(),optionRefs=useRef(new Map),listboxId=useMemo(()=>`listbox-${uniqueId}`,[uniqueId]),getOptionId=useCallback(optionValue=>`${uniqueId}-option-${optionValue.id}`,[uniqueId]),focusOption=useCallback(id=>{let element=optionRefs.current.get(id);if(element){if(setActiveId(id),nativeFocusEnabled){element.focus();return}element.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`})}},[nativeFocusEnabled]),currentIndex=useMemo(()=>options.findIndex(opt=>getOptionId(opt)===activeId),[activeId,getOptionId,options]),switchFocusToInput=useCallback(()=>{inputElementRef.current?.focus(),setActiveId(null)},[inputElementRef]),selectItem=useCallback(()=>{if(activeId){let selectedOption=options.find(opt=>getOptionId(opt)===activeId);selectedOption&&onSelectedUserChange(selectedOption)}},[onSelectedUserChange,activeId,getOptionId,options]),selectNext=useCallback(()=>{if(options.length!==0){if(currentIndex<options.length-1){focusOption(getOptionId(options[currentIndex+1]));return}if(nativeFocusEnabled){switchFocusToInput();return}focusOption(getOptionId(options[0]))}},[currentIndex,focusOption,getOptionId,options,nativeFocusEnabled,switchFocusToInput]),selectPrevious=useCallback(()=>{if(options.length!==0){if(currentIndex>0){focusOption(getOptionId(options[currentIndex-1]));return}if(nativeFocusEnabled){switchFocusToInput();return}focusOption(getOptionId(options[options.length-1]))}},[currentIndex,focusOption,getOptionId,options,nativeFocusEnabled,switchFocusToInput]),handleKeyDown=useKeyboardNavigation({isLoading,error,isEmpty,open,selectNext,selectPrevious,selectItem}),handleOptionClick=useCallback((userContact,id)=>{focusOption(id),onSelectedUserChange(userContact)},[focusOption,onSelectedUserChange]);useImperativeHandle(ref,()=>({focusFirstOption:()=>{options.length>0&&focusOption(getOptionId(options[0]))},focusLastOption:()=>{options.length>0&&focusOption(getOptionId(options[options.length-1]))},selectNext,selectPrevious,selectItem}),[focusOption,getOptionId,options,selectNext,selectPrevious,selectItem]),useEffect(()=>{options.length>0&&focusOnOpen&&focusOption(getOptionId(options[0]))},[options,open,getOptionId,focusOption,focusOnOpen]);let contextValue={fetchUsers,fetchAvatarUrls,onSelectedUserChange,value,avatars,activeId,setActiveId,listboxId,getOptionId};return jsx(UserSelectorContext.Provider,{value:contextValue,children:jsxs(Popover.Root,{modal:!1,open,children:[jsx(Popover.Anchor,{children:rootElement}),jsx(Popover.ContentContainer,{...popoverContentContainerProps,align:`start`,className:clsx(user_selector_headless_module_default.popoverContainer,popoverContentContainerProps?.className),onOpenAutoFocus:e=>{e.preventDefault()},children:jsx(Popover.MainContent,{"aria-activedescendant":activeId,"aria-owns":Array.from(optionRefs.current.values()).map(e=>e.id).join(` `),"aria-roledescription":ariaRoleDescription,className:user_selector_headless_module_default.popoverContent,id:listboxId,onKeyDown:handleKeyDown,role:`listbox`,tabIndex:-1,children:jsx(UserSelectorContent,{error,handleInvite:onInvite,handleOptionClick,isEmpty,isLoading,loadingAriaLabel,optionRefs,options,renderEmpty,renderError})})})]})})});export{UserSelectorHeadless};

package/dist/esm/lib/user-selector-list-item.js

@@ -1,2 +1 @@
-import { n as e, r as t, t as n } from "../../chunks/user-selector-list-item.js";
-export { n as UserSelectorComboboxOption, e as UserSelectorListItem, t as UserSelectorListItemInfo };
+import{n as UserSelectorListItem,r as UserSelectorListItemInfo,t as UserSelectorComboboxOption}from"../../chunks/user-selector-list-item.js";export{UserSelectorComboboxOption,UserSelectorListItem,UserSelectorListItemInfo};

package/dist/esm/lib/user-selector.js

@@ -1,2 +1 @@
-import { t as e } from "../../chunks/user-selector.js";
-export { e as default };
+import{t as UserSelector}from"../../chunks/user-selector.js";export{UserSelector as default};

package/dist/esm/lib/utils/VariantsAggregator.js

@@ -1,27 +1 @@
-import { Fragment as e } from "react";
-import { Text as t } from "@box/blueprint-web";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-var i = ({ defaultProps: i, DefaultComponentTemplate: a, variantsMap: o, containerStyle: s }) => {
-	let c = Object.entries(o);
-	return /* @__PURE__ */ n("div", {
-		style: {
-			display: "grid",
-			gridTemplateColumns: "auto auto",
-			alignItems: "baseline",
-			gap: "254px 12px",
-			...s
-		},
-		children: c.map(([o, { props: s = {}, ComponentTemplate: c }]) => /* @__PURE__ */ r(e, { children: [/* @__PURE__ */ n(t, {
-			as: "span",
-			color: "textOnLightSecondary",
-			style: { textTransform: "uppercase" },
-			variant: "bodyDefaultBold",
-			children: o
-		}), /* @__PURE__ */ n("div", { children: n(c || a, {
-			...i,
-			...s
-		}) })] }, o))
-	});
-};
-i.displayName = "variants";
-export { i as VariantsAggregator };
+import{Fragment}from"react";import{Text}from"@box/blueprint-web";import{jsx,jsxs}from"react/jsx-runtime";var VariantsAggregator=({defaultProps,DefaultComponentTemplate,variantsMap,containerStyle})=>{let variantsArray=Object.entries(variantsMap);return jsx(`div`,{style:{display:`grid`,gridTemplateColumns:`auto auto`,alignItems:`baseline`,gap:`254px 12px`,...containerStyle},children:variantsArray.map(([variant,{props={},ComponentTemplate}])=>jsxs(Fragment,{children:[jsx(Text,{as:`span`,color:`textOnLightSecondary`,style:{textTransform:`uppercase`},variant:`bodyDefaultBold`,children:variant}),jsx(`div`,{children:jsx(ComponentTemplate||DefaultComponentTemplate,{...defaultProps,...props})})]},variant))})};VariantsAggregator.displayName=`variants`;export{VariantsAggregator};

package/dist/esm/lib/utils/buildOptionsWithOverlay.js

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

package/dist/esm/lib/utils/defaultRenderCustomOption.js

@@ -1,11 +1 @@
-import { r as e } from "../../../chunks/user-selector-list-item.js";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
-function n(n, r) {
-	return /* @__PURE__ */ t(e, {
-		renderAvatar: r,
-		subtitle: n.subtitle,
-		title: n.name
-	});
-}
-export { n as defaultRenderCustomOption };
+import{r as UserSelectorListItemInfo}from"../../../chunks/user-selector-list-item.js";import"react";import{jsx}from"react/jsx-runtime";function defaultRenderCustomOption(option,renderAvatar){return jsx(UserSelectorListItemInfo,{renderAvatar,subtitle:option.subtitle,title:option.name})}export{defaultRenderCustomOption};

package/dist/esm/lib/utils/getInitials.js

@@ -1,5 +1 @@
-var e = (e) => {
-	let t = e.replace(/[[({<]+.*[\])}>]+/g, "").trim();
-	return (t.slice(0, 1) + t.slice(t.lastIndexOf(" ") + 1, t.lastIndexOf(" ") + 2)).toUpperCase();
-};
-export { e as getInitials };
+var getInitials=name=>{let cleanedName=name.replace(/[[({<]+.*[\])}>]+/g,``).trim();return(cleanedName.slice(0,1)+cleanedName.slice(cleanedName.lastIndexOf(` `)+1,cleanedName.lastIndexOf(` `)+2)).toUpperCase()};export{getInitials};

package/dist/esm/lib/utils/isUserContactType.js

@@ -1,4 +1 @@
-function e(e) {
-	return "email" in e && "id" in e && "name" in e && "value" in e;
-}
-export { e as isUserContactType };
+function isUserContactType(value){return`email`in value&&`id`in value&&`name`in value&&`value`in value}export{isUserContactType};

package/package.json

@@ -1,20 +1,20 @@
 {
     "name": "@box/user-selector",
-    "version": "2.1.37",
+    "version": "2.1.38",
     "peerDependencies": {
-        "@box/blueprint-web": "^16.13.0",
-        "@box/blueprint-web-assets": "^5.5.9",
-        "@box/combobox-with-api": "^2.1.36",
+        "@box/blueprint-web": "^16.13.1",
+        "@box/blueprint-web-assets": "^5.5.10",
+        "@box/combobox-with-api": "^2.1.37",
         "lodash": "^4.17.15",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.13.0",
-        "@box/blueprint-web-assets": "^5.5.9",
-        "@box/combobox-with-api": "^2.1.36",
-        "@box/storybook-utils": "^1.1.33",
+        "@box/blueprint-web": "^16.13.1",
+        "@box/blueprint-web-assets": "^5.5.10",
+        "@box/combobox-with-api": "^2.1.37",
+        "@box/storybook-utils": "^1.1.34",
         "@types/lodash": "^4.17.14",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",