@box/unified-share-modal 1.33.0 → 1.35.0

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/collaboration-role.js

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