@box/user-selector 1.74.32 → 1.74.34

package/dist/chunks/buildOptionsWithOverlay.js

@@ -1,23 +1,22 @@
-const c = "__combobox_overlay_header__", l = "__combobox_overlay_separator__";
-function o(a, e, t) {
-  if (!a || a.length === 0)
-    return a ?? void 0;
-  let _ = [...a];
-  if (t >= 0 && t < _.length - 1) {
-    const n = {
-      name: "",
-      value: l
-    };
-    _ = [..._.slice(0, t + 1), n, ..._.slice(t + 1)];
-  }
-  return e && _.length > 0 && t >= 0 && (_ = [{
-    name: "",
-    value: c,
-    label: e
-  }, ..._]), _;
+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 {
-  c as O,
-  l as a,
-  o as b
-};
+export { e as n, t as r, n as t };

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

@@ -1,15 +1,14 @@
-import '../styles/user-selector-headless.css';const t = "_userSelectorInviteRow_19h0i_2", e = "_popoverContainer_19h0i_19", o = "_popoverContent_19h0i_27", r = "_userSelectorListItem_19h0i_2", s = "_listItemAvatar_19h0i_38", n = "_userSelectorGhostStateItem_19h0i_42", c = "_titleGhost_19h0i_48", i = "_userSelectorEmptyText_19h0i_52", _ = "_userSelectorEmptyContainer_19h0i_65", l = "_userSelectorInviteButtonIcon_19h0i_80", u = {
-  userSelectorInviteRow: t,
-  popoverContainer: e,
-  popoverContent: o,
-  userSelectorListItem: r,
-  listItemAvatar: s,
-  userSelectorGhostStateItem: n,
-  titleGhost: c,
-  userSelectorEmptyText: i,
-  userSelectorEmptyContainer: _,
-  userSelectorInviteButtonIcon: l
-};
-export {
-  u as s
+import '../styles/user-selector-headless.css';var e = {
+	userSelectorListItemBase: "_userSelectorListItemBase_19h0i_2",
+	userSelectorInviteRow: "_userSelectorInviteRow_19h0i_2",
+	popoverContainer: "_popoverContainer_19h0i_19",
+	popoverContent: "_popoverContent_19h0i_27",
+	userSelectorListItem: "_userSelectorListItem_19h0i_2",
+	listItemAvatar: "_listItemAvatar_19h0i_38",
+	userSelectorGhostStateItem: "_userSelectorGhostStateItem_19h0i_42",
+	titleGhost: "_titleGhost_19h0i_48",
+	userSelectorEmptyText: "_userSelectorEmptyText_19h0i_52",
+	userSelectorEmptyContainer: "_userSelectorEmptyContainer_19h0i_65",
+	userSelectorInviteButtonIcon: "_userSelectorInviteButtonIcon_19h0i_80"
 };
+export { e as t };

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

@@ -0,0 +1,84 @@
+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 };

package/dist/chunks/user-selector.js

@@ -0,0 +1,89 @@
+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_zdn0a_1",
+	overlaySeparatorOption: "_overlaySeparatorOption_zdn0a_8",
+	textArea: "_textArea_zdn0a_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 };

package/dist/esm/index.js

@@ -1,9 +1,4 @@
-import { O as o, a as A } from "../chunks/buildOptionsWithOverlay.js";
-import { UserSelectorContainer as s } from "./lib/user-selector-container.js";
-import { UserSelectorHeadless as a } from "./lib/user-selector-headless/user-selector-headless.js";
-export {
-  o as OVERLAY_HEADER_VALUE,
-  A as OVERLAY_SEPARATOR_VALUE,
-  s as UserSelectorContainer,
-  a as UserSelectorHeadless
-};
+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 };

package/dist/esm/lib/messages.js

@@ -1,46 +1,44 @@
 import { defineMessages as e } from "react-intl";
-const s = 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."
-  }
+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 {
-  s as default
-};
+export { t as default };

package/dist/esm/lib/shared.js

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

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

@@ -1,43 +1,30 @@
-import { useRef as g, useState as p, useCallback as u, useEffect as m } from "react";
-import v from "./user-selector.js";
-import { defaultRenderCustomOption as F } from "./utils/defaultRenderCustomOption.js";
-import { isUserContactType as l } from "./utils/isUserContactType.js";
-import { jsx as R } from "react/jsx-runtime";
-const b = ({
-  fetchAvatarUrls: a,
-  fetchUsers: c,
-  onSelectedUsersChange: h,
-  selectedUsers: r,
-  renderCustomOption: d = F,
-  ...y
-}) => {
-  const i = g(!0), [n, e] = p([]), [C, s] = p({}), O = u(async (t) => {
-    const o = await c(t);
-    return e(o), o;
-  }, [c, e]), f = u(async (t) => {
-    try {
-      const o = await a(t);
-      s(o);
-    } catch {
-      s({});
-    }
-  }, [a, s]);
-  return m(() => {
-    if (i.current && (i.current = !1, r.length > 0)) {
-      const t = r.filter(l);
-      e(t);
-    }
-  }, [r, e]), m(() => {
-    n.length > 0 && f(n.filter(l));
-  }, [n, f]), /* @__PURE__ */ R(v, {
-    fetchedAvatarUrls: C,
-    fetchUsers: O,
-    onSelectedUsersChange: h,
-    renderCustomOption: d,
-    selectedUsers: r,
-    ...y
-  });
-};
-export {
-  b as UserSelectorContainer
+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 };

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

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

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

@@ -1,51 +1,28 @@
-import { UserSelectorListItem as d } from "../../user-selector-list-item.js";
-import { useUserSelector as v } from "../user-selector-context.js";
-import { s as I } from "../../../../chunks/user-selector-headless.module.js";
-import { UserAvatar as b } from "./user-avatar.js";
-import { UserSelectorDefaultEmpty as k } from "./user-selector-default-empty.js";
-import { UserSelectorDefaultError as x } from "./user-selector-default-error.js";
-import { UserSelectorSkeleton as A } from "./user-selector-skeleton.js";
-import { jsx as r } from "react/jsx-runtime";
-const q = ({
-  renderError: o,
-  renderEmpty: s,
-  loadingAriaLabel: c,
-  optionRefs: l,
-  handleOptionClick: i,
-  options: f,
-  isEmpty: u,
-  isLoading: n,
-  error: m,
-  handleInvite: S
-}) => {
-  const {
-    value: p,
-    activeId: U,
-    getOptionId: C
-  } = v();
-  return m ? o ? o(m) : /* @__PURE__ */ r(x, {}) : u ? s ? s(p) : /* @__PURE__ */ r(k, {
-    handleInvite: S
-  }) : n ? /* @__PURE__ */ r(A, {
-    loadingAriaLabel: c
-  }) : f.map((e) => {
-    const t = C(e);
-    return /* @__PURE__ */ r(d, {
-      ref: (a) => {
-        a ? l.current.set(t, a) : l.current.delete(t);
-      },
-      className: I.userSelectorListItem,
-      id: t,
-      isCollaborator: e.isCollaborator,
-      onClick: i,
-      renderAvatar: () => /* @__PURE__ */ r(b, {
-        userContact: e
-      }),
-      role: "option",
-      selected: t === U,
-      userContact: e
-    }, e.id);
-  });
-};
-export {
-  q as UserSelectorContent
+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 };