@box/unified-share-modal 3.2.10 → 3.2.12

package/dist/chunks/collaboration-section.js

@@ -1 +1 @@
-import{useUnifiedShareModalContext}from"../esm/lib/contexts/unified-share-modal-context.js";import{parseEmails}from"../esm/lib/utils/email.js";import{getNotificationArgs}from"../esm/lib/utils/notification.js";import{useUnifiedShareFormContext}from"../esm/lib/contexts/unified-share-form-context.js";import{useFormValidation}from"../esm/lib/hooks/use-form-validation.js";import{useCollaborationForm}from"../esm/lib/hooks/use-collaboration-form.js";import messages from"../esm/lib/components/unified-share-form-modal/collaboration-section/messages.js";import{t as CollaborationRole}from"./collaboration-role.js";import{t as SharedWithAvatars}from"./shared-with-avatars.js";import{t as ShieldRestrictionNotice}from"./shield-restriction-notice.js";import{t as TextAreaContainer}from"./text-area-container.js";import{useCallback,useEffect,useRef,useState}from"react";import{useIntl}from"react-intl";import{Focusable,Modal,Text,Tooltip,useLabelable,useNotification,useUniqueId}from"@box/blueprint-web";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{createPortal}from"react-dom";import{Globe}from"@box/blueprint-web-assets/icons/Medium";import{bpSize040}from"@box/blueprint-web-assets/tokens/tokens";import{UserSelectorContainer}from"@box/user-selector";import '../styles/collaboration-section.css';var collaboration_section_module_default={container:`_container_1w5nm_27`,label:`_label_1w5nm_33`,security:`_security_1w5nm_60`,disclosures:`_disclosures_1w5nm_64`,icon:`_icon_1w5nm_70`,access:`_access_1w5nm_76`};function CollaborationSection(){let{formatMessage}=useIntl(),[restrictionError,setRestrictionError]=useState(),{addNotification}=useNotification(),{validateShieldRestriction}=useFormValidation(),{contactValue,containerRef,form,setForm,setUserContacts,shieldRestriction,userContacts}=useUnifiedShareFormContext(),{collaborationAccess,collaborationNotices,config,contactService,invitationFormNotices,isFetching,isSubmitting,item,onOpenChange,sharingService,variant}=useUnifiedShareModalContext(),{permissions={},type:itemType}=item,{getContacts,getContactsAvatarUrls}=contactService,{sendInvitations,sendSharedLink}=sharingService,isDesktop=variant===`desktop`,isInvitationForm=form==="default"||form===`invite`,isFormExpanded=form===`invite`||form===`email`,hasInviteMessage=form===`invite`&&config.collaborationMessage,hasEmailMessage=form===`email`&&config.sharedLinkEmailMessage,hasExternalUser=userContacts.some(contact=>contact.isExternalUser),formAction,formNotification;form===`invite`&&(formAction=sendInvitations,formNotification=`invite-collaborators`),form===`email`&&(formAction=sendSharedLink,formNotification=`email-shared-link`);let{errors,handleFormReset,handleFormSubmit,handleSelectedUsersChange,handleUserSelectorBlur,updateContactValue}=useCollaborationForm(formAction,formNotification),contactsForm=useRef(form===`email`?`email`:`invite`);useEffect(()=>{contactsForm.current=form===`email`?`email`:`invite`},[form]),useEffect(()=>{(!userContacts.length||!userContacts.some(contact=>contact.chipVariant===`error`))&&setRestrictionError(null)},[userContacts]);let stopEscapeKeyPropagation=useCallback(event=>(event.stopPropagation(),!0),[]),handleFetchUsers=useCallback(query=>getContacts?getContacts(query,contactsForm.current):Promise.resolve([]),[getContacts]),handleFetchAvatarUrls=useCallback(contacts=>getContactsAvatarUrls?getContactsAvatarUrls(contacts):Promise.resolve({}),[getContactsAvatarUrls]),handleContactValueChange=input=>{isFormExpanded||setForm(`invite`),updateContactValue(input)},handlePaste=useCallback(event=>{let value=event.clipboardData.getData(`text`);parseEmails(value).length!==0&&(event.preventDefault(),isFormExpanded||setForm(`invite`),handleSelectedUsersChange([...userContacts,{value}]))},[handleSelectedUsersChange,isFormExpanded,setForm,userContacts]),handleCancel=()=>{handleFormReset(),setForm(`default`)},handleSubmit=async()=>{try{if(restrictionError){let errorMessage=validateShieldRestriction(userContacts,shieldRestriction);if(errorMessage){addNotification({...getNotificationArgs(formatMessage,`error`),styledText:errorMessage});return}}if(await handleFormSubmit())return;handleFormReset(),onOpenChange(!1),setForm(`default`)}catch(error){if(!error.shieldRestriction)return;let{shieldRestriction:shieldRestrictionError}=error,restrictedContacts=[...shieldRestrictionError.restrictedEmails??[],...shieldRestrictionError.restrictedGroups??[]],updatedUserContacts=userContacts.map(contact=>restrictedContacts.includes(contact.email)||restrictedContacts.includes(`${contact.id}`)?{...contact,chipVariant:`error`}:contact);setRestrictionError(shieldRestrictionError),setUserContacts(updatedUserContacts)}},userContactsTooltip,isUserContactsDisabled=!1;isInvitationForm&&!permissions.canInviteCollaborator&&(userContactsTooltip=formatMessage(messages.inviteDisabledTooltip),isUserContactsDisabled=!0),isInvitationForm&&itemType===`web_link`&&(userContactsTooltip=formatMessage(messages.inviteWebLinkDisabledTooltip),isUserContactsDisabled=!0);let userContactsId=useUniqueId(`usm-UserContacts-`),UserContactsLabel=useLabelable(formatMessage(isInvitationForm?messages.invitePeopleLabel:messages.emailSharedLinkLabel),userContactsId);return jsxs(`form`,{className:collaboration_section_module_default.container,onSubmit:event=>event.preventDefault(),children:[restrictionError&&jsx(ShieldRestrictionNotice,{error:restrictionError,isLoading:isSubmitting,onSelectedUsersChange:handleSelectedUsersChange}),collaborationNotices,jsxs(`div`,{children:[isInvitationForm&&config.collaborators&&jsx(SharedWithAvatars,{}),jsx(UserContactsLabel,{className:collaboration_section_module_default.label}),jsx(Tooltip,{content:userContactsTooltip,"data-testid":`usm-UserContacts-tooltip`,open:userContactsTooltip?void 0:!1,side:`bottom`,children:jsx(Focusable,{focusable:isUserContactsDisabled,children:jsx(UserSelectorContainer,{autoFocus:permissions.canInviteCollaborator,className:`usm-UserContacts-input`,clearButtonAriaLabel:formatMessage(messages.clearButton),clearOnBlur:!1,"data-target-id":`PillSelectorDropdown-AddNamesOrEmailAddresses`,disabled:isUserContactsDisabled||isSubmitting,displayChipVariant:contact=>contact.chipVariant,error:errors.userContacts,fetchAvatarUrls:handleFetchAvatarUrls,fetchUsers:handleFetchUsers,hideOnEscape:stopEscapeKeyPropagation,idForLabel:userContactsId,inputValue:contactValue,label:null,onBlur:handleUserSelectorBlur,onInputValueChange:handleContactValueChange,onPaste:handlePaste,onSelectedUsersChange:handleSelectedUsersChange,placeholder:userContacts.length?``:formatMessage(messages.invitePeoplePlaceholder),portalElement:containerRef,selectedUsers:userContacts,selectOnEnterOrTab:!0,variant:isFormExpanded?`textarea`:`input`})})}),isInvitationForm&&jsxs(`div`,{className:collaboration_section_module_default.access,children:[config.collaborationRole&&jsx(CollaborationRole,{}),collaborationAccess]})]}),(hasInviteMessage||hasEmailMessage)&&jsx(TextAreaContainer,{maxCount:config.collaborationMessageLimit}),isFormExpanded&&(hasExternalUser||invitationFormNotices)&&jsxs(`div`,{className:collaboration_section_module_default.disclosures,children:[hasExternalUser&&jsxs(`div`,{className:collaboration_section_module_default.security,children:[jsx(Globe,{className:collaboration_section_module_default.icon,height:bpSize040,width:bpSize040}),jsx(Text,{as:`span`,color:`textOnLightSecondary`,children:formatMessage(messages.contentSharedWithExternalCollaborators)})]}),invitationFormNotices]}),isFormExpanded&&containerRef&&createPortal(jsxs(Fragment,{children:[!isFetching&&jsxs(Modal.Footer,{children:[jsx(Modal.Footer.SecondaryButton,{disabled:isSubmitting,onClick:handleCancel,children:formatMessage(messages.cancelButton)}),jsx(Modal.Footer.PrimaryButton,{"data-target-id":`Modal.Footer.PrimaryButton-USMSendInvite`,loading:isSubmitting,loadingAriaLabel:formatMessage(messages.loadingLabel),onClick:handleSubmit,children:formatMessage(messages.sendButton)})]}),!isDesktop&&jsx(Modal.Close,{"aria-label":formatMessage(messages.closeButton),disabled:isSubmitting})]}),containerRef)]})}export{CollaborationSection as t};
+import{useUnifiedShareModalContext}from"../esm/lib/contexts/unified-share-modal-context.js";import{parseEmails}from"../esm/lib/utils/email.js";import{getNotificationArgs}from"../esm/lib/utils/notification.js";import{useUnifiedShareFormContext}from"../esm/lib/contexts/unified-share-form-context.js";import{useFormValidation}from"../esm/lib/hooks/use-form-validation.js";import{useCollaborationForm}from"../esm/lib/hooks/use-collaboration-form.js";import messages from"../esm/lib/components/unified-share-form-modal/collaboration-section/messages.js";import{t as CollaborationRole}from"./collaboration-role.js";import{t as SharedWithAvatars}from"./shared-with-avatars.js";import{t as ShieldRestrictionNotice}from"./shield-restriction-notice.js";import{t as TextAreaContainer}from"./text-area-container.js";import{useCallback,useEffect,useRef,useState}from"react";import{useIntl}from"react-intl";import{Focusable,Modal,Text,Tooltip,useLabelable,useNotification,useUniqueId}from"@box/blueprint-web";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{createPortal}from"react-dom";import{Globe}from"@box/blueprint-web-assets/icons/Medium";import{bpSize040}from"@box/blueprint-web-assets/tokens/tokens";import{UserSelectorContainer}from"@box/user-selector";import '../styles/collaboration-section.css';var collaboration_section_module_default={container:`_container_1incb_27`,label:`_label_1incb_33`,security:`_security_1incb_60`,disclosures:`_disclosures_1incb_64`,icon:`_icon_1incb_70`,access:`_access_1incb_76`};function CollaborationSection(){let{formatMessage}=useIntl(),[restrictionError,setRestrictionError]=useState(),{addNotification}=useNotification(),{validateShieldRestriction}=useFormValidation(),{contactValue,containerRef,form,setForm,setUserContacts,shieldRestriction,userContacts}=useUnifiedShareFormContext(),{collaborationAccess,collaborationNotices,config,contactService,invitationFormNotices,isFetching,isSubmitting,item,onOpenChange,sharingService,variant}=useUnifiedShareModalContext(),{permissions={},type:itemType}=item,{getContacts,getContactsAvatarUrls}=contactService,{sendInvitations,sendSharedLink}=sharingService,isDesktop=variant===`desktop`,isInvitationForm=form==="default"||form===`invite`,isFormExpanded=form===`invite`||form===`email`,hasInviteMessage=form===`invite`&&config.collaborationMessage,hasEmailMessage=form===`email`&&config.sharedLinkEmailMessage,hasExternalUser=userContacts.some(contact=>contact.isExternalUser),formAction,formNotification;form===`invite`&&(formAction=sendInvitations,formNotification=`invite-collaborators`),form===`email`&&(formAction=sendSharedLink,formNotification=`email-shared-link`);let{errors,handleFormReset,handleFormSubmit,handleSelectedUsersChange,handleUserSelectorBlur,updateContactValue}=useCollaborationForm(formAction,formNotification),contactsForm=useRef(form===`email`?`email`:`invite`);useEffect(()=>{contactsForm.current=form===`email`?`email`:`invite`},[form]),useEffect(()=>{(!userContacts.length||!userContacts.some(contact=>contact.chipVariant===`error`))&&setRestrictionError(null)},[userContacts]);let stopEscapeKeyPropagation=useCallback(event=>(event.stopPropagation(),!0),[]),handleFetchUsers=useCallback(query=>getContacts?getContacts(query,contactsForm.current):Promise.resolve([]),[getContacts]),handleFetchAvatarUrls=useCallback(contacts=>getContactsAvatarUrls?getContactsAvatarUrls(contacts):Promise.resolve({}),[getContactsAvatarUrls]),handleContactValueChange=input=>{isFormExpanded||setForm(`invite`),updateContactValue(input)},handlePaste=useCallback(event=>{let value=event.clipboardData.getData(`text`);parseEmails(value).length!==0&&(event.preventDefault(),isFormExpanded||setForm(`invite`),handleSelectedUsersChange([...userContacts,{value}]))},[handleSelectedUsersChange,isFormExpanded,setForm,userContacts]),handleCancel=()=>{handleFormReset(),setForm(`default`)},handleSubmit=async()=>{try{if(restrictionError){let errorMessage=validateShieldRestriction(userContacts,shieldRestriction);if(errorMessage){addNotification({...getNotificationArgs(formatMessage,`error`),styledText:errorMessage});return}}if(await handleFormSubmit())return;handleFormReset(),onOpenChange(!1),setForm(`default`)}catch(error){if(!error.shieldRestriction)return;let{shieldRestriction:shieldRestrictionError}=error,restrictedContacts=[...shieldRestrictionError.restrictedEmails??[],...shieldRestrictionError.restrictedGroups??[]],updatedUserContacts=userContacts.map(contact=>restrictedContacts.includes(contact.email)||restrictedContacts.includes(`${contact.id}`)?{...contact,chipVariant:`error`}:contact);setRestrictionError(shieldRestrictionError),setUserContacts(updatedUserContacts)}},userContactsTooltip,isUserContactsDisabled=!1;isInvitationForm&&!permissions.canInviteCollaborator&&(userContactsTooltip=formatMessage(messages.inviteDisabledTooltip),isUserContactsDisabled=!0),isInvitationForm&&itemType===`web_link`&&(userContactsTooltip=formatMessage(messages.inviteWebLinkDisabledTooltip),isUserContactsDisabled=!0);let userContactsId=useUniqueId(`usm-UserContacts-`),UserContactsLabel=useLabelable(formatMessage(isInvitationForm?messages.invitePeopleLabel:messages.emailSharedLinkLabel),userContactsId);return jsxs(`form`,{className:collaboration_section_module_default.container,onSubmit:event=>event.preventDefault(),children:[restrictionError&&jsx(ShieldRestrictionNotice,{error:restrictionError,isLoading:isSubmitting,onSelectedUsersChange:handleSelectedUsersChange}),collaborationNotices,jsxs(`div`,{children:[isInvitationForm&&config.collaborators&&jsx(SharedWithAvatars,{}),jsx(UserContactsLabel,{className:collaboration_section_module_default.label}),jsx(Tooltip,{content:userContactsTooltip,"data-testid":`usm-UserContacts-tooltip`,open:userContactsTooltip?void 0:!1,side:`bottom`,children:jsx(Focusable,{focusable:isUserContactsDisabled,children:jsx(UserSelectorContainer,{autoFocus:permissions.canInviteCollaborator,className:`usm-UserContacts-input`,clearButtonAriaLabel:formatMessage(messages.clearButton),clearOnBlur:!1,"data-target-id":`PillSelectorDropdown-AddNamesOrEmailAddresses`,disabled:isUserContactsDisabled||isSubmitting,displayChipVariant:contact=>contact.chipVariant,error:errors.userContacts,fetchAvatarUrls:handleFetchAvatarUrls,fetchUsers:handleFetchUsers,hideOnEscape:stopEscapeKeyPropagation,idForLabel:userContactsId,inputValue:contactValue,label:null,onBlur:handleUserSelectorBlur,onInputValueChange:handleContactValueChange,onPaste:handlePaste,onSelectedUsersChange:handleSelectedUsersChange,placeholder:userContacts.length?``:formatMessage(messages.invitePeoplePlaceholder),portalElement:containerRef,selectedUsers:userContacts,selectOnEnterOrTab:!0,variant:isFormExpanded?`textarea`:`input`})})}),isInvitationForm&&jsxs(`div`,{className:collaboration_section_module_default.access,children:[config.collaborationRole&&jsx(CollaborationRole,{}),collaborationAccess]})]}),(hasInviteMessage||hasEmailMessage)&&jsx(TextAreaContainer,{maxCount:config.collaborationMessageLimit}),isFormExpanded&&(hasExternalUser||invitationFormNotices)&&jsxs(`div`,{className:collaboration_section_module_default.disclosures,children:[hasExternalUser&&jsxs(`div`,{className:collaboration_section_module_default.security,children:[jsx(Globe,{className:collaboration_section_module_default.icon,height:bpSize040,width:bpSize040}),jsx(Text,{as:`span`,color:`textOnLightSecondary`,children:formatMessage(messages.contentSharedWithExternalCollaborators)})]}),invitationFormNotices]}),isFormExpanded&&containerRef&&createPortal(jsxs(Fragment,{children:[!isFetching&&jsxs(Modal.Footer,{children:[jsx(Modal.Footer.SecondaryButton,{disabled:isSubmitting,onClick:handleCancel,children:formatMessage(messages.cancelButton)}),jsx(Modal.Footer.PrimaryButton,{"data-target-id":`Modal.Footer.PrimaryButton-USMSendInvite`,loading:isSubmitting,loadingAriaLabel:formatMessage(messages.loadingLabel),onClick:handleSubmit,children:formatMessage(messages.sendButton)})]}),!isDesktop&&jsx(Modal.Close,{"aria-label":formatMessage(messages.closeButton),disabled:isSubmitting})]}),containerRef)]})}export{CollaborationSection as t};

package/dist/styles/collaboration-section.css

@@ -1 +1 @@
-._container_1w5nm_27{gap:var(--bp-space-040);flex-direction:column;display:flex}._label_1w5nm_33{font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._label_1w5nm_33{letter-spacing:0;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.25rem;text-decoration:none}._label_1w5nm_33{padding:var(--bp-space-010) 0;color:var(--text-text-on-light);overflow-wrap:break-word;margin-block-end:var(--space-2);display:block}._security_1w5nm_60{margin-top:calc(var(--bp-space-010) * -1)}._disclosures_1w5nm_64{gap:var(--bp-space-010);flex-direction:column;display:flex}._icon_1w5nm_70{height:var(--bp-size-050);margin-right:var(--bp-space-010);vertical-align:text-bottom}._access_1w5nm_76{gap:var(--bp-space-010);margin-top:var(--bp-space-030);flex-wrap:wrap;display:flex}
+._container_1incb_27{gap:var(--bp-space-040);flex-direction:column;display:flex}._label_1incb_33{font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._label_1incb_33{letter-spacing:.00625rem;text-transform:none;font-family:InterVariable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.375rem;text-decoration:none}._label_1incb_33{padding:var(--bp-space-010) 0;color:var(--text-text-on-light);overflow-wrap:break-word;margin-block-end:var(--space-2);display:block}._security_1incb_60{margin-top:calc(var(--bp-space-010) * -1)}._disclosures_1incb_64{gap:var(--bp-space-010);flex-direction:column;display:flex}._icon_1incb_70{height:var(--bp-size-050);margin-right:var(--bp-space-010);vertical-align:text-bottom}._access_1incb_76{gap:var(--bp-space-010);margin-top:var(--bp-space-030);flex-wrap:wrap;display:flex}

package/package.json

@@ -1,23 +1,23 @@
 {
     "name": "@box/unified-share-modal",
-    "version": "3.2.10",
+    "version": "3.2.12",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^16.18.1",
-        "@box/blueprint-web-assets": "^5.7.0",
-        "@box/copy-input": "^2.2.9",
-        "@box/user-selector": "^2.2.9",
+        "@box/blueprint-web": "^16.18.3",
+        "@box/blueprint-web-assets": "^5.7.2",
+        "@box/copy-input": "^2.2.11",
+        "@box/user-selector": "^2.2.11",
         "lodash": "^4.17.15",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.18.1",
-        "@box/blueprint-web-assets": "^5.7.0",
-        "@box/copy-input": "^2.2.9",
-        "@box/eslint-plugin-blueprint": "2.2.1",
-        "@box/storybook-utils": "1.2.9",
+        "@box/blueprint-web": "^16.18.3",
+        "@box/blueprint-web-assets": "^5.7.2",
+        "@box/copy-input": "^2.2.11",
+        "@box/eslint-plugin-blueprint": "2.2.2",
+        "@box/storybook-utils": "1.2.11",
         "react-intl": "^6.4.2"
     },
     "publishConfig": {