@box/user-selector 1.68.1 → 1.69.0

package/dist/chunks/buildOptionsWithOverlay.js

@@ -0,0 +1,23 @@
+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
+  }, ..._]), _;
+}
+export {
+  c as O,
+  l as a,
+  o as b
+};

package/dist/esm/index.js

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

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

@@ -1,77 +1,108 @@
-import { Avatar as i, IconBadge as y } from "@box/blueprint-web";
-import { ComboboxWithApi as I } from "@box/combobox-with-api";
-import O from "clsx";
-import { useIntl as M } from "react-intl";
-import a from "./messages.js";
-import { UserSelectorComboboxOption as V } from "./user-selector-list-item.js";
-import { defaultRenderCustomOption as R } from "./utils/defaultRenderCustomOption.js";
-import { getInitials as S } from "./utils/getInitials.js";
-import { isUserContactType as l } from "./utils/isUserContactType.js";
-import { jsx as t } from "react/jsx-runtime";
-import '../../styles/user-selector.css';const _ = "_textArea_shf88_1", N = {
-  textArea: _
-}, D = (m) => {
+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: c,
-    fetchUsers: f,
-    onSelectedUsersChange: u,
-    selectedUsers: p,
-    variant: d,
-    className: x,
-    defaultOptions: g,
-    renderCustomOption: h = R,
-    ...v
-  } = m, r = M(), s = (e) => {
-    if (l(e)) {
-      const {
-        name: U,
-        isExternalUser: b,
-        id: o
-      } = e, n = /* @__PURE__ */ t(i, {
-        alt: r.formatMessage(a.userAvatar),
-        colorIndex: o,
-        src: c[o],
-        text: S(U)
+    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
       });
-      return b ? /* @__PURE__ */ t(y, {
-        offset: {
-          right: -4,
-          bottom: -2
-        },
-        size: "medium",
-        variant: "collaborator-external",
-        children: n
-      }) : n;
     }
-    return /* @__PURE__ */ t(i, {
-      ...e.avatar
-    });
-  }, A = (e) => {
-    if (!l(e))
+  }, E = (e) => {
+    if (!O(e))
       return e.chipVariant;
-  }, C = (e) => /* @__PURE__ */ t(V, {
-    renderAvatar: s,
-    renderCustomOption: h,
+  }, 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__ */ t(I, {
+  return /* @__PURE__ */ r(W, {
     as: "input",
-    className: O(x, d === "textarea" && N.textArea),
-    defaultOptions: g,
-    displayAvatar: s,
-    displayChipVariant: A,
+    className: H(C, _ === "textarea" && m.textArea),
+    defaultOptions: S,
+    displayAvatar: f,
+    displayChipVariant: E,
     displayValue: (e) => e.name,
-    fetcher: f,
+    fetcher: R,
     freeInput: !1,
-    loadingAriaLabel: r.formatMessage(a.loading),
+    loadingAriaLabel: d.formatMessage(u.loading),
     multiselect: !0,
-    noResultMessage: r.formatMessage(a.noResults),
-    onValueChange: u,
-    renderOption: C,
-    value: p,
-    ...v
+    noResultMessage: d.formatMessage(u.noResults),
+    onValueChange: g,
+    renderOption: I,
+    value: i,
+    ...V
   });
 };
 export {
-  D as default
+  se as default
 };

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

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

package/dist/styles/user-selector.css

@@ -1 +1 @@
-._textArea_shf88_1._textArea_shf88_1._textArea_shf88_1 [data-testid=combobox-container]{align-items:flex-start;box-sizing:border-box;min-height:80px;max-height:none}._textArea_shf88_1._textArea_shf88_1._textArea_shf88_1 [data-testid=combobox-container] input{padding:var(--space-1) 0}
+._overlayHeader_zdn0a_1._overlayHeader_zdn0a_1{padding-block:var(--bp-space-010, var(--space-1))}._overlayHeader_zdn0a_1._overlayHeader_zdn0a_1[aria-disabled]{opacity:1}._overlaySeparatorOption_zdn0a_8._overlaySeparatorOption_zdn0a_8{padding-block:0}._overlaySeparatorOption_zdn0a_8._overlaySeparatorOption_zdn0a_8[aria-disabled]{opacity:1}._textArea_zdn0a_15._textArea_zdn0a_15._textArea_zdn0a_15 [data-testid=combobox-container]{align-items:flex-start;box-sizing:border-box;min-height:80px;max-height:none}._textArea_zdn0a_15._textArea_zdn0a_15._textArea_zdn0a_15 [data-testid=combobox-container] input{padding:var(--space-1) 0}

package/dist/types/lib/types.d.ts

@@ -1,4 +1,7 @@
 import { ReactElement, SVGProps } from 'react';
+/** Option value for overlay header/divider rows (non-selectable). */
+export declare const OVERLAY_HEADER_VALUE = "__combobox_overlay_header__";
+export declare const OVERLAY_SEPARATOR_VALUE = "__combobox_overlay_separator__";
 export type UserContactType = {
     chipVariant?: 'error' | 'default' | 'variable';
     email: string;
@@ -28,6 +31,15 @@ export type CustomUserContactType = {
     hideOnClick?: boolean;
     chipVariant?: 'default' | 'error' | 'variable';
 };
+export type OverlayHeaderOption = {
+    name: string;
+    value: typeof OVERLAY_HEADER_VALUE;
+    label: string;
+};
+export type OverlaySeparatorOption = {
+    name: string;
+    value: typeof OVERLAY_SEPARATOR_VALUE;
+};
 export type UserSelectorOption = UserContactType | CustomUserContactType;
 export type FetchedAvatarUrls = {
     [userId: string]: string;

package/dist/types/lib/user-selector.d.ts

@@ -1,8 +1,18 @@
+import { ReactElement } from 'react';
 import { AvatarProps } from '@box/blueprint-web';
 import { ComboboxWithApiProps } from '@box/combobox-with-api';
-import { ReactElement } from 'react';
 import { CustomUserContactType, FetchedAvatarUrls, UserContactType, UserSelectorOption } from './types';
 export type BaseUserSelectorProps<T extends UserSelectorOption> = {
+    /**
+     * Default options to show when the input is empty
+     */
+    defaultOptions?: T[];
+    /**
+     * 0-based index (relative to the option list only) after which to insert a divider row.
+     * The option list includes selected options when they are shown in the dropdown.
+     * E.g. 1 = divider after the second option.
+     */
+    overlayDividerIndex?: number;
     /**
      * A dictionary with user ids mapped to avatar URLs
      */
@@ -11,10 +21,18 @@ export type BaseUserSelectorProps<T extends UserSelectorOption> = {
      * Function to fetch users when the input value changes
      */
     fetchUsers: (inputValue: string) => Promise<Array<T>>;
+    /**
+     * Label shown as the first row in the default options dropdown (e.g. "SUGGESTED").
+     */
+    overlayTitle?: string;
     /**
      * onChange for controlled selected users state
      */
     onSelectedUsersChange: (selectedUsers: T[]) => void;
+    /**
+     * Function to render the custom option
+     */
+    renderCustomOption?: (option: CustomUserContactType, renderAvatar: () => ReactElement<AvatarProps>) => React.ReactNode;
     /**
      * Controlled selected users state
      */
@@ -23,14 +41,6 @@ export type BaseUserSelectorProps<T extends UserSelectorOption> = {
      * Support "text area" like styling
      */
     variant?: 'input' | 'textarea';
-    /**
-     * Default options to show when the input is empty
-     */
-    defaultOptions?: T[];
-    /**
-     * Function to render the custom option
-     */
-    renderCustomOption?: (option: CustomUserContactType, renderAvatar: () => ReactElement<AvatarProps>) => React.ReactNode;
 };
 export type UserSelectorProps<T extends UserSelectorOption = UserContactType> = BaseUserSelectorProps<T> & Omit<ComboboxWithApiProps<true, false, T>, 'as' | 'fetcher' | 'freeInput' | 'hideSelectedOptions' | 'loadingAriaLabel' | 'multiselect' | 'onValueChange' | 'value'>;
 declare const UserSelector: <T extends UserSelectorOption = UserContactType>(props: UserSelectorProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/utils/buildOptionsWithOverlay.d.ts

@@ -0,0 +1,8 @@
+import { OverlayHeaderOption, OverlaySeparatorOption, UserSelectorOption } from '../types';
+/**
+ * Builds an options array with optional overlay header and divider for UserSelector.
+ * Used for both default options and fetcher results.
+ * Divider is inserted after the given index (relative to options only). Then overlay header is prepended.
+ * Returns the same reference when no overlay is needed or when options are undefined/empty.
+ */
+export declare function buildOptionsWithOverlay<T extends UserSelectorOption>(options: T[] | undefined, overlayTitle: string, overlayDividerIndex: number): (T | OverlayHeaderOption | OverlaySeparatorOption)[] | undefined;

package/package.json

@@ -1,20 +1,20 @@
 {
     "name": "@box/user-selector",
-    "version": "1.68.1",
+    "version": "1.69.0",
     "peerDependencies": {
-        "@box/blueprint-web": "^12.139.0",
-        "@box/blueprint-web-assets": "^4.101.8",
-        "@box/combobox-with-api": "^1.37.0",
+        "@box/blueprint-web": "^13.0.0",
+        "@box/blueprint-web-assets": "^4.101.9",
+        "@box/combobox-with-api": "^1.37.1",
         "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": "^12.139.0",
-        "@box/blueprint-web-assets": "^4.101.8",
-        "@box/combobox-with-api": "^1.37.0",
-        "@box/storybook-utils": "^0.16.45",
+        "@box/blueprint-web": "^13.0.0",
+        "@box/blueprint-web-assets": "^4.101.9",
+        "@box/combobox-with-api": "^1.37.1",
+        "@box/storybook-utils": "^0.16.46",
         "@types/lodash": "^4.17.14",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",