@box/unified-share-modal 0.49.0 → 0.50.0

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

@@ -1,144 +1,153 @@
-import { useRef as y, useState as R, useCallback as b, useEffect as _ } from "react";
-import { useIntl as F } from "react-intl";
-import { Text as B, Tooltip as S, Switch as M, Status as U, Link as j, Button as K } from "@box/blueprint-web";
-import { ClockBadge as V, Envelope as z } from "@box/blueprint-web-assets/icons/Line";
-import { SurfaceStatusSurfaceRed as O } from "@box/blueprint-web-assets/tokens/tokens";
-import { CopyInput as G } from "@box/copy-input";
-import { SharedLinkAccess as H } from "./shared-link-access.js";
-import { SharedLinkPermission as J } from "./shared-link-permission.js";
+import { useRef as b, useState as U, useCallback as x, useEffect as D } from "react";
+import { useIntl as j } from "react-intl";
+import { Text as K, Tooltip as T, Focusable as V, Switch as O, Status as G, Link as H, Button as J } from "@box/blueprint-web";
+import { ClockBadge as Q, Envelope as W } from "@box/blueprint-web-assets/icons/Line";
+import { SurfaceStatusSurfaceRed as X } from "@box/blueprint-web-assets/tokens/tokens";
+import { CopyInput as Y } from "@box/copy-input";
+import { SharedLinkAccess as Z } from "./shared-link-access.js";
+import { SharedLinkPermission as $ } from "./shared-link-permission.js";
 import t from "./messages.js";
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { useUnifiedShareFormContext as Q } from "../../../contexts/unified-share-form-context.js";
-import { useUnifiedShareModalContext as W } from "../../../contexts/unified-share-modal-context.js";
-import { useSharingAction as T } from "../../../hooks/use-sharing-action.js";
-import { formatDateFromTimestampToDateString as X } from "../../../utils/date.js";
-import { callOnKeyboardEvent as Y } from "../../../utils/event.js";
-import '../../../../../styles/shared-link-section.css';const Z = "_container_cabqc_1", $ = "_toggle_cabqc_7", ee = "_settings_cabqc_13", te = "_copy_cabqc_18", ne = "_access_cabqc_26", c = {
-  container: Z,
-  toggle: $,
-  settings: ee,
-  copy: te,
-  access: ne
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import { useUnifiedShareFormContext as ee } from "../../../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as te } from "../../../contexts/unified-share-modal-context.js";
+import { useSharingAction as E } from "../../../hooks/use-sharing-action.js";
+import { formatDateFromTimestampToDateString as ie } from "../../../utils/date.js";
+import { callOnKeyboardEvent as ne } from "../../../utils/event.js";
+import '../../../../../styles/shared-link-section.css';const oe = "_container_q90iz_1", ae = "_toggle_q90iz_7", se = "_settings_q90iz_13", re = "_copy_q90iz_22", ce = "_access_q90iz_30", d = {
+  container: oe,
+  toggle: ae,
+  settings: se,
+  copy: re,
+  access: ce
 };
-function Le() {
+function Te() {
   const {
     formatMessage: e
-  } = F(), p = y(!0), f = y(null), l = y(null), {
-    onModalViewChange: d,
-    onShareViewChange: E
-  } = Q(), {
-    config: a,
-    isSubmitting: g,
-    sharedLink: u,
-    sharingService: I
-  } = W(), {
-    createSharedLink: N
-  } = I, {
+  } = j(), k = b(!0), L = b(null), u = b(null), {
+    onModalViewChange: h,
+    onShareViewChange: I
+  } = ee(), {
+    config: o,
+    isSubmitting: N,
+    item: P,
+    sharedLink: m,
+    sharingService: w
+  } = te(), {
+    permissions: v = {}
+  } = P, {
+    createSharedLink: z
+  } = w, {
     sharedLinkAutoCopy: r,
-    sharedLinkAutoCreate: k
-  } = a, n = !!u.url, [L, P] = R(!1);
-  let x = "create-shared-link";
-  r && (x = "auto-copy-shared-link");
+    sharedLinkAutoCreate: C
+  } = o;
+  let A = "create-shared-link";
+  r && (A = "auto-copy-shared-link");
   const {
-    isLoading: v,
-    onAction: C
-  } = T(N, x), m = b(async () => {
-    n || (await C(), P(!0));
-  }, [n, C]), w = b(async () => (m(), new Promise((i) => {
-    l.current = {
-      resolve: i
+    isLoading: F,
+    onAction: y
+  } = E(z, A), i = !!m.url, a = N ?? F, [S, q] = U(!1), p = x(async () => {
+    i || (await y(), q(!0));
+  }, [i, y]), R = x(async () => (p(), new Promise((s) => {
+    u.current = {
+      resolve: s
     };
-  })), [m]), {
-    onAction: A
-  } = T(w, "auto-copy-shared-link");
-  _(() => {
-    p.current && (r ? A() : k && m(), p.current = !1);
-  }, [p, r, k, m, A]), _(() => {
-    n && r && f.current && f.current.click();
-  }, [n, r]);
-  const D = b((s) => {
-    if (!l.current)
+  })), [p]), {
+    onAction: _
+  } = E(R, "auto-copy-shared-link");
+  D(() => {
+    k.current && (r ? _() : C && p(), k.current = !1);
+  }, [k, r, C, p, _]), D(() => {
+    i && r && L.current && L.current.click();
+  }, [i, r]);
+  const B = x((l) => {
+    if (!u.current)
       return;
-    let i;
-    s instanceof Error ? i = L ? e(t.autoCreateCopyErrorNoticeText) : null : i = e(L ? t.autoCreateCopySuccessNoticeText : t.autoCopySuccessNoticeText), i && l.current.resolve({
+    let s;
+    l instanceof Error ? s = S ? e(t.autoCreateCopyErrorNoticeText) : null : s = e(S ? t.autoCreateCopySuccessNoticeText : t.autoCopySuccessNoticeText), s && u.current.resolve({
       messages: [{
-        text: i,
+        text: s,
         type: "success"
       }]
-    }), l.current = null;
-  }, [e, L]), q = async (s) => {
-    !s && d && d("remove-shared-link"), s && await C();
+    }), u.current = null;
+  }, [e, S]), M = async (l) => {
+    !l && h && h("remove-shared-link"), l && await y();
   };
-  return /* @__PURE__ */ h("div", {
-    className: c.container,
-    children: [/* @__PURE__ */ o(B, {
+  let c, f = !1;
+  return !i && !a && (c = e(t.sharedLinkToggleTooltip)), !i && !v.canShare && (c = e(t.createLinkDisabledTooltip), f = !0), i && !v.canSetShareAccess && (c = e(t.removeLinkDisabledTooltip), f = !0), /* @__PURE__ */ g("div", {
+    className: d.container,
+    children: [/* @__PURE__ */ n(K, {
       as: "label",
       variant: "bodyDefaultBold",
       children: e(t.shareLinkLabel)
-    }), /* @__PURE__ */ h("div", {
-      className: c.toggle,
-      children: [/* @__PURE__ */ o(S, {
+    }), /* @__PURE__ */ g("div", {
+      className: d.toggle,
+      children: [/* @__PURE__ */ n(T, {
         align: "start",
-        content: e(t.sharedLinkToggleTooltip),
+        content: c,
         "data-testid": "shared-link-tooltip",
-        open: n ? !1 : void 0,
-        children: /* @__PURE__ */ o(M.Item, {
-          checked: n,
-          disabled: g ?? v,
-          label: e(t.sharedLinkToggleLabel),
-          onCheckedChange: q,
-          value: "shared-link"
+        open: c ? void 0 : !1,
+        children: /* @__PURE__ */ n(V, {
+          focusable: f,
+          children: /* @__PURE__ */ n(O.Item, {
+            checked: i,
+            disabled: f || a,
+            label: e(t.sharedLinkToggleLabel),
+            onCheckedChange: M,
+            value: "shared-link"
+          })
         })
-      }), n && !!u.expiresAt && /* @__PURE__ */ o(S, {
+      }), i && !!m.expiresAt && /* @__PURE__ */ n(T, {
         content: e(t.expirationIconTooltip, {
-          expirationDate: X(u.expiresAt)
+          expirationDate: ie(m.expiresAt)
         }),
         "data-testid": "expiration-date-tooltip",
-        children: /* @__PURE__ */ o(U, {
-          color: O,
+        children: /* @__PURE__ */ n(G, {
+          color: X,
           hideText: !0,
-          icon: V,
+          icon: Q,
           text: e(t.expirationIconLabel)
         })
-      }), n && a.sharedLinkSettings && /* @__PURE__ */ o(j, {
-        className: c.settings,
-        onClick: () => d("shared-link-settings"),
-        onKeyDown: Y(() => d("shared-link-settings"), {
+      }), i && o.sharedLinkSettings && /* @__PURE__ */ n(H, {
+        "aria-disabled": a,
+        "aria-haspopup": "dialog",
+        className: d.settings,
+        onClick: () => h("shared-link-settings"),
+        onKeyDown: ne(() => h("shared-link-settings"), {
           canPreventDefault: !0
         }),
         role: "button",
-        tabIndex: 0,
+        tabIndex: a ? -1 : 0,
         variant: "standalone",
         children: e(t.sharedLinkSettingsLabel)
       })]
-    }), n && /* @__PURE__ */ h("div", {
-      className: c.copy,
-      children: [/* @__PURE__ */ o(G, {
-        ref: f,
-        autoFocus: k && n,
-        disabled: g ?? v,
+    }), i && /* @__PURE__ */ g("div", {
+      className: d.copy,
+      children: [/* @__PURE__ */ n(Y, {
+        ref: L,
+        autoFocus: C && i,
+        disabled: a,
         hideLabel: !0,
         label: e(t.sharedLinkUrlLabel),
-        onCopy: D,
-        value: u.url
-      }), a.sharedLinkEmail && /* @__PURE__ */ o(S, {
+        onCopy: B,
+        value: m.url
+      }), o.sharedLinkEmail && /* @__PURE__ */ n(T, {
         align: "end",
         content: e(t.sharedLinkEmailLabel),
-        children: /* @__PURE__ */ o(K, {
+        children: /* @__PURE__ */ n(J, {
           "aria-label": e(t.sharedLinkEmailLabel),
-          disabled: g,
-          icon: z,
-          onClick: () => E("email"),
+          disabled: a,
+          icon: W,
+          onClick: () => I("email"),
           size: "large",
           variant: "secondary"
         })
       })]
-    }), n && (a.sharedLinkAccess || a.sharedLinkPermission) && /* @__PURE__ */ h("div", {
-      className: c.access,
-      children: [a.sharedLinkAccess && /* @__PURE__ */ o(H, {}), a.sharedLinkPermission && /* @__PURE__ */ o(J, {})]
+    }), i && (o.sharedLinkAccess || o.sharedLinkPermission) && /* @__PURE__ */ g("div", {
+      className: d.access,
+      children: [o.sharedLinkAccess && /* @__PURE__ */ n(Z, {}), o.sharedLinkPermission && /* @__PURE__ */ n($, {})]
     })]
   });
 }
 export {
-  Le as SharedLinkSection
+  Te as SharedLinkSection
 };

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

@@ -1,72 +1,81 @@
 import y from "clsx";
-import { useState as h, useCallback as w } from "react";
-import { useIntl as x } from "react-intl";
-import { Modal as o, LoadingIndicator as N } from "@box/blueprint-web";
-import { UnifiedShareForm as U } from "./unified-share-form.js";
-import i from "./messages.js";
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { UnifiedShareFormProvider as v } from "../../contexts/unified-share-form-context.js";
-import { useUnifiedShareModalContext as D } from "../../contexts/unified-share-modal-context.js";
-import '../../../../styles/unified-share-form-modal.css';const O = "_body_1udrf_1", P = "_hasFooter_1udrf_12", V = "_loading_1udrf_16", j = "_content_1udrf_38", t = {
-  body: O,
-  hasFooter: P,
-  loading: V,
-  content: j
+import { useState as g, useCallback as w } from "react";
+import { useIntl as N } from "react-intl";
+import { Modal as o, Status as U, LoadingIndicator as I } from "@box/blueprint-web";
+import { Shield as P } from "@box/blueprint-web-assets/icons/Line";
+import { UnifiedShareForm as v } from "./unified-share-form.js";
+import l from "./messages.js";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { UnifiedShareFormProvider as D } from "../../contexts/unified-share-form-context.js";
+import { useUnifiedShareModalContext as O } from "../../contexts/unified-share-modal-context.js";
+import '../../../../styles/unified-share-form-modal.css';const V = "_content_1tnt5_1", j = "_header_1tnt5_5", z = "_body_1tnt5_12", B = "_hasFooter_1tnt5_23", L = "_loading_1tnt5_27", t = {
+  content: V,
+  header: j,
+  body: z,
+  hasFooter: B,
+  loading: L
 };
-function A({
+function Q({
   children: d,
-  isOpen: u,
-  onOpenChange: n,
-  onModalViewChange: g
+  isOpen: p,
+  onOpenChange: a,
+  onModalViewChange: u
 }) {
   const {
     formatMessage: r
-  } = x(), {
-    isFetching: p,
-    item: _
-  } = D(), {
-    name: F
-  } = _, [b, C] = h(null), [l, c] = h("default"), M = !!d, m = l !== "default", f = w((a) => {
-    c("default"), n && n(a);
-  }, [n]), S = (a) => {
-    a.preventDefault();
+  } = N(), {
+    isFetching: _,
+    item: F
+  } = O(), {
+    classification: i,
+    name: S
+  } = F, [b, C] = g(null), [c, m] = g("default"), x = !!d, h = c !== "default", f = w((s) => {
+    m("default"), a && a(s);
+  }, [a]), M = (s) => {
+    s.preventDefault();
   };
-  return /* @__PURE__ */ s(o, {
+  return /* @__PURE__ */ n(o, {
     onOpenChange: f,
-    open: u,
-    children: [M && /* @__PURE__ */ e(o.Trigger, {
+    open: p,
+    children: [x && /* @__PURE__ */ e(o.Trigger, {
       children: d
-    }), /* @__PURE__ */ s(o.Content, {
+    }), /* @__PURE__ */ n(o.Content, {
       ref: C,
       className: t.content,
-      onPointerDownOutside: S,
+      onPointerDownOutside: M,
       size: "medium",
-      children: [/* @__PURE__ */ e(o.Header, {
-        children: r(i.title, {
-          itemName: F
-        })
+      children: [/* @__PURE__ */ n(o.Header, {
+        className: t.header,
+        children: [r(l.title, {
+          itemName: S
+        }), i && /* @__PURE__ */ e(U, {
+          colorIndex: i.colorId + 1,
+          icon: P,
+          iconPosition: "left",
+          text: i.name.toUpperCase()
+        })]
       }), /* @__PURE__ */ e(o.Body, {
-        className: y(t.body, m && t.hasFooter),
-        children: /* @__PURE__ */ s(v, {
+        className: y(t.body, h && t.hasFooter),
+        children: /* @__PURE__ */ n(D, {
           container: b,
           onModalOpenChange: f,
-          onModalViewChange: g,
-          onShareViewChange: c,
-          shareView: l,
-          children: [p && /* @__PURE__ */ e("div", {
+          onModalViewChange: u,
+          onShareViewChange: m,
+          shareView: c,
+          children: [_ && /* @__PURE__ */ e("div", {
             className: t.loading,
-            children: /* @__PURE__ */ e(N, {
-              "aria-label": r(i.loadingLabel),
+            children: /* @__PURE__ */ e(I, {
+              "aria-label": r(l.loadingLabel),
               size: "large"
             })
-          }), /* @__PURE__ */ e(U, {})]
+          }), /* @__PURE__ */ e(v, {})]
         })
-      }), !m && /* @__PURE__ */ e(o.Close, {
-        "aria-label": r(i.closeButton)
+      }), !h && /* @__PURE__ */ e(o.Close, {
+        "aria-label": r(l.closeButton)
       })]
     })]
   });
 }
 export {
-  A as UnifiedShareFormModal
+  Q as UnifiedShareFormModal
 };

package/dist/esm/lib/hooks/use-access-levels.js

@@ -1,44 +1,45 @@
-import { useMemo as a } from "react";
-import { useIntl as x } from "react-intl";
+import x from "lodash/camelCase";
+import { useMemo as l } from "react";
+import { useIntl as y } from "react-intl";
 import o from "../components/unified-share-form-modal/shared-link-section/messages.js";
-import { useUnifiedShareModalContext as y } from "../contexts/unified-share-modal-context.js";
-import { getAllowedAccessLevels as M } from "../utils/permission.js";
-const U = () => {
+import { useUnifiedShareModalContext as M } from "../contexts/unified-share-modal-context.js";
+import { getAllowedAccessLevels as $ } from "../utils/permission.js";
+const k = () => {
   const {
     formatMessage: e
-  } = x(), {
-    currentUser: p,
-    item: d,
-    sharedLink: f
   } = y(), {
+    currentUser: p,
+    item: f,
+    sharedLink: d
+  } = M(), {
     enterprise: u = {}
   } = p, {
     name: s
   } = u, {
     type: n
-  } = d, {
+  } = f, {
     access: i,
     accessLevels: m
-  } = f, r = a(() => M(m).map((t) => {
+  } = d, r = l(() => $(m).map((t) => {
     const {
       description: A,
-      id: l,
+      id: a,
       label: v
     } = t;
-    let c = l;
-    l === "company" && s && (c = "enterprise");
+    let c = a;
+    a === "company" && s && (c = "enterprise");
     const b = e(o[`${c}AccessLevelLabel`], {
       enterprise: s
     }), g = e(o[`${c}AccessLevelDescription`], {
       enterprise: s,
-      item: e(o[`${n}AccessLevelItem`])
+      item: e(o[`${x(n)}AccessLevelItem`])
     });
     return {
       ...t,
       description: A ?? g,
       label: v ?? b
     };
-  }), [m, s, e, n]), L = a(() => r.find(({
+  }), [m, s, e, n]), L = l(() => r.find(({
     id: t
   }) => i === t), [i, r]);
   return {
@@ -47,5 +48,5 @@ const U = () => {
   };
 };
 export {
-  U as useAccessLevels
+  k as useAccessLevels
 };

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

@@ -3,14 +3,14 @@ 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 I = (h, p) => {
   const {
-    errors: f,
+    errors: d,
     setFieldError: a,
-    validateUserContact: C,
+    validateUserContact: f,
     validateUserSelector: i
   } = E(), {
-    contactService: h
+    contactService: v
   } = O(), {
     collaborationRole: F,
     messageValue: b,
@@ -22,9 +22,9 @@ const I = (p, v) => {
   } = M(), {
     isLoading: y,
     onAction: V
-  } = A(p, v), {
+  } = A(h, p), {
     getContactByEmail: u
-  } = h, S = () => {
+  } = v, C = () => {
     r([]), l(""), U(""), a("user-contact", "");
   }, w = s((t) => {
     a("user-contact", ""), l(t);
@@ -36,19 +36,19 @@ const I = (p, v) => {
       if (e && e.id)
         return e;
     }
-    return C(t.value) ? null : {
+    return f(t.value) ? null : {
       email: t.value,
       id: 0,
       isExternalUser: !0,
       name: t.value,
       value: t.value
     };
-  }, [u, C]), m = s(async (t) => {
+  }, [u, f]), m = s(async (t) => {
     if (a("user-contact", ""), i(t), o.length >= t.length) {
       r(t);
       return;
     }
-    const [e, ...d] = [...t].reverse(), n = await g(e), c = n ? [...d, n] : d;
+    const [e, S] = [t.slice(0, -1), t[t.length - 1]], n = await g(S), c = n ? [...e, n] : e;
     r(c.filter(Boolean));
   }, [g, a, r, i, o]), B = s((t) => {
     var n, c;
@@ -58,16 +58,16 @@ const I = (p, v) => {
     }]);
   }, [m, o]);
   return {
-    errors: f,
-    handleFormReset: S,
+    errors: d,
+    handleFormReset: C,
     handleFormSubmit: async () => {
-      if (f["user-contact"] || i(o))
+      if (d["user-contact"] || i(o))
         return !0;
       const t = {
         contacts: o,
         message: b
       };
-      return x === "invite" && (t.role = F.id), await V(t), S(), !1;
+      return x === "invite" && (t.role = F.id), await V(t), C(), !1;
     },
     handleSelectedUsersChange: m,
     handleUserSelectorBlur: B,

package/dist/esm/lib/messages.js

@@ -26,7 +26,7 @@ const a = e({
   },
   updateSharedLinkSuccessNoticeText: {
     id: "groupSharedFeatures.usm.updateSharedLinkSuccessNoticeText",
-    defaultMessage: "Your settings were saved successfully."
+    defaultMessage: "The shared link settings were saved successfully."
   },
   createSharedLinkSuccessNoticeText: {
     id: "groupSharedFeatures.usm.createSharedLinkSuccessNoticeText",
@@ -36,13 +36,17 @@ const a = e({
     id: "groupSharedFeatures.usm.createSharedLinkErrorNoticeText",
     defaultMessage: "Unable to create a shared link. Please try again later."
   },
+  emailSharedLinkSuccessNoticeText: {
+    id: "groupSharedFeatures.usm.emailSharedLinkSuccessNoticeText",
+    defaultMessage: "The shared link for “{itemName}” was sent successfully."
+  },
   autoCopySharedLinkErrorNoticeText: {
     id: "groupSharedFeatures.usm.autoCopySharedLinkErrorNoticeText",
     defaultMessage: "Unable to create a shared link. Please try again later."
   },
   vanityNameInvalidErrorMessage: {
     id: "groupSharedFeatures.usm.vanityNameInvalidErrorMessage",
-    defaultMessage: "Custom URLs should be between 12-30 characters, and can include letters, numbers, and hyphens."
+    defaultMessage: "Custom URLs must be between 12-30 characters, and can include letters, numbers, and hyphens"
   },
   vanityNameRequiredErrorMessage: {
     id: "groupSharedFeatures.usm.vanityNameRequiredErrorMessage",
@@ -50,11 +54,11 @@ const a = e({
   },
   expirationRequiredErrorMessage: {
     id: "groupSharedFeatures.usm.expirationRequiredErrorMessage",
-    defaultMessage: "Please select a date"
+    defaultMessage: "Please select an expiration date"
   },
   expirationFutureDateRequiredErrorMessage: {
     id: "groupSharedFeatures.usm.expirationFutureDateRequiredErrorMessage",
-    defaultMessage: "The expiration date must be in the future"
+    defaultMessage: "Expiration date must be in the future"
   },
   invalidEmailErrorMessage: {
     id: "groupSharedFeatures.usm.invalidEmailErrorMessage",
@@ -70,15 +74,15 @@ const a = e({
   },
   passwordContainMinCharactersErrorMessage: {
     id: "groupSharedFeatures.usm.passwordContainMinCharactersErrorMessage",
-    defaultMessage: "Password should contain at least 8 characters"
+    defaultMessage: "Password must contain at least 8 characters"
   },
   passwordContainInvalidCharacterErrorMessage: {
     id: "groupSharedFeatures.usm.passwordContainInvalidCharacterErrorMessage",
-    defaultMessage: 'Your password cannot contain a space, "<" or ">"'
+    defaultMessage: 'Password cannot contain a space, "<" or ">"'
   },
   passwordContainLetterNumberOrSymbolErrorMessage: {
     id: "groupSharedFeatures.usm.passwordContainLetterNumberOrSymbolErrorMessage",
-    defaultMessage: "Your password should contain at least one upper case letter, number, or special character."
+    defaultMessage: "Password must contain at least one upper case letter, number, or special character"
   }
 });
 export {