@box/unified-share-modal 1.32.1 → 1.34.0

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

@@ -1,66 +1,66 @@
 import _ from "clsx";
-import y from "lodash/camelCase";
-import { useState as L, useMemo as k, useEffect as F } from "react";
-import { useIntl as N } from "react-intl";
-import { Tooltip as O, Focusable as $, TriggerButton as D, DropdownMenu as r } from "@box/blueprint-web";
-import j from "../messages.js";
+import L from "lodash/camelCase";
+import { useState as k, useMemo as w, useEffect as q } from "react";
+import { useIntl as F } from "react-intl";
+import { Tooltip as N, Focusable as O, TriggerButton as D, DropdownMenu as r } from "@box/blueprint-web";
+import $ from "../messages.js";
 import n from "./messages.js";
-import { jsx as e, jsxs as z } from "react/jsx-runtime";
-import { isInvitationRoleSupported as A, getDefaultCollaborationRole as P } from "../../../utils/collaborator.js";
-import { useUnifiedShareFormContext as U } from "../../../contexts/unified-share-form-context.js";
-import { useUnifiedShareModalContext as B } from "../../../contexts/unified-share-modal-context.js";
-import '../../../../../styles/collaboration-role.css';const E = "_container_xvspw_1", W = "_overrides_xvspw_5", q = "_focusable_xvspw_10", s = {
-  container: E,
-  overrides: W,
-  focusable: q
+import { jsx as e, jsxs as j } from "react/jsx-runtime";
+import { isInvitationRoleSupported as z, getDefaultCollaborationRole as A } from "../../../utils/collaborator.js";
+import { useUnifiedShareFormContext as P } from "../../../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as U } from "../../../contexts/unified-share-modal-context.js";
+import '../../../../../styles/collaboration-role.css';const B = "_container_1fonq_1", E = "_overrides_1fonq_4", W = "_focusable_1fonq_9", l = {
+  container: B,
+  overrides: E,
+  focusable: W
 };
 function te() {
   const {
     formatMessage: o
-  } = N(), [f, M] = L(!1), {
+  } = F(), [b, M] = k(!1), {
     collaborationRole: u,
     setCollaborationRole: d
-  } = U(), {
+  } = P(), {
     collaborationRoles: g,
     isSubmitting: S,
-    item: w
-  } = B(), {
-    permissions: I = {},
+    item: I
+  } = U(), {
+    permissions: T = {},
     type: m
-  } = w, l = k(() => g.map((i) => {
+  } = I, s = w(() => g.map((i) => {
     const {
       description: p,
       id: t,
       label: c
-    } = i, b = A(t), x = y(t);
-    let h = x;
-    t === "editor" && m === "folder" && (h += "Folder");
+    } = i, f = z(t), h = L(t);
+    let x = h;
+    t === "editor" && m === "folder" && (x += "Folder");
     let C = t, R = "";
-    return b && (C = o(j[`${x}Role`]), R = o(n[`${h}Description`])), {
+    return f && (C = o($[`${h}Role`]), R = o(n[`${x}Description`])), {
       ...i,
       description: p ?? R,
       label: c ?? C
     };
   }), [g, o, m]);
-  if (F(() => {
-    d(P(l));
-  }, [l, d]), !l.length || !u)
+  if (q(() => {
+    d(A(s));
+  }, [s, d]), !s.length || !u)
     return null;
   const {
-    id: T,
+    id: y,
     label: v
   } = u;
   let a;
-  return I.canInviteCollaborator || (a = o(n.inviteDisabledTooltip)), m === "web_link" && (a = o(n.inviteWebLinkDisabledTooltip)), a ? /* @__PURE__ */ e(O, {
+  return T.canInviteCollaborator || (a = o(n.inviteDisabledTooltip)), m === "web_link" && (a = o(n.inviteWebLinkDisabledTooltip)), a ? /* @__PURE__ */ e(N, {
     align: "start",
     content: a,
     "data-testid": "collaboration-role-tooltip",
     side: "bottom",
-    children: /* @__PURE__ */ e($, {
-      className: s.focusable,
+    children: /* @__PURE__ */ e(O, {
+      className: l.focusable,
       children: /* @__PURE__ */ e(D, {
         caretDirection: "down",
-        className: _(s.container, s.overrides),
+        className: _(l.container, l.overrides),
         disabled: !0,
         label: o(n.inviteAsRoleLabel, {
           role: v
@@ -69,13 +69,13 @@ function te() {
         variant: "tertiary"
       })
     })
-  }) : /* @__PURE__ */ z(r.Root, {
+  }) : /* @__PURE__ */ j(r.Root, {
     onOpenChange: M,
-    open: f,
+    open: b,
     children: [/* @__PURE__ */ e(r.Trigger, {
       children: /* @__PURE__ */ e(D, {
-        caretDirection: f ? "up" : "down",
-        className: _(s.container, s.overrides),
+        caretDirection: b ? "up" : "down",
+        className: _(l.container, l.overrides),
         disabled: S,
         label: o(n.inviteAsRoleLabel, {
           role: v
@@ -85,20 +85,20 @@ function te() {
       })
     }), /* @__PURE__ */ e(r.Content, {
       align: "start",
-      children: l.map((i) => {
+      children: s.map((i) => {
         const {
           description: p,
           isDisabled: t,
           id: c,
-          label: b
+          label: f
         } = i;
         return /* @__PURE__ */ e(r.CheckboxItem, {
-          checked: T === c,
+          checked: y === c,
           disabled: t,
           onSelect: () => d(i),
           children: /* @__PURE__ */ e(r.Item.MainContent, {
             caption: p,
-            label: b
+            label: f
           })
         }, c);
       })

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

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