@box/unified-share-modal 1.36.0 → 1.36.1

package/dist/esm/lib/components/shared-link-settings-modal/shared-link-settings-modal.js

@@ -1,43 +1,43 @@
-import { useState as q, useMemo as G, useEffect as J } from "react";
-import { useIntl as K } from "react-intl";
-import { Modal as t, LoadingIndicator as Q, Text as W, Link as X } from "@box/blueprint-web";
-import { DownloadSection as Y } from "./download-section.js";
-import { ExpirationSection as Z } from "./expiration-section.js";
-import { PasswordSection as $ } from "./password-section.js";
-import { VanitySection as O } from "./vanity-section.js";
+import { useState as R, useMemo as q, useEffect as G } from "react";
+import { useIntl as J } from "react-intl";
+import { Modal as t, LoadingIndicator as K, Text as Q, Link as W } from "@box/blueprint-web";
+import { DownloadSection as X } from "./download-section.js";
+import { ExpirationSection as Y } from "./expiration-section.js";
+import { PasswordSection as Z } from "./password-section.js";
+import { VanitySection as $ } from "./vanity-section.js";
 import s from "./messages.js";
 import { jsx as a, jsxs as w } from "react/jsx-runtime";
-import { useAccessLevels as ee } from "../../hooks/use-access-levels.js";
-import { formatDateFromTimestampToCalendarDate as ae } from "../../utils/date.js";
-import { useLinkSettingsForm as ne } from "../../hooks/use-link-settings-form.js";
-import { useUnifiedShareModalContext as oe } from "../../contexts/unified-share-modal-context.js";
-import '../../../../styles/shared-link-settings-modal.css';const ie = "_content_1r0kk_1", te = "_body_1r0kk_5", se = "_loading_1r0kk_17", f = {
-  content: ie,
-  body: te,
-  loading: se
+import { useAccessLevels as O } from "../../hooks/use-access-levels.js";
+import { formatDateFromTimestampToCalendarDate as ee } from "../../utils/date.js";
+import { useLinkSettingsForm as ae } from "../../hooks/use-link-settings-form.js";
+import { useUnifiedShareModalContext as ne } from "../../contexts/unified-share-modal-context.js";
+import '../../../../styles/shared-link-settings-modal.css';const oe = "_content_1r0kk_1", ie = "_body_1r0kk_5", te = "_loading_1r0kk_17", f = {
+  content: oe,
+  body: ie,
+  loading: te
 };
-function ye({
+function ve({
   isOpen: c,
   onOpenChange: v
 }) {
   const {
     formatMessage: i
-  } = K(), [g, C] = q(!1), {
-    eventService: k,
-    isSubmitting: E,
-    sharedLink: x
-  } = oe(), {
+  } = J(), [g, k] = R(!1), {
+    eventService: E,
+    isSubmitting: x,
+    sharedLink: L
+  } = ne(), {
     expiresAt: m = 0,
     settings: n = {},
-    vanityDomain: L = "",
+    vanityDomain: D = "",
     vanityName: h = ""
-  } = x, {
+  } = L, {
     onSharedLinkSettingsClose: y,
     onSharedLinkSettingsLoad: p
-  } = k, {
-    selectedAccess: D
-  } = ee(), b = G(() => ({
-    expiration: m ? ae(m) : null,
+  } = E, {
+    selectedAccess: N
+  } = O(), b = q(() => ({
+    expiration: m ? ee(m) : null,
     isDownloadEnabled: !!n.isDownloadEnabled,
     isExpirationEnabled: !!m,
     isPasswordEnabled: !!n.isPasswordEnabled,
@@ -47,41 +47,40 @@ function ye({
   }), [m, n, h]), {
     errors: u,
     formData: o,
-    handleFormReset: N,
+    handleFormReset: S,
     handleFormSubmit: F,
     isUpdating: P,
-    setErrors: T,
     setFieldError: r,
     setFieldValue: d,
-    validatePassword: B
-  } = ne(b);
-  J(() => {
-    (async () => p && (c && await p(), C(!c)))();
+    validatePassword: T
+  } = ae(b);
+  G(() => {
+    (async () => p && (c && await p(), k(!c)))();
   }, [c, p]);
-  const S = () => {
-    N(), y && y(), v(!1);
-  }, A = async () => {
-    await F() || (T({}), v(!1));
-  }, _ = (e) => {
+  const C = () => {
+    S(), y && y(), v(!1);
+  }, B = async () => {
+    await F() || (S(), v(!1));
+  }, A = (e) => {
     r("expiration", void 0), d("isExpirationEnabled", e);
-  }, V = (e) => {
+  }, _ = (e) => {
     r("expiration", void 0), d("expiration", e);
-  }, M = (e) => {
+  }, V = (e) => {
     r("vanityName", void 0), d("isVanityNameEnabled", e);
-  }, I = (e) => {
+  }, M = (e) => {
     r("vanityName", void 0), d("vanityName", e.target.value);
-  }, j = (e) => {
+  }, I = (e) => {
     r("password", void 0), d("isPasswordEnabled", e);
-  }, z = (e) => {
+  }, j = (e) => {
     r("password", void 0), d("password", e.target.value);
-  }, U = (e) => {
+  }, z = (e) => {
     d("isDownloadEnabled", e);
-  }, H = (e) => {
-    const R = document.getElementById("usm-SharedLinkSettingsModal-primaryButton")?.contains(e.relatedTarget);
-    b.isPasswordEnabled && !o.password || R || B(o.password);
-  }, l = E || P;
+  }, U = (e) => {
+    const H = document.getElementById("usm-SharedLinkSettingsModal-primaryButton")?.contains(e.relatedTarget);
+    b.isPasswordEnabled && !o.password || H || T(o.password);
+  }, l = x || P;
   return /* @__PURE__ */ a(t, {
-    onOpenChange: S,
+    onOpenChange: C,
     open: c,
     children: /* @__PURE__ */ w(t.Content, {
       className: f.content,
@@ -93,68 +92,68 @@ function ye({
         inert: g ? "" : null,
         children: [g && /* @__PURE__ */ a("div", {
           className: f.loading,
-          children: /* @__PURE__ */ a(Q, {
+          children: /* @__PURE__ */ a(K, {
             "aria-label": i(s.loadingLabel),
             size: "large"
           })
-        }), /* @__PURE__ */ a(W, {
+        }), /* @__PURE__ */ a(Q, {
           as: "p",
           color: "textOnLightSecondary",
           children: i(s.subtitle, {
-            learnSharedLinkSettingsLink: /* @__PURE__ */ a(X, {
+            learnSharedLinkSettingsLink: /* @__PURE__ */ a(W, {
               href: "https://support.box.com/hc/en-us/articles/360043697554-Configuring-Individual-Shared-Link-Settings",
               rel: "noreferrer",
               target: "_blank",
               children: i(s.learnSharedLinkSettingsLink)
             })
           })
-        }), /* @__PURE__ */ a(Z, {
+        }), /* @__PURE__ */ a(Y, {
           canChange: !!n.canChangeExpiration,
           error: u.expiration,
           expiration: o.expiration,
           isChecked: o.isExpirationEnabled,
           isDisabled: l,
-          onChange: V,
-          onToggle: _
-        }), /* @__PURE__ */ a($, {
+          onChange: _,
+          onToggle: A
+        }), /* @__PURE__ */ a(Z, {
           canChange: !!n.canChangePassword,
           error: u.password,
-          isAvailable: n.isPasswordAvailable && D?.id === "open",
+          isAvailable: n.isPasswordAvailable && N?.id === "open",
           isChecked: o.isPasswordEnabled,
           isDefaultChecked: b.isPasswordEnabled,
           isDisabled: l,
-          onBlur: H,
-          onChange: z,
+          onBlur: U,
+          onChange: j,
           onFocus: () => r("password", void 0),
-          onToggle: j,
+          onToggle: I,
           password: o.password
-        }), /* @__PURE__ */ a(O, {
+        }), /* @__PURE__ */ a($, {
           canChange: !!n.canChangeVanityName,
           error: u.vanityName,
           isAvailable: !!n.isVanityNameAvailable,
           isChecked: o.isVanityNameEnabled,
           isDisabled: l,
-          onChange: I,
-          onToggle: M,
-          vanityDomain: L,
+          onChange: M,
+          onToggle: V,
+          vanityDomain: D,
           vanityName: o.vanityName
-        }), /* @__PURE__ */ a(Y, {
+        }), /* @__PURE__ */ a(X, {
           canChange: !!n.canChangeDownload,
           isAvailable: !!n.isDownloadAvailable,
           isChecked: o.isDownloadEnabled,
           isDisabled: l,
-          onToggle: U
+          onToggle: z
         })]
       }), !g && /* @__PURE__ */ w(t.Footer, {
         children: [/* @__PURE__ */ a(t.Footer.SecondaryButton, {
           disabled: l,
-          onClick: S,
+          onClick: C,
           children: i(s.cancelButton)
         }), /* @__PURE__ */ a(t.Footer.PrimaryButton, {
           id: "usm-SharedLinkSettingsModal-primaryButton",
           loading: l,
           loadingAriaLabel: i(s.loadingLabel),
-          onClick: A,
+          onClick: B,
           children: i(s.saveButton)
         })]
       }), /* @__PURE__ */ a(t.Close, {
@@ -164,5 +163,5 @@ function ye({
   });
 }
 export {
-  ye as SharedLinkSettingsModal
+  ve as SharedLinkSettingsModal
 };

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

@@ -1,30 +1,30 @@
 import _ from "clsx";
 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 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
+import { useState as k, useMemo as w, 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 "./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_120dl_1", W = "_overrides_120dl_9", q = "_focusable_120dl_14", n = {
+  container: E,
+  overrides: W,
+  focusable: q
 };
 function te() {
   const {
     formatMessage: o
-  } = F(), [b, M] = k(!1), {
+  } = N(), [f, M] = k(!1), {
     collaborationRole: u,
     setCollaborationRole: d
-  } = P(), {
+  } = U(), {
     collaborationRoles: g,
     isSubmitting: S,
     item: I
-  } = U(), {
+  } = B(), {
     permissions: T = {},
     type: m
   } = I, s = w(() => g.map((i) => {
@@ -32,18 +32,18 @@ function te() {
       description: p,
       id: t,
       label: c
-    } = i, f = z(t), h = L(t);
+    } = i, b = A(t), h = L(t);
     let x = h;
     t === "editor" && m === "folder" && (x += "Folder");
     let C = t, R = "";
-    return f && (C = o($[`${h}Role`]), R = o(n[`${x}Description`])), {
+    return b && (C = o(j[`${h}Role`]), R = o(l[`${x}Description`])), {
       ...i,
       description: p ?? R,
       label: c ?? C
     };
   }), [g, o, m]);
-  if (q(() => {
-    d(A(s));
+  if (F(() => {
+    d(P(s));
   }, [s, d]), !s.length || !u)
     return null;
   const {
@@ -51,33 +51,33 @@ function te() {
     label: v
   } = u;
   let a;
-  return T.canInviteCollaborator || (a = o(n.inviteDisabledTooltip)), m === "web_link" && (a = o(n.inviteWebLinkDisabledTooltip)), a ? /* @__PURE__ */ e(N, {
+  return T.canInviteCollaborator || (a = o(l.inviteDisabledTooltip)), m === "web_link" && (a = o(l.inviteWebLinkDisabledTooltip)), a ? /* @__PURE__ */ e(O, {
     align: "start",
     content: a,
     "data-testid": "collaboration-role-tooltip",
     side: "bottom",
-    children: /* @__PURE__ */ e(O, {
-      className: l.focusable,
+    children: /* @__PURE__ */ e($, {
+      className: n.focusable,
       children: /* @__PURE__ */ e(D, {
         caretDirection: "down",
-        className: _(l.container, l.overrides),
+        className: _(n.container, n.overrides),
         disabled: !0,
-        label: o(n.inviteAsRoleLabel, {
+        label: o(l.inviteAsRoleLabel, {
           role: v
         }),
         size: "extraSmall",
         variant: "tertiary"
       })
     })
-  }) : /* @__PURE__ */ j(r.Root, {
+  }) : /* @__PURE__ */ z(r.Root, {
     onOpenChange: M,
-    open: b,
+    open: f,
     children: [/* @__PURE__ */ e(r.Trigger, {
       children: /* @__PURE__ */ e(D, {
-        caretDirection: b ? "up" : "down",
-        className: _(l.container, l.overrides),
+        caretDirection: f ? "up" : "down",
+        className: _(n.container, n.overrides),
         disabled: S,
-        label: o(n.inviteAsRoleLabel, {
+        label: o(l.inviteAsRoleLabel, {
           role: v
         }),
         size: "extraSmall",
@@ -90,7 +90,7 @@ function te() {
           description: p,
           isDisabled: t,
           id: c,
-          label: f
+          label: b
         } = i;
         return /* @__PURE__ */ e(r.CheckboxItem, {
           checked: y === c,
@@ -98,7 +98,7 @@ function te() {
           onSelect: () => d(i),
           children: /* @__PURE__ */ e(r.Item.MainContent, {
             caption: p,
-            label: f
+            label: b
           })
         }, c);
       })

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

@@ -1,6 +1,6 @@
 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 { createPortal as ue } from "react-dom";
+import { useIntl as me } from "react-intl";
 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 Se } from "@box/user-selector";
@@ -15,7 +15,7 @@ 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_wmqot_2", Ne = "_label_wmqot_8", Re = "_securityIndicator_wmqot_23", Te = "_collaborationAccessContainer_wmqot_29", f = {
+import '../../../../../styles/collaboration-section.css';const Ve = "_container_1d5sq_2", Ne = "_label_1d5sq_8", Re = "_securityIndicator_1d5sq_23", Te = "_collaborationAccessContainer_1d5sq_29", f = {
   container: Ve,
   label: Ne,
   securityIndicator: Re,
@@ -24,24 +24,24 @@ import '../../../../../styles/collaboration-section.css';const Ve = "_container_
 function Ye() {
   const {
     formatMessage: t
-  } = ue(), [p, y] = ce(), {
+  } = me(), [p, y] = ce(), {
     addNotification: R
   } = he(), {
     validateShieldRestriction: T
   } = _e(), {
-    contactValue: w,
+    contactValue: O,
     container: b,
     onModalOpenChange: I,
     onShareViewChange: C,
-    setUserContacts: O,
+    setUserContacts: P,
     shareView: n,
     userContacts: a
   } = Ee(), {
-    collaborationAccess: P,
-    collaborationNotices: k,
+    collaborationAccess: k,
+    collaborationNotices: M,
     config: v,
-    contactService: M,
-    isFetching: q,
+    contactService: q,
+    isFetching: w,
     isSubmitting: D,
     item: G,
     sharingService: W
@@ -51,7 +51,7 @@ function Ye() {
   } = G, {
     getContacts: g,
     getContactsAvatarUrls: S
-  } = M, {
+  } = q, {
     sendInvitations: K,
     sendSharedLink: $
   } = W;
@@ -98,15 +98,15 @@ function Ye() {
         return;
       const {
         shieldRestriction: U
-      } = e, V = [...U.restrictedEmails ?? [], ...U.restrictedGroups ?? []], le = a.map((u) => V.includes(u.email) || V.includes(`${u.id}`) ? {
-        ...u,
+      } = e, V = [...U.restrictedEmails ?? [], ...U.restrictedGroups ?? []], le = a.map((m) => V.includes(m.email) || V.includes(`${m.id}`) ? {
+        ...m,
         chipVariant: "error"
-      } : u);
-      y(U), O(le);
+      } : m);
+      y(U), P(le);
     }
   };
-  let d, m = !1;
-  s && !j.canInviteCollaborator && (d = t(o.inviteDisabledTooltip), m = !0), s && H === "web_link" && (d = t(o.inviteWebLinkDisabledTooltip), m = !0);
+  let d, u = !1;
+  s && !j.canInviteCollaborator && (d = t(o.inviteDisabledTooltip), u = !0), s && H === "web_link" && (d = t(o.inviteWebLinkDisabledTooltip), u = !0);
   const B = fe("user-contacts-"), ie = t(s ? o.invitePeopleLabel : o.emailSharedLinkLabel), se = pe(ie, B);
   return /* @__PURE__ */ i("form", {
     className: f.container,
@@ -115,7 +115,7 @@ function Ye() {
       error: p,
       isLoading: c,
       onSelectedUsersChange: x
-    }), k, /* @__PURE__ */ i("div", {
+    }), M, /* @__PURE__ */ i("div", {
       children: [s && v.collaborators && /* @__PURE__ */ r(Le, {}), /* @__PURE__ */ r(se, {
         className: f.label
       }), /* @__PURE__ */ r(be, {
@@ -124,19 +124,19 @@ function Ye() {
         open: d ? void 0 : !1,
         side: "bottom",
         children: /* @__PURE__ */ r(Ce, {
-          focusable: m,
+          focusable: u,
           children: /* @__PURE__ */ r(Se, {
             className: "collaboration-user-selector",
             clearButtonAriaLabel: t(o.clearButton),
             clearOnBlur: !1,
-            disabled: m || c,
+            disabled: u || c,
             displayChipVariant: (e) => e.chipVariant,
             error: z["user-contact"],
             fetchAvatarUrls: oe,
             fetchUsers: te,
             hideOnEscape: ee,
             idForLabel: B,
-            inputValue: w,
+            inputValue: O,
             label: null,
             onBlur: Q,
             onInputValueChange: re,
@@ -150,7 +150,7 @@ function Ye() {
         })
       }), s && /* @__PURE__ */ i("div", {
         className: f.collaborationAccessContainer,
-        children: [v.collaborationRole && /* @__PURE__ */ r(Ae, {}), P]
+        children: [v.collaborationRole && /* @__PURE__ */ r(Ae, {}), k]
       })]
     }), l && v.collaborationMessage && /* @__PURE__ */ r(Fe, {
       maxCount: ye
@@ -161,8 +161,8 @@ function Ye() {
         color: "textOnLightSecondary",
         children: t(o.contentSharedWithExternalCollaborators)
       })]
-    }), l && b && /* @__PURE__ */ me(/* @__PURE__ */ i(Ie, {
-      children: [!q && /* @__PURE__ */ i(h.Footer, {
+    }), l && b && /* @__PURE__ */ ue(/* @__PURE__ */ i(Ie, {
+      children: [!w && /* @__PURE__ */ i(h.Footer, {
         children: [/* @__PURE__ */ r(h.Footer.SecondaryButton, {
           disabled: c,
           onClick: ne,

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

@@ -1,49 +1,50 @@
-import R from "lodash/camelCase";
+import y from "lodash/camelCase";
 import { useIntl as D } from "react-intl";
-import { Row as S, Cell as m, Text as n, Tooltip as q, IconButton as y } from "@box/blueprint-web";
-import { XMark as B } from "@box/blueprint-web-assets/icons/Fill";
-import { CollaboratorAvatar as L } from "./collaborator-avatar.js";
-import M from "../messages.js";
+import { Row as S, Cell as m, Text as n, Tooltip as z, IconButton as B } from "@box/blueprint-web";
+import { XMark as L } from "@box/blueprint-web-assets/icons/Fill";
+import { CollaboratorAvatar as M } from "./collaborator-avatar.js";
+import N from "../messages.js";
 import s from "./messages.js";
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { isCollaboratorRoleSupported as N } from "../../../utils/collaborator.js";
-import { useUnifiedShareModalContext as I } from "../../../contexts/unified-share-modal-context.js";
-import { useUnifiedShareFormContext as j } from "../../../contexts/unified-share-form-context.js";
-import '../../../../../styles/collaborator-list-item.css';const k = "_nameCell_empqg_1", w = "_nameDetails_empqg_7", O = "_roleCell_empqg_14", T = "_text_empqg_21", l = {
-  nameCell: k,
-  nameDetails: w,
-  roleCell: O,
-  text: T
+import { isCollaboratorRoleSupported as I } from "../../../utils/collaborator.js";
+import { useUnifiedShareModalContext as j } from "../../../contexts/unified-share-modal-context.js";
+import { useUnifiedShareFormContext as k } from "../../../contexts/unified-share-form-context.js";
+import '../../../../../styles/collaborator-list-item.css';const w = "_nameCell_y1zd0_1", O = "_nameDetails_y1zd0_7", T = "_roleCell_y1zd0_15", U = "_text_y1zd0_22", l = {
+  nameCell: w,
+  nameDetails: O,
+  roleCell: T,
+  text: U
 };
-function J({
-  collaborator: a
+function K({
+  collaborator: a,
+  isSmall: c
 }) {
   const {
     formatMessage: o
   } = D(), {
     email: i,
-    hasCustomRole: c,
-    id: d,
-    isPending: p,
-    isRemovable: C,
-    name: f,
+    hasCustomRole: d,
+    id: p,
+    isPending: C,
+    isRemovable: f,
+    name: h,
     role: r
   } = a, {
-    item: h,
-    setCollaborator: g
-  } = I(), {
-    permissions: u = {}
-  } = h, {
-    onModalViewChange: v
-  } = j(), x = N(r) ? o(M[`${R(r)}Role`]) : "", _ = c ? r : x, b = () => {
-    g(a), v("remove-collaborator");
+    item: u,
+    setCollaborator: v
+  } = j(), {
+    permissions: x = {}
+  } = u, {
+    onModalViewChange: _
+  } = k(), b = I(r) ? o(N[`${y(r)}Role`]) : "", g = d ? r : b, R = () => {
+    v(a), _("remove-collaborator");
   };
   return /* @__PURE__ */ t(S, {
-    id: d,
+    id: p,
     children: [/* @__PURE__ */ e(m, {
       children: /* @__PURE__ */ t("div", {
         className: l.nameCell,
-        children: [/* @__PURE__ */ e(L, {
+        children: [/* @__PURE__ */ e(M, {
           collaborator: a,
           isBadgeable: !0,
           size: "large"
@@ -52,7 +53,7 @@ function J({
           children: [/* @__PURE__ */ e(n, {
             as: "span",
             variant: "bodyDefaultSemibold",
-            children: f
+            children: h
           }), i && /* @__PURE__ */ e(n, {
             as: "span",
             color: "textOnLightSecondary",
@@ -61,20 +62,20 @@ function J({
           })]
         })]
       })
-    }), /* @__PURE__ */ e(m, {
+    }), !c && /* @__PURE__ */ e(m, {
       children: /* @__PURE__ */ t("div", {
         className: l.roleCell,
         children: [/* @__PURE__ */ e(n, {
           as: "span",
           className: l.text,
           color: "textOnLightSecondary",
-          children: p ? o(s.pendingRole) : _
-        }), C && u.canRemoveCollaborator && /* @__PURE__ */ e(q, {
+          children: C ? o(s.pendingRole) : g
+        }), f && x.canRemoveCollaborator && /* @__PURE__ */ e(z, {
           content: o(s.removeButton),
-          children: /* @__PURE__ */ e(y, {
+          children: /* @__PURE__ */ e(B, {
             "aria-label": o(s.removeButton),
-            icon: B,
-            onClick: b
+            icon: L,
+            onClick: R
           })
         })]
       })
@@ -82,5 +83,5 @@ function J({
   });
 }
 export {
-  J as CollaboratorListItem
+  K as CollaboratorListItem
 };

package/dist/esm/lib/components/unified-share-form-modal/collaborators-view/collaborators-view.js

@@ -1,88 +1,88 @@
 import { createPortal as C } from "react-dom";
-import { useIntl as p } from "react-intl";
-import { TextButton as B, Link as k, Table as v, TableHeader as x, Column as c, TableBody as A, Modal as l } from "@box/blueprint-web";
-import { CollaboratorListItem as F } from "./collaborator-list-item.js";
-import r from "./messages.js";
-import { jsxs as t, jsx as e, Fragment as L } from "react/jsx-runtime";
-import { useUnifiedShareModalContext as y } from "../../../contexts/unified-share-modal-context.js";
-import { useUnifiedShareFormContext as M } from "../../../contexts/unified-share-form-context.js";
-import '../../../../../styles/collaborators-view.css';const N = "_manage_8rmie_1", S = "_manageAllButton_8rmie_6", T = "_list_8rmie_13", H = "_scroll_8rmie_30", w = "_header_8rmie_36", a = {
-  manage: N,
-  manageAllButton: S,
-  list: T,
-  scroll: H,
-  header: w
+import { useIntl as k } from "react-intl";
+import { useBreakpoint as B, Breakpoint as v, TextButton as S, Link as x, Table as A, TableHeader as F, Column as h, TableBody as L, Modal as n } from "@box/blueprint-web";
+import { CollaboratorListItem as y } from "./collaborator-list-item.js";
+import a from "./messages.js";
+import { jsxs as t, jsx as e, Fragment as M } from "react/jsx-runtime";
+import { useUnifiedShareModalContext as N } from "../../../contexts/unified-share-modal-context.js";
+import { useUnifiedShareFormContext as T } from "../../../contexts/unified-share-form-context.js";
+import '../../../../../styles/collaborators-view.css';const H = "_manage_8rmie_1", w = "_manageAllButton_8rmie_6", I = "_list_8rmie_13", j = "_scroll_8rmie_30", U = "_header_8rmie_36", r = {
+  manage: H,
+  manageAllButton: w,
+  list: I,
+  scroll: j,
+  header: U
 };
-function z() {
+function J() {
   const {
     formatMessage: o
-  } = p(), {
-    collaborators: d,
-    config: n,
-    eventService: h,
-    isFetching: i,
-    item: u
-  } = y(), {
-    id: g,
-    type: _
-  } = u, {
-    onCollaboratorsManagementClick: s
-  } = h, {
-    container: m,
+  } = k(), l = B() === v.Small, {
+    collaborators: u,
+    config: i,
+    eventService: g,
+    isFetching: s,
+    item: p
+  } = N(), {
+    id: _,
+    type: b
+  } = p, {
+    onCollaboratorsManagementClick: m
+  } = g, {
+    container: c,
     onShareViewChange: f
-  } = M();
+  } = T();
   return /* @__PURE__ */ t("div", {
-    inert: i ? "" : null,
-    children: [n.collaboratorsManagement && /* @__PURE__ */ e("div", {
-      className: a.manage,
-      children: s ? /* @__PURE__ */ e(B, {
-        className: a.manageAllButton,
+    inert: s ? "" : null,
+    children: [i.collaboratorsManagement && /* @__PURE__ */ e("div", {
+      className: r.manage,
+      children: m ? /* @__PURE__ */ e(S, {
+        className: r.manageAllButton,
         inheritFont: !0,
-        onClick: s,
-        children: o(r.manageAllLink)
-      }) : /* @__PURE__ */ e(k, {
-        href: `/${_}/${g}/collaborators`,
+        onClick: m,
+        children: o(a.manageAllLink)
+      }) : /* @__PURE__ */ e(x, {
+        href: `/${b}/${_}/collaborators`,
         rel: "noopener",
         target: "_blank",
         variant: "standalone",
-        children: o(r.manageAllLink)
+        children: o(a.manageAllLink)
       })
     }), /* @__PURE__ */ e("div", {
-      className: a.list,
+      className: r.list,
       children: /* @__PURE__ */ e("div", {
-        className: a.scroll,
-        children: /* @__PURE__ */ t(v, {
-          "aria-label": o(r.listLabel),
-          children: [/* @__PURE__ */ t(x, {
-            className: a.header,
-            children: [/* @__PURE__ */ e(c, {
+        className: r.scroll,
+        children: /* @__PURE__ */ t(A, {
+          "aria-label": o(a.listLabel),
+          children: [/* @__PURE__ */ t(F, {
+            className: r.header,
+            children: [/* @__PURE__ */ e(h, {
               hideHeader: !0,
               isRowHeader: !0,
-              children: o(r.nameColumn)
-            }), /* @__PURE__ */ e(c, {
+              children: o(a.nameColumn)
+            }), !l && /* @__PURE__ */ e(h, {
               hideHeader: !0,
-              children: o(r.roleColumn)
+              children: o(a.roleColumn)
             })]
-          }), /* @__PURE__ */ e(A, {
-            items: d.slice(0, n.collaboratorsLimit),
-            children: (b) => /* @__PURE__ */ e(F, {
-              collaborator: b
-            })
+          }), /* @__PURE__ */ e(L, {
+            children: u.slice(0, i.collaboratorsLimit).map((d) => /* @__PURE__ */ e(y, {
+              collaborator: d,
+              isSmall: l
+            }, d.id))
           })]
         })
       })
-    }), m && /* @__PURE__ */ C(/* @__PURE__ */ t(L, {
-      children: [!i && /* @__PURE__ */ e(l.Footer, {
-        children: /* @__PURE__ */ e(l.Footer.SecondaryButton, {
+    }), c && /* @__PURE__ */ C(/* @__PURE__ */ t(M, {
+      children: [!s && /* @__PURE__ */ e(n.Footer, {
+        children: /* @__PURE__ */ e(n.Footer.SecondaryButton, {
           onClick: () => f("default"),
-          children: o(r.doneButton)
+          children: o(a.doneButton)
         })
-      }), /* @__PURE__ */ e(l.Close, {
-        "aria-label": o(r.closeButton)
+      }), /* @__PURE__ */ e(n.Close, {
+        "aria-label": o(a.closeButton)
       })]
-    }), m)]
+    }), c)]
   });
 }
 export {
-  z as CollaboratorsView
+  J as CollaboratorsView
 };

package/dist/esm/lib/components/unified-share-form-modal/shared-link-section/shared-link-access.js

@@ -1,70 +1,70 @@
 import k from "clsx";
 import { useState as M } from "react";
 import { useIntl as I } from "react-intl";
-import { DropdownMenu as n, TriggerButton as z, Tooltip as T, Focusable as q } from "@box/blueprint-web";
-import w from "./messages.js";
-import { jsxs as O, jsx as e } from "react/jsx-runtime";
-import { useUnifiedShareModalContext as j } from "../../../contexts/unified-share-modal-context.js";
-import { useSharingAction as y } from "../../../hooks/use-sharing-action.js";
-import { useAccessLevels as D } from "../../../hooks/use-access-levels.js";
-import '../../../../../styles/shared-link-access.css';const N = "_container_xhq4z_1", R = "_overrides_xhq4z_1", B = "_content_xhq4z_6", s = {
-  container: N,
-  overrides: R,
-  content: B
+import { DropdownMenu as n, TriggerButton as j, Tooltip as T, Focusable as w } from "@box/blueprint-web";
+import O from "./messages.js";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { useUnifiedShareModalContext as D } from "../../../contexts/unified-share-modal-context.js";
+import { useSharingAction as N } from "../../../hooks/use-sharing-action.js";
+import { useAccessLevels as R } from "../../../hooks/use-access-levels.js";
+import '../../../../../styles/shared-link-access.css';const z = "_container_1jrg6_1", B = "_overrides_1jrg6_8", F = "_content_1jrg6_13", s = {
+  container: z,
+  overrides: B,
+  content: F
 };
 function V() {
   const {
     formatMessage: d
-  } = I(), [c, m] = M(!1), {
+  } = I(), [r, m] = M(!1), {
     isSubmitting: h,
     item: p,
     sharedLink: u,
-    sharingService: f
-  } = j(), {
-    permissions: g = {}
+    sharingService: g
+  } = D(), {
+    permissions: f = {}
   } = p, {
     access: S
   } = u, {
     changeSharedLinkAccess: b
-  } = f, {
-    isLoading: x,
-    onAction: v
-  } = y(b), {
-    allowedLevels: r,
+  } = g, {
+    isLoading: v,
+    onAction: _
+  } = N(b), {
+    allowedLevels: c,
     selectedAccess: i
-  } = D();
-  if (!r.length || !i)
+  } = R();
+  if (!c.length || !i)
     return null;
   const {
-    label: _
+    label: x
   } = i;
-  return /* @__PURE__ */ O(n.Root, {
+  return /* @__PURE__ */ y(n.Root, {
     onOpenChange: m,
-    open: c,
+    open: r,
     children: [/* @__PURE__ */ e(n.Trigger, {
-      children: /* @__PURE__ */ e(z, {
-        caretDirection: c ? "up" : "down",
+      children: /* @__PURE__ */ e(j, {
+        caretDirection: r ? "up" : "down",
         className: k(s.container, s.overrides),
-        disabled: !g.canSetShareAccess || (h ?? x),
-        label: _,
+        disabled: !f.canSetShareAccess || (h ?? v),
+        label: x,
         size: "extraSmall",
         variant: "tertiary"
       })
     }), /* @__PURE__ */ e(n.Content, {
       align: "start",
       className: s.content,
-      children: r.map((A) => {
+      children: c.map((A) => {
         const {
           description: a,
           disabledReason: C,
           id: t,
           label: l
         } = A, o = S === t, L = () => {
-          o || v(t);
+          o || _(t);
         };
         return C ? /* @__PURE__ */ e(T, {
-          content: d(w.disabledAccessLevelTooltip),
-          children: /* @__PURE__ */ e(q, {
+          content: d(O.disabledAccessLevelTooltip),
+          children: /* @__PURE__ */ e(w, {
             children: /* @__PURE__ */ e(n.CheckboxItem, {
               checked: o,
               disabled: !0,

package/dist/esm/lib/components/unified-share-form-modal/shared-link-section/shared-link-permission.js

@@ -1,47 +1,47 @@
 import p from "clsx";
 import { useState as I } from "react";
 import { useIntl as O } from "react-intl";
-import { Tooltip as z, Focusable as E, TriggerButton as h, DropdownMenu as t } from "@box/blueprint-web";
+import { Tooltip as j, Focusable as E, TriggerButton as h, DropdownMenu as t } from "@box/blueprint-web";
 import { FILE_EXTENSION_BOX_NOTE as w } from "../../../constants.js";
 import D from "./messages.js";
 import { jsx as e, jsxs as P } from "react/jsx-runtime";
-import { usePermissionLevels as q } from "../../../hooks/use-permission-levels.js";
-import { useUnifiedShareModalContext as y } from "../../../contexts/unified-share-modal-context.js";
-import { useSharingAction as A } from "../../../hooks/use-sharing-action.js";
-import '../../../../../styles/shared-link-access.css';const B = "_container_xhq4z_1", j = "_overrides_xhq4z_1", F = "_content_xhq4z_6", n = {
-  container: B,
-  overrides: j,
-  content: F
+import { usePermissionLevels as y } from "../../../hooks/use-permission-levels.js";
+import { useUnifiedShareModalContext as A } from "../../../contexts/unified-share-modal-context.js";
+import { useSharingAction as B } from "../../../hooks/use-sharing-action.js";
+import '../../../../../styles/shared-link-access.css';const z = "_container_1jrg6_1", F = "_overrides_1jrg6_8", X = "_content_1jrg6_13", n = {
+  container: z,
+  overrides: F,
+  content: X
 };
 function Y() {
   const {
-    formatMessage: u
-  } = O(), [s, f] = I(!1), {
-    isSubmitting: g,
-    item: r,
+    formatMessage: g
+  } = O(), [r, u] = I(!1), {
+    isSubmitting: f,
+    item: s,
     sharedLink: S,
     sharingService: b
-  } = y(), {
-    permissions: x = {}
-  } = r, {
-    access: _,
+  } = A(), {
+    permissions: _ = {}
+  } = s, {
+    access: v,
     permission: a
   } = S, {
-    changeSharedLinkPermission: v
+    changeSharedLinkPermission: x
   } = b, {
     isLoading: L,
     onAction: M
-  } = A(v), {
+  } = B(x), {
     allowedLevels: c,
     selectedPermission: l
-  } = q();
-  if (_ === "collaborators" || !c.length || !l)
+  } = y();
+  if (v === "collaborators" || !c.length || !l)
     return null;
   const {
     label: d
   } = l;
   let o = "";
-  return r.extension === w && a === "can_edit" && (o = u(D.canEditBoxNoteDisabledTooltip)), o ? /* @__PURE__ */ e(z, {
+  return s.extension === w && a === "can_edit" && (o = g(D.canEditBoxNoteDisabledTooltip)), o ? /* @__PURE__ */ e(j, {
     align: "start",
     content: o,
     "data-testid": "shared-link-permission-tooltip",
@@ -57,13 +57,13 @@ function Y() {
       })
     })
   }) : /* @__PURE__ */ P(t.Root, {
-    onOpenChange: f,
-    open: s,
+    onOpenChange: u,
+    open: r,
     children: [/* @__PURE__ */ e(t.Trigger, {
       children: /* @__PURE__ */ e(h, {
-        caretDirection: s ? "up" : "down",
+        caretDirection: r ? "up" : "down",
         className: p(n.container, n.overrides),
-        disabled: !x.canSetShareAccess || (g ?? L),
+        disabled: !_.canSetShareAccess || (f ?? L),
         label: d,
         size: "extraSmall",
         variant: "tertiary"

package/dist/styles/collaboration-role.css

@@ -1 +1 @@
-._container_1fonq_1{align-self:flex-start}._container_1fonq_1._overrides_1fonq_4{min-height:unset;font-weight:var(--body-default-font-weight)}._focusable_1fonq_9{justify-self:flex-start}
+._container_120dl_1{align-self:flex-start;max-width:100%}._container_120dl_1 span:first-child{overflow:hidden;text-overflow:ellipsis}._container_120dl_1._overrides_120dl_9{min-height:unset;font-weight:var(--body-default-font-weight)}._focusable_120dl_14{justify-self:flex-start}

package/dist/styles/collaboration-section.css

@@ -1 +1 @@
-._container_wmqot_2{display:flex;flex-direction:column;gap:var(--space-4)}._label_wmqot_8{font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);text-decoration:var(--body-default-bold-text-decoration);display:block;margin-block-end:var(--space-2);padding:var(--space-1) 0;color:var(--text-text-on-light);overflow-wrap:break-word}._securityIndicator_wmqot_23>svg{display:inline-block;margin-bottom:-3px;padding-right:var(--space-1)}._collaborationAccessContainer_wmqot_29{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
+._container_1d5sq_2{display:flex;flex-direction:column;gap:var(--space-4)}._label_1d5sq_8{font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);text-decoration:var(--body-default-bold-text-decoration);display:block;margin-block-end:var(--space-2);padding:var(--space-1) 0;color:var(--text-text-on-light);overflow-wrap:break-word}._securityIndicator_1d5sq_23>svg{display:inline-block;margin-bottom:-3px;padding-right:var(--space-1)}._collaborationAccessContainer_1d5sq_29{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}

package/dist/styles/collaborator-list-item.css

@@ -1 +1 @@
-._nameCell_empqg_1{display:flex;gap:var(--space-3);align-items:center}._nameDetails_empqg_7{display:flex;flex-direction:column;justify-content:space-evenly;height:var(--size-10)}._roleCell_empqg_14{display:flex;gap:var(--space-2);align-items:center;justify-content:flex-end}._text_empqg_21{overflow:hidden;text-overflow:ellipsis}
+._nameCell_y1zd0_1{display:flex;gap:var(--space-3);align-items:center}._nameDetails_y1zd0_7{display:flex;flex-direction:column;justify-content:space-evenly;height:var(--size-10);overflow:hidden}._roleCell_y1zd0_15{display:flex;gap:var(--space-2);align-items:center;justify-content:flex-end}._text_y1zd0_22{overflow:hidden;text-overflow:ellipsis}

package/dist/styles/shared-link-access.css

@@ -1 +1 @@
-._container_xhq4z_1._overrides_xhq4z_1{min-height:unset;font-weight:var(--body-default-font-weight)}._content_xhq4z_6{z-index:2147483646}
+._container_1jrg6_1{max-width:100%}._container_1jrg6_1 span:first-child{overflow:hidden;text-overflow:ellipsis}._container_1jrg6_1._overrides_1jrg6_8{min-height:unset;font-weight:var(--body-default-font-weight)}._content_1jrg6_13{z-index:2147483646}

package/dist/types/lib/components/unified-share-form-modal/collaborators-view/collaborator-list-item.d.ts

@@ -1,5 +1,6 @@
 import { Collaborator } from '../../../types';
 export interface CollaboratorListItemProps {
     collaborator: Collaborator;
+    isSmall: boolean;
 }
-export declare function CollaboratorListItem({ collaborator }: CollaboratorListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollaboratorListItem({ collaborator, isSmall }: CollaboratorListItemProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/unified-share-modal",
-    "version": "1.36.0",
+    "version": "1.36.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^12.112.2",