@box/unified-share-modal 1.55.0 → 2.0.1

package/dist/esm/lib/components/unified-share-form-modal/collaborator-list/collaborator-list.js

@@ -19,10 +19,10 @@ function Z() {
   const {
     formatMessage: o
   } = S(), l = x() === z.Small, {
-    collaborators: b,
+    collaborators: f,
     config: s,
-    eventService: _,
-    isFetching: f,
+    eventService: b,
+    isFetching: _,
     isSubmitting: k,
     item: v,
     variant: C
@@ -31,7 +31,7 @@ function Z() {
     type: y
   } = v, {
     onCollaboratorsManagementClick: n
-  } = _, c = C === "desktop", {
+  } = b, c = C === "desktop", {
     containerRef: d,
     previousForm: m,
     setForm: F
@@ -69,13 +69,15 @@ function Z() {
             children: [/* @__PURE__ */ e(p, {
               hideHeader: !0,
               isRowHeader: !0,
+              width: "11fr",
               children: o(r.nameColumn)
             }), !l && /* @__PURE__ */ e(p, {
               hideHeader: !0,
+              width: "10fr",
               children: o(r.roleColumn)
             })]
           }), /* @__PURE__ */ e(D, {
-            children: b.slice(0, s.collaboratorsLimit).map((h) => /* @__PURE__ */ e(H, {
+            children: f.slice(0, s.collaboratorsLimit).map((h) => /* @__PURE__ */ e(H, {
               collaborator: h,
               isSmall: l
             }, h.id))
@@ -83,7 +85,7 @@ function Z() {
         })
       })
     }), d && /* @__PURE__ */ L(/* @__PURE__ */ a(u, {
-      children: [!f && /* @__PURE__ */ e(i.Footer, {
+      children: [!_ && /* @__PURE__ */ e(i.Footer, {
         children: /* @__PURE__ */ e(i.Footer.SecondaryButton, {
           onClick: () => F(m === "invite" ? m : "default"),
           children: o(r.doneButton)

package/dist/esm/lib/hooks/use-collaboration-form.js

@@ -1,82 +1,96 @@
-import { useCallback as s } from "react";
-import { useUnifiedShareFormContext as I } from "../contexts/unified-share-form-context.js";
-import { useUnifiedShareModalContext as j } from "../contexts/unified-share-modal-context.js";
-import { useFormValidation as L } from "./use-form-validation.js";
-import { useSharingAction as M } from "./use-sharing-action.js";
-const J = (S, b) => {
+import { useCallback as c } from "react";
+import { useUnifiedShareFormContext as q } from "../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as M } from "../contexts/unified-share-modal-context.js";
+import { useFormValidation as O } from "./use-form-validation.js";
+import { useSharingAction as P } from "./use-sharing-action.js";
+import { parseEmails as k } from "../utils/email.js";
+const Q = (U, w) => {
   const {
-    errors: C,
-    setFieldError: a,
-    validateCollaborationLimit: i,
-    validateUserContact: g,
-    validateUserSelector: l
-  } = L(), {
-    config: F,
-    contactService: U
-  } = j(), {
-    collaborationLimit: n
-  } = F, {
-    collaborationRole: x,
-    form: y,
+    errors: g,
+    setFieldError: r,
+    validateCollaborationLimit: l,
+    validateUserContact: C,
+    validateUserSelector: u
+  } = O(), {
+    config: x,
+    contactService: E
+  } = M(), {
+    collaborationLimit: s
+  } = x, {
+    collaborationRole: y,
+    form: V,
     messageValue: R,
-    setContactValue: u,
-    setMessageValue: V,
-    setUserContacts: r,
-    shieldRestriction: m,
-    userContacts: e
-  } = I(), {
-    onAction: w
-  } = M(S, b), {
-    getContactByEmail: f
-  } = U, h = () => {
-    r([]), u(""), V(""), a("user-contact", "");
-  }, A = s((t) => {
-    i(e, n) || a("user-contact", ""), u(t);
-  }, [n, u, a, e, i]), p = s(async (t) => {
-    if (t.id)
-      return t;
-    if (f) {
-      const o = await f(t.value);
-      if (o && o.id)
-        return o;
-    }
-    return g(t.value) ? null : {
-      email: t.value,
+    setContactValue: m,
+    setMessageValue: L,
+    setUserContacts: d,
+    shieldRestriction: f,
+    userContacts: o
+  } = q(), {
+    onAction: A
+  } = P(U, w), {
+    getContactsByEmail: p
+  } = E, v = () => {
+    d([]), m(""), L(""), r("user-contact", "");
+  }, B = c((t) => {
+    l(o, s) || r("user-contact", ""), m(t);
+  }, [s, m, r, o, l]), S = c(async (t) => {
+    const a = t.filter((e) => e.id === void 0).map((e) => e.value);
+    let i = {};
+    return p && a.length > 0 && (i = await p(a) ?? {}), t.map((e) => e.id !== void 0 ? e : i[e.value] || {
+      email: e.value,
       id: 0,
       isExternalUser: !0,
-      name: t.value,
-      value: t.value
-    };
-  }, [f, g]), d = s(async (t) => {
-    if (a("user-contact", ""), l(t), n && i(t, n), e.length >= t.length) {
-      r(t);
-      return;
+      name: e.value,
+      value: e.value
+    });
+  }, [p]), h = c(async (t) => {
+    r("user-contact", ""), u(t);
+    let a;
+    if (t.length < o.length)
+      a = t;
+    else if (t[t.length - 1].id !== void 0)
+      a = [...o, t[t.length - 1]];
+    else {
+      const i = t[t.length - 1].value, e = k(i);
+      if (e.length === 0) {
+        C(i);
+        return;
+      }
+      const b = new Set(o.filter((n) => !!n.email).map((n) => n.email.toLowerCase())), T = e.filter((n) => {
+        const F = n.toLowerCase();
+        return b.has(F) ? !1 : (b.add(F), !0);
+      }), j = await S(T.map((n) => ({
+        value: n
+      })));
+      a = [...o, ...j];
     }
-    const [o, v] = [t.slice(0, -1), t[t.length - 1]], c = await p(v), E = c ? [...o, c] : o;
-    r(E.filter(Boolean));
-  }, [n, p, a, r, i, l, e]), B = s((t) => {
-    const o = t.relatedTarget?.closest(".collaboration-user-selector");
-    document.querySelector('div[role="listbox"][aria-labelledby^="user-contacts"]')?.contains(t.relatedTarget) || o || e.some((c) => c.email === t.target.value) || d([...e, {
-      value: t.target.value
+    s && l(a, s), d(a);
+  }, [s, S, r, d, o, l, C, u]), I = c((t) => {
+    const a = t.relatedTarget?.closest(".collaboration-user-selector");
+    if (document.querySelector('div[role="listbox"][aria-labelledby^="user-contacts"]')?.contains(t.relatedTarget) || a)
+      return;
+    const e = t.target.value.trim();
+    e && h([...o, {
+      value: e
     }]);
-  }, [d, e]);
+  }, [h, o]);
   return {
-    errors: C,
-    handleFormReset: h,
+    errors: g,
+    handleFormReset: v,
     handleFormSubmit: async () => {
-      if (C["user-contact"] || l(e))
+      if (g["user-contact"] || u(o))
         return !0;
       const t = {
-        contacts: e,
+        contacts: o,
         message: R
       };
-      return y === "invite" && (t.role = x.id), m.isJustificationAllowed && (t.justificationReason = m.justificationReason, t.classificationId = m.classificationId), await w(t), h(), !1;
+      return V === "invite" && (t.role = y.id), f.isJustificationAllowed && (t.justificationReason = f.justificationReason, t.classificationId = f.classificationId), await A(t), v(), !1;
     },
-    handleSelectedUsersChange: d,
-    handleUserSelectorBlur: B,
-    updateContactValue: A
+    handleSelectedUsersChange: h,
+    handleUserSelectorBlur: I,
+    updateContactValue: B
   };
 };
 export {
-  J as useCollaborationForm
+  Q as useCollaborationForm
 };

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

@@ -0,0 +1,8 @@
+import { isEmailValid as r } from "./validation.js";
+const s = /[\s,;<>()[\]/\\"]+/;
+function l(i) {
+  return i ? i.split(s).filter(r) : [];
+}
+export {
+  l as parseEmails
+};

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

@@ -1,29 +1,31 @@
 import { getAvatarBadgeSize as a, getDefaultCollaborationRole as t, getFirstInitial as r, isCollaboratorRestricted as s, isCollaboratorRoleSupported as i, isInvitationRoleSupported as d } from "./collaborator.js";
-import { formatDateFromTimestampToCalendarDate as l, formatDateFromTimestampToDateString as m, formatTomorrowDateToCalendarDate as C } from "./date.js";
-import { callOnKeyboardEvent as f } from "./event.js";
-import { getUpdatedLinkSettingsFormData as w } from "./form.js";
-import { getAllowedAccessLevels as x, getAllowedPermissionLevels as P } from "./permission.js";
-import { doesPasswordContainInvalidCharacter as c, doesPasswordContainLetter as v, doesPasswordContainMinCharacters as S, doesPasswordContainMixedCase as T, doesPasswordContainNumber as u, doesPasswordContainSymbol as A, isEmailValid as F, isVanityNameValid as L } from "./validation.js";
+import { formatDateFromTimestampToCalendarDate as n, formatDateFromTimestampToDateString as m, formatTomorrowDateToCalendarDate as p } from "./date.js";
+import { parseEmails as f } from "./email.js";
+import { callOnKeyboardEvent as w } from "./event.js";
+import { getUpdatedLinkSettingsFormData as D } from "./form.js";
+import { getAllowedAccessLevels as b, getAllowedPermissionLevels as c } from "./permission.js";
+import { doesPasswordContainInvalidCharacter as S, doesPasswordContainLetter as T, doesPasswordContainMinCharacters as u, doesPasswordContainMixedCase as A, doesPasswordContainNumber as F, doesPasswordContainSymbol as L, isEmailValid as R, isVanityNameValid as y } from "./validation.js";
 export {
-  f as callOnKeyboardEvent,
-  c as doesPasswordContainInvalidCharacter,
-  v as doesPasswordContainLetter,
-  S as doesPasswordContainMinCharacters,
-  T as doesPasswordContainMixedCase,
-  u as doesPasswordContainNumber,
-  A as doesPasswordContainSymbol,
-  l as formatDateFromTimestampToCalendarDate,
+  w as callOnKeyboardEvent,
+  S as doesPasswordContainInvalidCharacter,
+  T as doesPasswordContainLetter,
+  u as doesPasswordContainMinCharacters,
+  A as doesPasswordContainMixedCase,
+  F as doesPasswordContainNumber,
+  L as doesPasswordContainSymbol,
+  n as formatDateFromTimestampToCalendarDate,
   m as formatDateFromTimestampToDateString,
-  C as formatTomorrowDateToCalendarDate,
-  x as getAllowedAccessLevels,
-  P as getAllowedPermissionLevels,
+  p as formatTomorrowDateToCalendarDate,
+  b as getAllowedAccessLevels,
+  c as getAllowedPermissionLevels,
   a as getAvatarBadgeSize,
   t as getDefaultCollaborationRole,
   r as getFirstInitial,
-  w as getUpdatedLinkSettingsFormData,
+  D as getUpdatedLinkSettingsFormData,
   s as isCollaboratorRestricted,
   i as isCollaboratorRoleSupported,
-  F as isEmailValid,
+  R as isEmailValid,
   d as isInvitationRoleSupported,
-  L as isVanityNameValid
+  y as isVanityNameValid,
+  f as parseEmails
 };

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

@@ -9,7 +9,7 @@ export declare const mockConfiguration: Configuration;
 export declare const mockContacts: UserContactType[];
 export declare const mockContactService: {
     getContacts: (input: any) => Promise<UserContactType[]>;
-    getContactByEmail: (email: any) => Promise<UserContactType>;
+    getContactsByEmail: (emails: string[]) => Promise<Record<string, UserContactType>>;
 };
 export declare const mockClassification: {
     colorId: number;

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

@@ -395,11 +395,11 @@ export interface EventService {
 }
 export interface ContactService {
     /**
-     * Function to retrieve a contact by email address.
+     * Function to retrieve contacts by email addresses.
      *
-     * Called when the user enters a value that is not in the suggested contacts.
+     * Called when the user enters values that are not in the suggested contacts.
      */
-    getContactByEmail?: (email: string) => Promise<UserContactType | void>;
+    getContactsByEmail?: (emails: string[]) => Promise<Record<string, UserContactType>>;
     /**
      * Function to retrieve a list of suggested contacts.
      *

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

@@ -0,0 +1,5 @@
+/**
+ * Extracts valid email addresses from a string.
+ * Splits on common delimiters and validates each token.
+ */
+export declare function parseEmails(text: string): string[];

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

@@ -1,5 +1,6 @@
 export * from './collaborator';
 export * from './date';
+export * from './email';
 export * from './event';
 export * from './form';
 export * from './permission';

package/package.json

@@ -1,22 +1,22 @@
 {
     "name": "@box/unified-share-modal",
-    "version": "1.55.0",
+    "version": "2.0.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^12.138.0",
-        "@box/blueprint-web-assets": "^4.101.7",
-        "@box/copy-input": "^1.34.0",
-        "@box/user-selector": "^1.68.0",
+        "@box/blueprint-web": "^13.0.0",
+        "@box/blueprint-web-assets": "^4.101.9",
+        "@box/copy-input": "^1.34.2",
+        "@box/user-selector": "^1.68.2",
         "lodash": "^4.17.15",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.138.0",
-        "@box/blueprint-web-assets": "^4.101.7",
-        "@box/copy-input": "^1.34.0",
-        "@box/storybook-utils": "0.16.44",
+        "@box/blueprint-web": "^13.0.0",
+        "@box/blueprint-web-assets": "^4.101.9",
+        "@box/copy-input": "^1.34.2",
+        "@box/storybook-utils": "0.16.46",
         "@box/eslint-plugin-blueprint": "1.0.5",
         "react-intl": "^6.4.2"
     },