@box/unified-share-modal 2.1.1 → 2.2.0

package/dist/esm/lib/components/unified-share-form-modal/collaboration-section/collaboration-section.js

@@ -1,13 +1,13 @@
-import fe from "clsx";
-import { useState as he, useRef as pe, useEffect as R, useCallback as v } from "react";
+import he from "clsx";
+import { useState as pe, useRef as fe, useEffect as R, useCallback as C } from "react";
 import { createPortal as be } from "react-dom";
 import { useIntl as ge } from "react-intl";
-import { useBlueprintModernization as Ce, useNotification as ve, useUniqueId as Se, useLabelable as Ue, Tooltip as _e, Focusable as ye, Text as Fe, Modal as S } from "@box/blueprint-web";
-import { Globe as Le } from "@box/blueprint-web-assets/icons/Medium";
+import { useBlueprintModernization as Ce, useNotification as ve, useUniqueId as Se, useLabelable as Ue, Tooltip as _e, Focusable as Fe, Text as Le, Modal as v } from "@box/blueprint-web";
+import { Globe as xe } from "@box/blueprint-web-assets/icons/Medium";
 import { bpSize040 as P } from "@box/blueprint-web-assets/tokens/tokens";
-import { UserSelectorContainer as xe } from "@box/user-selector";
-import { CollaborationRole as Be } from "./collaboration-role.js";
-import { SharedWithAvatars as Ee } from "./shared-with-avatars.js";
+import { UserSelectorContainer as ye } from "@box/user-selector";
+import { CollaborationRole as Ee } from "./collaboration-role.js";
+import { SharedWithAvatars as Be } from "./shared-with-avatars.js";
 import { ShieldRestrictionNotice as Ae } from "./shield-restriction-notice.js";
 import { TextAreaContainer as Ne } from "./text-area-container.js";
 import o from "./messages.js";
@@ -16,18 +16,19 @@ import { useFormValidation as Pe } from "../../../hooks/use-form-validation.js";
 import { useCollaborationForm as ke } from "../../../hooks/use-collaboration-form.js";
 import { useUnifiedShareFormContext as Ve } from "../../../contexts/unified-share-form-context.js";
 import { useUnifiedShareModalContext as Ie } from "../../../contexts/unified-share-modal-context.js";
-import '../../../../../styles/collaboration-section.css';const Te = "_container_1e2gg_2", De = "_label_1e2gg_8", Me = "_modernized_1e2gg_15", ze = "_security_1e2gg_33", Oe = "_icon_1e2gg_37", we = "_access_1e2gg_43", c = {
-  container: Te,
-  label: De,
-  modernized: Me,
-  security: ze,
-  icon: Oe,
-  access: we
+import { parseEmails as Te } from "../../../utils/email.js";
+import '../../../../../styles/collaboration-section.css';const De = "_container_1e2gg_2", Me = "_label_1e2gg_8", ze = "_modernized_1e2gg_15", Oe = "_security_1e2gg_33", we = "_icon_1e2gg_37", We = "_access_1e2gg_43", c = {
+  container: De,
+  label: Me,
+  modernized: ze,
+  security: Oe,
+  icon: we,
+  access: We
 };
-function at() {
+function lt() {
   const {
     formatMessage: t
-  } = ge(), [U, B] = he(), {
+  } = ge(), [S, y] = pe(), {
     enableModernizedComponents: k
   } = Ce(), {
     addNotification: V
@@ -35,7 +36,7 @@ function at() {
     validateShieldRestriction: I
   } = Pe(), {
     contactValue: T,
-    containerRef: _,
+    containerRef: U,
     form: n,
     setForm: d,
     setUserContacts: D,
@@ -44,7 +45,7 @@ function at() {
   } = Ve(), {
     collaborationAccess: z,
     collaborationNotices: O,
-    config: f,
+    config: h,
     contactService: w,
     isFetching: W,
     isSubmitting: m,
@@ -56,7 +57,7 @@ function at() {
     permissions: $ = {},
     type: H
   } = j, {
-    getContacts: y,
+    getContacts: _,
     getContactsAvatarUrls: F
   } = w, {
     sendInvitations: J,
@@ -68,27 +69,27 @@ function at() {
     errors: X,
     handleFormReset: E,
     handleFormSubmit: Y,
-    handleSelectedUsersChange: h,
+    handleSelectedUsersChange: p,
     handleUserSelectorBlur: Z,
     updateContactValue: ee
-  } = ke(L, x), te = K === "desktop", u = n === "default" || n === "invite", a = n === "invite" || n === "email", oe = i.some((e) => e.isExternalUser), A = pe(n === "email" ? "email" : "invite");
+  } = ke(L, x), te = K === "desktop", u = n === "default" || n === "invite", a = n === "invite" || n === "email", oe = i.some((e) => e.isExternalUser), B = fe(n === "email" ? "email" : "invite");
   R(() => {
-    A.current = n === "email" ? "email" : "invite";
+    B.current = n === "email" ? "email" : "invite";
   }, [n]), R(() => {
-    (!i.length || !i.some((e) => e.chipVariant === "error")) && B(null);
+    (!i.length || !i.some((e) => e.chipVariant === "error")) && y(null);
   }, [i]);
-  const re = v((e) => (e.stopPropagation(), !0), []), ie = v((e) => y ? y(e, A.current) : Promise.resolve([]), [y]), ne = v((e) => F ? F(e) : Promise.resolve({}), [F]), ae = (e) => {
+  const re = C((e) => (e.stopPropagation(), !0), []), ie = C((e) => _ ? _(e, B.current) : Promise.resolve([]), [_]), ne = C((e) => F ? F(e) : Promise.resolve({}), [F]), ae = (e) => {
     a || d("invite"), ee(e);
-  }, se = v(async (e) => {
-    const s = e.clipboardData.getData("text").trim();
-    s && (i.some((g) => g.email === s) || (e.preventDefault(), a || d("invite"), await h([...i, {
+  }, se = C((e) => {
+    const s = e.clipboardData.getData("text");
+    Te(s).length !== 0 && (e.preventDefault(), a || d("invite"), p([...i, {
       value: s
-    }])));
-  }, [h, a, d, i]), le = () => {
+    }]));
+  }, [p, a, d, i]), le = () => {
     E(), d("default");
   }, ce = async () => {
     try {
-      if (U) {
+      if (S) {
         const e = I(i, M);
         if (e) {
           V({
@@ -109,34 +110,34 @@ function at() {
         return;
       const {
         shieldRestriction: s
-      } = e, g = [...s.restrictedEmails ?? [], ...s.restrictedGroups ?? []], ue = i.map((C) => g.includes(C.email) || g.includes(`${C.id}`) ? {
-        ...C,
+      } = e, N = [...s.restrictedEmails ?? [], ...s.restrictedGroups ?? []], ue = i.map((g) => N.includes(g.email) || N.includes(`${g.id}`) ? {
+        ...g,
         chipVariant: "error"
-      } : C);
-      B(s), D(ue);
+      } : g);
+      y(s), D(ue);
     }
   };
-  let p, b = !1;
-  u && !$.canInviteCollaborator && (p = t(o.inviteDisabledTooltip), b = !0), u && H === "web_link" && (p = t(o.inviteWebLinkDisabledTooltip), b = !0);
-  const N = Se("user-contacts-"), de = t(u ? o.invitePeopleLabel : o.emailSharedLinkLabel), me = Ue(de, N);
+  let f, b = !1;
+  u && !$.canInviteCollaborator && (f = t(o.inviteDisabledTooltip), b = !0), u && H === "web_link" && (f = t(o.inviteWebLinkDisabledTooltip), b = !0);
+  const A = Se("user-contacts-"), de = t(u ? o.invitePeopleLabel : o.emailSharedLinkLabel), me = Ue(de, A);
   return /* @__PURE__ */ l("form", {
     className: c.container,
     onSubmit: (e) => e.preventDefault(),
-    children: [U && /* @__PURE__ */ r(Ae, {
-      error: U,
+    children: [S && /* @__PURE__ */ r(Ae, {
+      error: S,
       isLoading: m,
-      onSelectedUsersChange: h
+      onSelectedUsersChange: p
     }), O, /* @__PURE__ */ l("div", {
-      children: [u && f.collaborators && /* @__PURE__ */ r(Ee, {}), /* @__PURE__ */ r(me, {
-        className: fe(c.label, k && c.modernized)
+      children: [u && h.collaborators && /* @__PURE__ */ r(Be, {}), /* @__PURE__ */ r(me, {
+        className: he(c.label, k && c.modernized)
       }), /* @__PURE__ */ r(_e, {
-        content: p,
+        content: f,
         "data-testid": "user-contacts-tooltip",
-        open: p ? void 0 : !1,
+        open: f ? void 0 : !1,
         side: "bottom",
-        children: /* @__PURE__ */ r(ye, {
+        children: /* @__PURE__ */ r(Fe, {
           focusable: b,
-          children: /* @__PURE__ */ r(xe, {
+          children: /* @__PURE__ */ r(ye, {
             className: "collaboration-user-selector",
             clearButtonAriaLabel: t(o.clearButton),
             clearOnBlur: !1,
@@ -146,15 +147,15 @@ function at() {
             fetchAvatarUrls: ne,
             fetchUsers: ie,
             hideOnEscape: re,
-            idForLabel: N,
+            idForLabel: A,
             inputValue: T,
             label: null,
             onBlur: Z,
             onInputValueChange: ae,
             onPaste: se,
-            onSelectedUsersChange: h,
+            onSelectedUsersChange: p,
             placeholder: i.length ? "" : t(o.invitePeoplePlaceholder),
-            portalElement: _,
+            portalElement: U,
             selectedUsers: i,
             selectOnEnterOrTab: !0,
             variant: a ? "textarea" : "input"
@@ -162,39 +163,39 @@ function at() {
         })
       }), u && /* @__PURE__ */ l("div", {
         className: c.access,
-        children: [f.collaborationRole && /* @__PURE__ */ r(Be, {}), z]
+        children: [h.collaborationRole && /* @__PURE__ */ r(Ee, {}), z]
       })]
-    }), a && f.collaborationMessage && /* @__PURE__ */ r(Ne, {
-      maxCount: f.collaborationMessageLimit
+    }), a && h.collaborationMessage && /* @__PURE__ */ r(Ne, {
+      maxCount: h.collaborationMessageLimit
     }), a && oe && /* @__PURE__ */ l("div", {
       className: c.security,
-      children: [/* @__PURE__ */ r(Le, {
+      children: [/* @__PURE__ */ r(xe, {
         className: c.icon,
         height: P,
         width: P
-      }), /* @__PURE__ */ r(Fe, {
+      }), /* @__PURE__ */ r(Le, {
         as: "span",
         color: "textOnLightSecondary",
         children: t(o.contentSharedWithExternalCollaborators)
       })]
-    }), a && _ && /* @__PURE__ */ be(/* @__PURE__ */ l(Re, {
-      children: [!W && /* @__PURE__ */ l(S.Footer, {
-        children: [/* @__PURE__ */ r(S.Footer.SecondaryButton, {
+    }), a && U && /* @__PURE__ */ be(/* @__PURE__ */ l(Re, {
+      children: [!W && /* @__PURE__ */ l(v.Footer, {
+        children: [/* @__PURE__ */ r(v.Footer.SecondaryButton, {
           disabled: m,
           onClick: le,
           children: t(o.cancelButton)
-        }), /* @__PURE__ */ r(S.Footer.PrimaryButton, {
+        }), /* @__PURE__ */ r(v.Footer.PrimaryButton, {
           loading: m,
           loadingAriaLabel: t(o.loadingLabel),
           onClick: ce,
           children: t(o.sendButton)
         })]
-      }), !m && !te && /* @__PURE__ */ r(S.Close, {
+      }), !m && !te && /* @__PURE__ */ r(v.Close, {
         "aria-label": t(o.closeButton)
       })]
-    }), _)]
+    }), U)]
   });
 }
 export {
-  at as CollaborationSection
+  lt as CollaborationSection
 };

package/dist/esm/lib/components/unified-share-form-modal/collaboration-section/text-area-container.js

@@ -1,52 +1,47 @@
-import { useState as C } from "react";
-import { useIntl as g } from "react-intl";
-import { useUniqueId as p, TextArea as b, Text as A } from "@box/blueprint-web";
+import { useState as g } from "react";
+import { useIntl as f } from "react-intl";
+import { useUniqueId as C, TextArea as p, Text as b } from "@box/blueprint-web";
 import a from "./messages.js";
-import { jsxs as M, jsx as i } from "react/jsx-runtime";
-import { useUnifiedShareModalContext as _ } from "../../../contexts/unified-share-modal-context.js";
-import { useUnifiedShareFormContext as v } from "../../../contexts/unified-share-form-context.js";
-import '../../../../../styles/text-area-container.css';const S = "_textArea_v76md_1", y = "_textCount_v76md_5", u = {
-  textArea: S,
-  textCount: y
+import { jsxs as A, jsx as r } from "react/jsx-runtime";
+import { useUnifiedShareModalContext as M } from "../../../contexts/unified-share-modal-context.js";
+import { useUnifiedShareFormContext as _ } from "../../../contexts/unified-share-form-context.js";
+import '../../../../../styles/text-area-container.css';const v = "_textArea_v76md_1", S = "_textCount_v76md_5", i = {
+  textArea: v,
+  textCount: S
 };
-function q(c) {
+function N(m) {
   const {
     formatMessage: t
-  } = g(), {
+  } = f(), {
     isSubmitting: l
+  } = M(), {
+    messageValue: c,
+    setMessageValue: u
   } = _(), {
-    messageValue: m,
-    setMessageValue: x
-  } = v(), {
     maxCount: e
-  } = c, [o, d] = C(e), s = p("text-count-"), h = (f) => {
-    const n = f.target.value;
-    if (typeof e == "number") {
-      const r = e - n.length;
-      if (r < 0)
-        return;
-      d(r);
-    }
-    x(n);
+  } = m, [o, x] = g(e), s = C("text-count-"), d = (h) => {
+    const n = h.target.value;
+    typeof e == "number" && x(e - n.length), u(n);
   };
-  return /* @__PURE__ */ M("div", {
-    children: [/* @__PURE__ */ i(b, {
-      className: u.textArea,
+  return /* @__PURE__ */ A("div", {
+    children: [/* @__PURE__ */ r(p, {
+      className: i.textArea,
       disabled: l,
       label: t(a.shareMessageLabel),
+      maxLength: e,
       minRows: 3,
-      onChange: h,
+      onChange: d,
       placeholder: t(a.shareMessagePlaceholder),
-      value: m,
+      value: c,
       ...e && {
         "aria-describedby": s
       }
-    }), !!e && /* @__PURE__ */ i(A, {
+    }), !!e && /* @__PURE__ */ r(b, {
       "aria-label": t(a.shareMessageCharacterCountAriaLabel, {
         count: o
       }),
       as: "span",
-      className: u.textCount,
+      className: i.textCount,
       color: "textOnLightSecondary",
       id: s,
       children: o
@@ -54,5 +49,5 @@ function q(c) {
   });
 }
 export {
-  q as TextAreaContainer
+  N as TextAreaContainer
 };

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

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