@box/unified-share-modal 0.48.5 → 0.48.6

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

@@ -2,43 +2,43 @@ import { useMemo as G } from "react";
 import { useIntl as J } from "react-intl";
 import { Modal as r, Text as C, Link as K, Switch as c, DateI18nProvider as Q, DatePicker as X, InlineNotice as k, TextInput as L } from "@box/blueprint-web";
 import e from "./messages.js";
-import { jsx as n, jsxs as d, Fragment as S } from "react/jsx-runtime";
+import { jsx as n, jsxs as d, Fragment as N } from "react/jsx-runtime";
 import { useAccessLevels as Z } from "../../hooks/use-access-levels.js";
 import { formatDateFromTimestampToCalendarDate as aa, formatTomorrowDateToCalendarDate as ea } from "../../utils/date.js";
 import { useLinkSettingsForm as na } from "../../hooks/use-link-settings-form.js";
 import { useUnifiedShareModalContext as ia } from "../../contexts/unified-share-modal-context.js";
-import '../../../../styles/shared-link-settings-modal.css';const oa = "_content_1wiic_1", ta = "_body_1wiic_5", P = {
+import '../../../../styles/shared-link-settings-modal.css';const oa = "_content_1wiic_1", ta = "_body_1wiic_5", S = {
   content: oa,
   body: ta
 }, ra = "••••••••";
 function ua({
-  isOpen: D,
-  onOpenChange: h
+  isOpen: P,
+  onOpenChange: m
 }) {
   const {
     formatMessage: a
   } = J(), {
-    eventService: N,
+    eventService: D,
     isSubmitting: T,
     sharedLink: f
   } = ia(), {
-    expiresAt: v,
+    expiresAt: w,
     settings: i = {},
     vanityDomain: A,
-    vanityName: g
+    vanityName: h
   } = f, {
-    onSharedLinkSettingsClose: w
-  } = N, {
-    selectedAccess: m
-  } = Z(), b = v ? aa(v) : void 0, p = G(() => ({
+    onSharedLinkSettingsClose: v
+  } = D, {
+    selectedAccess: g
+  } = Z(), b = w ? aa(w) : null, p = G(() => ({
     expiration: b,
     isDownloadEnabled: !!i.isDownloadEnabled,
     isExpirationEnabled: !!b,
     isPasswordEnabled: !!i.isPasswordEnabled,
-    isVanityEnabled: !!g,
+    isVanityNameEnabled: !!h,
     password: "",
-    vanityName: g || ""
-  }), [b, i, g]), {
+    vanityName: h || ""
+  }), [b, i, h]), {
     errors: u,
     formData: t,
     handleFormReset: y,
@@ -48,15 +48,15 @@ function ua({
     setFieldValue: s,
     validatePassword: V
   } = na(p), B = () => {
-    y(), w && w(), h(!1);
+    y(), v && v(), m(!1);
   }, M = async () => {
-    await I() || (y(), h(!1));
+    await I() || (y(), m(!1));
   }, _ = (o) => {
     l("expiration", void 0), s("isExpirationEnabled", o);
   }, U = (o) => {
     l("expiration", void 0), s("expiration", o);
   }, R = (o) => {
-    l("vanityName", void 0), s("isVanityEnabled", o);
+    l("vanityName", void 0), s("isVanityNameEnabled", o);
   }, W = (o) => {
     l("vanityName", void 0), s("vanityName", o.target.value);
   }, j = (o) => {
@@ -71,15 +71,15 @@ function ua({
     p.isPasswordEnabled && !t.password || q || V(t.password);
   }, H = i.canChangeVanityName && !!t.vanityName, Y = `${A || ""}${t.vanityName}`, x = T || F;
   return /* @__PURE__ */ n(r, {
-    onOpenChange: h,
-    open: D,
+    onOpenChange: m,
+    open: P,
     children: /* @__PURE__ */ d(r.Content, {
-      className: P.content,
+      className: S.content,
       size: "medium",
       children: [/* @__PURE__ */ n(r.Header, {
         children: a(e.title)
       }), /* @__PURE__ */ d(r.Body, {
-        className: P.body,
+        className: S.body,
         children: [/* @__PURE__ */ n(C, {
           as: "p",
           color: "textOnLightSecondary",
@@ -114,13 +114,13 @@ function ua({
             previousMonthAriaLabel: a(e.linkExpirationPreviousMonthAriaLabel),
             value: t.expiration
           })
-        }), i.isPasswordAvailable && (m == null ? void 0 : m.id) === "open" && /* @__PURE__ */ n(c.Item, {
+        }), i.isPasswordAvailable && (g == null ? void 0 : g.id) === "open" && /* @__PURE__ */ n(c.Item, {
           checked: t.isPasswordEnabled,
           disabled: !i.canChangePassword,
           label: a(e.passwordToggleText),
           onCheckedChange: j,
           value: "password-settings"
-        }), t.isPasswordEnabled && /* @__PURE__ */ d(S, {
+        }), t.isPasswordEnabled && /* @__PURE__ */ d(N, {
           children: [i.canChangePassword && /* @__PURE__ */ n(k, {
             variant: "warning",
             variantIconAriaLabel: a(e.warningNoticeIconAriaLabel),
@@ -138,12 +138,12 @@ function ua({
             value: t.password
           })]
         }), i.isVanityNameAvailable && /* @__PURE__ */ n(c.Item, {
-          checked: t.isVanityEnabled,
+          checked: t.isVanityNameEnabled,
           disabled: !i.canChangeVanityName,
           label: a(e.vanityNameToggleText),
           onCheckedChange: R,
           value: "vanity-domain-settings"
-        }), t.isVanityEnabled && /* @__PURE__ */ d(S, {
+        }), t.isVanityNameEnabled && /* @__PURE__ */ d(N, {
           children: [i.canChangeVanityName && /* @__PURE__ */ n(k, {
             variant: "warning",
             variantIconAriaLabel: a(e.warningNoticeIconAriaLabel),

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

@@ -1,108 +1,111 @@
-import { useCallback as C } from "react";
-import { createPortal as G } from "react-dom";
-import { useIntl as H } from "react-intl";
-import { useUniqueId as K, useLabelable as W, Modal as i } from "@box/blueprint-web";
-import { UserSelectorContainer as z } from "@box/user-selector";
-import { CollaborationRole as J } from "./collaboration-role.js";
-import { SharedWithAvatars as Q } from "./shared-with-avatars.js";
-import { TextAreaContainer as X } from "./text-area-container.js";
-import { COLLABORATION_MESSAGE_CHARACTER_LIMIT as Y } from "../../../constants.js";
-import o from "./messages.js";
-import { jsxs as s, jsx as a, Fragment as Z } from "react/jsx-runtime";
-import { useCollaborationForm as $ } from "../../../hooks/use-collaboration-form.js";
-import { useUnifiedShareFormContext as ee } from "../../../contexts/unified-share-form-context.js";
-import { useUnifiedShareModalContext as te } from "../../../contexts/unified-share-modal-context.js";
-import '../../../../../styles/collaboration-section.css';const oe = "_container_19jv3_1", ae = "_label_19jv3_7", U = {
-  container: oe,
-  label: ae
+import { useRef as H, useEffect as K, useCallback as C } from "react";
+import { createPortal as W } from "react-dom";
+import { useIntl as z } from "react-intl";
+import { useUniqueId as J, useLabelable as Q, Modal as i } from "@box/blueprint-web";
+import { UserSelectorContainer as X } from "@box/user-selector";
+import { CollaborationRole as Y } from "./collaboration-role.js";
+import { SharedWithAvatars as Z } from "./shared-with-avatars.js";
+import { TextAreaContainer as $ } from "./text-area-container.js";
+import { COLLABORATION_MESSAGE_CHARACTER_LIMIT as ee } from "../../../constants.js";
+import a from "./messages.js";
+import { jsxs as s, jsx as n, Fragment as te } from "react/jsx-runtime";
+import { useCollaborationForm as oe } from "../../../hooks/use-collaboration-form.js";
+import { useUnifiedShareFormContext as ae } from "../../../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as ne } from "../../../contexts/unified-share-modal-context.js";
+import '../../../../../styles/collaboration-section.css';const re = "_container_19jv3_1", le = "_label_19jv3_7", A = {
+  container: re,
+  label: le
 };
-function ge() {
+function Fe() {
   const {
-    formatMessage: t
-  } = H(), {
-    contactValue: A,
+    formatMessage: o
+  } = z(), {
+    contactValue: B,
     container: c,
-    onModalOpenChange: g,
+    onModalOpenChange: v,
     onShareViewChange: m,
-    shareView: r,
-    userContacts: v
-  } = ee(), {
-    config: n,
-    contactService: B,
-    isFetching: x,
+    shareView: e,
+    userContacts: g
+  } = ae(), {
+    config: r,
+    contactService: x,
+    isFetching: E,
     isSubmitting: u,
     sharingService: I
-  } = te(), {
+  } = ne(), {
     getContacts: d,
-    getContactsAvatarUrls: h
-  } = B, {
-    sendInvites: P,
+    getContactsAvatarUrls: f
+  } = x, {
+    sendInvitations: P,
     sendSharedLink: _
-  } = I, f = r === "default" || r === "invite", l = r === "invite" || r === "email";
+  } = I, h = e === "default" || e === "invite", l = e === "invite" || e === "email", S = H(e === "email" ? "email" : "invite");
+  K(() => {
+    S.current = e === "email" ? "email" : "invite";
+  }, [e]);
   let b, p;
-  r === "invite" && (b = P, p = "invite-collaborators"), r === "email" && (b = _, p = "email-shared-link");
+  e === "invite" && (b = P, p = "invite-collaborators"), e === "email" && (b = _, p = "email-shared-link");
   const {
-    errors: E,
-    handleFormReset: S,
-    handleFormSubmit: O,
+    errors: O,
+    handleFormReset: F,
+    handleFormSubmit: V,
     handleSelectedUsersChange: M,
-    handleUserSelectorBlur: V,
-    isFormSubmitting: F,
+    handleUserSelectorBlur: R,
+    isFormSubmitting: L,
     updateContactValue: k
-  } = $(b, p), N = C((e) => (e.stopPropagation(), !0), []), R = C((e) => d ? d(e) : Promise.resolve([]), [d]), y = C((e) => h ? h(e) : Promise.resolve({}), [h]), T = (e) => {
-    l || m("invite"), k(e);
-  }, j = () => {
-    S(), m("default");
-  }, w = async () => {
-    await O() || (S(), g && g(!1), m("default"));
-  }, L = K("user-contacts-"), q = t(f ? o.invitePeopleLabel : o.emailSharedLinkLabel), D = W(q, L);
+  } = oe(b, p), N = C((t) => (t.stopPropagation(), !0), []), y = C((t) => d ? d(t, S.current) : Promise.resolve([]), [d]), T = C((t) => f ? f(t) : Promise.resolve({}), [f]), j = (t) => {
+    l || m("invite"), k(t);
+  }, w = () => {
+    F(), m("default");
+  }, q = async () => {
+    await V() || (F(), v && v(!1), m("default"));
+  }, U = J("user-contacts-"), D = o(h ? a.invitePeopleLabel : a.emailSharedLinkLabel), G = Q(D, U);
   return /* @__PURE__ */ s("form", {
-    className: U.container,
-    onSubmit: (e) => e.preventDefault(),
-    children: [n.collaborationNotices, /* @__PURE__ */ s("div", {
-      children: [f && n.collaborators && /* @__PURE__ */ a(Q, {}), /* @__PURE__ */ a(D, {
-        className: U.label
-      }), /* @__PURE__ */ a(z, {
+    className: A.container,
+    onSubmit: (t) => t.preventDefault(),
+    children: [r.collaborationNotices, /* @__PURE__ */ s("div", {
+      children: [h && r.collaborators && /* @__PURE__ */ n(Z, {}), /* @__PURE__ */ n(G, {
+        className: A.label
+      }), /* @__PURE__ */ n(X, {
         className: "collaboration-user-selector",
-        clearButtonAriaLabel: t(o.clearButton),
+        clearButtonAriaLabel: o(a.clearButton),
         clearOnBlur: !1,
         disabled: u,
-        error: E["user-contact"],
-        fetchAvatarUrls: y,
-        fetchUsers: R,
+        error: O["user-contact"],
+        fetchAvatarUrls: T,
+        fetchUsers: y,
         hideOnEscape: N,
-        idForLabel: L,
-        inputValue: A,
+        idForLabel: U,
+        inputValue: B,
         label: null,
-        onBlur: V,
-        onInputValueChange: T,
+        onBlur: R,
+        onInputValueChange: j,
         onSelectedUsersChange: M,
-        placeholder: v.length ? "" : t(o.invitePeoplePlaceholder),
+        placeholder: g.length ? "" : o(a.invitePeoplePlaceholder),
         portalElement: c,
-        selectedUsers: v,
+        selectedUsers: g,
         selectOnEnterOrTab: !0,
         variant: l ? "textarea" : "input"
-      }), f && n.collaborationRole && /* @__PURE__ */ a(J, {})]
-    }), l && n.collaborationMessage && /* @__PURE__ */ a(X, {
-      maxCount: Y
-    }), l && c && /* @__PURE__ */ G(/* @__PURE__ */ s(Z, {
-      children: [!x && /* @__PURE__ */ s(i.Footer, {
-        children: [/* @__PURE__ */ a(i.Footer.SecondaryButton, {
-          disabled: u ?? F,
-          onClick: j,
-          children: t(o.cancelButton)
-        }), /* @__PURE__ */ a(i.Footer.PrimaryButton, {
-          loading: u ?? F,
-          loadingAriaLabel: t(o.loadingLabel),
+      }), h && r.collaborationRole && /* @__PURE__ */ n(Y, {})]
+    }), l && r.collaborationMessage && /* @__PURE__ */ n($, {
+      maxCount: ee
+    }), l && c && /* @__PURE__ */ W(/* @__PURE__ */ s(te, {
+      children: [!E && /* @__PURE__ */ s(i.Footer, {
+        children: [/* @__PURE__ */ n(i.Footer.SecondaryButton, {
+          disabled: u ?? L,
           onClick: w,
-          children: t(o.sendButton)
+          children: o(a.cancelButton)
+        }), /* @__PURE__ */ n(i.Footer.PrimaryButton, {
+          loading: u ?? L,
+          loadingAriaLabel: o(a.loadingLabel),
+          onClick: q,
+          children: o(a.sendButton)
         })]
-      }), /* @__PURE__ */ a(i.Close, {
-        "aria-label": t(o.closeButton)
+      }), /* @__PURE__ */ n(i.Close, {
+        "aria-label": o(a.closeButton)
       })]
     }), c)]
   });
 }
 export {
-  ge as CollaborationSection
+  Fe as CollaborationSection
 };

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

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

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

@@ -1,70 +1,72 @@
-import b from "clsx";
-import { useState as v } from "react";
-import { DropdownMenu as e, TriggerButton as L } from "@box/blueprint-web";
-import { jsxs as C, jsx as n } from "react/jsx-runtime";
-import { usePermissionLevels as k } from "../../../hooks/use-permission-levels.js";
-import { useUnifiedShareModalContext as M } from "../../../contexts/unified-share-modal-context.js";
-import { useSharingAction as z } from "../../../hooks/use-sharing-action.js";
-import '../../../../../styles/shared-link-access.css';const P = "_container_xhq4z_1", q = "_overrides_xhq4z_1", w = "_content_xhq4z_6", t = {
-  container: P,
-  overrides: q,
-  content: w
+import L from "clsx";
+import { useState as C } from "react";
+import { DropdownMenu as e, TriggerButton as k } from "@box/blueprint-web";
+import { jsxs as M, jsx as n } from "react/jsx-runtime";
+import { usePermissionLevels as z } from "../../../hooks/use-permission-levels.js";
+import { useUnifiedShareModalContext as P } from "../../../contexts/unified-share-modal-context.js";
+import { useSharingAction as q } from "../../../hooks/use-sharing-action.js";
+import '../../../../../styles/shared-link-access.css';const w = "_container_xhq4z_1", I = "_overrides_xhq4z_1", O = "_content_xhq4z_6", o = {
+  container: w,
+  overrides: I,
+  content: O
 };
-function T() {
-  const [r, c] = v(!1), {
-    isSubmitting: a,
-    sharedLink: l,
+function R() {
+  const [r, a] = C(!1), {
+    isSubmitting: l,
+    sharedLink: d,
     sharingService: m
-  } = M(), {
-    access: d,
-    permission: h
-  } = l, {
-    changeSharedLinkPermission: p
+  } = P(), {
+    access: h,
+    permission: p
+  } = d, {
+    changeSharedLinkPermission: u
   } = m, {
-    isLoading: u,
-    onAction: g
-  } = z(p), {
+    isLoading: g,
+    onAction: f
+  } = q(u), {
     allowedLevels: i,
     selectedPermission: s
-  } = k();
-  if (d === "collaborators" || !i.length || !s)
+  } = z();
+  if (h === "collaborators" || !i.length || !s)
     return null;
   const {
-    label: f
+    label: S
   } = s;
-  return /* @__PURE__ */ C(e.Root, {
-    onOpenChange: c,
+  return /* @__PURE__ */ M(e.Root, {
+    onOpenChange: a,
     open: r,
     children: [/* @__PURE__ */ n(e.Trigger, {
-      children: /* @__PURE__ */ n(L, {
+      children: /* @__PURE__ */ n(k, {
         caretDirection: r ? "up" : "down",
-        className: b(t.container, t.overrides),
-        disabled: a ?? u,
-        label: f,
+        className: L(o.container, o.overrides),
+        disabled: l ?? g,
+        label: S,
         size: "extraSmall",
         variant: "tertiary"
       })
     }), /* @__PURE__ */ n(e.Content, {
       align: "start",
-      className: t.content,
+      className: o.content,
       children: i.map((x) => {
         const {
-          description: S,
-          id: o,
-          label: _
-        } = x;
+          description: _,
+          id: t,
+          label: b
+        } = x, c = p === t, v = () => {
+          c || f(t);
+        };
         return /* @__PURE__ */ n(e.CheckboxItem, {
-          checked: h === o,
-          onSelect: () => g(o),
+          checked: c,
+          onSelect: v,
           children: /* @__PURE__ */ n(e.Item.MainContent, {
-            caption: S,
-            label: _
+            caption: _,
+            label: b
           })
-        }, o);
+        }, t);
       })
     })]
   });
 }
 export {
-  T as SharedLinkPermission
+  R as SharedLinkPermission
 };

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

@@ -1,31 +1,34 @@
 import { useCallback as s } from "react";
-import { useFormValidation as V } from "./use-form-validation.js";
-import { useSharingAction as w } from "./use-sharing-action.js";
-import { useUnifiedShareFormContext as B } from "../contexts/unified-share-form-context.js";
-import { useUnifiedShareModalContext as E } from "../contexts/unified-share-modal-context.js";
-const q = (v, F) => {
+import { useFormValidation as E } from "./use-form-validation.js";
+import { useSharingAction as A } from "./use-sharing-action.js";
+import { useUnifiedShareFormContext as M } from "../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as O } from "../contexts/unified-share-modal-context.js";
+const I = (p, v) => {
   const {
     errors: f,
-    setFieldError: o,
+    setFieldError: a,
     validateUserContact: C,
     validateUserSelector: i
-  } = V(), {
-    contactService: g
   } = E(), {
+    contactService: h
+  } = O(), {
+    collaborationRole: F,
+    messageValue: b,
     setContactValue: l,
-    setMessageValue: h,
-    setUserContacts: a,
-    userContacts: n
-  } = B(), {
-    isLoading: b,
-    onAction: U
-  } = w(v, F), {
+    setMessageValue: U,
+    setUserContacts: r,
+    shareView: x,
+    userContacts: o
+  } = M(), {
+    isLoading: y,
+    onAction: V
+  } = A(p, v), {
     getContactByEmail: u
-  } = g, S = () => {
-    a([]), l(""), h(""), o("user-contact", "");
-  }, x = s((t) => {
-    o("user-contact", ""), l(t);
-  }, [l, o]), p = s(async (t) => {
+  } = h, S = () => {
+    r([]), l(""), U(""), a("user-contact", "");
+  }, w = s((t) => {
+    a("user-contact", ""), l(t);
+  }, [l, a]), g = s(async (t) => {
     if (t.id)
       return t;
     if (u) {
@@ -41,29 +44,37 @@ const q = (v, F) => {
       value: t.value
     };
   }, [u, C]), m = s(async (t) => {
-    if (o("user-contact", ""), i(t), n.length >= t.length) {
-      a(t);
+    if (a("user-contact", ""), i(t), o.length >= t.length) {
+      r(t);
       return;
     }
-    const [e, ...d] = [...t].reverse(), r = await p(e), c = r ? [...d, r] : d;
-    a(c.filter(Boolean));
-  }, [p, o, a, i, n]), y = s((t) => {
-    var r, c;
-    const e = (r = t.relatedTarget) == null ? void 0 : r.closest(".collaboration-user-selector");
-    (c = document.querySelector('div[role="listbox"][aria-labelledby^="user-contacts"]')) != null && c.contains(t.relatedTarget) || e || m([...n, {
+    const [e, ...d] = [...t].reverse(), n = await g(e), c = n ? [...d, n] : d;
+    r(c.filter(Boolean));
+  }, [g, a, r, i, o]), B = s((t) => {
+    var n, c;
+    const e = (n = t.relatedTarget) == null ? void 0 : n.closest(".collaboration-user-selector");
+    (c = document.querySelector('div[role="listbox"][aria-labelledby^="user-contacts"]')) != null && c.contains(t.relatedTarget) || e || m([...o, {
       value: t.target.value
     }]);
-  }, [m, n]);
+  }, [m, o]);
   return {
     errors: f,
     handleFormReset: S,
-    handleFormSubmit: async () => f["user-contact"] || i(n) ? !0 : (await U({}), S(), !1),
+    handleFormSubmit: async () => {
+      if (f["user-contact"] || i(o))
+        return !0;
+      const t = {
+        contacts: o,
+        message: b
+      };
+      return x === "invite" && (t.role = F.id), await V(t), S(), !1;
+    },
     handleSelectedUsersChange: m,
-    handleUserSelectorBlur: y,
-    isFormSubmitting: b,
-    updateContactValue: x
+    handleUserSelectorBlur: B,
+    isFormSubmitting: y,
+    updateContactValue: w
   };
 };
 export {
-  q as useCollaborationForm
+  I as useCollaborationForm
 };

package/dist/esm/lib/hooks/use-link-settings-form.js

@@ -1,58 +1,62 @@
-import { useState as N, useCallback as d } from "react";
-import { useFormValidation as b } from "./use-form-validation.js";
-import { useSharingAction as P } from "./use-sharing-action.js";
-import { getSharedLinkFormValidation as U } from "../utils/validation.js";
-import { useUnifiedShareModalContext as A } from "../contexts/unified-share-modal-context.js";
-const q = (t) => {
-  const [o, a] = N(t), {
-    errors: l,
+import { useState as P, useCallback as d } from "react";
+import { useFormValidation as A } from "./use-form-validation.js";
+import { useSharingAction as C } from "./use-sharing-action.js";
+import { getUpdatedLinkSettingsFormData as j } from "../utils/form.js";
+import { useUnifiedShareModalContext as M } from "../contexts/unified-share-modal-context.js";
+const G = (r) => {
+  const [e, o] = P(r), {
+    errors: h,
     setErrors: c,
     setFieldError: s,
-    validateExpiration: u,
-    validatePassword: n,
-    validateVanityName: m
-  } = b(), {
-    sharedLink: f,
-    sharingService: E
+    validateExpiration: m,
+    validatePassword: a,
+    validateVanityName: p
   } = A(), {
-    settings: p
-  } = f, {
-    updateSharedLink: S
-  } = E, {
-    isLoading: g,
-    onAction: h
-  } = P(S, "update-shared-link"), V = d((r, e) => {
-    a((i) => ({
+    sharingService: l
+  } = M(), {
+    updateSharedLink: E
+  } = l, {
+    isLoading: f,
+    onAction: u
+  } = C(E, "update-shared-link"), S = d((t, n) => {
+    o((i) => ({
       ...i,
-      [r]: e
+      [t]: n
     }));
-  }, []), k = d(() => {
-    a(t), c({});
-  }, [t, c, a]), x = d(async () => {
-    const {
-      updatedFormData: r,
-      shouldValidate: e
-    } = U(p, o, t), i = e.expiration && u(r.updatedExpiration), y = e.password && n(r.updatedPassword), v = e.vanityName && m(r.updatedVanityName);
-    if (i || y || v)
+  }, []), g = d(() => {
+    o(r), c({});
+  }, [r, c, o]), b = d(async () => {
+    const t = j(e, r), {
+      expiration: n,
+      isExpirationEnabled: i,
+      isPasswordEnabled: x,
+      isVanityNameEnabled: y,
+      password: k,
+      vanityName: v
+    } = t, w = i && m(n), V = x && a(k), F = y && p(v);
+    if (w || V || F)
       return !0;
     try {
-      await h(r);
-    } catch (w) {
-      return Object.entries(w).forEach(([F, L]) => s(F, L)), !0;
+      await u({
+        ...r,
+        ...t
+      });
+    } catch (L) {
+      return Object.entries(L).forEach(([N, U]) => s(N, U)), !0;
     }
     return !1;
-  }, [o, t, h, s, p, u, n, m]);
+  }, [e, r, u, s, m, a, p]);
   return {
-    errors: l,
-    formData: o,
-    handleFormReset: k,
-    handleFormSubmit: x,
-    isUpdating: g,
+    errors: h,
+    formData: e,
+    handleFormReset: g,
+    handleFormSubmit: b,
+    isUpdating: f,
     setFieldError: s,
-    setFieldValue: V,
-    validatePassword: n
+    setFieldValue: S,
+    validatePassword: a
   };
 };
 export {
-  q as useLinkSettingsForm
+  G as useLinkSettingsForm
 };

package/dist/esm/lib/utils/date.js

@@ -1,14 +1,14 @@
 import { toCalendarDate as e, fromAbsolute as o, getLocalTimeZone as a, DateFormatter as m } from "@box/blueprint-web";
-const D = 1e3, c = 24 * 60 * 60 * D, s = (t) => e(o(t, a())), d = (t) => {
+const D = 1e3, c = 24 * 60 * 60 * D, s = (t) => e(o(t, a())), u = (t) => {
   const r = navigator.language || "en-US", n = s(t).toDate(a());
   return new m(r, {
     day: "numeric",
     month: "long",
     year: "numeric"
   }).format(n);
-}, u = () => e(o(Date.now() + c, a()));
+}, d = () => e(o(Date.now() + c, a()));
 export {
   s as formatDateFromTimestampToCalendarDate,
-  d as formatDateFromTimestampToDateString,
-  u as formatTomorrowDateToCalendarDate
+  u as formatDateFromTimestampToDateString,
+  d as formatTomorrowDateToCalendarDate
 };

package/dist/esm/lib/utils/form.js

@@ -0,0 +1,16 @@
+const r = (b, i) => {
+  var E;
+  const {
+    expiration: a,
+    isDownloadEnabled: l,
+    isExpirationEnabled: s,
+    isPasswordEnabled: d,
+    isVanityNameEnabled: o,
+    password: t,
+    vanityName: e
+  } = b, n = {};
+  return l !== i.isDownloadEnabled && (n.isDownloadEnabled = l), (s !== i.isExpirationEnabled || (a == null ? void 0 : a.toString()) !== ((E = i.expiration) == null ? void 0 : E.toString())) && (n.isExpirationEnabled = s, n.expiration = s ? a : null), (d !== i.isPasswordEnabled || t !== i.password) && (n.isPasswordEnabled = d, n.password = d ? t : null), (o !== i.isVanityNameEnabled || e !== i.vanityName) && (n.isVanityNameEnabled = o, n.vanityName = o ? e : null), n;
+};
+export {
+  r as getUpdatedLinkSettingsFormData
+};

package/dist/esm/lib/utils/index.js

@@ -1,27 +1,28 @@
 import { getAvatarBadgeSize as a, getDefaultCollaborationRole as t, getFirstInitial as r, isCollaboratorRoleSupported as s, isInvitationRoleSupported as i } from "./collaborator.js";
 import { formatDateFromTimestampToCalendarDate as d, formatDateFromTimestampToDateString as l, formatTomorrowDateToCalendarDate as m } from "./date.js";
-import { callOnKeyboardEvent as p } from "./event.js";
-import { getAllowedAccessLevels as w, getAllowedPermissionLevels as g } from "./permission.js";
-import { doesPasswordContainInvalidCharacter as P, doesPasswordContainLetter as v, doesPasswordContainMinCharacters as x, doesPasswordContainMixedCase as S, doesPasswordContainNumber as T, doesPasswordContainSymbol as b, getSharedLinkFormValidation as c, isEmailValid as u, isVanityNameValid as A } from "./validation.js";
+import { callOnKeyboardEvent as C } from "./event.js";
+import { getUpdatedLinkSettingsFormData as g } from "./form.js";
+import { getAllowedAccessLevels as D, getAllowedPermissionLevels as x } from "./permission.js";
+import { doesPasswordContainInvalidCharacter as v, doesPasswordContainLetter as S, doesPasswordContainMinCharacters as T, doesPasswordContainMixedCase as b, doesPasswordContainNumber as c, doesPasswordContainSymbol as u, isEmailValid as A, isVanityNameValid as F } from "./validation.js";
 export {
-  p as callOnKeyboardEvent,
-  P as doesPasswordContainInvalidCharacter,
-  v as doesPasswordContainLetter,
-  x as doesPasswordContainMinCharacters,
-  S as doesPasswordContainMixedCase,
-  T as doesPasswordContainNumber,
-  b as doesPasswordContainSymbol,
+  C as callOnKeyboardEvent,
+  v as doesPasswordContainInvalidCharacter,
+  S as doesPasswordContainLetter,
+  T as doesPasswordContainMinCharacters,
+  b as doesPasswordContainMixedCase,
+  c as doesPasswordContainNumber,
+  u as doesPasswordContainSymbol,
   d as formatDateFromTimestampToCalendarDate,
   l as formatDateFromTimestampToDateString,
   m as formatTomorrowDateToCalendarDate,
-  w as getAllowedAccessLevels,
-  g as getAllowedPermissionLevels,
+  D as getAllowedAccessLevels,
+  x as getAllowedPermissionLevels,
   a as getAvatarBadgeSize,
   t as getDefaultCollaborationRole,
   r as getFirstInitial,
-  c as getSharedLinkFormValidation,
+  g as getUpdatedLinkSettingsFormData,
   s as isCollaboratorRoleSupported,
-  u as isEmailValid,
+  A as isEmailValid,
   i as isInvitationRoleSupported,
-  A as isVanityNameValid
+  F as isVanityNameValid
 };

package/dist/esm/lib/utils/validation.js

@@ -1,43 +1,11 @@
-const P = /^[a-zA-Z0-9-]{12,30}$/, g = /^[A-Z0-9._'%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, h = (a) => P.test(a), v = (a) => g.test(a), N = (a) => a.length >= 8, V = (a) => a.replace(/\D/g, "").length >= 1, f = (a) => a.replace(/\s/g, "").replace(/\w/g, "").length >= 1, y = (a) => /[a-zA-Z]/.test(a), x = (a) => /[a-z]/.test(a) && /[A-Z]/.test(a), D = (a) => /[\s<>]/.test(a), Z = (a, d, r) => {
-  const {
-    expiration: l,
-    isDownloadEnabled: c,
-    isExpirationEnabled: n,
-    isPasswordEnabled: s,
-    isVanityEnabled: o,
-    password: i,
-    vanityName: u
-  } = d, {
-    canChangeDownload: p,
-    canChangeExpiration: w,
-    canChangeVanityName: E,
-    canChangePassword: m,
-    isDownloadAvailable: C,
-    isPasswordAvailable: b,
-    isVanityNameAvailable: A
-  } = a, e = {
-    updatedExpiration: n ? l : 0,
-    updatedPassword: s ? i : "",
-    updatedVanityName: o ? u : "",
-    updatedIsDownloadEnabled: c
-  }, t = {
-    expiration: !1,
-    password: !1,
-    vanityName: !1
-  };
-  return w ? n && (t.expiration = !0) : e.updatedExpiration = void 0, !b || !m || r.isPasswordEnabled && !i ? e.updatedPassword = void 0 : s && (t.password = !0), !A || !E ? e.updatedVanityName = void 0 : o && (t.vanityName = !0), (!C || !p) && (e.updatedIsDownloadEnabled = void 0), {
-    updatedFormData: e,
-    shouldValidate: t
-  };
-};
+const e = /^[a-zA-Z0-9-]{12,30}$/, s = /^[A-Z0-9._'%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, n = (t) => e.test(t), r = (t) => s.test(t), o = (t) => t.length >= 8, a = (t) => t.replace(/\D/g, "").length >= 1, i = (t) => t.replace(/\s/g, "").replace(/\w/g, "").length >= 1, c = (t) => /[a-zA-Z]/.test(t), d = (t) => /[a-z]/.test(t) && /[A-Z]/.test(t), l = (t) => /[\s<>]/.test(t);
 export {
-  D as doesPasswordContainInvalidCharacter,
-  y as doesPasswordContainLetter,
-  N as doesPasswordContainMinCharacters,
-  x as doesPasswordContainMixedCase,
-  V as doesPasswordContainNumber,
-  f as doesPasswordContainSymbol,
-  Z as getSharedLinkFormValidation,
-  v as isEmailValid,
-  h as isVanityNameValid
+  l as doesPasswordContainInvalidCharacter,
+  c as doesPasswordContainLetter,
+  o as doesPasswordContainMinCharacters,
+  d as doesPasswordContainMixedCase,
+  a as doesPasswordContainNumber,
+  i as doesPasswordContainSymbol,
+  r as isEmailValid,
+  n as isVanityNameValid
 };

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

@@ -18,9 +18,11 @@ export declare const mockSharedLink: SharedLink;
 export declare const useMockSharedLink: (sharedLinkArg: any) => {
     sharedLink: SharedLink;
     sharingService: {
+        sendInvitations: (formData: any) => Promise<void>;
+        sendSharedLink: (formData: any) => Promise<void>;
         createSharedLink: () => Promise<void>;
         deleteSharedLink: () => Promise<void>;
-        updateSharedLink: () => Promise<void>;
+        updateSharedLink: (formData: any) => Promise<void>;
         changeSharedLinkAccess: (access: any) => Promise<void>;
         changeSharedLinkPermission: (permission: any) => Promise<void>;
     };

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

@@ -138,14 +138,41 @@ export interface SharedLink {
     vanityName?: string;
 }
 export interface SharedLinkSettings {
+    /**
+     * When `true`, the user can update the download settings of the shared link.
+     */
     canChangeDownload?: boolean;
+    /**
+     * When `true`, the user can update the expiration settings of the shared link.
+     */
     canChangeExpiration?: boolean;
+    /**
+     * When `true`, the user can update the password settings of the shared link.
+     */
     canChangePassword?: boolean;
+    /**
+     * When `true`, the user can update the custom URL settings of the shared link.
+     */
     canChangeVanityName?: boolean;
+    /**
+     * When `true`, the download settings of the shared link are visible to the user.
+     */
     isDownloadAvailable?: boolean;
+    /**
+     * When `true`, users with the shared link can download the item.
+     */
     isDownloadEnabled?: boolean;
+    /**
+     * When `true`, the password settings of the shared link are visible to the user.
+     */
     isPasswordAvailable?: boolean;
+    /**
+     * When `true`, users with the shared link must enter a password to access the item.
+     */
     isPasswordEnabled?: boolean;
+    /**
+     * When `true`, the custom URL settings of the shared link are visible to the user.
+     */
     isVanityNameAvailable?: boolean;
 }
 export interface AccessLevel {
@@ -280,17 +307,67 @@ export interface EventService {
     onSharedLinkSettingsLoad?: () => void;
 }
 export interface ContactService {
+    /**
+     * Function to retrieve a contact by email address.
+     *
+     * Called when the user enters a value that is not in the suggested contacts.
+     */
     getContactByEmail?: (email: string) => Promise<UserContactType | void>;
-    getContacts?: (query: string) => Promise<UserContactType[]>;
+    /**
+     * Function to retrieve a list of suggested contacts.
+     *
+     * Called when the input value of the contact combobox is changed.
+     */
+    getContacts?: (query: string, view: 'email' | 'invite') => Promise<UserContactType[]>;
+    /**
+     * Function to retrieve avatar URLs for a list of contacts.
+     *
+     * Called when the list of suggested contacts is updated.
+     */
     getContactsAvatarUrls?: (userContacts: UserContactType[]) => Promise<FetchedAvatarUrls>;
 }
 export interface SharingService {
-    sendInvites?: () => Promise<SharingResponse | void>;
-    sendSharedLink?: () => Promise<SharingResponse | void>;
+    /**
+     * Function to invite new collaborators to the item.
+     *
+     * Called when the user clicks "Send" on the invite view of the sharing form.
+     */
+    sendInvitations?: (formData: CollaborationFormData) => Promise<SharingResponse | void>;
+    /**
+     * Function to email the shared link to the selected contacts.
+     *
+     * Called when the user clicks "Send" on the email view of the sharing form.
+     */
+    sendSharedLink?: (formData: CollaborationFormData) => Promise<SharingResponse | void>;
+    /**
+     * Function to create a shared link for the item.
+     *
+     * Called when the user enables the "Share Link" toggle on the sharing form.
+     */
     createSharedLink?: () => Promise<SharingResponse | void>;
+    /**
+     * Function to delete the shared link for the item.
+     *
+     * Called when the user disables the "Share Link" toggle on the sharing form.
+     */
     deleteSharedLink?: () => Promise<SharingResponse | void>;
-    updateSharedLink?: () => Promise<SharingResponse | void>;
+    /**
+     * Function to update the shared link for the item.
+     *
+     * Called when the user saves changes to the shared link settings.
+     */
+    updateSharedLink?: (formData: LinkSettingsFormData) => Promise<SharingResponse | void>;
+    /**
+     * Function to change the access level of the shared link.
+     *
+     * Called when the user selects an access level for the shared link.
+     */
     changeSharedLinkAccess?: (access: AccessLevelType) => Promise<void>;
+    /**
+     * Function to change the permission level of the shared link.
+     *
+     * Called when the user selects a permission level for the shared link.
+     */
     changeSharedLinkPermission?: (permission: PermissionLevelType) => Promise<void>;
 }
 /**
@@ -320,14 +397,57 @@ export interface SharingError {
         [key: string]: string;
     };
 }
+/**
+ * Form data structure for the collaboration form in the Unified Share Modal.
+ */
+export interface CollaborationFormData {
+    /**
+     * The selected contacts to invite as collaborators or email the shared link.
+     */
+    contacts: UserContactType[];
+    /**
+     * The message to send to collaborators or shared link recipients.
+     */
+    message: string;
+    /**
+     * The selected collaboration role when inviting new collaborators.
+     *
+     * This property is omitted when emailing the shared link.
+     */
+    role?: InvitationRole | string;
+}
+/**
+ * Form data structure for the link settings form in the Unified Share Modal.
+ */
 export interface LinkSettingsFormData {
-    expiration?: DateValue;
+    /**
+     * The selected calendar date when the item will be unshared.
+     */
+    expiration: DateValue;
+    /**
+     * When `true`, users with the shared link can download the item.
+     */
     isDownloadEnabled: boolean;
+    /**
+     * When `true`, the shared link will expire on a specific date.
+     */
     isExpirationEnabled: boolean;
+    /**
+     * When `true`, users with the shared link must enter a password.
+     */
     isPasswordEnabled: boolean;
-    isVanityEnabled: boolean;
-    password?: string;
-    vanityName?: string;
+    /**
+     * When `true`, users can access the shared link with a custom URL.
+     */
+    isVanityNameEnabled: boolean;
+    /**
+     * The password required by users to access the shared link.
+     */
+    password: string;
+    /**
+     * The path name for users to access the item through a non-private URL.
+     */
+    vanityName: string;
 }
 /**
  * Configuration options for configuring features in the Unified Share Modal.

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

@@ -0,0 +1,3 @@
+import { LinkSettingsFormData } from '../types';
+declare const getUpdatedLinkSettingsFormData: (nextData: LinkSettingsFormData, prevData: LinkSettingsFormData) => Partial<LinkSettingsFormData>;
+export { getUpdatedLinkSettingsFormData };

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

@@ -1,5 +1,6 @@
 export * from './collaborator';
 export * from './date';
 export * from './event';
+export * from './form';
 export * from './permission';
 export * from './validation';

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

@@ -6,16 +6,3 @@ export declare const doesPasswordContainSymbol: (password: string) => boolean;
 export declare const doesPasswordContainLetter: (password: string) => boolean;
 export declare const doesPasswordContainMixedCase: (password: string) => boolean;
 export declare const doesPasswordContainInvalidCharacter: (password: string) => boolean;
-export declare const getSharedLinkFormValidation: (settings: any, formData: any, initialFormData: any) => {
-    updatedFormData: {
-        updatedExpiration: any;
-        updatedPassword: any;
-        updatedVanityName: any;
-        updatedIsDownloadEnabled: any;
-    };
-    shouldValidate: {
-        expiration: boolean;
-        password: boolean;
-        vanityName: boolean;
-    };
-};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/unified-share-modal",
-    "version": "0.48.5",
+    "version": "0.48.6",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^9.18.13",
@@ -13,9 +13,9 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.75.3",
+        "@box/blueprint-web": "^12.75.4",
         "@box/blueprint-web-assets": "^4.67.0",
-        "@box/copy-input": "^0.22.9",
+        "@box/copy-input": "^0.22.10",
         "@box/storybook-utils": "0.14.3",
         "@box/eslint-plugin-blueprint": "1.0.4",
         "react-intl": "^6.4.2"