@box/unified-share-modal 1.30.1 → 1.31.0

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

@@ -1,128 +1,170 @@
-import { useRef as X, useEffect as Y, useCallback as g } from "react";
-import { createPortal as Z } from "react-dom";
-import { useIntl as $ } from "react-intl";
-import { useUniqueId as ee, useLabelable as te, Tooltip as oe, Focusable as ae, Modal as m } from "@box/blueprint-web";
-import { UserSelectorContainer as ne } from "@box/user-selector";
-import { CollaborationRole as re } from "./collaboration-role.js";
-import { SharedWithAvatars as ie } from "./shared-with-avatars.js";
-import { TextAreaContainer as le } from "./text-area-container.js";
-import { COLLABORATION_MESSAGE_CHARACTER_LIMIT as se } from "../../../constants.js";
-import t from "./messages.js";
-import { jsxs as u, jsx as o, Fragment as ce } from "react/jsx-runtime";
-import { useCollaborationForm as me } from "../../../hooks/use-collaboration-form.js";
-import { useUnifiedShareFormContext as ue } from "../../../contexts/unified-share-form-context.js";
-import { useUnifiedShareModalContext as de } from "../../../contexts/unified-share-modal-context.js";
-import '../../../../../styles/collaboration-section.css';const fe = "_container_1o05j_2", be = "_label_1o05j_8", B = {
-  container: fe,
-  label: be
+import { useState as se, useRef as le, useEffect as T, useCallback as U } from "react";
+import { createPortal as ce } from "react-dom";
+import { useIntl as de } from "react-intl";
+import { useNotification as ue, useUniqueId as me, useLabelable as fe, Tooltip as he, Focusable as pe, Modal as m } from "@box/blueprint-web";
+import { UserSelectorContainer as be } from "@box/user-selector";
+import { CollaborationRole as Ce } from "./collaboration-role.js";
+import { SharedWithAvatars as ge } from "./shared-with-avatars.js";
+import { ShieldRestrictionNotice as ve } from "./shield-restriction-notice.js";
+import { TextAreaContainer as Se } from "./text-area-container.js";
+import { COLLABORATION_MESSAGE_CHARACTER_LIMIT as Le } from "../../../constants.js";
+import o from "./messages.js";
+import { jsxs as f, jsx as r, Fragment as Fe } from "react/jsx-runtime";
+import { useFormValidation as Ue } from "../../../hooks/use-form-validation.js";
+import { useCollaborationForm as Ae } from "../../../hooks/use-collaboration-form.js";
+import { useUnifiedShareFormContext as Be } from "../../../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as Ve } from "../../../contexts/unified-share-modal-context.js";
+import '../../../../../styles/collaboration-section.css';const ye = "_container_1o05j_2", Ee = "_label_1o05j_8", x = {
+  container: ye,
+  label: Ee
 };
-function xe() {
+function He() {
   const {
-    formatMessage: e
-  } = $(), {
-    contactValue: I,
-    container: d,
-    onModalOpenChange: S,
-    onShareViewChange: f,
-    shareView: a,
-    userContacts: F
+    formatMessage: t
+  } = de(), [h, A] = se(), {
+    addNotification: N
   } = ue(), {
-    config: i,
-    contactService: T,
-    isFetching: _,
-    isSubmitting: x,
-    item: E,
-    sharingService: P
-  } = de(), {
-    permissions: k = {},
-    type: O
-  } = E, {
-    getContacts: b,
-    getContactsAvatarUrls: h
-  } = T, {
-    sendInvitations: V,
-    sendSharedLink: y
-  } = P;
-  let p, C;
-  a === "invite" && (p = V, C = "invite-collaborators"), a === "email" && (p = y, C = "email-shared-link");
+    validateShieldRestriction: _
+  } = Ue(), {
+    contactValue: P,
+    container: p,
+    onModalOpenChange: B,
+    onShareViewChange: b,
+    setUserContacts: k,
+    shareView: i,
+    userContacts: n
+  } = Be(), {
+    collaborationNotices: M,
+    config: C,
+    contactService: O,
+    isFetching: w,
+    isSubmitting: j,
+    item: D,
+    sharingService: G
+  } = Ve(), {
+    permissions: W = {},
+    type: q
+  } = D, {
+    getContacts: g,
+    getContactsAvatarUrls: v
+  } = O, {
+    sendInvitations: H,
+    sendSharedLink: K
+  } = G;
+  let S, L;
+  i === "invite" && (S = H, L = "invite-collaborators"), i === "email" && (S = K, L = "email-shared-link");
   const {
-    errors: M,
-    handleFormReset: L,
-    handleFormSubmit: R,
-    handleSelectedUsersChange: N,
-    handleUserSelectorBlur: w,
-    isFormSubmitting: j,
-    updateContactValue: D
-  } = me(p, C), r = a === "default" || a === "invite", l = a === "invite" || a === "email", v = x ?? j, U = X(a === "email" ? "email" : "invite");
-  Y(() => {
-    U.current = a === "email" ? "email" : "invite";
-  }, [a]);
-  const W = g((n) => (n.stopPropagation(), !0), []), q = g((n) => b ? b(n, U.current) : Promise.resolve([]), [b]), G = g((n) => h ? h(n) : Promise.resolve({}), [h]), H = (n) => {
-    l || f("invite"), D(n);
-  }, K = () => {
-    L(), f("default");
-  }, z = async () => {
-    await R() || (L(), S && S(!1), f("default"));
+    errors: $,
+    handleFormReset: V,
+    handleFormSubmit: z,
+    handleSelectedUsersChange: y,
+    handleUserSelectorBlur: J,
+    isFormSubmitting: Q,
+    updateContactValue: X
+  } = Ae(S, L), a = i === "default" || i === "invite", s = i === "invite" || i === "email", l = j ?? Q, E = le(i === "email" ? "email" : "invite");
+  T(() => {
+    E.current = i === "email" ? "email" : "invite";
+  }, [i]), T(() => {
+    (!n.length || !n.some((e) => e.chipVariant === "error")) && A(null);
+  }, [n]);
+  const Y = U((e) => (e.stopPropagation(), !0), []), Z = U((e) => g ? g(e, E.current) : Promise.resolve([]), [g]), ee = U((e) => v ? v(e) : Promise.resolve({}), [v]), te = (e) => {
+    s || b("invite"), X(e);
+  }, oe = () => {
+    V(), b("default");
+  }, re = async () => {
+    try {
+      if (h) {
+        const e = _(n);
+        if (e) {
+          N({
+            closeButtonAriaLabel: t(o.closeButton),
+            sensitivity: "foreground",
+            styledText: e,
+            typeIconAriaLabel: t(o.errorNoticeIconAriaLabel),
+            variant: "error"
+          });
+          return;
+        }
+      }
+      if (await z())
+        return;
+      V(), B && B(!1), b("default");
+    } catch (e) {
+      if (!e.shieldRestriction)
+        return;
+      const {
+        shieldRestriction: F
+      } = e, R = [...F.restrictedEmails ?? [], ...F.restrictedGroups ?? []], ae = n.map((u) => R.includes(u.email) || R.includes(`${u.id}`) ? {
+        ...u,
+        chipVariant: "error"
+      } : u);
+      A(F), k(ae);
+    }
   };
-  let s, c = !1;
-  r && !k.canInviteCollaborator && (s = e(t.inviteDisabledTooltip), c = !0), r && O === "web_link" && (s = e(t.inviteWebLinkDisabledTooltip), c = !0);
-  const A = ee("user-contacts-"), J = e(r ? t.invitePeopleLabel : t.emailSharedLinkLabel), Q = te(J, A);
-  return /* @__PURE__ */ u("form", {
-    className: B.container,
-    onSubmit: (n) => n.preventDefault(),
-    children: [i.collaborationNotices, /* @__PURE__ */ u("div", {
-      children: [r && i.collaborators && /* @__PURE__ */ o(ie, {}), /* @__PURE__ */ o(Q, {
-        className: B.label
-      }), /* @__PURE__ */ o(oe, {
-        content: s,
+  let c, d = !1;
+  a && !W.canInviteCollaborator && (c = t(o.inviteDisabledTooltip), d = !0), a && q === "web_link" && (c = t(o.inviteWebLinkDisabledTooltip), d = !0);
+  const I = me("user-contacts-"), ie = t(a ? o.invitePeopleLabel : o.emailSharedLinkLabel), ne = fe(ie, I);
+  return /* @__PURE__ */ f("form", {
+    className: x.container,
+    onSubmit: (e) => e.preventDefault(),
+    children: [h && /* @__PURE__ */ r(ve, {
+      error: h,
+      isLoading: l,
+      onSelectedUsersChange: y
+    }), M, /* @__PURE__ */ f("div", {
+      children: [a && C.collaborators && /* @__PURE__ */ r(ge, {}), /* @__PURE__ */ r(ne, {
+        className: x.label
+      }), /* @__PURE__ */ r(he, {
+        content: c,
         "data-testid": "user-contacts-tooltip",
-        open: s ? void 0 : !1,
+        open: c ? void 0 : !1,
         side: "bottom",
-        children: /* @__PURE__ */ o(ae, {
-          focusable: c,
-          children: /* @__PURE__ */ o(ne, {
+        children: /* @__PURE__ */ r(pe, {
+          focusable: d,
+          children: /* @__PURE__ */ r(be, {
             className: "collaboration-user-selector",
-            clearButtonAriaLabel: e(t.clearButton),
+            clearButtonAriaLabel: t(o.clearButton),
             clearOnBlur: !1,
-            disabled: c || v,
-            error: M["user-contact"],
-            fetchAvatarUrls: G,
-            fetchUsers: q,
-            hideOnEscape: W,
-            idForLabel: A,
-            inputValue: I,
+            disabled: d || l,
+            displayChipVariant: (e) => e.chipVariant,
+            error: $["user-contact"],
+            fetchAvatarUrls: ee,
+            fetchUsers: Z,
+            hideOnEscape: Y,
+            idForLabel: I,
+            inputValue: P,
             label: null,
-            onBlur: w,
-            onInputValueChange: H,
-            onSelectedUsersChange: N,
-            placeholder: F.length ? "" : e(t.invitePeoplePlaceholder),
-            portalElement: d,
-            selectedUsers: F,
+            onBlur: J,
+            onInputValueChange: te,
+            onSelectedUsersChange: y,
+            placeholder: n.length ? "" : t(o.invitePeoplePlaceholder),
+            portalElement: p,
+            selectedUsers: n,
             selectOnEnterOrTab: !0,
-            variant: l ? "textarea" : "input"
+            variant: s ? "textarea" : "input"
           })
         })
-      }), r && i.collaborationRole && /* @__PURE__ */ o(re, {})]
-    }), l && i.collaborationMessage && /* @__PURE__ */ o(le, {
-      maxCount: se
-    }), l && d && /* @__PURE__ */ Z(/* @__PURE__ */ u(ce, {
-      children: [!_ && /* @__PURE__ */ u(m.Footer, {
-        children: [/* @__PURE__ */ o(m.Footer.SecondaryButton, {
-          disabled: v,
-          onClick: K,
-          children: e(t.cancelButton)
-        }), /* @__PURE__ */ o(m.Footer.PrimaryButton, {
-          loading: v,
-          loadingAriaLabel: e(t.loadingLabel),
-          onClick: z,
-          children: e(t.sendButton)
+      }), a && C.collaborationRole && /* @__PURE__ */ r(Ce, {})]
+    }), s && C.collaborationMessage && /* @__PURE__ */ r(Se, {
+      maxCount: Le
+    }), s && p && /* @__PURE__ */ ce(/* @__PURE__ */ f(Fe, {
+      children: [!w && /* @__PURE__ */ f(m.Footer, {
+        children: [/* @__PURE__ */ r(m.Footer.SecondaryButton, {
+          disabled: l,
+          onClick: oe,
+          children: t(o.cancelButton)
+        }), /* @__PURE__ */ r(m.Footer.PrimaryButton, {
+          loading: l,
+          loadingAriaLabel: t(o.loadingLabel),
+          onClick: re,
+          children: t(o.sendButton)
         })]
-      }), /* @__PURE__ */ o(m.Close, {
-        "aria-label": e(t.closeButton)
+      }), /* @__PURE__ */ r(m.Close, {
+        "aria-label": t(o.closeButton)
       })]
-    }), d)]
+    }), p)]
   });
 }
 export {
-  xe as CollaborationSection
+  He as CollaborationSection
 };

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

@@ -1,5 +1,5 @@
 import { defineMessages as e } from "react-intl";
-const o = e({
+const a = e({
   cancelButton: {
     id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.cancelButton",
     defaultMessage: "Cancel"
@@ -91,8 +91,44 @@ const o = e({
   inviteWebLinkDisabledTooltip: {
     id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.inviteWebLinkDisabledTooltip",
     defaultMessage: "Collaborators cannot be added to bookmarks"
+  },
+  justifiableContactRestrictionNotice: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.justifiableContactRestrictionNotice",
+    defaultMessage: "This content requires a business justification for {count, plural, one {{count} invitation} other {{count} invitations}}. Please select a business justification below. {justificationSelect} {removeLink}"
+  },
+  justifiableContactRestrictionRemoveButtonLabel: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.justifiableContactRestrictionRemoveButtonLabel",
+    defaultMessage: "Alternatively, remove to continue"
+  },
+  contactRestrictionNotice: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.contactRestrictionNotice",
+    defaultMessage: "{count, plural, one {{count} invitation} other {{count} invitations}} cannot be sent because external collaboration is restricted due to the applied security policy. {removeLink}"
+  },
+  contactRestrictionInformationBarrierNotice: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.contactRestrictionInformationBarrierNotice",
+    defaultMessage: "{count, plural, one {{count} invitation} other {{count} invitations}} cannot be sent due to a security policy. {removeLink}"
+  },
+  contactRestrictionRemoveButtonLabel: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.contactRestrictionRemoveButtonLabel",
+    defaultMessage: "Remove to continue"
+  },
+  justificationSelectPlaceholder: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.justificationSelectPlaceholder",
+    defaultMessage: "Select Justification"
+  },
+  loadingJustificationReasonsLabel: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.loadingJustificationReasonsLabel",
+    defaultMessage: "Loading justification reasons"
+  },
+  errorNoticeIconAriaLabel: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.errorNoticeIconAriaLabel",
+    defaultMessage: "Error"
+  },
+  businessJustification: {
+    id: "groupSharedFeatures.usm.unifiedShareFormModal.collaborationSection.businessJustification",
+    defaultMessage: "Business Justification"
   }
 });
 export {
-  o as default
+  a as default
 };

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

@@ -0,0 +1,128 @@
+import K from "lodash/partition";
+import { useState as C, useEffect as S } from "react";
+import { useIntl as O, FormattedMessage as P } from "react-intl";
+import { LoadingIndicator as z, Select as m, Link as G, InlineNotice as T } from "@box/blueprint-web";
+import t from "./messages.js";
+import { jsx as i } from "react/jsx-runtime";
+import { isCollaboratorRestricted as V } from "../../../utils/collaborator.js";
+import { useUnifiedShareFormContext as q } from "../../../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as H } from "../../../contexts/unified-share-modal-context.js";
+import { callOnKeyboardEvent as Q } from "../../../utils/event.js";
+import '../../../../../styles/shield-restriction-notice.css';const W = "_select_27xpi_1", X = "_link_27xpi_5", k = {
+  select: W,
+  link: X
+};
+function ct({
+  error: L,
+  isLoading: d,
+  onSelectedUsersChange: J
+}) {
+  const {
+    formatMessage: s
+  } = O(), [j, h] = C(!1), [a, I] = C([]), {
+    setShieldRestriction: o,
+    setUserContacts: N,
+    shieldRestriction: x,
+    userContacts: y
+  } = q(), {
+    eventService: _,
+    item: R,
+    contactService: w
+  } = H(), {
+    getJustificationReasons: r
+  } = w, {
+    onRestrictedUsersRemoveClick: g
+  } = _, {
+    isJustificationAllowed: c,
+    restrictionType: A,
+    restrictedEmails: v = [],
+    restrictedGroups: b = []
+  } = L, l = [...v, ...b];
+  S(() => (c && o({
+    isJustificationAllowed: !0
+  }), () => {
+    o({
+      isJustificationAllowed: !1
+    });
+  }), [c, o]), S(() => {
+    (async () => {
+      if (!(!r || a.length))
+        try {
+          h(!0);
+          const {
+            classificationId: n,
+            options: u
+          } = await r(R);
+          o({
+            classificationId: n
+          }), I(u);
+        } finally {
+          h(!1);
+        }
+    })();
+  }, [R, r, c, a, o]);
+  const B = c ? t.justifiableContactRestrictionRemoveButtonLabel : t.contactRestrictionRemoveButtonLabel, p = () => {
+    const [e, n] = K(y, (u) => V(u, v, b));
+    J(n), N(n), g && g(e);
+  }, F = (e) => {
+    o({
+      justificationReason: a.find((n) => n.id === e)
+    });
+  }, M = j ? /* @__PURE__ */ i(z, {
+    "aria-label": s(t.loadingJustificationReasonsLabel),
+    size: "small"
+  }) : /* @__PURE__ */ i(m, {
+    className: k.select,
+    hideLabel: !0,
+    label: s(t.businessJustification),
+    onValueChange: F,
+    placeholder: s(t.justificationSelectPlaceholder),
+    value: x.justificationReason?.id,
+    children: /* @__PURE__ */ i(m.Content, {
+      align: "start",
+      children: a.map((e) => /* @__PURE__ */ i(m.Option, {
+        text: e.title,
+        value: e.id
+      }, e.id))
+    })
+  }), f = /* @__PURE__ */ i(G, {
+    "aria-disabled": d,
+    className: k.link,
+    onClick: p,
+    onKeyDown: Q(p, {
+      canPreventDefault: !0
+    }),
+    role: "button",
+    tabIndex: d ? -1 : 0,
+    children: s(B)
+  }), U = () => A === "information_barrier" ? {
+    message: t.contactRestrictionInformationBarrierNotice,
+    count: l.length,
+    removeLink: f
+  } : c && a?.length > 0 ? {
+    message: t.justifiableContactRestrictionNotice,
+    count: l.length,
+    justificationSelect: M,
+    removeLink: f
+  } : {
+    message: t.contactRestrictionNotice,
+    count: l.length,
+    removeLink: f
+  }, {
+    message: E,
+    ...D
+  } = U();
+  return /* @__PURE__ */ i(T, {
+    icon: () => null,
+    role: "alert",
+    variant: "error",
+    variantIconAriaLabel: s(t.errorNoticeIconAriaLabel),
+    children: /* @__PURE__ */ i(P, {
+      ...E,
+      values: D
+    })
+  });
+}
+export {
+  ct as ShieldRestrictionNotice
+};

package/dist/esm/lib/contexts/unified-share-form-context.js

@@ -1,41 +1,48 @@
-import { createContext as S, useContext as v, useState as e, useMemo as b } from "react";
-import { jsx as P } from "react/jsx-runtime";
-const l = /* @__PURE__ */ S({}), R = () => {
-  const t = v(l);
-  if (!t)
+import { createContext as P, useContext as p, useState as t, useCallback as V, useMemo as j } from "react";
+import { jsx as k } from "react/jsx-runtime";
+const x = /* @__PURE__ */ P({}), q = () => {
+  const e = p(x);
+  if (!e)
     throw new Error("useUnifiedShareFormContext must be used with UnifiedShareFormProvider");
-  return t;
-}, V = ({
-  children: t,
+  return e;
+}, w = ({
+  children: e,
   container: o,
-  initialContacts: x,
-  onModalOpenChange: r,
-  onModalViewChange: s,
+  initialContacts: f,
+  onModalOpenChange: s,
+  onModalViewChange: r,
   onShareViewChange: n,
-  shareView: c
+  shareView: i
 }) => {
-  const [u, f] = e(x), [a, d] = e(""), [i, C] = e(""), [m, U] = e(), F = b(() => ({
-    collaborationRole: m,
+  const [c, h] = t(f), [a, C] = t(""), [l, S] = t(""), [u, R] = t(), [d, U] = t({}), m = V((b) => {
+    U((v) => ({
+      ...v,
+      ...b
+    }));
+  }, []), F = j(() => ({
+    collaborationRole: u,
     contactValue: a,
     container: o,
-    messageValue: i,
-    onModalOpenChange: r,
-    onModalViewChange: s,
+    messageValue: l,
+    onModalOpenChange: s,
+    onModalViewChange: r,
     onShareViewChange: n,
-    setCollaborationRole: U,
-    setContactValue: d,
-    setMessageValue: C,
-    setUserContacts: f,
-    shareView: c,
-    userContacts: u
-  }), [m, a, o, i, r, s, n, c, u]);
-  return /* @__PURE__ */ P(l.Provider, {
+    setCollaborationRole: R,
+    setContactValue: C,
+    setMessageValue: S,
+    setShieldRestriction: m,
+    setUserContacts: h,
+    shareView: i,
+    shieldRestriction: d,
+    userContacts: c
+  }), [u, a, o, m, l, s, r, n, i, d, c]);
+  return /* @__PURE__ */ k(x.Provider, {
     value: F,
-    children: t
+    children: e
   });
 };
 export {
-  l as UnifiedShareFormContext,
-  V as UnifiedShareFormProvider,
-  R as useUnifiedShareFormContext
+  x as UnifiedShareFormContext,
+  w as UnifiedShareFormProvider,
+  q as useUnifiedShareFormContext
 };