@box/unified-share-modal 1.34.0 → 1.35.1

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

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

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

@@ -1,58 +1,67 @@
-import { useIntl as p } from "react-intl";
-import { Text as v, Avatar as b } from "@box/blueprint-web";
-import { Gray10 as x } from "@box/blueprint-web-assets/tokens/tokens";
-import { CollaboratorAvatar as g } from "../collaborators-view/collaborator-avatar.js";
-import A from "./messages.js";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { callOnKeyboardEvent as _ } from "../../../utils/event.js";
-import { useUnifiedShareModalContext as C } from "../../../contexts/unified-share-modal-context.js";
-import { useUnifiedShareFormContext as S } from "../../../contexts/unified-share-form-context.js";
-import '../../../../../styles/shared-with-avatars.css';const y = "_container_1ku5s_2", I = "_avatars_1ku5s_19", l = {
-  container: y,
-  avatars: I
-}, c = 3;
-function z() {
+import { useIntl as x } from "react-intl";
+import { Text as C, Avatar as g } from "@box/blueprint-web";
+import { Gray10 as A } from "@box/blueprint-web-assets/tokens/tokens";
+import { CollaboratorAvatar as S } from "../collaborators-view/collaborator-avatar.js";
+import _ from "./messages.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { callOnKeyboardEvent as k } from "../../../utils/event.js";
+import { useUnifiedShareModalContext as y } from "../../../contexts/unified-share-modal-context.js";
+import { useUnifiedShareFormContext as I } from "../../../contexts/unified-share-form-context.js";
+import '../../../../../styles/shared-with-avatars.css';const W = "_container_1ku5s_2", U = "_avatars_1ku5s_19", c = {
+  container: W,
+  avatars: U
+}, m = 3;
+function V() {
   const {
-    formatMessage: m
-  } = p(), {
-    collaborators: d,
-    currentUser: f,
+    formatMessage: d
+  } = x(), {
+    collaborators: f,
+    currentUser: h,
+    eventService: u,
     isSubmitting: o
-  } = C(), {
-    onShareViewChange: a
-  } = S(), {
-    id: s
-  } = f, t = d.filter(({
+  } = y(), {
+    onShareViewChange: v
+  } = I(), {
+    onCollaboratorsClick: a
+  } = u, {
+    id: n
+  } = h, t = f.filter(({
     isCurrentUser: r,
-    userId: u
-  }) => !(r || s && s === u));
+    userId: b
+  }) => !(r || n && n === b));
   if (!t.length)
     return null;
-  const h = t.slice(0, c), n = t.length - c;
-  return /* @__PURE__ */ i("div", {
+  const p = t.slice(0, m), s = t.length - m, i = () => {
+    if (a) {
+      a();
+      return;
+    }
+    v("collaborators");
+  };
+  return /* @__PURE__ */ l("div", {
     "aria-disabled": o,
-    className: l.container,
-    onClick: () => a("collaborators"),
-    onKeyDown: _(() => a("collaborators")),
+    className: c.container,
+    onClick: i,
+    onKeyDown: k(i),
     role: "button",
     tabIndex: o ? -1 : 0,
-    children: [/* @__PURE__ */ e(v, {
+    children: [/* @__PURE__ */ e(C, {
       as: "span",
       color: "textOnLightSecondary",
-      children: m(A.sharedWithLabel)
-    }), /* @__PURE__ */ i("div", {
-      className: l.avatars,
-      children: [h.map((r) => /* @__PURE__ */ e(g, {
+      children: d(_.sharedWithLabel)
+    }), /* @__PURE__ */ l("div", {
+      className: c.avatars,
+      children: [p.map((r) => /* @__PURE__ */ e(S, {
         collaborator: r,
         size: "medium"
-      }, r.id)), n > 0 && /* @__PURE__ */ e(b, {
-        color: x,
+      }, r.id)), s > 0 && /* @__PURE__ */ e(g, {
+        color: A,
         size: "medium",
-        text: `+${n}`
+        text: `+${s}`
       })]
     })]
   });
 }
 export {
-  z as SharedWithAvatars
+  V as SharedWithAvatars
 };

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

@@ -8,7 +8,7 @@ import l from "./messages.js";
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { UnifiedShareFormProvider as O } from "../../contexts/unified-share-form-context.js";
 import { useUnifiedShareModalContext as V } from "../../contexts/unified-share-modal-context.js";
-import '../../../../styles/unified-share-form-modal.css';const j = "_content_1tnt5_1", z = "_header_1tnt5_5", B = "_body_1tnt5_12", L = "_hasFooter_1tnt5_23", R = "_loading_1tnt5_27", t = {
+import '../../../../styles/unified-share-form-modal.css';const j = "_content_1xtsr_1", z = "_header_1xtsr_5", B = "_body_1xtsr_12", L = "_hasFooter_1xtsr_23", R = "_loading_1xtsr_27", t = {
   content: j,
   header: z,
   body: B,
@@ -18,21 +18,21 @@ import '../../../../styles/unified-share-form-modal.css';const j = "_content_1tn
 function W({
   children: d,
   isOpen: p,
-  onOpenChange: a,
+  onOpenChange: r,
   onModalViewChange: u
 }) {
   const {
-    formatMessage: r
+    formatMessage: a
   } = U(), {
     initialContacts: _,
-    isFetching: C,
-    item: F
+    isFetching: x,
+    item: C
   } = V(), {
     classification: i,
-    name: S
-  } = F, [b, x] = g(null), [c, m] = g("default"), M = !!d, h = c !== "default", f = N((s) => {
-    m("default"), a && a(s);
-  }, [a]), y = (s) => {
+    name: F
+  } = C, [S, b] = g(null), [c, m] = g("default"), M = !!d, h = c !== "default", f = N((s) => {
+    m("default"), r && r(s);
+  }, [r]), y = (s) => {
     s.preventDefault();
   };
   return /* @__PURE__ */ n(o, {
@@ -41,14 +41,14 @@ function W({
     children: [M && /* @__PURE__ */ e(o.Trigger, {
       children: d
     }), /* @__PURE__ */ n(o.Content, {
-      ref: x,
+      ref: b,
       className: t.content,
       onPointerDownOutside: y,
       size: "medium",
       children: [/* @__PURE__ */ n(o.Header, {
         className: t.header,
-        children: [r(l.title, {
-          itemName: S
+        children: [a(l.title, {
+          itemName: F
         }), i && /* @__PURE__ */ e(I, {
           colorIndex: i.colorId + 1,
           icon: v,
@@ -58,22 +58,22 @@ function W({
       }), /* @__PURE__ */ e(o.Body, {
         className: w(t.body, h && t.hasFooter),
         children: /* @__PURE__ */ n(O, {
-          container: b,
+          container: S,
           initialContacts: _,
           onModalOpenChange: f,
           onModalViewChange: u,
           onShareViewChange: m,
           shareView: c,
-          children: [C && /* @__PURE__ */ e("div", {
+          children: [x && /* @__PURE__ */ e("div", {
             className: t.loading,
             children: /* @__PURE__ */ e(P, {
-              "aria-label": r(l.loadingLabel),
+              "aria-label": a(l.loadingLabel),
               size: "large"
             })
           }), /* @__PURE__ */ e(D, {})]
         })
       }), !h && /* @__PURE__ */ e(o.Close, {
-        "aria-label": r(l.closeButton)
+        "aria-label": a(l.closeButton)
       })]
     })]
   });

package/dist/styles/shared-link-settings-modal.css

@@ -1 +1 @@
-._content_1wiic_1._content_1wiic_1{max-width:480px}._body_1wiic_5._body_1wiic_5{display:flex;flex-direction:column;gap:var(--space-4);padding-top:0;padding-bottom:0}
+._content_1r0kk_1._content_1r0kk_1{max-width:480px}._body_1r0kk_5._body_1r0kk_5{position:relative;display:flex;flex-direction:column;gap:var(--space-4);padding-top:0;padding-bottom:0}._body_1r0kk_5._body_1r0kk_5[inert]{min-height:200px}._loading_1r0kk_17{position:absolute;inset:0;z-index:1;display:flex;align-items:center;padding-bottom:var(--space-8);background-color:var(--gray-white)}

package/dist/styles/unified-share-form-modal.css

@@ -1 +1 @@
-._content_1tnt5_1._content_1tnt5_1{max-width:480px}._header_1tnt5_5{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}._body_1tnt5_12._body_1tnt5_12{position:relative;max-width:432px;padding-top:0;padding-bottom:var(--space-8)}._body_1tnt5_12._body_1tnt5_12:before{display:block;width:100vw;content:""}._body_1tnt5_12._body_1tnt5_12._hasFooter_1tnt5_23{padding-bottom:0}._loading_1tnt5_27{position:absolute;inset:0;z-index:1001;display:flex;align-items:center;padding-bottom:var(--space-8);background-color:var(--gray-white)}@media not (max-width:374px){._content_1tnt5_1{overflow:auto}}@media not (max-width:459px){div:has(>._content_1tnt5_1){display:flex;padding:var(--space-8);overflow:auto}._content_1tnt5_1{max-height:none;margin:auto}}
+._content_1xtsr_1._content_1xtsr_1{max-width:480px}._header_1xtsr_5{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}._body_1xtsr_12._body_1xtsr_12{position:relative;max-width:432px;padding-top:0;padding-bottom:var(--space-8)}._body_1xtsr_12._body_1xtsr_12:before{display:block;width:100vw;content:""}._body_1xtsr_12._body_1xtsr_12._hasFooter_1xtsr_23{padding-bottom:0}._loading_1xtsr_27{position:absolute;inset:0;z-index:1001;display:flex;align-items:center;padding-bottom:var(--space-8);background-color:var(--gray-white)}@media not (max-width:374px){._content_1xtsr_1{overflow:visible}}@media not (max-width:459px){div:has(>._content_1xtsr_1){display:flex;padding:var(--space-8);overflow:auto}._content_1xtsr_1{max-height:none;margin:auto}}

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

@@ -334,14 +334,20 @@ export interface CollaborationRole {
     label?: string;
 }
 export interface EventService {
+    /**
+     * Function to customize the click behavior of the "Shared with ..." list of avatars.
+     *
+     * If provided, the default behavior is disabled and the list of collaborators will not be rendered.
+     *
+     * Used to enhance the experience for managing collaborators such as opening the Collaborators Modal.
+     */
     onCollaboratorsClick?: () => void;
     /**
-     * Custom handler to replace the default "Manage All" link behavior.
+     * Function to customize the click behavior of the "Manage All" link.
      *
-     * When provided, prevents the default navigation and calls this handler instead.
-     * Useful for opening a CollaboratorsModal or custom dialog without leaving the page.
+     * If provided, the default behavior is disabled and the link will be rendered as a button.
      *
-     * Use this when you want to override the default navigation behavior.
+     * Used to enhance the experience for managing collaborators or override the default navigation behavior.
      */
     onCollaboratorsManagementClick?: () => void;
     /**
@@ -350,8 +356,21 @@ export interface EventService {
      * This is usually used for data tracking purposes.
      */
     onRestrictedUsersRemoveClick?: (contacts: UserContactType[]) => void;
+    /**
+     * Function to customize the click behavior of the "Link Settings" link.
+     *
+     * NOTE: This has not been implemented.
+     */
     onSharedLinkSettingsClick?: () => void;
+    /**
+     * Function to observe when the user closes the view for the shared link settings.
+     */
     onSharedLinkSettingsClose?: () => void;
+    /**
+     * Function to allow the consumer to fetch data for the shared link settings.
+     *
+     * Called when the user opens the view for the shared link settings.
+     */
     onSharedLinkSettingsLoad?: () => void;
 }
 export interface ContactService {

package/package.json

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