@box/user-selector 1.21.23 → 1.22.3

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/user-selector",
-    "version": "1.21.23",
+    "version": "1.22.3",
     "peerDependencies": {
         "@box/blueprint-web": "^7.8.0",
         "@box/blueprint-web-assets": "^4.16.0",
@@ -11,10 +11,10 @@
         "react-intl": "6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.68.2",
-        "@box/blueprint-web-assets": "^4.66.0",
-        "@box/combobox-with-api": "^0.57.23",
-        "@box/storybook-utils": "^0.14.2",
+        "@box/blueprint-web": "^12.69.1",
+        "@box/blueprint-web-assets": "^4.67.0",
+        "@box/combobox-with-api": "^0.57.27",
+        "@box/storybook-utils": "^0.14.3",
         "@types/lodash": "^4.17.14",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",