@box/user-selector 1.74.32 → 1.74.34

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

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

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

@@ -1,113 +1,2 @@
-import { Combobox as L, Text as p, Tooltip as x } from "@box/blueprint-web";
-import { AvatarPlusBadge as b } from "@box/blueprint-web-assets/icons/Line";
-import a from "clsx";
-import C, { forwardRef as d } from "react";
-import { useIntl as v } from "react-intl";
-import S from "./messages.js";
-import { isUserContactType as O } from "./utils/isUserContactType.js";
-import { jsx as r, jsxs as _ } from "react/jsx-runtime";
-import '../../styles/user-selector-list-item.css';const U = "_userSelectorListItem_1m2q6_1", q = "_listItemAvatar_1m2q6_18", A = "_userInfo_1m2q6_21", g = "_title_1m2q6_28", E = "_userName_1m2q6_34", T = "_userEmail_1m2q6_35", k = "_userSelectorListItemInviteIcon_1m2q6_43", o = {
-  userSelectorListItem: U,
-  listItemAvatar: q,
-  userInfo: A,
-  title: g,
-  userName: E,
-  userEmail: T,
-  userSelectorListItemInviteIcon: k
-}, y = /* @__PURE__ */ d(({
-  renderAvatar: c,
-  title: t,
-  subtitle: m,
-  onClick: s,
-  className: e,
-  id: n,
-  selected: u,
-  isCollaborator: i = !0,
-  ...l
-}, I) => {
-  const h = /* @__PURE__ */ C.cloneElement(c(), {
-    className: a(o.listItemAvatar)
-  }), {
-    formatMessage: N
-  } = v(), f = /* @__PURE__ */ _("div", {
-    ref: I,
-    "aria-selected": u,
-    className: a(o.userSelectorListItem, e),
-    id: n,
-    ...s ? {
-      onClick: s
-    } : {},
-    ...l,
-    children: [h, /* @__PURE__ */ _("div", {
-      className: a(o.userInfo),
-      children: [/* @__PURE__ */ r("div", {
-        className: a(o.title),
-        children: /* @__PURE__ */ r(p, {
-          as: "span",
-          className: a(o.userName),
-          variant: "bodyDefaultSemibold",
-          children: t
-        })
-      }), /* @__PURE__ */ r(p, {
-        as: "span",
-        className: a(o.userEmail),
-        color: "textOnLightSecondary",
-        variant: "caption",
-        children: m
-      })]
-    }), !i && /* @__PURE__ */ r(b, {
-      className: o.userSelectorListItemInviteIcon
-    })]
-  });
-  return i ? f : /* @__PURE__ */ r(x, {
-    content: N(S.inviteCollaboratorsTooltip),
-    side: "right",
-    children: f
-  });
-}), j = /* @__PURE__ */ d(({
-  renderAvatar: c,
-  userContact: t,
-  onClick: m,
-  id: s,
-  ...e
-}, n) => {
-  const i = v().formatMessage(S.userName, {
-    name: t.name,
-    isCurrentUser: !!t.isCurrentUser
-  });
-  return /* @__PURE__ */ r(y, {
-    ref: n,
-    id: s,
-    onClick: () => {
-      m?.(t, s);
-    },
-    renderAvatar: () => c(t),
-    subtitle: t.email,
-    title: i,
-    ...e
-  });
-}), G = /* @__PURE__ */ d(function(t, m) {
-  const {
-    className: s,
-    userContact: e,
-    renderAvatar: n,
-    renderCustomOption: u,
-    ...i
-  } = t, l = O(e), I = l ? !0 : e.hideOnClick ?? !0;
-  return /* @__PURE__ */ r(L.Option, {
-    ref: m,
-    className: s,
-    hideOnClick: I,
-    value: e.value,
-    ...i,
-    children: l ? /* @__PURE__ */ r(j, {
-      renderAvatar: n,
-      userContact: e
-    }) : u(e, () => n(e))
-  });
-});
-export {
-  G as UserSelectorComboboxOption,
-  j as UserSelectorListItem,
-  y as UserSelectorListItemInfo
-};
+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 };

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

@@ -1,108 +1,2 @@
-import H from "clsx";
-import { useCallback as z } from "react";
-import { useIntl as D } from "react-intl";
-import { Combobox as p, Text as M, Divider as N, Avatar as h, IconBadge as T } from "@box/blueprint-web";
-import { ComboboxWithApi as W } from "@box/combobox-with-api";
-import u from "./messages.js";
-import { b as w, O as b, a as y } from "../../chunks/buildOptionsWithOverlay.js";
-import { UserSelectorComboboxOption as Y } from "./user-selector-list-item.js";
-import { defaultRenderCustomOption as j } from "./utils/defaultRenderCustomOption.js";
-import { getInitials as k } from "./utils/getInitials.js";
-import { isUserContactType as O } from "./utils/isUserContactType.js";
-import { jsx as r } from "react/jsx-runtime";
-import '../../styles/user-selector.css';const B = "_overlayHeader_zdn0a_1", P = "_overlaySeparatorOption_zdn0a_8", q = "_textArea_zdn0a_15", m = {
-  overlayHeader: B,
-  overlaySeparatorOption: P,
-  textArea: q
-}, se = (x) => {
-  const {
-    fetchedAvatarUrls: A,
-    fetchUsers: v,
-    onSelectedUsersChange: g,
-    selectedUsers: i,
-    variant: _,
-    className: C,
-    defaultOptions: S,
-    overlayDividerIndex: a,
-    overlayTitle: c,
-    renderCustomOption: U = j,
-    ...V
-  } = x, d = D(), f = (e) => {
-    if (!(e.value === b || e.value === y)) {
-      if (O(e)) {
-        const {
-          name: t,
-          isExternalUser: l,
-          id: n
-        } = e, s = /* @__PURE__ */ r(h, {
-          alt: d.formatMessage(u.userAvatar),
-          colorIndex: n,
-          src: A[n],
-          text: k(t)
-        });
-        return l ? /* @__PURE__ */ r(T, {
-          offset: {
-            right: -4,
-            bottom: -2
-          },
-          size: "medium",
-          variant: "collaborator-external",
-          children: s
-        }) : s;
-      }
-      return /* @__PURE__ */ r(h, {
-        ...e.avatar
-      });
-    }
-  }, E = (e) => {
-    if (!O(e))
-      return e.chipVariant;
-  }, R = z(async (e) => {
-    const t = await v(e);
-    if (!c || a === void 0 || a === null || a < 0)
-      return t;
-    const l = new Set(i.map((o) => o.value)), n = t.filter((o) => !l.has(o.value)), s = t.slice(0, a + 1).filter((o) => !l.has(o.value)).length, L = s > 0 ? s - 1 : -1;
-    return w(n, c, L);
-  }, [v, c, a, i]), I = (e) => e.value === b && "label" in e ? /* @__PURE__ */ r(p.Option, {
-    className: m.overlayHeader,
-    disabled: !0,
-    value: e.value,
-    children: /* @__PURE__ */ r(M, {
-      as: "span",
-      variant: "bodySmallSemibold",
-      color: "textOnLightSecondary",
-      children: e.label
-    })
-  }) : e.value === y ? /* @__PURE__ */ r(p.Option, {
-    className: m.overlaySeparatorOption,
-    disabled: !0,
-    value: e.value,
-    children: /* @__PURE__ */ r(N, {
-      "aria-hidden": !0
-    })
-  }) : /* @__PURE__ */ r(Y, {
-    renderAvatar: f,
-    renderCustomOption: U,
-    userContact: e
-  });
-  return /* @__PURE__ */ r(W, {
-    as: "input",
-    className: H(C, _ === "textarea" && m.textArea),
-    defaultOptions: S,
-    displayAvatar: f,
-    displayChipVariant: E,
-    displayValue: (e) => e.name,
-    fetcher: R,
-    freeInput: !1,
-    loadingAriaLabel: d.formatMessage(u.loading),
-    multiselect: !0,
-    noResultMessage: d.formatMessage(u.noResults),
-    onValueChange: g,
-    renderOption: I,
-    value: i,
-    ...V
-  });
-};
-export {
-  se as default
-};
+import { t as e } from "../../chunks/user-selector.js";
+export { e as default };

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

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

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

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

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

@@ -1,12 +1,11 @@
-import { UserSelectorListItemInfo as r } from "../user-selector-list-item.js";
-import { jsx as o } from "react/jsx-runtime";
-function n(t, e) {
-  return /* @__PURE__ */ o(r, {
-    renderAvatar: e,
-    subtitle: t.subtitle,
-    title: t.name
-  });
+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
-};
+export { n as defaultRenderCustomOption };